dbxe/fusionpbx
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update system_status.php (#6120)

Browse Source
This commit is contained in:
AlexC
2021-11-12 12:56:19 -07:00
committed by GitHub
parent 4600e5f98e
commit fdea4fb94c
1 changed files with 95 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/system/resources/dashboard/system_status.php
+95 -109
View File
@@ -48,126 +48,112 @@
if (substr_count($stat, '%') > 0) { $percent_disk_usage = rtrim($stat,'%'); break; } if (substr_count($stat, '%') > 0) { $percent_disk_usage = rtrim($stat,'%'); break; }
} }
if ($percent_disk_usage != '') { if ($percent_disk_usage != '')
echo " //add half doughnut charts
<div style='display: flex; flex-wrap: wrap; justify-content: center;'> ?>
<div style='width: 175px; height: 175px; margin: 5px 25px;'><canvas id='cpu_usage_chart'></canvas></div> <div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 8px'>
<div style='width: 175px; height: 175px; margin: 5px 25px;'><canvas id='disk_usage_chart'>%</canvas></div> <div style='width: 175px; height: 175px; margin: 0 auto;'><canvas id='cpu_usage_chart'></canvas></div>
</div> <div style='width: 175px; height: 175px; margin: 0 auto;'><canvas id='disk_usage_chart'></canvas></div>
</div>
<script> <script>
var ctx = document.getElementById('cpu_usage_chart').getContext('2d'); var cpu_chart_background_color;
if ('<?php echo $percent_cpu; ?>' <= 50) {
cpu_chart_background_color = '#03c04a';
} else if ('<?php echo $percent_cpu; ?>' <= 70 && '<?php echo $percent_cpu; ?>' > 50) {
cpu_chart_background_color = '#ff9933';
} else if ('<?php echo $percent_cpu; ?>' > 70) {
cpu_chart_background_color = '#ea4c46';
}
var cpu_chart_bgc; const cpu_usage_data = {
if (".$percent_cpu." <= 50) { datasets: [{
cpu_chart_bgc = '#03c04a'; data: ['<?php echo $percent_cpu; ?>', 100 - '<?php echo $percent_cpu; ?>'],
} else if (".$percent_cpu." <= 70 && ".$percent_cpu." > 50) { backgroundColor: [cpu_chart_background_color, '#d4d4d4'],
cpu_chart_bgc = '#ff9933'; borderColor: 'rgba(0,0,0,0)',
} else if (".$percent_cpu." > 70) { cutout: chart_cutout
cpu_chart_bgc = '#ea4c46'; }]
} };
const chart_counter_2 = { const cpu_usage_config = {
id: 'chart_counter_2', type: 'doughnut',
beforeDraw(chart, args, options){ data: cpu_usage_data,
const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart; options: {
ctx.font = (chart_font_size - 7) + 'px ' + chart_font_family; responsive: true,
ctx.textBaseline = 'middle'; maintainAspectRatio: false,
ctx.textAlign = 'center'; circumference: 180,
ctx.fillStyle = chart_font_color; rotation: 270,
ctx.fillText(options.chart_text + '%', width / 2, top + (height / 2) + 35); plugins: {
ctx.save(); chart_counter_2: {
chart_text: '<?php echo $percent_cpu; ?>'
},
legend: {
display: false,
},
tooltip: {
yAlign: 'bottom',
displayColors: false,
},
title: {
display: true,
text: '<?php echo $text['label-processor_usage']; ?>'
}
} }
}; },
plugins: [chart_counter_2],
};
const cpu_usage_data = { const cpu_usage_chart = new Chart(
document.getElementById('cpu_usage_chart'),
cpu_usage_config
);
var disk_chart_background_color;
if ('<?php echo $percent_disk_usage; ?>' < 60) {
disk_chart_background_color = '#03c04a';
} else if ('<?php echo $percent_disk_usage; ?>' < 80 && '<?php echo $percent_disk_usage; ?>' > 60) {
disk_chart_background_color = '#ff9933';
} else if ('<?php echo $percent_disk_usage; ?>' >= 80) {
disk_chart_background_color = '#ea4c46';
}
const disk_chart_config = {
type: 'doughnut',
data: {
datasets: [{ datasets: [{
data:[".$percent_cpu.", 100 - ".$percent_cpu."], data: ['<?php echo $percent_disk_usage; ?>', 100 - '<?php echo $percent_disk_usage; ?>'],
backgroundColor : [cpu_chart_bgc, '#d4d4d4'], backgroundColor: [disk_chart_background_color, '#d4d4d4'],
borderColor : 'rgba(0,0,0,0)', borderColor: 'rgba(0,0,0,0)',
cutout: chart_cutout cutout: chart_cutout
}] }]
}; },
options: {
const cpu_usage_config = { responsive: true,
type: 'doughnut', maintainAspectRatio: false,
data: cpu_usage_data, circumference: 180,
options: { rotation: 270,
responsive: true, plugins: {
maintainAspectRatio: false, chart_counter_2: {
circumference: 180, chart_text: '<?php echo $percent_disk_usage; ?>'
rotation: 270, },
plugins: { legend: {
chart_counter_2: { display: false
chart_text: ".$percent_cpu.", },
}, title: {
legend: {
display: false,
},
tooltip: {
yAlign: 'bottom',
displayColors: false,
},
title: {
display: true, display: true,
text: '".$text['label-processor_usage']."' text: '<?php echo $text['label-disk_usage']; ?>'
}
} }
}, }
plugins: [chart_counter_2], },
}; plugins: [chart_counter_2],
};
const cpu_usage_chart = new Chart( const disk_usage_chart = new Chart(
ctx, document.getElementById('disk_usage_chart'),
cpu_usage_config disk_chart_config
); );
</script>
var disk_chart_bgc; <?php
if (".$percent_disk_usage." < 60) {
disk_chart_bgc = '#03c04a';
} else if (".$percent_disk_usage." < 80 && ".$percent_disk_usage." > 60) {
disk_chart_bgc = '#ff9933';
} else if (".$percent_disk_usage." >= 80) {
disk_chart_bgc = '#ea4c46';
}
const disk_chart_config = {
type: 'doughnut',
data: {
datasets: [{
data:[".$percent_disk_usage.", 100 - ".$percent_disk_usage."],
backgroundColor: [disk_chart_bgc, '#d4d4d4'],
borderColor: 'rgba(0,0,0,0)',
cutout: chart_cutout
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
circumference: 180,
rotation: 270,
plugins: {
chart_counter_2: {
chart_text: ".$percent_disk_usage.",
},
legend: {
display: false
},
title: {
display: true,
text: '".$text['label-disk_usage']."'
}
}
},
plugins: [chart_counter_2],
};
const disk_usage_chart = new Chart(
document.getElementById('disk_usage_chart'),
disk_chart_config
);
</script>
";
} }
} }