add js script, remove vendor
This commit is contained in:
@@ -1,93 +0,0 @@
|
||||
// Set new default font family and font color to mimic Bootstrap's default styling
|
||||
Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
|
||||
Chart.defaults.global.defaultFontColor = '#858796';
|
||||
|
||||
// Area Chart Example
|
||||
var ctx = document.getElementById("myAreaChart");
|
||||
var myLineChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [{
|
||||
label: "Usage",
|
||||
lineTension: 0.3,
|
||||
backgroundColor: "rgba(78, 115, 223, 0.05)",
|
||||
borderColor: "rgba(78, 115, 223, 1)",
|
||||
pointRadius: 3,
|
||||
pointBackgroundColor: "rgba(78, 115, 223, 1)",
|
||||
pointBorderColor: "rgba(78, 115, 223, 1)",
|
||||
pointHoverRadius: 3,
|
||||
pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
|
||||
pointHoverBorderColor: "rgba(78, 115, 223, 1)",
|
||||
pointHitRadius: 10,
|
||||
pointBorderWidth: 2,
|
||||
data: [],
|
||||
}],
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
layout: {
|
||||
padding: {
|
||||
left: 10,
|
||||
right: 25,
|
||||
top: 25,
|
||||
bottom: 0
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
time: {
|
||||
unit: 'date'
|
||||
},
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
},
|
||||
ticks: {
|
||||
maxTicksLimit: 7
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
maxTicksLimit: 5,
|
||||
padding: 10,
|
||||
// Include a dollar sign in the ticks
|
||||
callback: function(value, index, values) {
|
||||
return value+"%";
|
||||
}
|
||||
},
|
||||
gridLines: {
|
||||
color: "rgb(234, 236, 244)",
|
||||
zeroLineColor: "rgb(234, 236, 244)",
|
||||
drawBorder: false,
|
||||
borderDash: [2],
|
||||
zeroLineBorderDash: [2]
|
||||
}
|
||||
}],
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltips: {
|
||||
backgroundColor: "rgb(255,255,255)",
|
||||
bodyFontColor: "#858796",
|
||||
titleMarginBottom: 10,
|
||||
titleFontColor: '#6e707e',
|
||||
titleFontSize: 14,
|
||||
borderColor: '#dddfeb',
|
||||
borderWidth: 1,
|
||||
xPadding: 15,
|
||||
yPadding: 15,
|
||||
displayColors: false,
|
||||
intersect: false,
|
||||
mode: 'index',
|
||||
caretPadding: 10,
|
||||
callbacks: {
|
||||
label: function(tooltipItem, chart) {
|
||||
var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
|
||||
return datasetLabel + tooltipItem.yLabel+"%";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1,56 +0,0 @@
|
||||
(function($) {
|
||||
"use strict"; // Start of use strict
|
||||
|
||||
// Toggle the side navigation
|
||||
$("#sidebarToggle, #sidebarToggleTop").on('click', function(e) {
|
||||
$("body").toggleClass("sidebar-toggled");
|
||||
$(".sidebar").toggleClass("toggled");
|
||||
if ($(".sidebar").hasClass("toggled")) {
|
||||
$('.sidebar .collapse').collapse('hide');
|
||||
};
|
||||
});
|
||||
|
||||
// Close any open menu accordions when window is resized below 768px
|
||||
$(window).resize(function() {
|
||||
if ($(window).width() < 768) {
|
||||
$('.sidebar .collapse').collapse('hide');
|
||||
};
|
||||
|
||||
// Toggle the side navigation when window is resized below 480px
|
||||
if ($(window).width() < 480 && !$(".sidebar").hasClass("toggled")) {
|
||||
$("body").addClass("sidebar-toggled");
|
||||
$(".sidebar").addClass("toggled");
|
||||
$('.sidebar .collapse').collapse('hide');
|
||||
};
|
||||
});
|
||||
|
||||
// Prevent the content wrapper from scrolling when the fixed side navigation hovered over
|
||||
$('body.fixed-nav .sidebar').on('mousewheel DOMMouseScroll wheel', function(e) {
|
||||
if ($(window).width() > 768) {
|
||||
var e0 = e.originalEvent,
|
||||
delta = e0.wheelDelta || -e0.detail;
|
||||
this.scrollTop += (delta < 0 ? 1 : -1) * 30;
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
// Scroll to top button appear
|
||||
$(document).on('scroll', function() {
|
||||
var scrollDistance = $(this).scrollTop();
|
||||
if (scrollDistance > 100) {
|
||||
$('.scroll-to-top').fadeIn();
|
||||
} else {
|
||||
$('.scroll-to-top').fadeOut();
|
||||
}
|
||||
});
|
||||
|
||||
// Smooth scrolling using jQuery easing
|
||||
$(document).on('click', 'a.scroll-to-top', function(e) {
|
||||
var $anchor = $(this);
|
||||
$('html, body').stop().animate({
|
||||
scrollTop: ($($anchor.attr('href')).offset().top)
|
||||
}, 1000, 'easeInOutExpo');
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
})(jQuery); // End of use strict
|
||||
7
js/sb-admin-2.min.js
vendored
7
js/sb-admin-2.min.js
vendored
@@ -1,7 +0,0 @@
|
||||
/*!
|
||||
* Start Bootstrap - SB Admin 2 v4.1.4 (https://startbootstrap.com/theme/sb-admin-2)
|
||||
* Copyright 2013-2021 Start Bootstrap
|
||||
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-sb-admin-2/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
!function(l){"use strict";l("#sidebarToggle, #sidebarToggleTop").on("click",function(e){l("body").toggleClass("sidebar-toggled"),l(".sidebar").toggleClass("toggled"),l(".sidebar").hasClass("toggled")&&l(".sidebar .collapse").collapse("hide")}),l(window).resize(function(){l(window).width()<768&&l(".sidebar .collapse").collapse("hide"),l(window).width()<480&&!l(".sidebar").hasClass("toggled")&&(l("body").addClass("sidebar-toggled"),l(".sidebar").addClass("toggled"),l(".sidebar .collapse").collapse("hide"))}),l("body.fixed-nav .sidebar").on("mousewheel DOMMouseScroll wheel",function(e){var o;768<l(window).width()&&(o=(o=e.originalEvent).wheelDelta||-o.detail,this.scrollTop+=30*(o<0?1:-1),e.preventDefault())}),l(document).on("scroll",function(){100<l(this).scrollTop()?l(".scroll-to-top").fadeIn():l(".scroll-to-top").fadeOut()}),l(document).on("click","a.scroll-to-top",function(e){var o=l(this);l("html, body").stop().animate({scrollTop:l(o.attr("href")).offset().top},1e3,"easeInOutExpo"),e.preventDefault()})}(jQuery);
|
||||
112
js/script.js
Normal file
112
js/script.js
Normal file
@@ -0,0 +1,112 @@
|
||||
let sumCompute, detailCompute, pgCompute, detailEncoder, pgEncoder, detailDecoder, pgDecoder, coreTemp, memoryUsed, pgMemory, procList;
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
loadElements();
|
||||
setTimeout(tick, 2000);
|
||||
});
|
||||
|
||||
function loadElements() {
|
||||
sumCompute = document.getElementById("sum-compute");
|
||||
detailCompute = document.getElementById("detail-compute");
|
||||
pgCompute = document.getElementById("pg-compute");
|
||||
|
||||
detailEncoder = document.getElementById("detail-encoder");
|
||||
pgEncoder = document.getElementById("pg-encoder");
|
||||
|
||||
detailDecoder = document.getElementById("detail-decoder");
|
||||
pgDecoder = document.getElementById("pg-decoder");
|
||||
|
||||
coreTemp = document.getElementById("core-temp");
|
||||
|
||||
memoryUsed = document.getElementById("memory-used");
|
||||
pgMemory = document.getElementById("pg-memory");
|
||||
|
||||
procList = document.getElementById("proc-list");
|
||||
}
|
||||
|
||||
function tick() {
|
||||
update();
|
||||
setTimeout(tick, 2000);
|
||||
}
|
||||
|
||||
function update() {
|
||||
const jsonURL = location.href + "/json"
|
||||
|
||||
axios({
|
||||
method: 'get',
|
||||
url: jsonURL
|
||||
}).then((res) => {
|
||||
const gpu = res.data;
|
||||
setCompute(gpu.usage.compute);
|
||||
setEncoder(gpu.usage.encoder);
|
||||
setDecoder(gpu.usage.decoder);
|
||||
setCoreTemp(gpu.coreTemperature);
|
||||
setMemory(gpu.memory.used, gpu.memory.total);
|
||||
setProcessList(gpu.processes);
|
||||
})
|
||||
}
|
||||
|
||||
function setCompute(value) {
|
||||
const placeholder = `${value}%`;
|
||||
sumCompute.innerText = placeholder;
|
||||
detailCompute.innerText = placeholder;
|
||||
pgCompute.style.width = placeholder;
|
||||
pgCompute.setAttribute("aria-valuenow", value);
|
||||
}
|
||||
|
||||
function setEncoder(value) {
|
||||
const placeholder = `${value}%`;
|
||||
detailEncoder.innerText = placeholder;
|
||||
pgEncoder.style.width = placeholder;
|
||||
pgEncoder.setAttribute("aria-valuenow", value);
|
||||
}
|
||||
|
||||
function setDecoder(value) {
|
||||
const placeholder = `${value}%`;
|
||||
detailDecoder.innerText = placeholder;
|
||||
pgDecoder.style.width = placeholder;
|
||||
pgDecoder.setAttribute("aria-valuenow", value);
|
||||
}
|
||||
|
||||
function setCoreTemp(value) {
|
||||
const placeholder = `${value}°C`;
|
||||
coreTemp.innerText = placeholder;
|
||||
}
|
||||
|
||||
function setMemory(used, total) {
|
||||
const placeholder = formatBytes(used);
|
||||
const p = (used/total)*100;
|
||||
memoryUsed.innerText = placeholder;
|
||||
pgMemory.style.width = p+'%';
|
||||
pgMemory.setAttribute("aria-valuenow", p);
|
||||
}
|
||||
|
||||
function setProcessList(processes) {
|
||||
procList.innerHTML = "";
|
||||
for (const process of processes) {
|
||||
const row = document.createElement("tr");
|
||||
|
||||
const pid = document.createElement("td");
|
||||
pid.innerText = process.pid;
|
||||
const type = document.createElement("td");
|
||||
type.innerText = process.type;
|
||||
const name = document.createElement("td");
|
||||
name.innerText = process.commandLine;
|
||||
const mem = document.createElement("td");
|
||||
mem.innerText = formatBytes(process.memoryUsed);
|
||||
row.append(pid, type, name, mem);
|
||||
procList.append(row);
|
||||
}
|
||||
}
|
||||
|
||||
function formatBytes(bytes, decimals = 2) {
|
||||
if (!+bytes) return '0 Bytes'
|
||||
|
||||
const k = 1024
|
||||
const dm = decimals < 0 ? 0 : decimals
|
||||
const sizes = ['B', 'KB', 'MB', 'GB']
|
||||
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
|
||||
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))}${sizes[i]}`
|
||||
}
|
||||
Reference in New Issue
Block a user