Skip to content
Toggle navigation
P
Projects
G
Groups
S
Snippets
Help
Fukász Rómeó Ervin
/
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 %}
{% load l10n %}
<html>
<html>
<head>
<head>
<!--Load the AJAX API-->
<script
type=
"text/javascript"
src=
"https://www.google.com/jsapi"
></script>
<script
type=
"text/javascript"
src=
"https://www.google.com/jsapi"
></script>
<script
type=
"text/javascript"
>
<script
type=
"text/javascript"
>
google
.
load
(
'visualization'
,
'1.0'
,
{
'packages'
:[
'corechart'
]});
google
.
setOnLoadCallback
(
drawChart
);
// Load the Visualization API and the piechart package.
function
drawChart
()
{
google
.
load
(
'visualization'
,
'1.0'
,
{
'packages'
:[
'corechart'
]});
var
data_cpu
=
new
google
.
visualization
.
DataTable
();
data_cpu
.
addColumn
(
'string'
,
'Topping'
);
// Set a callback to run when the Google Visualization API is loaded.
data_cpu
.
addColumn
(
'number'
,
'Free'
);
google
.
setOnLoadCallback
(
drawChart
);
data_cpu
.
addColumn
(
'number'
,
'Allocated'
);
data_cpu
.
addColumn
(
'number'
,
'Used'
);
// Callback that creates and populates a data table,
data_cpu
.
addRows
([
// instantiates the pie chart, passes in the data and
[
'CPU %'
,
{{
STAT
.
CPU
.
FREE_CPU
}},{{
STAT
.
CPU
.
ALLOC_CPU
}},{{
STAT
.
CPU
.
USED_CPU
}}],
// draws it.
]);
function
drawChart
()
{
var
cpu_options
=
{
'title'
:
'Cloud CPU usage percent (100/CPU)'
,
// Create the data table.
'width'
:
900
,
var
data_cpu
=
new
google
.
visualization
.
DataTable
();
'height'
:
50
,
data_cpu
.
addColumn
(
'string'
,
'Topping'
);
isStacked
:
true
data_cpu
.
addColumn
(
'number'
,
'Slices'
);
};
data_cpu
.
addRows
([
var
data_mem
=
new
google
.
visualization
.
DataTable
();
[
'Free CPU'
,
{{
STAT
.
CPU
.
FREE_CPU
}}],
data_mem
.
addColumn
(
'string'
,
'Topping'
);
[
'Allocated CPU'
,
{{
STAT
.
CPU
.
ALLOC_CPU
}}],
data_mem
.
addColumn
(
'number'
,
'Slices'
);
[
'Used CPU'
,
{{
STAT
.
CPU
.
USED_CPU
}}],
data_mem
.
addRows
([
]);
[
'Free Memory'
,
{{
STAT
.
MEM
.
FREE_MEM
|
unlocalize
}}],
[
'Allocated Memory'
,
{{
STAT
.
MEM
.
ALLOC_MEM
|
unlocalize
}}],
// Set chart options
[
'Used Memory'
,
{{
STAT
.
MEM
.
USED_MEM
|
unlocalize
}}],
var
cpu_options
=
{
'title'
:
'Cloud CPU usage percent (100/CPU)'
,
]);
'width'
:
400
,
var
mem_options
=
{
'height'
:
300
,
'title'
:
'Cloud Memory usage in {{STAT.DIMENSION}}'
,
slices
:
{
0
:
{
color
:
'blue'
},
1
:{
color
:
'orange'
},
'width'
:
400
,
2
:{
color
:
'red'
}}
'height'
:
300
,
};
slices
:
{
0
:
{
color
:
'blue'
},
var
data_mem
=
new
google
.
visualization
.
DataTable
();
1
:{
color
:
'orange'
},
data_mem
.
addColumn
(
'string'
,
'Topping'
);
2
:{
color
:
'red'
}
data_mem
.
addColumn
(
'number'
,
'Slices'
);
},
data_mem
.
addRows
([
};
[
'Free Memory'
,
{{
STAT
.
MEM
.
FREE_MEM
|
unlocalize
}}],
var
chart
=
new
google
.
visualization
.
BarChart
(
document
.
getElementById
(
'chart_cpu_div'
));
[
'Allocated Memory'
,
{{
STAT
.
MEM
.
ALLOC_MEM
|
unlocalize
}}],
chart
.
draw
(
data_cpu
,
cpu_options
);
[
'Used Memory'
,
{{
STAT
.
MEM
.
USED_MEM
|
unlocalize
}}],
var
chart
=
new
google
.
visualization
.
PieChart
(
document
.
getElementById
(
'chart_mem_div'
));
]);
chart
.
draw
(
data_mem
,
mem_options
);
}
// Set chart options
</script>
var
mem_options
=
{
'title'
:
'Cloud Memory usage in {{STAT.DIMENSION}}'
,
</head>
'width'
:
400
,
<body>
'height'
:
300
,
<div>
Running VMs: {{STAT.VMS}}
</div>
slices
:
{
0
:
{
color
:
'blue'
},
1
:{
color
:
'orange'
},
<div
id=
"chart_cpu_div"
></div>
2
:{
color
:
'red'
}}
<div
id=
"chart_mem_div"
></div>
};
</body>
// 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>
</html>
</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