Storage visualization

Developer
Tom
Size
4,014 Kb
Views
14,168
  1. Storage visualization Previews
  2. Storage visualization HTML Codes
  3. Storage visualization CSS Codes
  4. Storage visualization JS Codes

How do I make an storage visualization?

What is a storage visualization? How do you make a storage visualization? This script and codes were developed by Tom on 16 September 2022, Friday.

Storage visualization Previews
IQ Test

Storage visualization - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Storage visualization</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Storage visualization - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700|Cambay:400,700,400italic|Expletus+Sans:400,400italic,700|Julius+Sans+One);
body { padding: 0; margin: 0; background: #000312;
}
a { text-decoration: none;
}
a:hover, a:active { text-decoration: underline;
}
.obj-server { display: inline-block; float: none; margin: 0; padding: 0;
}
.obj-mount { display: inline-block; clear: none; float: none; margin: 13px 3px; padding: 12px 3px 0px; border: 1px solid #007eff; box-shadow: 0px 0px 1px 0px #007eff, inset 0px 0px 1px 0px rgba(0, 126, 255, 0.75); cursor: default; background: #000621;
}
.obj-mount > .obj-type-icon { float: left; position: relative; left: 0.3em; top: 0px; display: inline-block; width: 1.5em; margin-right: 1.3em; line-height: 1; font-style: normal;
}
.obj-mount > .obj-type-icon::before { content: 'M'; font-family: 'Josefin Sans'; font-size: 40px; color: #007eff;
}
.obj-mount > .path, .obj-mount > .guid { display: block; clear: right; color: #fff; cursor: pointer;
}
.obj-mount > .path { font-family: 'Josefin Sans'; font-size: 1.2em;
}
.obj-mount > .guid { font-family: 'Courier New'; font-size: 12px;
}
.obj-mount > .archiveList { list-style: none; margin: 0.5em 0 4px; padding: 0;
}
.obj-mount > .archiveList li { display: inline-block;
}
.obj-archive { display: inline-block; float: none; width: 6em; margin: 1px; padding: 0 0.5em 0 0.2em; border: 1px solid #007eff; border-radius: 2px; line-height: 1.5em; box-shadow: 0px 0px 2px 0px #007eff, inset 0px 0px 3px 0px #007eff; cursor: pointer; background: #00072c; font-family: 'Courier New'; font-size: 14px;
}
.obj-archive > .obj-type-icon { display: inline-block; margin: 0 0.25em;
}
.obj-archive > .obj-type-icon::before { position: relative; top: 3px; display: block; content: 'A'; font-family: 'Josefin Sans'; font-size: 18px; font-style: normal; color: #007eff;
}
.obj-archive > .guid { font-size: 12px; text-decoration: none; color: #fff;
}
.obj-archive:hover > .guid, .obj-archive:active > .guid { text-decoration: underline;
}

Storage visualization - Script Codes JS Codes

// CREATE DATA
function Guid() {	var guid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {	var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);	return v.toString(16);	});	return guid.split('-')[0];	this.prototype = {	toString: function() { return guid; },	toShort: function() { return guid.split('-')[0]; }	};	return this;
}
var destination = {	guid: Guid(),	name: 'EDGE Primary Authority Cluster',	servers: [	{	guid: Guid(),	name: 'EDGE Primary Authority Server',	online: true,	mounts: [	{	guid: Guid(), path: '/dev/wd-sat0-4099m', archives: [] },	{	guid: Guid(), path: '/dev/wd-sat1-4099m', archives: [] },	{	guid: Guid(), path: '/dev/wd-sat2-4099m', archives: [] },	{	guid: Guid(), path: '/dev/wd-sat3-4099m', archives: [] }	]	}	]
};
// add 16 archives to each mount
for(var m = 0; m < 4; m++) {	var mount = destination.servers[0].mounts[m];	for(var a = 0; a < 16; a++) {	mount.archives.push({	guid: Guid(),	isBeingBalanced: false,	isBeingMaintained: false	});	}
}
// RENDER DATA
function archiveMarkup(a) {	// TODO: add support for .is-being-maintained	// TODO: add support for .is-being-balanced	// TODO: add support for .is-balancing-onto	// TODO: add support for .is-balancing-off	var markup =	'<div class="obj-archive">' +	'<i class="obj-type-icon"></i>' +	'<a class="guid" href="#">' + a.guid + '</a>' +	'</div>';	return markup;
}
function mountMarkup(m) {	// get markup for all archives	var html_archives = '';	for(var i = 0; i < m.archives.length; i++) {	var a = m.archives[i];	html_archives += '<li>' + archiveMarkup(a) + '</li>';	}	var markup =	'<div class="obj-mount">' +	'<i class="obj-type-icon"></i>' +	'<a class="path" href="#">' + m.path + '</a>' +	'<a class="guid" href="#">' + m.guid + '</a>' +	'	' +	'<ol class="archiveList">' +	html_archives +	'</ol>' +	'</div>';	return markup;
}
function serverMarkup(s) {	// get markup for all mounts	var html_mounts = '';	for(var i = 0; i < s.mounts.length; i++) {	var m = s.mounts[i];	html_mounts += '<li>' + mountMarkup(m) + '</li>';	}	// TODO: get markup for archives being balanced	var html_balancing_archives = '';	// TODO: get markup for archives being maintained	var html_maintainance_archives = '';	var markup =	'<div class="obj-server">' +	'<i class="obj-type-icon">Server</i>' +	'<a class="name">' + s.name + '</a>' +	'<a class="guid">' + s.guid + '</a>' +	'	' +	'<div class="contents">' +	'<ol class="mounts">' +	html_mounts +	'</ol>' +	'</div>' +	'	' +	'<div class="balancer">' +	'<span class="list-header">Balancing activity</span>' +	'<ol class="archiveList">' +	html_balancing_archives +	'</ol>' +	'</div>' +	'	' +	'<div class="maintenance">' +	'<span class="list-header">Archive maintenance</span>' +	'<ol class="archiveList">' +	html_maintainance_archives +	'</ol>' +	'</div>' +	'</div>';	return markup;
}
$('body').html(serverMarkup(destination.servers[0]));
Storage visualization - Script Codes
Storage visualization - Script Codes
Home Page Home
Developer Tom
Username tomprogers
Uploaded September 16, 2022
Rating 3
Size 4,014 Kb
Views 14,168
Do you need developer help for Storage visualization?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tom (tomprogers) Script Codes
Name
Table styling
Crawford - layout
Flipcard mixin
Layout for crafting assistant
Gravatar monogram playground
Dark theme search box
Sidebar layout for doc viewer
JQueryUI Capacity Meter widget
Encoding
API documentation
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!