ivampiresp/Spdk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

doc/blob: replace htmlonly graphic with ASCII art

Browse Source 
The htmlonly element that uses javascript to draw a diagram hinders
readability of the document in typical terminal-based editors, on
github/gitlab, etc. Not even the official documentation at
https://spdk.io/doc/blob.html renders it, at least in part because
Two.js is not present.

ASCII art can easily convey the same information in a much more
accessible way.

Signed-off-by: Mike Gerdts <mgerdts@nvidia.com>
Change-Id: I5779d4639b1bee8a976d915d6853f11b05a35b71
Reviewed-on: https://review.spdk.io/gerrit/c/spdk/spdk/+/11269
Community-CI: Broadcom CI <spdk-ci.pdl@broadcom.com>
Tested-by: SPDK CI Jenkins <sys_sgci@intel.com>
Reviewed-by: Paul Luse <paul.e.luse@intel.com>
Reviewed-by: Jim Harris <james.r.harris@intel.com>
Reviewed-by: Ben Walker <benjamin.walker@intel.com>
Reviewed-by: Aleksey Marchuk <alexeymar@mellanox.com>
This commit is contained in:
Mike Gerdts 2021-12-21 15:42:37 +00:00 committed by Tomasz Zawadzki
parent b66f8df748
commit 878bec9d73
1 changed files with 11 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
doc/blob.md
View File

@ -57,56 +57,17 @@ The Blobstore defines a hierarchy of storage abstractions as follows.
Blobstore owns the entire underlying device which is made up of a private Blobstore metadata region and the collection of Blobstore owns the entire underlying device which is made up of a private Blobstore metadata region and the collection of
blobs as managed by the application. blobs as managed by the application.
@htmlonly ```text
+-----------------------------------------------------------------+
<div id="blob_hierarchy"></div> | Blob |
| +-----------------------------+ +-----------------------------+ |
<script> | | Cluster | | Cluster | |
let elem = document.getElementById('blob_hierarchy'); | | +----+ +----+ +----+ +----+ | | +----+ +----+ +----+ +----+ | |
| | |Page| |Page| |Page| |Page| | | |Page| |Page| |Page| |Page| | |
let canvasWidth = 800; | | +----+ +----+ +----+ +----+ | | +----+ +----+ +----+ +----+ | |
let canvasHeight = 200; | +-----------------------------+ +-----------------------------+ |
var two = new Two({ width: 800, height: 200 }).appendTo(elem); +-----------------------------------------------------------------+
```
var blobRect = two.makeRectangle(canvasWidth / 2, canvasHeight / 2, canvasWidth, canvasWidth);
blobRect.fill = '#7ED3F7';
var blobText = two.makeText('Blob', canvasWidth / 2, 10, { alignment: 'center'});
for (var i = 0; i < 2; i++) {
let clusterWidth = 400;
let clusterHeight = canvasHeight;
var clusterRect = two.makeRectangle((clusterWidth / 2) + (i * clusterWidth),
clusterHeight / 2,
clusterWidth - 10,
clusterHeight - 50);
clusterRect.fill = '#00AEEF';
var clusterText = two.makeText('Cluster',
(clusterWidth / 2) + (i * clusterWidth),
35,
{ alignment: 'center', fill: 'white' });
for (var j = 0; j < 4; j++) {
let pageWidth = 100;
let pageHeight = canvasHeight;
var pageRect = two.makeRectangle((pageWidth / 2) + (j * pageWidth) + (i * clusterWidth),
pageHeight / 2,
pageWidth - 20,
pageHeight - 100);
pageRect.fill = '#003C71';
var pageText = two.makeText('Page',
(pageWidth / 2) + (j * pageWidth) + (i * clusterWidth),
pageHeight / 2,
{ alignment: 'center', fill: 'white' });
}
}
two.update();
</script>
@endhtmlonly
### Atomicity ### Atomicity