Widget directory strcuture :
.
|-- dijit
| |-- _base
| ...
|-- dojo
| |-- _base
| ...
|-- dojox
| |-- analytics
| ...
`-- widgets
`-- admin
|-- FileSystemStatus.js
`-- fileSystemStatus.tmpl
1. Source code for FileSystemStatus.js
require(
[
"dojo/_base/declare", "dojo/parser", "dojo/ready",
"dijit/_WidgetBase", "dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin", "dojo/html",
"dojo/dom-class", "dojo/query", "dojo/NodeList-dom",
"dijit/ProgressBar",
],
function(declare, parser, ready, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, html, domClass,query){
declare("widgets.admin.FileSystemStatus", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin ], {
templatePath: "js/dojo/widgets/admin/fileSystemStatus.tmpl",
widgetsInTemplate : true,
filesystem : "tmpfs",
mountedon : "/dev/shm",
fssize : 255204,
used: 0,
isloaded: false,
postCreate : function (args, farg)
{
this._set();
},
_set : function()
{
if(this.isloaded)
return true;
//html.set(this.textNode_fs, this.filesystem);
html.set(this.textNode_mo, this.mountedon);
html.set(this.textNode_size, "" + this.bytesToSize(this.fssize));
var free = (this.fssize - this.used);
var percentage = ((this.used/this.fssize) * 100);
percentage = dojo.number.format(percentage, {places:2})
html.set(this.textNode_free, "" + this.bytesToSize(free));
this.graphicalNode.set("value", percentage);
if (percentage >= 60.00) {
query(".dijitProgressBarTile", this.graphicalNode.domNode).addClass("red");
query(".dijitProgressBarTile", this.graphicalNode.domNode).removeClass("dijitProgressBarTile");
} else if (percentage > 20.00){
query(".dijitProgressBarTile", this.graphicalNode.domNode).addClass("orange");
query(".dijitProgressBarTile", this.graphicalNode.domNode).removeClass("dijitProgressBarTile");
} else {
query(".dijitProgressBarTile", this.graphicalNode.domNode).addClass("green");
query(".dijitProgressBarTile", this.graphicalNode.domNode).removeClass("dijitProgressBarTile");
}
this.isloaded = true;
},
bytesToSize: function (kbytes) { var bytes = kbytes * 1024; var sizes = [ 'n/a', 'bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; var i = +Math.floor(Math.log(bytes) / Math.log(1024)); return (bytes / Math.pow(1024, i)).toFixed( i ? 1 : 0 ) + ' ' + sizes[ isNaN( bytes ) ? 0 : i+1 ]; }
});
ready(function(){
// Call the parser manually so it runs after our widget is defined, and page has finished loading
parser.parse();
});
}
);
2. Code for fileSystemStatus.tmpl
<div id="${id}">
<span style='font-size:14px;'>
<span data-dojo-attach-point='textNode_mo'></span>
</span> <br/>
<span data-dojo-attach-point='graphicalNode' data-dojo-type="dijit.ProgressBar"></span>
<span data-dojo-attach-point='textNode_free'></span> free of <span data-dojo-attach-point='textNode_size'></span>
</div>
3. Using widget in HTML, html page code :
<html>
<head>
<title> File system status: </title>
<link rel="stylesheet" type="text/css" href="/test1/js/dojo/dojo/resources/dojo.css"/>
<link rel='stylesheet' type="text/css" hfre='text1/js/dojo/dijit/themes/tundra/ProgressBar.css'/>
<link rel="stylesheet" href="/test1/js/dojo/dijit/themes/tundra/tundra.css"></link>
<script src="/test1/js/dojo/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: false" ></script>
<STYLE type='text/css'>
.red {
/*
background: url("/test1/reddark.jpg") repeat-x scroll center center #F0F0F0;
*/
background : #880000 ;
background-color: #880000;
color : white;
width : 100%;
bottom : 0;
height : auto;
rigt : 0;
top : 0;
left : 0;
margin : 0;
overflow: hidden;
padding : 0;
position: absolute;
}
.orange {
background: #f1a165;
background-color: #f1a165;
color : #f1a165;
width : 100%;
bottom : 0;
height : auto;
rigt : 0;
top : 0;
left : 0;
margin : 0;
overflow: hidden;
padding : 0;
position: absolute;
}
.green {
background: 00CC33;
background-color: 00CC33;
color : #f1a165;
width : 100%;
bottom : 0;
height : auto;
rigt : 0;
top : 0;
left : 0;
margin : 0;
overflow: hidden;
padding : 0;
position: absolute;
}
</STYLE>
<script type='text/javascript'>
require(["dijit/registry", "dojo/parser", "widgets/admin/FileSystemStatus",
"dojo/domReady!"], function(registry, parser) {
// Explicitly parse the page
//parser.parse();
});
</script>
</head>
<body class='tundra'>
<br>
<h1> File system disk space usage </h1>
<hr>
<br>
<div data-dojo-type="widgets.admin.FileSystemStatus" filesystem='/dev/sda7' mountedon='/home' fssize=49213248 used=2396496 style="width:400px"></div>
<br>
<br>
<div data-dojo-type="widgets.admin.FileSystemStatus" filesystem='/dev/sda6' mountedon='/var' fssize=49213248 used=6259304 style="width:400px"></div>
<br>
<br>
<div data-dojo-type="widgets.admin.FileSystemStatus" filesystem='/dev/sda5' mountedon='/media/Win7_Data' fssize=104857596 used=72896228 style="width:400px"></div>
<br>
<br>
<div data-dojo-type="widgets.admin.FileSystemStatus" filesystem='/dev/sda3' mountedon='/media/Win7' fssize=104857596 used=26179940 style="width:400px"></div>
</body>
</html>
4. Sample output :
No comments:
Post a Comment