Skip to content
Toggle navigation
P
Projects
G
Groups
S
Snippets
Help
Gelencsér Szabolcs
/
cloud
This project
Loading...
Sign in
Toggle navigation
Go to a project
Project
Repository
Issues
0
Merge Requests
0
Pipelines
Wiki
Members
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Commit
3a951ded
authored
Mar 11, 2013
by
Bence Dányi
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
webui: whitespace fix
parent
638ec148
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
50 additions
and
67 deletions
+50
-67
one/templates/stat.html
+50
-67
No files found.
one/templates/stat.html
View file @
3a951ded
{% load l10n %}
<html>
<head>
<!--Load the AJAX API-->
<script
type=
"text/javascript"
src=
"https://www.google.com/jsapi"
></script>
<script
type=
"text/javascript"
>
// Load the Visualization API and the piechart package.
google
.
load
(
'visualization'
,
'1.0'
,
{
'packages'
:[
'corechart'
]});
// Set a callback to run when the Google Visualization API is loaded.
google
.
setOnLoadCallback
(
drawChart
);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function
drawChart
()
{
// Create the data table.
var
data_cpu
=
new
google
.
visualization
.
DataTable
();
data_cpu
.
addColumn
(
'string'
,
'Topping'
);
data_cpu
.
addColumn
(
'number'
,
'Slices'
);
data_cpu
.
addRows
([
[
'Free CPU'
,
{{
STAT
.
CPU
.
FREE_CPU
}}],
[
'Allocated CPU'
,
{{
STAT
.
CPU
.
ALLOC_CPU
}}],
[
'Used CPU'
,
{{
STAT
.
CPU
.
USED_CPU
}}],
]);
// Set chart options
var
cpu_options
=
{
'title'
:
'Cloud CPU usage percent (100/CPU)'
,
'width'
:
400
,
'height'
:
300
,
slices
:
{
0
:
{
color
:
'blue'
},
1
:{
color
:
'orange'
},
2
:{
color
:
'red'
}}
};
var
data_mem
=
new
google
.
visualization
.
DataTable
();
data_mem
.
addColumn
(
'string'
,
'Topping'
);
data_mem
.
addColumn
(
'number'
,
'Slices'
);
data_mem
.
addRows
([
[
'Free Memory'
,
{{
STAT
.
MEM
.
FREE_MEM
|
unlocalize
}}],
[
'Allocated Memory'
,
{{
STAT
.
MEM
.
ALLOC_MEM
|
unlocalize
}}],
[
'Used Memory'
,
{{
STAT
.
MEM
.
USED_MEM
|
unlocalize
}}],
]);
// Set chart options
var
mem_options
=
{
'title'
:
'Cloud Memory usage in {{STAT.DIMENSION}}'
,
'width'
:
400
,
'height'
:
300
,
slices
:
{
0
:
{
color
:
'blue'
},
1
:{
color
:
'orange'
},
2
:{
color
:
'red'
}}
};
// Instantiate and draw our chart, passing in some options.
var
chart
=
new
google
.
visualization
.
PieChart
(
document
.
getElementById
(
'chart_cpu_div'
));
chart
.
draw
(
data_cpu
,
cpu_options
);
var
chart
=
new
google
.
visualization
.
PieChart
(
document
.
getElementById
(
'chart_mem_div'
));
chart
.
draw
(
data_mem
,
mem_options
);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div>
Running VMs: {{STAT.VMS}}
</div>
<div
id=
"chart_cpu_div"
></div>
<div
id=
"chart_mem_div"
></div>
</body>
<head>
<script
type=
"text/javascript"
src=
"https://www.google.com/jsapi"
></script>
<script
type=
"text/javascript"
>
google
.
load
(
'visualization'
,
'1.0'
,
{
'packages'
:[
'corechart'
]});
google
.
setOnLoadCallback
(
drawChart
);
function
drawChart
()
{
var
data_cpu
=
new
google
.
visualization
.
DataTable
();
data_cpu
.
addColumn
(
'string'
,
'Topping'
);
data_cpu
.
addColumn
(
'number'
,
'Free'
);
data_cpu
.
addColumn
(
'number'
,
'Allocated'
);
data_cpu
.
addColumn
(
'number'
,
'Used'
);
data_cpu
.
addRows
([
[
'CPU %'
,
{{
STAT
.
CPU
.
FREE_CPU
}},{{
STAT
.
CPU
.
ALLOC_CPU
}},{{
STAT
.
CPU
.
USED_CPU
}}],
]);
var
cpu_options
=
{
'title'
:
'Cloud CPU usage percent (100/CPU)'
,
'width'
:
900
,
'height'
:
50
,
isStacked
:
true
};
var
data_mem
=
new
google
.
visualization
.
DataTable
();
data_mem
.
addColumn
(
'string'
,
'Topping'
);
data_mem
.
addColumn
(
'number'
,
'Slices'
);
data_mem
.
addRows
([
[
'Free Memory'
,
{{
STAT
.
MEM
.
FREE_MEM
|
unlocalize
}}],
[
'Allocated Memory'
,
{{
STAT
.
MEM
.
ALLOC_MEM
|
unlocalize
}}],
[
'Used Memory'
,
{{
STAT
.
MEM
.
USED_MEM
|
unlocalize
}}],
]);
var
mem_options
=
{
'title'
:
'Cloud Memory usage in {{STAT.DIMENSION}}'
,
'width'
:
400
,
'height'
:
300
,
slices
:
{
0
:
{
color
:
'blue'
},
1
:{
color
:
'orange'
},
2
:{
color
:
'red'
}
},
};
var
chart
=
new
google
.
visualization
.
BarChart
(
document
.
getElementById
(
'chart_cpu_div'
));
chart
.
draw
(
data_cpu
,
cpu_options
);
var
chart
=
new
google
.
visualization
.
PieChart
(
document
.
getElementById
(
'chart_mem_div'
));
chart
.
draw
(
data_mem
,
mem_options
);
}
</script>
</head>
<body>
<div>
Running VMs: {{STAT.VMS}}
</div>
<div
id=
"chart_cpu_div"
></div>
<div
id=
"chart_mem_div"
></div>
</body>
</html>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment