mirror of
https://github.com/nicolargo/glances.git
synced 2024-11-28 14:12:21 +03:00
added vuejs and remove angularjs
This commit is contained in:
fr4nc0is
parent
110594b06a
commit
1355c64573
13
glances/outputs/static/.eslintrc.js
Normal file
13
glances/outputs/static/.eslintrc.js
Normal file
@ -0,0 +1,13 @@
|
||||
/* eslint-disable */
|
||||
module.exports = {
|
||||
env: {
|
||||
browser: true,
|
||||
es2021: true
|
||||
},
|
||||
extends: ['eslint:recommended', 'plugin:vue/vue3-essential'],
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
sourceType: 'module'
|
||||
},
|
||||
rules: {}
|
||||
};
|
||||
10
glances/outputs/static/.prettierrc.js
Normal file
10
glances/outputs/static/.prettierrc.js
Normal file
@ -0,0 +1,10 @@
|
||||
module.exports = {
|
||||
printWidth: 100,
|
||||
arrowParens: 'always',
|
||||
bracketSpacing: true,
|
||||
semi: true,
|
||||
singleQuote: true,
|
||||
tabWidth: 4,
|
||||
trailingComma: 'none',
|
||||
useTabs: false
|
||||
};
|
||||
388
glances/outputs/static/js/App.vue
Normal file
388
glances/outputs/static/js/App.vue
Normal file
@ -0,0 +1,388 @@
|
||||
<template>
|
||||
<div v-if="!dataLoaded" class="container-fluid" id="loading-page">
|
||||
<div class="glances-logo"></div>
|
||||
<div class="loader">Loading...</div>
|
||||
</div>
|
||||
<glances-help v-else-if="args.help_tag"></glances-help>
|
||||
<div v-else class="container-fluid">
|
||||
<div class="top-plugin">
|
||||
<div class="row">
|
||||
<div class="col-sm-24">
|
||||
<div class="pull-left">
|
||||
<glances-plugin-system :data="data"></glances-plugin-system>
|
||||
</div>
|
||||
<div class="pull-left" v-if="args.disable_ip">
|
||||
<glances-plugin-ip :data="data"></glances-plugin-ip>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<glances-plugin-uptime :data="data"></glances-plugin-uptime>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-24">
|
||||
<div class="pull-left">
|
||||
<glances-plugin-cloud :data="data"></glances-plugin-cloud>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="hidden-xs hidden-sm hidden-md col-lg-6" v-if="!args.disable_quicklook">
|
||||
<glances-plugin-quicklook :data="data"></glances-plugin-quicklook>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-8 col-lg-6" v-if="!args.disable_cpu && !args.percpu">
|
||||
<glances-plugin-cpu :data="data"></glances-plugin-cpu>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-8 col-lg-6" v-if="!args.disable_cpu && args.percpu">
|
||||
<glances-plugin-percpu :data="data"></glances-plugin-percpu>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3" v-if="!args.disable_gpu && hasGpu">
|
||||
<glances-plugin-gpu :data="data"></glances-plugin-gpu>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3" v-if="!args.disable_mem">
|
||||
<glances-plugin-mem :data="data"></glances-plugin-mem>
|
||||
</div>
|
||||
<div
|
||||
class="col-sm-6 col-md-4 col-lg-3"
|
||||
v-if="!args.disable_mem && !(!args.disable_gpu && hasGpu)"
|
||||
>
|
||||
<glances-plugin-mem-more :data="data"></glances-plugin-mem-more>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3" v-if="!args.disable_memswap">
|
||||
<glances-plugin-memswap :data="data"></glances-plugin-memswap>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3" v-if="!args.disable_load">
|
||||
<glances-plugin-load :data="data"></glances-plugin-load>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6 sidebar" v-if="!args.disable_left_sidebar">
|
||||
<div class="table">
|
||||
<glances-plugin-network
|
||||
id="plugin-network"
|
||||
class="plugin table-row-group"
|
||||
v-if="!args.disable_network"
|
||||
:data="data"
|
||||
></glances-plugin-network>
|
||||
<glances-plugin-connections
|
||||
id="plugin-connections"
|
||||
class="plugin table-row-group"
|
||||
v-if="isLinux && !args.disable_connections"
|
||||
:data="data"
|
||||
></glances-plugin-connections>
|
||||
<glances-plugin-wifi
|
||||
id="plugin-wifi"
|
||||
class="plugin table-row-group"
|
||||
v-if="!args.disable_wifi"
|
||||
:data="data"
|
||||
></glances-plugin-wifi>
|
||||
<glances-plugin-ports
|
||||
id="plugin-ports"
|
||||
class="plugin table-row-group"
|
||||
v-if="!args.disable_ports"
|
||||
:data="data"
|
||||
></glances-plugin-ports>
|
||||
<glances-plugin-diskio
|
||||
id="plugin-diskio"
|
||||
class="plugin table-row-group"
|
||||
v-if="!args.disable_diskio"
|
||||
:data="data"
|
||||
></glances-plugin-diskio>
|
||||
<glances-plugin-fs
|
||||
id="plugin-fs"
|
||||
class="plugin table-row-group"
|
||||
v-if="!args.disable_fs"
|
||||
:data="data"
|
||||
></glances-plugin-fs>
|
||||
<glances-plugin-irq
|
||||
id="plugin-irq"
|
||||
class="plugin table-row-group"
|
||||
v-if="args.enable_irq"
|
||||
:data="data"
|
||||
></glances-plugin-irq>
|
||||
<glances-plugin-folders
|
||||
id="plugin-folders"
|
||||
class="plugin table-row-group"
|
||||
v-if="!args.disable_folders"
|
||||
:data="data"
|
||||
></glances-plugin-folders>
|
||||
<glances-plugin-raid
|
||||
id="plugin-raid"
|
||||
class="plugin table-row-group"
|
||||
v-if="!args.raid"
|
||||
:data="data"
|
||||
></glances-plugin-raid>
|
||||
<glances-plugin-sensors
|
||||
id="plugin-sensors"
|
||||
class="plugin table-row-group"
|
||||
v-if="!args.disable_sensors"
|
||||
:data="data"
|
||||
></glances-plugin-sensors>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-18">
|
||||
<glances-plugin-docker
|
||||
v-if="!args.disable_docker"
|
||||
:data="data"
|
||||
></glances-plugin-docker>
|
||||
<glances-plugin-alert
|
||||
v-if="!args.disable_alert"
|
||||
:data="data"
|
||||
></glances-plugin-alert>
|
||||
<glances-plugin-process :data="data"></glances-plugin-process>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import hotkeys from 'hotkeys-js';
|
||||
import { GlancesStats } from './services.js';
|
||||
import { store } from './store.js';
|
||||
|
||||
import GlancesHelp from './components/help.vue';
|
||||
import GlancesPluginAlert from './components/plugin-alert.vue';
|
||||
import GlancesPluginCloud from './components/plugin-cloud.vue';
|
||||
import GlancesPluginConnections from './components/plugin-connections.vue';
|
||||
import GlancesPluginCpu from './components/plugin-cpu.vue';
|
||||
import GlancesPluginDiskio from './components/plugin-diskio.vue';
|
||||
import GlancesPluginDocker from './components/plugin-docker.vue';
|
||||
import GlancesPluginFolders from './components/plugin-folders.vue';
|
||||
import GlancesPluginFs from './components/plugin-fs.vue';
|
||||
import GlancesPluginGpu from './components/plugin-gpu.vue';
|
||||
import GlancesPluginIp from './components/plugin-ip.vue';
|
||||
import GlancesPluginIrq from './components/plugin-irq.vue';
|
||||
import GlancesPluginLoad from './components/plugin-load.vue';
|
||||
import GlancesPluginMem from './components/plugin-mem.vue';
|
||||
import GlancesPluginMemMore from './components/plugin-mem-more.vue';
|
||||
import GlancesPluginMemswap from './components/plugin-memswap.vue';
|
||||
import GlancesPluginNetwork from './components/plugin-network.vue';
|
||||
import GlancesPluginPercpu from './components/plugin-percpu.vue';
|
||||
import GlancesPluginPorts from './components/plugin-ports.vue';
|
||||
import GlancesPluginProcess from './components/plugin-process.vue';
|
||||
import GlancesPluginQuicklook from './components/plugin-quicklook.vue';
|
||||
import GlancesPluginRaid from './components/plugin-raid.vue';
|
||||
import GlancesPluginSensors from './components/plugin-sensors.vue';
|
||||
import GlancesPluginSystem from './components/plugin-system.vue';
|
||||
import GlancesPluginUptime from './components/plugin-uptime.vue';
|
||||
import GlancesPluginWifi from './components/plugin-wifi.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
GlancesHelp,
|
||||
GlancesPluginAlert,
|
||||
GlancesPluginCloud,
|
||||
GlancesPluginConnections,
|
||||
GlancesPluginCpu,
|
||||
GlancesPluginDiskio,
|
||||
GlancesPluginDocker,
|
||||
GlancesPluginFolders,
|
||||
GlancesPluginFs,
|
||||
GlancesPluginGpu,
|
||||
GlancesPluginIp,
|
||||
GlancesPluginIrq,
|
||||
GlancesPluginLoad,
|
||||
GlancesPluginMem,
|
||||
GlancesPluginMemMore,
|
||||
GlancesPluginMemswap,
|
||||
GlancesPluginNetwork,
|
||||
GlancesPluginPercpu,
|
||||
GlancesPluginPorts,
|
||||
GlancesPluginProcess,
|
||||
GlancesPluginQuicklook,
|
||||
GlancesPluginRaid,
|
||||
GlancesPluginSensors,
|
||||
GlancesPluginSystem,
|
||||
GlancesPluginUptime,
|
||||
GlancesPluginWifi
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
store
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
args() {
|
||||
return this.store.args || {};
|
||||
},
|
||||
data() {
|
||||
return this.store.data || {};
|
||||
},
|
||||
dataLoaded() {
|
||||
return this.store.data !== undefined;
|
||||
},
|
||||
hasGpu() {
|
||||
return this.store.data.stats.gpu.length > 0;
|
||||
},
|
||||
isLinux() {
|
||||
return this.store.data.isLinux;
|
||||
},
|
||||
title() {
|
||||
const { data } = this;
|
||||
const title = (data.stats && data.stats.system && data.stats.system.hostname) || '';
|
||||
return title ? `${title} - Glances` : 'Glances';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
title() {
|
||||
if (document) {
|
||||
document.title = this.title;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setupHotKeys() {
|
||||
// A => Enable/disable AMPs
|
||||
hotkeys('shift+A', () => {
|
||||
this.store.args.disable_amps = !this.store.args.disable_amps;
|
||||
});
|
||||
|
||||
// d => Show/hide disk I/O stats
|
||||
hotkeys('d', () => {
|
||||
this.store.args.disable_diskio = !this.store.args.disable_diskio;
|
||||
});
|
||||
|
||||
// Q => Show/hide IRQ
|
||||
hotkeys('shift+Q', () => {
|
||||
this.store.args.enable_irq = !this.store.args.enable_irq;
|
||||
});
|
||||
|
||||
// f => Show/hide filesystem stats
|
||||
hotkeys('f', () => {
|
||||
this.store.args.disable_fs = !this.store.args.disable_fs;
|
||||
});
|
||||
|
||||
// j => Accumulate processes by program
|
||||
hotkeys('j', () => {
|
||||
this.store.args.programs = !this.store.args.programs;
|
||||
});
|
||||
|
||||
// k => Show/hide connections stats
|
||||
hotkeys('k', () => {
|
||||
this.store.args.disable_connections = !this.store.args.disable_connections;
|
||||
});
|
||||
|
||||
// n => Show/hide network stats
|
||||
hotkeys('n', () => {
|
||||
this.store.args.disable_network = !this.store.args.disable_network;
|
||||
});
|
||||
|
||||
// s => Show/hide sensors stats
|
||||
hotkeys('s', () => {
|
||||
this.store.args.disable_sensors = !this.store.args.disable_sensors;
|
||||
});
|
||||
|
||||
// 2 => Show/hide left sidebar
|
||||
hotkeys('2', () => {
|
||||
this.store.args.disable_left_sidebar = !this.store.args.disable_left_sidebar;
|
||||
});
|
||||
|
||||
// z => Enable/disable processes stats
|
||||
hotkeys('z', () => {
|
||||
this.store.args.disable_process = !this.store.args.disable_process;
|
||||
});
|
||||
|
||||
// SLASH => Enable/disable short processes name
|
||||
hotkeys('/', () => {
|
||||
this.store.args.process_short_name = !this.store.args.process_short_name;
|
||||
});
|
||||
|
||||
// D => Enable/disable Docker stats
|
||||
hotkeys('shift+D', () => {
|
||||
this.store.args.disable_docker = !this.store.args.disable_docker;
|
||||
});
|
||||
|
||||
// b => Bytes or bits for network I/O
|
||||
hotkeys('b', () => {
|
||||
this.store.args.byte = !this.store.args.byte;
|
||||
});
|
||||
|
||||
// 'B' => Switch between bit/s and IO/s for Disk IO
|
||||
hotkeys('shift+B', () => {
|
||||
this.store.args.diskio_iops = !this.store.args.diskio_iops;
|
||||
});
|
||||
|
||||
// l => Show/hide alert logs
|
||||
hotkeys('l', () => {
|
||||
this.store.args.disable_alert = !this.store.args.disable_alert;
|
||||
});
|
||||
|
||||
// 1 => Global CPU or per-CPU stats
|
||||
hotkeys('1', () => {
|
||||
this.store.args.percpu = !this.store.args.percpu;
|
||||
});
|
||||
|
||||
// h => Show/hide this help screen
|
||||
hotkeys('h', () => {
|
||||
this.store.args.help_tag = !this.store.args.help_tag;
|
||||
});
|
||||
|
||||
// T => View network I/O as combination
|
||||
hotkeys('shift+T', () => {
|
||||
this.store.args.network_sum = !this.store.args.network_sum;
|
||||
});
|
||||
|
||||
// U => View cumulative network I/O
|
||||
hotkeys('shift+U', () => {
|
||||
this.store.args.network_cumul = !this.store.args.network_cumul;
|
||||
});
|
||||
|
||||
// F => Show filesystem free space
|
||||
hotkeys('shift+F', () => {
|
||||
this.store.args.fs_free_space = !this.store.args.fs_free_space;
|
||||
});
|
||||
|
||||
// 3 => Enable/disable quick look plugin
|
||||
hotkeys('3', () => {
|
||||
this.store.args.disable_quicklook = !this.store.args.disable_quicklook;
|
||||
});
|
||||
|
||||
// 6 => Enable/disable mean gpu
|
||||
hotkeys('6', () => {
|
||||
this.store.args.meangpu = !this.store.args.meangpu;
|
||||
});
|
||||
|
||||
// G => Enable/disable gpu
|
||||
hotkeys('shift+G', () => {
|
||||
this.store.args.disable_gpu = !this.store.args.disable_gpu;
|
||||
});
|
||||
|
||||
hotkeys('5', () => {
|
||||
this.store.args.disable_quicklook = !this.store.args.disable_quicklook;
|
||||
this.store.args.disable_cpu = !this.store.args.disable_cpu;
|
||||
this.store.args.disable_mem = !this.store.args.disable_mem;
|
||||
this.store.args.disable_memswap = !this.store.args.disable_memswap;
|
||||
this.store.args.disable_load = !this.store.args.disable_load;
|
||||
this.store.args.disable_gpu = !this.store.args.disable_gpu;
|
||||
});
|
||||
|
||||
// I => Show/hide IP module
|
||||
hotkeys('shift+I', () => {
|
||||
this.store.args.disable_ip = !this.store.args.disable_ip;
|
||||
});
|
||||
|
||||
// P => Enable/disable ports module
|
||||
hotkeys('shift+P', () => {
|
||||
this.store.args.disable_ports = !this.store.args.disable_ports;
|
||||
});
|
||||
|
||||
// 'W' > Enable/Disable Wifi plugin
|
||||
hotkeys('shift+W', () => {
|
||||
this.store.args.disable_wifi = !this.store.args.disable_wifi;
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const GLANCES = window.__GLANCES__ || {};
|
||||
const refreshTime = isFinite(GLANCES['refresh-time'])
|
||||
? parseInt(GLANCES['refresh-time'], 10)
|
||||
: undefined;
|
||||
GlancesStats.init(refreshTime);
|
||||
this.setupHotKeys();
|
||||
},
|
||||
beforeUnmount() {
|
||||
hotkeys.unbind();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,12 +1,15 @@
|
||||
/* global module */
|
||||
if (module.hot) {
|
||||
module.hot.accept();
|
||||
module.hot.accept();
|
||||
}
|
||||
|
||||
import "../css/bootstrap.less";
|
||||
import "../css/style.scss";
|
||||
import '../css/bootstrap.less';
|
||||
import '../css/style.scss';
|
||||
|
||||
import "./module";
|
||||
import "./services";
|
||||
import "./components";
|
||||
import "./filters";
|
||||
import "./directives";
|
||||
import { createApp } from 'vue';
|
||||
import App from './App.vue';
|
||||
import * as filters from "./filters.js";
|
||||
|
||||
const app = createApp(App);
|
||||
app.config.globalProperties.$filters = filters;
|
||||
app.mount('#app');
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glances", {
|
||||
controller: GlancesController,
|
||||
controllerAs: 'vm',
|
||||
bindings: {
|
||||
refreshTime: "<"
|
||||
},
|
||||
templateUrl: template
|
||||
});
|
||||
@ -1,236 +0,0 @@
|
||||
|
||||
export default function GlancesController($scope, GlancesStats, hotkeys, ARGUMENTS) {
|
||||
var vm = this;
|
||||
vm.dataLoaded = false;
|
||||
vm.arguments = ARGUMENTS;
|
||||
|
||||
vm.$onInit = function () {
|
||||
GlancesStats.init(vm.refreshTime);
|
||||
};
|
||||
|
||||
$scope.$on('data_refreshed', function (event, data) {
|
||||
vm.hasGpu = data.stats.gpu.length > 0;
|
||||
vm.isLinux = data.isLinux;
|
||||
vm.dataLoaded = true;
|
||||
});
|
||||
|
||||
// A => Enable/disable AMPs
|
||||
hotkeys.add({
|
||||
combo: 'A',
|
||||
callback: function () {
|
||||
ARGUMENTS.disable_amps = !ARGUMENTS.disable_amps;
|
||||
}
|
||||
});
|
||||
|
||||
// d => Show/hide disk I/O stats
|
||||
hotkeys.add({
|
||||
combo: 'd',
|
||||
callback: function () {
|
||||
ARGUMENTS.disable_diskio = !ARGUMENTS.disable_diskio;
|
||||
}
|
||||
});
|
||||
|
||||
// Q => Show/hide IRQ
|
||||
hotkeys.add({
|
||||
combo: 'Q',
|
||||
callback: function () {
|
||||
ARGUMENTS.enable_irq = !ARGUMENTS.enable_irq;
|
||||
}
|
||||
});
|
||||
|
||||
// f => Show/hide filesystem stats
|
||||
hotkeys.add({
|
||||
combo: 'f',
|
||||
callback: function () {
|
||||
ARGUMENTS.disable_fs = !ARGUMENTS.disable_fs;
|
||||
}
|
||||
});
|
||||
|
||||
// j => Accumulate processes by program
|
||||
hotkeys.add({
|
||||
combo: 'j',
|
||||
callback: function () {
|
||||
ARGUMENTS.programs = !ARGUMENTS.programs;
|
||||
}
|
||||
});
|
||||
|
||||
// k => Show/hide connections stats
|
||||
hotkeys.add({
|
||||
combo: 'k',
|
||||
callback: function () {
|
||||
ARGUMENTS.disable_connections = !ARGUMENTS.disable_connections;
|
||||
}
|
||||
});
|
||||
|
||||
// n => Show/hide network stats
|
||||
hotkeys.add({
|
||||
combo: 'n',
|
||||
callback: function () {
|
||||
ARGUMENTS.disable_network = !ARGUMENTS.disable_network;
|
||||
}
|
||||
});
|
||||
|
||||
// s => Show/hide sensors stats
|
||||
hotkeys.add({
|
||||
combo: 's',
|
||||
callback: function () {
|
||||
ARGUMENTS.disable_sensors = !ARGUMENTS.disable_sensors;
|
||||
}
|
||||
});
|
||||
|
||||
// 2 => Show/hide left sidebar
|
||||
hotkeys.add({
|
||||
combo: '2',
|
||||
callback: function () {
|
||||
ARGUMENTS.disable_left_sidebar = !ARGUMENTS.disable_left_sidebar;
|
||||
}
|
||||
});
|
||||
|
||||
// z => Enable/disable processes stats
|
||||
hotkeys.add({
|
||||
combo: 'z',
|
||||
callback: function () {
|
||||
ARGUMENTS.disable_process = !ARGUMENTS.disable_process;
|
||||
}
|
||||
});
|
||||
|
||||
// SLASH => Enable/disable short processes name
|
||||
hotkeys.add({
|
||||
combo: '/',
|
||||
callback: function () {
|
||||
ARGUMENTS.process_short_name = !ARGUMENTS.process_short_name;
|
||||
}
|
||||
});
|
||||
|
||||
// D => Enable/disable Docker stats
|
||||
hotkeys.add({
|
||||
combo: 'D',
|
||||
callback: function () {
|
||||
ARGUMENTS.disable_docker = !ARGUMENTS.disable_docker;
|
||||
}
|
||||
});
|
||||
|
||||
// b => Bytes or bits for network I/O
|
||||
hotkeys.add({
|
||||
combo: 'b',
|
||||
callback: function () {
|
||||
ARGUMENTS.byte = !ARGUMENTS.byte;
|
||||
}
|
||||
});
|
||||
|
||||
// 'B' => Switch between bit/s and IO/s for Disk IO
|
||||
hotkeys.add({
|
||||
combo: 'B',
|
||||
callback: function () {
|
||||
ARGUMENTS.diskio_iops = !ARGUMENTS.diskio_iops;
|
||||
}
|
||||
});
|
||||
|
||||
// l => Show/hide alert logs
|
||||
hotkeys.add({
|
||||
combo: 'l',
|
||||
callback: function () {
|
||||
ARGUMENTS.disable_alert = !ARGUMENTS.disable_alert;
|
||||
}
|
||||
});
|
||||
|
||||
// 1 => Global CPU or per-CPU stats
|
||||
hotkeys.add({
|
||||
combo: '1',
|
||||
callback: function () {
|
||||
ARGUMENTS.percpu = !ARGUMENTS.percpu;
|
||||
}
|
||||
});
|
||||
|
||||
// h => Show/hide this help screen
|
||||
hotkeys.add({
|
||||
combo: 'h',
|
||||
callback: function () {
|
||||
ARGUMENTS.help_tag = !ARGUMENTS.help_tag;
|
||||
}
|
||||
});
|
||||
|
||||
// T => View network I/O as combination
|
||||
hotkeys.add({
|
||||
combo: 'T',
|
||||
callback: function () {
|
||||
ARGUMENTS.network_sum = !ARGUMENTS.network_sum;
|
||||
}
|
||||
});
|
||||
|
||||
// U => View cumulative network I/O
|
||||
hotkeys.add({
|
||||
combo: 'U',
|
||||
callback: function () {
|
||||
ARGUMENTS.network_cumul = !ARGUMENTS.network_cumul;
|
||||
}
|
||||
});
|
||||
|
||||
// F => Show filesystem free space
|
||||
hotkeys.add({
|
||||
combo: 'F',
|
||||
callback: function () {
|
||||
ARGUMENTS.fs_free_space = !ARGUMENTS.fs_free_space;
|
||||
}
|
||||
});
|
||||
|
||||
// 3 => Enable/disable quick look plugin
|
||||
hotkeys.add({
|
||||
combo: '3',
|
||||
callback: function () {
|
||||
ARGUMENTS.disable_quicklook = !ARGUMENTS.disable_quicklook;
|
||||
}
|
||||
});
|
||||
|
||||
// 6 => Enable/disable mean gpu
|
||||
hotkeys.add({
|
||||
combo: '6',
|
||||
callback: function () {
|
||||
ARGUMENTS.meangpu = !ARGUMENTS.meangpu;
|
||||
}
|
||||
});
|
||||
|
||||
// G => Enable/disable gpu
|
||||
hotkeys.add({
|
||||
combo: 'G',
|
||||
callback: function () {
|
||||
ARGUMENTS.disable_gpu = !ARGUMENTS.disable_gpu;
|
||||
}
|
||||
});
|
||||
|
||||
hotkeys.add({
|
||||
combo: '5',
|
||||
callback: function () {
|
||||
ARGUMENTS.disable_quicklook = !ARGUMENTS.disable_quicklook;
|
||||
ARGUMENTS.disable_cpu = !ARGUMENTS.disable_cpu;
|
||||
ARGUMENTS.disable_mem = !ARGUMENTS.disable_mem;
|
||||
ARGUMENTS.disable_memswap = !ARGUMENTS.disable_memswap;
|
||||
ARGUMENTS.disable_load = !ARGUMENTS.disable_load;
|
||||
ARGUMENTS.disable_gpu = !ARGUMENTS.disable_gpu;
|
||||
}
|
||||
});
|
||||
|
||||
// I => Show/hide IP module
|
||||
hotkeys.add({
|
||||
combo: 'I',
|
||||
callback: function () {
|
||||
ARGUMENTS.disable_ip = !ARGUMENTS.disable_ip;
|
||||
}
|
||||
});
|
||||
|
||||
// P => Enable/disable ports module
|
||||
hotkeys.add({
|
||||
combo: 'P',
|
||||
callback: function () {
|
||||
ARGUMENTS.disable_ports = !ARGUMENTS.disable_ports;
|
||||
}
|
||||
});
|
||||
|
||||
// 'W' > Enable/Disable Wifi plugin
|
||||
hotkeys.add({
|
||||
combo: 'W',
|
||||
callback: function () {
|
||||
ARGUMENTS.disable_wifi = !ARGUMENTS.disable_wifi;
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -1,82 +0,0 @@
|
||||
<div>
|
||||
<div ng-if="!vm.dataLoaded" class="container-fluid" id="loading-page">
|
||||
<div class="glances-logo"></div>
|
||||
<div class="loader">Loading...</div>
|
||||
</div>
|
||||
|
||||
<glances-help ng-if="vm.arguments.help_tag"></glances-help>
|
||||
|
||||
<div ng-if="vm.dataLoaded && !vm.arguments.help_tag" class="container-fluid">
|
||||
<div class="top-plugin">
|
||||
<div class="row">
|
||||
<div class="col-sm-24">
|
||||
<div class="pull-left">
|
||||
<glances-plugin-system></glances-plugin-system>
|
||||
</div>
|
||||
<div class="pull-left">
|
||||
<glances-plugin-ip></glances-plugin-ip>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<glances-plugin-uptime></glances-plugin-uptime>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-24">
|
||||
<div class="pull-left">
|
||||
<glances-plugin-cloud></glances-plugin-cloud>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="hidden-xs hidden-sm hidden-md col-lg-6" ng-if="!vm.arguments.disable_quicklook">
|
||||
<glances-plugin-quicklook></glances-plugin-quicklook>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-8 col-lg-6" ng-if="!vm.arguments.disable_cpu && !vm.arguments.percpu">
|
||||
<glances-plugin-cpu></glances-plugin-cpu>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-8 col-lg-6" ng-if="!vm.arguments.disable_cpu && vm.arguments.percpu">
|
||||
<glances-plugin-percpu></glances-plugin-percpu>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.arguments.disable_gpu && vm.hasGpu">
|
||||
<glances-plugin-gpu></glances-plugin-gpu>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.arguments.disable_mem">
|
||||
<glances-plugin-mem></glances-plugin-mem>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"
|
||||
ng-if="!vm.arguments.disable_mem && !(!vm.arguments.disable_gpu && vm.hasGpu)">
|
||||
<glances-plugin-mem-more></glances-plugin-mem-more>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.arguments.disable_memswap">
|
||||
<glances-plugin-memswap></glances-plugin-memswap>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.arguments.disable_load">
|
||||
<glances-plugin-load></glances-plugin-load>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6 sidebar" ng-if="!vm.arguments.disable_left_sidebar">
|
||||
<div class="table">
|
||||
<glances-plugin-network id="plugin-network" class="plugin table-row-group" ng-if="!vm.arguments.disable_network"></glances-plugin-network>
|
||||
<glances-plugin-connections id="plugin-connections" class="plugin table-row-group" ng-if="vm.isLinux && !vm.arguments.disable_connections"></glances-plugin-connections>
|
||||
<glances-plugin-wifi id="plugin-wifi" class="plugin table-row-group" ng-if="!vm.arguments.disable_wifi"></glances-plugin-wifi>
|
||||
<glances-plugin-ports id="plugin-ports" class="plugin table-row-group" ng-if="!vm.arguments.disable_ports"></glances-plugin-ports>
|
||||
<glances-plugin-diskio id="plugin-diskio" class="plugin table-row-group" ng-if="!vm.arguments.disable_diskio"></glances-plugin-diskio>
|
||||
<glances-plugin-fs id="plugin-fs" class="plugin table-row-group" ng-if="!vm.arguments.disable_fs"></glances-plugin-fs>
|
||||
<glances-plugin-irq id="plugin-irq" class="plugin table-row-group" ng-if="vm.arguments.enable_irq"></glances-plugin-irq>
|
||||
<glances-plugin-folders id="plugin-folders" class="plugin table-row-group" ng-if="!vm.arguments.disable_folders"></glances-plugin-folders>
|
||||
<glances-plugin-raid id="plugin-raid" class="plugin table-row-group" ng-if="!vm.arguments.raid"></glances-plugin-raid>
|
||||
<glances-plugin-sensors id="plugin-sensors" class="plugin table-row-group" ng-if="!vm.arguments.disable_sensors"></glances-plugin-sensors>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-18">
|
||||
<glances-plugin-docker ng-if="!vm.arguments.disable_docker"></glances-plugin-docker>
|
||||
<glances-plugin-alert ng-if="!vm.arguments.disable_alert"></glances-plugin-alert>
|
||||
<glances-plugin-process></glances-plugin-process>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
274
glances/outputs/static/js/components/help.vue
Normal file
274
glances/outputs/static/js/components/help.vue
Normal file
@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<div v-if="help">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-24">{{ help.version }} {{ help.psutil_version }}</div>
|
||||
</div>
|
||||
<div class="row"> </div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-24">
|
||||
{{ help.configuration_file }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row"> </div>
|
||||
</div>
|
||||
<div class="divTable" style="width: 100%">
|
||||
<div class="divTableBody">
|
||||
<div class="divTableRow">
|
||||
<div class="divTableHead">
|
||||
{{ help.header_sort.replace(':', '') }}
|
||||
</div>
|
||||
<div class="divTableHead">
|
||||
{{ help.header_show_hide.replace(':', '') }}
|
||||
</div>
|
||||
<div class="divTableHead">
|
||||
{{ help.header_toggle.replace(':', '') }}
|
||||
</div>
|
||||
<div class="divTableHead">
|
||||
{{ help.header_miscellaneous.replace(':', '') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell">
|
||||
{{ help.sort_auto }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.show_hide_application_monitoring }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.toggle_bits_bytes }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.misc_erase_process_filter }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell">
|
||||
{{ help.sort_cpu }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.show_hide_diskio }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.toggle_count_rate }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.misc_generate_history_graphs }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell">
|
||||
{{ help.sort_io_rate }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.show_hide_docker }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.toggle_used_free }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.misc_help }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell">
|
||||
{{ help.sort_mem }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.show_hide_top_extended_stats }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.toggle_bar_sparkline }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.misc_accumulate_processes_by_program }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell">
|
||||
{{ help.sort_process_name }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.show_hide_filesystem }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.toggle_separate_combined }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.misc_kill_process }} - N/A in WebUI
|
||||
</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell">
|
||||
{{ help.sort_cpu_times }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.show_hide_gpu }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.toggle_live_cumulative }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.misc_reset_processes_summary_min_max }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell">
|
||||
{{ help.sort_user }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.show_hide_ip }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.toggle_linux_percentage }}
|
||||
</div>
|
||||
<div class="divTableCell">{{ help.misc_quit }}</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">
|
||||
{{ help.show_hide_tcp_connection }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.toggle_cpu_individual_combined }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.misc_reset_history }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">
|
||||
{{ help.show_hide_alert }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.toggle_gpu_individual_combined }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.misc_delete_warning_alerts }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">
|
||||
{{ help.show_hide_network }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.toggle_short_full }}
|
||||
</div>
|
||||
<div class="divTableCell">
|
||||
{{ help.misc_delete_warning_and_critical_alerts }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">
|
||||
{{ help.sort_cpu_times }}
|
||||
</div>
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">
|
||||
{{ help.misc_edit_process_filter_pattern }} - N/A in WebUI
|
||||
</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">
|
||||
{{ help.show_hide_irq }}
|
||||
</div>
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell"> </div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">
|
||||
{{ help.show_hide_raid_plugin }}
|
||||
</div>
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell"> </div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">
|
||||
{{ help.show_hide_sensors }}
|
||||
</div>
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell"> </div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">
|
||||
{{ help.show_hide_wifi_module }}
|
||||
</div>
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell"> </div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">
|
||||
{{ help.show_hide_processes }}
|
||||
</div>
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell"> </div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">
|
||||
{{ help.show_hide_left_sidebar }}
|
||||
</div>
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell"> </div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">
|
||||
{{ help.show_hide_quick_look }}
|
||||
</div>
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell"> </div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">
|
||||
{{ help.show_hide_cpu_mem_swap }}
|
||||
</div>
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell"> </div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">
|
||||
{{ help.show_hide_all }}
|
||||
</div>
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
For an exhaustive list of key bindings,
|
||||
<a href="https://glances.readthedocs.io/en/latest/cmds.html#interactive-commands"
|
||||
>click here</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>Press <b>h</b> to came back to Glances.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
help: undefined
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
fetch('api/3/help', { method: 'GET' })
|
||||
.then((response) => response.json())
|
||||
.then((response) => (this.help = response));
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesHelpController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glancesHelp", {
|
||||
controller: GlancesHelpController,
|
||||
controllerAs: 'vm',
|
||||
templateUrl: template,
|
||||
});
|
||||
@ -1,8 +0,0 @@
|
||||
|
||||
export default function GlancesHelpController($http) {
|
||||
var vm = this;
|
||||
|
||||
$http.get('api/3/help').then(function (response) {
|
||||
vm.help = response.data;
|
||||
});
|
||||
}
|
||||
@ -1,149 +0,0 @@
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-24">{{ vm.help.version }} {{ vm.help.psutil_version }}</div>
|
||||
</div>
|
||||
<div class="row"> </div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-24">{{ vm.help.configuration_file }}</div>
|
||||
</div>
|
||||
<div class="row"> </div>
|
||||
</div>
|
||||
|
||||
<div class="divTable" style="width: 100%;" >
|
||||
<div class="divTableBody">
|
||||
<div class="divTableRow">
|
||||
<div class="divTableHead">{{ vm.help.header_sort.replace(':', '') }}</div>
|
||||
<div class="divTableHead">{{ vm.help.header_show_hide.replace(':', '') }}</div>
|
||||
<div class="divTableHead">{{ vm.help.header_toggle.replace(':', '') }}</div>
|
||||
<div class="divTableHead">{{ vm.help.header_miscellaneous.replace(':', '') }}</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell">{{ vm.help.sort_auto }}</div>
|
||||
<div class="divTableCell">{{ vm.help.show_hide_application_monitoring }}</div>
|
||||
<div class="divTableCell">{{ vm.help.toggle_bits_bytes }}</div>
|
||||
<div class="divTableCell">{{ vm.help.misc_erase_process_filter }}</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell">{{ vm.help.sort_cpu }}</div>
|
||||
<div class="divTableCell">{{ vm.help.show_hide_diskio }}</div>
|
||||
<div class="divTableCell">{{ vm.help.toggle_count_rate }}</div>
|
||||
<div class="divTableCell">{{ vm.help.misc_generate_history_graphs }}</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell">{{ vm.help.sort_io_rate }}</div>
|
||||
<div class="divTableCell">{{ vm.help.show_hide_docker }}</div>
|
||||
<div class="divTableCell">{{ vm.help.toggle_used_free }}</div>
|
||||
<div class="divTableCell">{{ vm.help.misc_help }}</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell">{{ vm.help.sort_mem }}</div>
|
||||
<div class="divTableCell">{{ vm.help.show_hide_top_extended_stats }}</div>
|
||||
<div class="divTableCell">{{ vm.help.toggle_bar_sparkline }}</div>
|
||||
<div class="divTableCell">{{ vm.help.misc_accumulate_processes_by_program }}</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell">{{ vm.help.sort_process_name }}</div>
|
||||
<div class="divTableCell">{{ vm.help.show_hide_filesystem }}</div>
|
||||
<div class="divTableCell">{{ vm.help.toggle_separate_combined }}</div>
|
||||
<div class="divTableCell">{{ vm.help.misc_kill_process }} - N/A in WebUI</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell">{{ vm.help.sort_cpu_times }}</div>
|
||||
<div class="divTableCell">{{ vm.help.show_hide_gpu }}</div>
|
||||
<div class="divTableCell">{{ vm.help.toggle_live_cumulative }}</div>
|
||||
<div class="divTableCell">{{ vm.help.misc_reset_processes_summary_min_max }}</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell">{{ vm.help.sort_user }}</div>
|
||||
<div class="divTableCell">{{ vm.help.show_hide_ip }}</div>
|
||||
<div class="divTableCell">{{ vm.help.toggle_linux_percentage }}</div>
|
||||
<div class="divTableCell">{{ vm.help.misc_quit }}</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">{{ vm.help.show_hide_tcp_connection }}</div>
|
||||
<div class="divTableCell">{{ vm.help.toggle_cpu_individual_combined }}</div>
|
||||
<div class="divTableCell">{{ vm.help.misc_reset_history }}</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">{{ vm.help.show_hide_alert }}</div>
|
||||
<div class="divTableCell">{{ vm.help.toggle_gpu_individual_combined }}</div>
|
||||
<div class="divTableCell">{{ vm.help.misc_delete_warning_alerts }}</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">{{ vm.help.show_hide_network }}</div>
|
||||
<div class="divTableCell">{{ vm.help.toggle_short_full }}</div>
|
||||
<div class="divTableCell">{{ vm.help.misc_delete_warning_and_critical_alerts }}</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">{{ vm.help.sort_cpu_times }}</div>
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">{{ vm.help.misc_edit_process_filter_pattern }} - N/A in WebUI</div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">{{ vm.help.show_hide_irq }}</div>
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell"> </div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">{{ vm.help.show_hide_raid_plugin }}</div>
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell"> </div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">{{ vm.help.show_hide_sensors }}</div>
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell"> </div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">{{ vm.help.show_hide_wifi_module }}</div>
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell"> </div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">{{ vm.help.show_hide_processes }}</div>
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell"> </div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">{{ vm.help.show_hide_left_sidebar }}</div>
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell"> </div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">{{ vm.help.show_hide_quick_look }}</div>
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell"> </div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">{{ vm.help.show_hide_cpu_mem_swap }}</div>
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell"> </div>
|
||||
</div>
|
||||
<div class="divTableRow">
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell">{{ vm.help.show_hide_all }}</div>
|
||||
<div class="divTableCell"> </div>
|
||||
<div class="divTableCell"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>For an exhaustive list of key bindings, <a href="https://glances.readthedocs.io/en/latest/cmds.html#interactive-commands">click here</a>.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>Press <b>h</b> to came back to Glances.</p>
|
||||
</div>
|
||||
@ -1,33 +0,0 @@
|
||||
|
||||
// import all components
|
||||
|
||||
import "./glances/component";
|
||||
import "./help/component";
|
||||
import "./plugin-alert/component";
|
||||
import "./plugin-amps/component";
|
||||
import "./plugin-cloud/component";
|
||||
import "./plugin-connections/component";
|
||||
import "./plugin-cpu/component";
|
||||
import "./plugin-diskio/component";
|
||||
import "./plugin-docker/component";
|
||||
import "./plugin-folders/component";
|
||||
import "./plugin-fs/component";
|
||||
import "./plugin-gpu/component";
|
||||
import "./plugin-ip/component";
|
||||
import "./plugin-irq/component";
|
||||
import "./plugin-load/component";
|
||||
import "./plugin-mem/component";
|
||||
import "./plugin-mem-more/component";
|
||||
import "./plugin-memswap/component";
|
||||
import "./plugin-network/component";
|
||||
import "./plugin-percpu/component";
|
||||
import "./plugin-ports/component";
|
||||
import "./plugin-process/component";
|
||||
import "./plugin-processcount/component";
|
||||
import "./plugin-processlist/component";
|
||||
import "./plugin-quicklook/component";
|
||||
import "./plugin-raid/component";
|
||||
import "./plugin-sensors/component";
|
||||
import "./plugin-system/component";
|
||||
import "./plugin-uptime/component";
|
||||
import "./plugin-wifi/component";
|
||||
101
glances/outputs/static/js/components/plugin-alert.vue
Normal file
101
glances/outputs/static/js/components/plugin-alert.vue
Normal file
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div>
|
||||
<section id="alerts">
|
||||
<span class="title" v-if="hasAlerts">
|
||||
Warning or critical alerts (last {{ countAlerts }} entries)
|
||||
</span>
|
||||
<span class="title" v-else>No warning or critical alert detected</span>
|
||||
</section>
|
||||
<section id="alert" class="plugin">
|
||||
<div class="table">
|
||||
<div class="table-row" v-for="(alert, alertId) in alerts" :key="alertId">
|
||||
<div class="table-cell text-left">
|
||||
{{ formatDate(alert.begin) }}
|
||||
({{ alert.ongoing ? 'ongoing' : alert.duration }}) -
|
||||
<span v-show="!alert.ongoing"> {{ alert.level }} on </span>
|
||||
<span :class="alert.level.toLowerCase()">
|
||||
{{ alert.name }}
|
||||
</span>
|
||||
({{ $filters.number(alert.max, 1) }})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { padStart } from 'lodash';
|
||||
import { GlancesFavico } from '../services.js';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stats() {
|
||||
return this.data.stats['alert'];
|
||||
},
|
||||
alerts() {
|
||||
return (this.stats || []).map((alertalertStats) => {
|
||||
const alert = {};
|
||||
alert.name = alertalertStats[3];
|
||||
alert.level = alertalertStats[2];
|
||||
alert.begin = alertalertStats[0] * 1000;
|
||||
alert.end = alertalertStats[1] * 1000;
|
||||
alert.ongoing = alertalertStats[1] == -1;
|
||||
alert.min = alertalertStats[6];
|
||||
alert.mean = alertalertStats[5];
|
||||
alert.max = alertalertStats[4];
|
||||
|
||||
if (!alert.ongoing) {
|
||||
const duration = alert.end - alert.begin;
|
||||
const seconds = parseInt((duration / 1000) % 60),
|
||||
minutes = parseInt((duration / (1000 * 60)) % 60),
|
||||
hours = parseInt((duration / (1000 * 60 * 60)) % 24);
|
||||
|
||||
alert.duration =
|
||||
padStart(hours, 2, '0') +
|
||||
':' +
|
||||
padStart(minutes, 2, '0') +
|
||||
':' +
|
||||
padStart(seconds, 2, '0');
|
||||
}
|
||||
|
||||
return alert;
|
||||
});
|
||||
},
|
||||
hasAlerts() {
|
||||
return this.countAlerts > 0;
|
||||
},
|
||||
countAlerts() {
|
||||
return this.alerts.length;
|
||||
},
|
||||
hasOngoingAlerts() {
|
||||
return this.countOngoingAlerts > 0;
|
||||
},
|
||||
countOngoingAlerts() {
|
||||
return this.alerts.filter(({ ongoing }) => ongoing).length;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
countOngoingAlerts() {
|
||||
if (this.countOngoingAlerts) {
|
||||
GlancesFavico.badge(this.countOngoingAlerts);
|
||||
} else {
|
||||
GlancesFavico.reset();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatDate(date) {
|
||||
return new Date(date)
|
||||
.toISOString()
|
||||
.slice(0, 19)
|
||||
.replace(/[^\d-:]/, ' ');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesPluginAlertController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glancesPluginAlert", {
|
||||
controller: GlancesPluginAlertController,
|
||||
controllerAs: 'vm',
|
||||
templateUrl: template,
|
||||
});
|
||||
@ -1,64 +0,0 @@
|
||||
|
||||
export default function GlancesPluginAlertController($scope, favicoService) {
|
||||
var vm = this;
|
||||
var _alerts = [];
|
||||
|
||||
$scope.$on('data_refreshed', function (event, data) {
|
||||
var alertStats = data.stats['alert'];
|
||||
if (!_.isArray(alertStats)) {
|
||||
alertStats = [];
|
||||
}
|
||||
|
||||
_alerts = [];
|
||||
for (var i = 0; i < alertStats.length; i++) {
|
||||
var alertalertStats = alertStats[i];
|
||||
var alert = {};
|
||||
|
||||
alert.name = alertalertStats[3];
|
||||
alert.level = alertalertStats[2];
|
||||
alert.begin = alertalertStats[0] * 1000;
|
||||
alert.end = alertalertStats[1] * 1000;
|
||||
alert.ongoing = alertalertStats[1] == -1;
|
||||
alert.min = alertalertStats[6];
|
||||
alert.mean = alertalertStats[5];
|
||||
alert.max = alertalertStats[4];
|
||||
|
||||
if (!alert.ongoing) {
|
||||
var duration = alert.end - alert.begin;
|
||||
var seconds = parseInt((duration / 1000) % 60)
|
||||
, minutes = parseInt((duration / (1000 * 60)) % 60)
|
||||
, hours = parseInt((duration / (1000 * 60 * 60)) % 24);
|
||||
|
||||
alert.duration = _.padStart(hours, 2, '0') + ":" + _.padStart(minutes, 2, '0') + ":" + _.padStart(seconds, 2, '0');
|
||||
}
|
||||
|
||||
_alerts.push(alert);
|
||||
}
|
||||
|
||||
if (vm.hasOngoingAlerts()) {
|
||||
favicoService.badge(vm.countOngoingAlerts());
|
||||
} else {
|
||||
favicoService.reset();
|
||||
}
|
||||
});
|
||||
|
||||
vm.hasAlerts = function () {
|
||||
return _alerts.length > 0;
|
||||
};
|
||||
|
||||
vm.getAlerts = function () {
|
||||
return _alerts;
|
||||
};
|
||||
|
||||
vm.count = function () {
|
||||
return _alerts.length;
|
||||
};
|
||||
|
||||
vm.hasOngoingAlerts = function () {
|
||||
return _.filter(_alerts, {'ongoing': true}).length > 0;
|
||||
};
|
||||
|
||||
vm.countOngoingAlerts = function () {
|
||||
return _.filter(_alerts, {'ongoing': true}).length;
|
||||
}
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
<section id="alerts">
|
||||
<span class="title" ng-if="!vm.hasAlerts()">No warning or critical alert detected</span>
|
||||
<span class="title" ng-if="vm.hasAlerts()">Warning or critical alerts (last {{vm.count()}} entries)</span>
|
||||
</section>
|
||||
<section id="alert" class="plugin">
|
||||
<div class="table">
|
||||
<div class="table-row" ng-repeat="alert in vm.getAlerts()">
|
||||
<div class="table-cell text-left">
|
||||
{{alert.begin | date : 'yyyy-MM-dd H:mm:ss'}} ({{ alert.ongoing ? 'ongoing' : alert.duration }}) - <span
|
||||
ng-hide="alert.ongoing">{{alert.level}} on</span> <span class="{{ alert.level | lowercase }}">{{alert.name}}</span>
|
||||
({{alert.max| number:1 }})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
55
glances/outputs/static/js/components/plugin-amps.vue
Normal file
55
glances/outputs/static/js/components/plugin-amps.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<section id="amps" class="plugin">
|
||||
<div class="table">
|
||||
<div class="table-row" v-for="(process, processId) in processes" :key="processId">
|
||||
<div class="table-cell text-left" :class="getNameDecoration(process)">
|
||||
{{ process.name }}
|
||||
</div>
|
||||
<div class="table-cell text-left" v-if="process.regex">{{ process.count }}</div>
|
||||
<div
|
||||
class="table-cell text-left process-result"
|
||||
v-html="$filters.nl2br(process.result)"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stats() {
|
||||
return this.data.stats['amps'];
|
||||
},
|
||||
processes() {
|
||||
return this.stats.filter((process) => process.result !== null);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getNameDecoration(process) {
|
||||
const count = process.count;
|
||||
const countMin = process.countmin;
|
||||
const countMax = process.countmax;
|
||||
let decoration = 'ok';
|
||||
if (count > 0) {
|
||||
if (
|
||||
(countMin === null || count >= countMin) &&
|
||||
(countMax === null || count <= countMax)
|
||||
) {
|
||||
decoration = 'ok';
|
||||
} else {
|
||||
decoration = 'careful';
|
||||
}
|
||||
} else {
|
||||
decoration = countMin === null ? 'ok' : 'critical';
|
||||
}
|
||||
return decoration;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesPluginAmpsController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glancesPluginAmps", {
|
||||
controller: GlancesPluginAmpsController,
|
||||
controllerAs: 'vm',
|
||||
templateUrl: template,
|
||||
});
|
||||
@ -1,43 +0,0 @@
|
||||
|
||||
export default function GlancesPluginAmpsController($scope, GlancesStats, favicoService) {
|
||||
var vm = this;
|
||||
vm.processes = [];
|
||||
|
||||
vm.$onInit = function () {
|
||||
loadData(GlancesStats.getData());
|
||||
};
|
||||
|
||||
$scope.$on('data_refreshed', function (event, data) {
|
||||
loadData(data);
|
||||
});
|
||||
|
||||
var loadData = function (data) {
|
||||
var processes = data.stats['amps'];
|
||||
|
||||
vm.processes = [];
|
||||
angular.forEach(processes, function (process) {
|
||||
if (process.result !== null) {
|
||||
vm.processes.push(process);
|
||||
}
|
||||
}, this);
|
||||
};
|
||||
|
||||
vm.getNameDecoration = function (process) {
|
||||
var count = process.count;
|
||||
var countMin = process.countmin;
|
||||
var countMax = process.countmax;
|
||||
var decoration = "ok";
|
||||
|
||||
if (count > 0) {
|
||||
if ((countMin === null || count >= countMin) && (countMax === null || count <= countMax)) {
|
||||
decoration = 'ok';
|
||||
} else {
|
||||
decoration = 'careful';
|
||||
}
|
||||
} else {
|
||||
decoration = countMin === null ? 'ok' : 'critical';
|
||||
}
|
||||
|
||||
return decoration;
|
||||
}
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
<section id="amps" class="plugin">
|
||||
<div class="table">
|
||||
<div class="table-row" ng-repeat="process in vm.processes">
|
||||
<div class="table-cell text-left" ng-class="vm.getNameDecoration(process)">{{ process.name }}</div>
|
||||
<div class="table-cell text-left" ng-if="process.regex">{{ process.count }}</div>
|
||||
<div class="table-cell text-left process-result" ng-bind-html="process.result|nl2br"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
29
glances/outputs/static/js/components/plugin-cloud.vue
Normal file
29
glances/outputs/static/js/components/plugin-cloud.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<section id="cloud">
|
||||
<span class="title">{{ provider }}</span> {{ instance }}
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stats() {
|
||||
return this.data.stats['cloud'];
|
||||
},
|
||||
provider() {
|
||||
return this.stats['ami-id'] !== undefined ? 'AWS EC2' : null;
|
||||
},
|
||||
instance() {
|
||||
const { stats } = this;
|
||||
return this.stats['ami-id'] !== undefined
|
||||
? `${stats['instance-type']} instance ${stats['instance-id']} (${stats['reggion']})`
|
||||
: null;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesPluginCloudController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glancesPluginCloud", {
|
||||
controller: GlancesPluginCloudController,
|
||||
controllerAs: 'vm',
|
||||
templateUrl: template,
|
||||
});
|
||||
@ -1,24 +0,0 @@
|
||||
|
||||
export default function GlancesPluginCloudController($scope, GlancesStats) {
|
||||
var vm = this;
|
||||
|
||||
vm.provider = null;
|
||||
vm.instance = null;
|
||||
|
||||
vm.$onInit = function () {
|
||||
loadData(GlancesStats.getData());
|
||||
};
|
||||
|
||||
$scope.$on('data_refreshed', function (event, data) {
|
||||
loadData(data);
|
||||
});
|
||||
|
||||
var loadData = function (data) {
|
||||
var stats = data.stats['cloud'];
|
||||
|
||||
if (stats['ami-id'] !== undefined) {
|
||||
vm.provider = 'AWS EC2';
|
||||
vm.instance = stats['instance-type'] + ' instance ' + stats['instance-id'] + ' (' + stats['region'] + ')';
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
<section id="cloud">
|
||||
<span class="title">{{ vm.provider }}</span> {{ vm.instance }}
|
||||
</section>
|
||||
79
glances/outputs/static/js/components/plugin-connections.vue
Normal file
79
glances/outputs/static/js/components/plugin-connections.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<section>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left title">TCP CONNECTIONS</div>
|
||||
<div class="table-cell"></div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">Listen</div>
|
||||
<div class="table-cell"></div>
|
||||
<div class="table-cell">{{ listen }}</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">Initiated</div>
|
||||
<div class="table-cell"></div>
|
||||
<div class="table-cell">{{ initiated }}</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">Established</div>
|
||||
<div class="table-cell"></div>
|
||||
<div class="table-cell">{{ established }}</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">Terminated</div>
|
||||
<div class="table-cell"></div>
|
||||
<div class="table-cell">{{ terminated }}</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">Tracked</div>
|
||||
<div class="table-cell"></div>
|
||||
<div class="table-cell" :class="getDecoration('nf_conntrack_percent')">
|
||||
{{ tracked.count }}/{{ tracked.max }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stats() {
|
||||
return this.data.stats['connections'];
|
||||
},
|
||||
view() {
|
||||
return this.data.views['connections'];
|
||||
},
|
||||
listen() {
|
||||
return this.stats['LISTEN'];
|
||||
},
|
||||
initiated() {
|
||||
return this.stats['initiated'];
|
||||
},
|
||||
established() {
|
||||
return this.stats['ESTABLISHED'];
|
||||
},
|
||||
terminated() {
|
||||
return this.stats['terminated'];
|
||||
},
|
||||
tracked() {
|
||||
return {
|
||||
count: this.stats['nf_conntrack_count'],
|
||||
max: this.stats['nf_conntrack_max']
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDecoration(value) {
|
||||
if (this.view[value] === undefined) {
|
||||
return;
|
||||
}
|
||||
return this.view[value].decoration.toLowerCase();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesPluginConnectionsController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glancesPluginConnections", {
|
||||
controller: GlancesPluginConnectionsController,
|
||||
controllerAs: "vm",
|
||||
templateUrl: template,
|
||||
});
|
||||
@ -1,41 +0,0 @@
|
||||
|
||||
export default function GlancesPluginConnectionsController($scope, GlancesStats) {
|
||||
var vm = this;
|
||||
var _view = {};
|
||||
|
||||
vm.listen = null;
|
||||
vm.initiated = null;
|
||||
vm.established = null;
|
||||
vm.terminated = null;
|
||||
vm.tracked = null;
|
||||
|
||||
vm.$onInit = function () {
|
||||
loadData(GlancesStats.getData());
|
||||
};
|
||||
|
||||
$scope.$on('data_refreshed', function (event, data) {
|
||||
loadData(data);
|
||||
});
|
||||
|
||||
var loadData = function (data) {
|
||||
var stats = data.stats['connections'];
|
||||
_view = data.views['connections'];
|
||||
|
||||
vm.listen = stats['LISTEN'];
|
||||
vm.initiated = stats['initiated'];
|
||||
vm.established = stats['ESTABLISHED'];
|
||||
vm.terminated = stats['terminated'];
|
||||
vm.tracked = {
|
||||
count: stats['nf_conntrack_count'],
|
||||
max: stats['nf_conntrack_max'],
|
||||
};
|
||||
};
|
||||
|
||||
vm.getDecoration = function (value) {
|
||||
if (_view[value] === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
return _view[value].decoration.toLowerCase();
|
||||
};
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left title">TCP CONNECTIONS</div>
|
||||
<div class="table-cell"></div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">Listen</div>
|
||||
<div class="table-cell"></div>
|
||||
<div class="table-cell">{{vm.listen}}</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">Initiated</div>
|
||||
<div class="table-cell"></div>
|
||||
<div class="table-cell">{{vm.initiated}}</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">Established</div>
|
||||
<div class="table-cell"></div>
|
||||
<div class="table-cell">{{vm.established}}</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">Terminated</div>
|
||||
<div class="table-cell"></div>
|
||||
<div class="table-cell">{{vm.terminated}}</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">Tracked</div>
|
||||
<div class="table-cell"></div>
|
||||
<div class="table-cell" ng-class="vm.getDecoration('nf_conntrack_percent')">{{vm.tracked.count}}/{{vm.tracked.max}}</div>
|
||||
</div>
|
||||
|
||||
147
glances/outputs/static/js/components/plugin-cpu.vue
Normal file
147
glances/outputs/static/js/components/plugin-cpu.vue
Normal file
@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<section id="cpu" class="plugin">
|
||||
<div class="row">
|
||||
<div class="col-sm-24 col-md-12 col-lg-8">
|
||||
<div class="table">
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left title">CPU</div>
|
||||
<div class="table-cell">{{ total }}%</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">user:</div>
|
||||
<div class="table-cell" :class="getDecoration('user')">{{ user }}%</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">system:</div>
|
||||
<div class="table-cell" :class="getDecoration('system')">{{ system }}%</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">idle:</div>
|
||||
<div class="table-cell">{{ idle }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden-xs hidden-sm col-md-12 col-lg-8">
|
||||
<div class="table">
|
||||
<div class="table-row" v-show="nice != undefined">
|
||||
<div class="table-cell text-left">nice:</div>
|
||||
<div class="table-cell">{{ nice }}%</div>
|
||||
</div>
|
||||
<div class="table-row" v-show="irq != undefined">
|
||||
<div class="table-cell text-left">irq:</div>
|
||||
<div class="table-cell">{{ irq }}%</div>
|
||||
</div>
|
||||
<div class="table-row" v-show="iowait != undefined">
|
||||
<div class="table-cell text-left">iowait:</div>
|
||||
<div class="table-cell" :class="getDecoration('iowait')">{{ iowait }}%</div>
|
||||
</div>
|
||||
<div class="table-row" v-show="steal != undefined">
|
||||
<div class="table-cell text-left">steal:</div>
|
||||
<div class="table-cell" :class="getDecoration('steal')">{{ steal }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden-xs hidden-sm hidden-md col-lg-8">
|
||||
<div class="table">
|
||||
<div class="table-row" v-if="ctx_switches">
|
||||
<div class="table-cell text-left">ctx_sw:</div>
|
||||
<div class="table-cell" :class="getDecoration('ctx_switches')">
|
||||
{{ ctx_switches }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row" v-if="interrupts">
|
||||
<div class="table-cell text-left">inter:</div>
|
||||
<div class="table-cell">
|
||||
{{ interrupts }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row" v-if="soft_interrupts">
|
||||
<div class="table-cell text-left">sw_int:</div>
|
||||
<div class="table-cell">
|
||||
{{ soft_interrupts }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row" v-if="!isLinux && syscalls">
|
||||
<div class="table-cell text-left">syscal:</div>
|
||||
<div class="table-cell">
|
||||
{{ syscalls }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stats() {
|
||||
return this.data.stats['cpu'];
|
||||
},
|
||||
view() {
|
||||
return this.data.views['cpu'];
|
||||
},
|
||||
isLinux() {
|
||||
return this.data.isLinux;
|
||||
},
|
||||
total() {
|
||||
return this.stats.total;
|
||||
},
|
||||
user() {
|
||||
return this.stats.user;
|
||||
},
|
||||
system() {
|
||||
return this.stats.system;
|
||||
},
|
||||
idle() {
|
||||
return this.stats.idle;
|
||||
},
|
||||
nice() {
|
||||
return this.stats.nice;
|
||||
},
|
||||
irq() {
|
||||
return this.stats.irq;
|
||||
},
|
||||
iowait() {
|
||||
return this.stats.iowait;
|
||||
},
|
||||
steal() {
|
||||
return this.stats.steal;
|
||||
},
|
||||
ctx_switches() {
|
||||
const { stats } = this;
|
||||
return stats.ctx_switches
|
||||
? Math.floor(stats.ctx_switches / stats.time_since_update)
|
||||
: null;
|
||||
},
|
||||
interrupts() {
|
||||
const { stats } = this;
|
||||
return stats.interrupts ? Math.floor(stats.interrupts / stats.time_since_update) : null;
|
||||
},
|
||||
soft_interrupts() {
|
||||
const { stats } = this;
|
||||
return stats.soft_interrupts
|
||||
? Math.floor(stats.soft_interrupts / stats.time_since_update)
|
||||
: null;
|
||||
},
|
||||
syscalls() {
|
||||
const { stats } = this;
|
||||
return stats.syscalls ? Math.floor(stats.syscalls / stats.time_since_update) : null;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDecoration(value) {
|
||||
if (this.view[value] === undefined) {
|
||||
return;
|
||||
}
|
||||
return this.view[value].decoration.toLowerCase();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesPluginCpuController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glancesPluginCpu", {
|
||||
controller: GlancesPluginCpuController,
|
||||
controllerAs: 'vm',
|
||||
templateUrl: template,
|
||||
});
|
||||
@ -1,66 +0,0 @@
|
||||
|
||||
export default function GlancesPluginCpuController($scope, GlancesStats) {
|
||||
var vm = this;
|
||||
var _view = {};
|
||||
|
||||
vm.total = null;
|
||||
vm.user = null;
|
||||
vm.system = null;
|
||||
vm.idle = null;
|
||||
vm.nice = null;
|
||||
vm.irq = null;
|
||||
vm.iowait = null;
|
||||
vm.steal = null;
|
||||
vm.ctx_switches = null;
|
||||
vm.interrupts = null;
|
||||
vm.soft_interrupts = null;
|
||||
vm.syscalls = null;
|
||||
|
||||
vm.$onInit = function () {
|
||||
loadData(GlancesStats.getData());
|
||||
};
|
||||
|
||||
$scope.$on('data_refreshed', function (event, data) {
|
||||
loadData(data);
|
||||
});
|
||||
|
||||
var loadData = function (data) {
|
||||
var stats = data.stats['cpu'];
|
||||
_view = data.views['cpu'];
|
||||
|
||||
vm.isLinux = data.isLinux;
|
||||
|
||||
vm.total = stats.total;
|
||||
vm.user = stats.user;
|
||||
vm.system = stats.system;
|
||||
vm.idle = stats.idle;
|
||||
vm.nice = stats.nice;
|
||||
vm.irq = stats.irq;
|
||||
vm.iowait = stats.iowait;
|
||||
vm.steal = stats.steal;
|
||||
|
||||
if (stats.ctx_switches) {
|
||||
vm.ctx_switches = Math.floor(stats.ctx_switches / stats.time_since_update);
|
||||
}
|
||||
|
||||
if (stats.interrupts) {
|
||||
vm.interrupts = Math.floor(stats.interrupts / stats.time_since_update);
|
||||
}
|
||||
|
||||
if (stats.soft_interrupts) {
|
||||
vm.soft_interrupts = Math.floor(stats.soft_interrupts / stats.time_since_update);
|
||||
}
|
||||
|
||||
if (stats.syscalls) {
|
||||
vm.syscalls = Math.floor(stats.syscalls / stats.time_since_update);
|
||||
}
|
||||
}
|
||||
|
||||
vm.getDecoration = function (value) {
|
||||
if (_view[value] === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
return _view[value].decoration.toLowerCase();
|
||||
};
|
||||
}
|
||||
@ -1,84 +0,0 @@
|
||||
<section id="cpu" class="plugin">
|
||||
<div class="row">
|
||||
<div class="col-sm-24 col-md-12 col-lg-8">
|
||||
<div class="table">
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left title">CPU</div>
|
||||
<div class="table-cell">{{ vm.total }}%</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">user:</div>
|
||||
<div class="table-cell" ng-class="vm.getDecoration('user')">
|
||||
{{ vm.user }}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">system:</div>
|
||||
<div class="table-cell" ng-class="vm.getDecoration('system')">
|
||||
{{ vm.system }}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">idle:</div>
|
||||
<div class="table-cell">{{ vm.idle }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden-xs hidden-sm col-md-12 col-lg-8">
|
||||
<div class="table">
|
||||
<div class="table-row" ng-show="vm.nice != undefined">
|
||||
<div class="table-cell text-left">nice:</div>
|
||||
<div class="table-cell">
|
||||
{{ vm.nice }}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row" ng-show="vm.irq != undefined">
|
||||
<div class="table-cell text-left">irq:</div>
|
||||
<div class="table-cell">
|
||||
{{ vm.irq }}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row" ng-show="vm.iowait != undefined">
|
||||
<div class="table-cell text-left">iowait:</div>
|
||||
<div class="table-cell" ng-class="vm.getDecoration('iowait')">
|
||||
{{ vm.iowait }}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row" ng-show="vm.steal != undefined">
|
||||
<div class="table-cell text-left">steal:</div>
|
||||
<div class="table-cell" ng-class="vm.getDecoration('steal')">
|
||||
{{ vm.steal }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden-xs hidden-sm hidden-md col-lg-8">
|
||||
<div class="table">
|
||||
<div class="table-row" ng-if="vm.ctx_switches">
|
||||
<div class="table-cell text-left">ctx_sw:</div>
|
||||
<div class="table-cell" ng-class="vm.getDecoration('ctx_switches')">
|
||||
{{ vm.ctx_switches }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row" ng-if="vm.interrupts">
|
||||
<div class="table-cell text-left">inter:</div>
|
||||
<div class="table-cell">
|
||||
{{ vm.interrupts }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row" ng-if="vm.soft_interrupts">
|
||||
<div class="table-cell text-left">sw_int:</div>
|
||||
<div class="table-cell">
|
||||
{{ vm.soft_interrupts }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row" ng-if="!vm.isLinux && vm.syscalls">
|
||||
<div class="table-cell text-left">syscal:</div>
|
||||
<div class="table-cell">
|
||||
{{ vm.syscalls }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
73
glances/outputs/static/js/components/plugin-diskio.vue
Normal file
73
glances/outputs/static/js/components/plugin-diskio.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<section>
|
||||
<div class="table-row" v-if="disks.length > 0">
|
||||
<div class="table-cell text-left title">DISK I/O</div>
|
||||
<div class="table-cell" v-show="!args.diskio_iops">R/s</div>
|
||||
<div class="table-cell" v-show="!args.diskio_iops">W/s</div>
|
||||
<div class="table-cell" v-show="args.diskio_iops">IOR/s</div>
|
||||
<div class="table-cell" v-show="args.diskio_iops">IOW/s</div>
|
||||
</div>
|
||||
<div class="table-row" v-for="(disk, diskId) in disks" :key="diskId">
|
||||
<div class="table-cell text-left">
|
||||
{{ $filters.minSize(disk.alias ? disk.alias : disk.name, 32) }}
|
||||
</div>
|
||||
<div class="table-cell" v-show="!args.diskio_iops">
|
||||
{{ disk.bitrate.txps }}
|
||||
</div>
|
||||
<div class="table-cell" v-show="!args.diskio_iops">
|
||||
{{ disk.bitrate.rxps }}
|
||||
</div>
|
||||
<div class="table-cell" v-show="args.diskio_iops">
|
||||
{{ disk.count.txps }}
|
||||
</div>
|
||||
<div class="table-cell" v-show="args.diskio_iops">
|
||||
{{ disk.count.rxps }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { orderBy } from 'lodash';
|
||||
import { store } from '../store.js';
|
||||
import { bytes } from '../filters.js';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
store
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
args() {
|
||||
return this.store.args || {};
|
||||
},
|
||||
stats() {
|
||||
return this.data.stats['diskio'];
|
||||
},
|
||||
disks() {
|
||||
const disks = this.stats.map((diskioData) => {
|
||||
const timeSinceUpdate = diskioData['time_since_update'];
|
||||
return {
|
||||
name: diskioData['disk_name'],
|
||||
bitrate: {
|
||||
txps: bytes(diskioData['read_bytes'] / timeSinceUpdate),
|
||||
rxps: bytes(diskioData['write_bytes'] / timeSinceUpdate)
|
||||
},
|
||||
count: {
|
||||
txps: bytes(diskioData['read_count'] / timeSinceUpdate),
|
||||
rxps: bytes(diskioData['write_count'] / timeSinceUpdate)
|
||||
},
|
||||
alias: diskioData['alias'] !== undefined ? diskioData['alias'] : null
|
||||
};
|
||||
});
|
||||
return orderBy(disks, ['name']);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesPluginDiskioController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glancesPluginDiskio", {
|
||||
controller: GlancesPluginDiskioController,
|
||||
controllerAs: 'vm',
|
||||
templateUrl: template,
|
||||
});
|
||||
@ -1,36 +0,0 @@
|
||||
|
||||
export default function GlancesPluginDiskioController($scope, $filter, GlancesStats, ARGUMENTS) {
|
||||
var vm = this;
|
||||
vm.arguments = ARGUMENTS;
|
||||
vm.disks = [];
|
||||
|
||||
vm.$onInit = function () {
|
||||
loadData(GlancesStats.getData());
|
||||
};
|
||||
|
||||
$scope.$on('data_refreshed', function (event, data) {
|
||||
loadData(data);
|
||||
});
|
||||
|
||||
var loadData = function (data) {
|
||||
var stats = data.stats['diskio'] || [];
|
||||
stats = $filter('orderBy')(stats, 'disk_name');
|
||||
|
||||
vm.disks = stats.map(function(diskioData) {
|
||||
var timeSinceUpdate = diskioData['time_since_update'];
|
||||
|
||||
return {
|
||||
'name': diskioData['disk_name'],
|
||||
'bitrate': {
|
||||
'txps': $filter('bytes')(diskioData['read_bytes'] / timeSinceUpdate),
|
||||
'rxps': $filter('bytes')(diskioData['write_bytes'] / timeSinceUpdate)
|
||||
},
|
||||
'count': {
|
||||
'txps': $filter('bytes')(diskioData['read_count'] / timeSinceUpdate),
|
||||
'rxps': $filter('bytes')(diskioData['write_count'] / timeSinceUpdate)
|
||||
},
|
||||
'alias': diskioData['alias'] !== undefined ? diskioData['alias'] : null
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
<div class="table-row" ng-if="vm.disks.length > 0">
|
||||
<div class="table-cell text-left title">DISK I/O</div>
|
||||
<div class="table-cell" ng-show="!vm.arguments.diskio_iops">R/s</div>
|
||||
<div class="table-cell" ng-show="!vm.arguments.diskio_iops">W/s</div>
|
||||
|
||||
<div class="table-cell" ng-show="vm.arguments.diskio_iops">IOR/s</div>
|
||||
<div class="table-cell" ng-show="vm.arguments.diskio_iops">IOW/s</div>
|
||||
</div>
|
||||
<div class="table-row" ng-repeat="disk in vm.disks">
|
||||
<div class="table-cell text-left">{{ (disk.alias ? disk.alias : disk.name) | min_size:32 }}</div>
|
||||
<div class="table-cell" ng-show="!vm.arguments.diskio_iops">{{ disk.bitrate.txps }}</div>
|
||||
<div class="table-cell" ng-show="!vm.arguments.diskio_iops">{{ disk.bitrate.rxps }}</div>
|
||||
|
||||
<div class="table-cell" ng-show="vm.arguments.diskio_iops">{{ disk.count.txps }}</div>
|
||||
<div class="table-cell" ng-show="vm.arguments.diskio_iops">{{ disk.count.rxps }}</div>
|
||||
</div>
|
||||
98
glances/outputs/static/js/components/plugin-docker.vue
Normal file
98
glances/outputs/static/js/components/plugin-docker.vue
Normal file
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<section id="containers-plugin" class="plugin" v-if="containers.length">
|
||||
<span class="title">CONTAINERS</span>
|
||||
{{ containers.length }} (served by Docker {{ version }})
|
||||
<div class="table">
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">Name</div>
|
||||
<div class="table-cell">Status</div>
|
||||
<div class="table-cell">Uptime</div>
|
||||
<div class="table-cell">CPU%</div>
|
||||
<div class="table-cell">MEM</div>
|
||||
<div class="table-cell">RSS</div>
|
||||
<div class="table-cell">IOR/s</div>
|
||||
<div class="table-cell">IOW/s</div>
|
||||
<div class="table-cell">RX/s</div>
|
||||
<div class="table-cell">TX/s</div>
|
||||
<div class="table-cell text-left">Command</div>
|
||||
</div>
|
||||
<div
|
||||
class="table-row"
|
||||
v-for="(container, containerId) in containers"
|
||||
:key="containerId"
|
||||
>
|
||||
<div class="table-cell text-left">{{ container.name }}</div>
|
||||
<div class="table-cell" :class="container.status == 'Paused' ? 'careful' : 'ok'">
|
||||
{{ container.status }}
|
||||
</div>
|
||||
<div class="table-cell" :class="container.status == 'Paused' ? 'careful' : 'ok'">
|
||||
{{ container.uptime }}
|
||||
</div>
|
||||
<div class="table-cell">
|
||||
{{ $filters.number(container.cpu, 1) }}
|
||||
</div>
|
||||
<div class="table-cell">
|
||||
{{ $filters.bytes(container.memory) }}
|
||||
</div>
|
||||
<div class="table-cell">
|
||||
{{ $filters.bytes(container.rss) }}
|
||||
</div>
|
||||
<div class="table-cell">
|
||||
{{ $filters.bits(container.ior / container.io_time_since_update) }}
|
||||
</div>
|
||||
<div class="table-cell">
|
||||
{{ $filters.bits(container.iow / container.io_time_since_update) }}
|
||||
</div>
|
||||
<div class="table-cell">
|
||||
{{ $filters.bits(container.rx / container.net_time_since_update) }}
|
||||
</div>
|
||||
<div class="table-cell">
|
||||
{{ $filters.bits(container.tx / container.net_time_since_update) }}
|
||||
</div>
|
||||
<div class="table-cell text-left">
|
||||
{{ container.command }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stats() {
|
||||
return this.data.stats['docker'];
|
||||
},
|
||||
containers() {
|
||||
return (this.stats.containers || []).map((containerData) => {
|
||||
// prettier-ignore
|
||||
return {
|
||||
'id': containerData.Id,
|
||||
'name': containerData.name,
|
||||
'status': containerData.Status,
|
||||
'uptime': containerData.Uptime,
|
||||
'cpu': containerData.cpu.total,
|
||||
'memory': containerData.memory.usage != undefined ? containerData.memory.usage : '?',
|
||||
'rss': containerData.memory.rss != undefined ? containerData.memory.rss : '?',
|
||||
'ior': containerData.io.ior != undefined ? containerData.io.ior : '?',
|
||||
'iow': containerData.io.iow != undefined ? containerData.io.iow : '?',
|
||||
'io_time_since_update': containerData.io.time_since_update,
|
||||
'rx': containerData.network.rx != undefined ? containerData.network.rx : '?',
|
||||
'tx': containerData.network.tx != undefined ? containerData.network.tx : '?',
|
||||
'net_time_since_update': containerData.network.time_since_update,
|
||||
'command': containerData.Command,
|
||||
'image': containerData.Image
|
||||
};
|
||||
});
|
||||
},
|
||||
version() {
|
||||
return (this.stats['version'] || {})['Version'];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesPluginDockerController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glancesPluginDocker", {
|
||||
controller: GlancesPluginDockerController,
|
||||
controllerAs: "vm",
|
||||
templateUrl: template,
|
||||
});
|
||||
@ -1,45 +0,0 @@
|
||||
|
||||
export default function GlancesPluginDockerController($scope, GlancesStats) {
|
||||
var vm = this;
|
||||
vm.containers = [];
|
||||
vm.version = null;
|
||||
|
||||
var loadData = function (data) {
|
||||
var stats = data.stats['docker'];
|
||||
vm.containers = [];
|
||||
|
||||
if (_.isEmpty(stats) || _.isEmpty(stats['containers']) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
vm.containers = stats['containers'].map(function(containerData) {
|
||||
return {
|
||||
'id': containerData.Id,
|
||||
'name': containerData.name,
|
||||
'status': containerData.Status,
|
||||
'uptime': containerData.Uptime,
|
||||
'cpu': containerData.cpu.total,
|
||||
'memory': containerData.memory.usage != undefined ? containerData.memory.usage : '?',
|
||||
'rss': containerData.memory.rss != undefined ? containerData.memory.rss : '?',
|
||||
'ior': containerData.io.ior != undefined ? containerData.io.ior : '?',
|
||||
'iow': containerData.io.iow != undefined ? containerData.io.iow : '?',
|
||||
'io_time_since_update': containerData.io.time_since_update,
|
||||
'rx': containerData.network.rx != undefined ? containerData.network.rx : '?',
|
||||
'tx': containerData.network.tx != undefined ? containerData.network.tx : '?',
|
||||
'net_time_since_update': containerData.network.time_since_update,
|
||||
'command': containerData.Command,
|
||||
'image': containerData.Image
|
||||
};
|
||||
});
|
||||
|
||||
vm.version = stats['version']['Version'];
|
||||
}
|
||||
|
||||
vm.$onInit = function () {
|
||||
loadData(GlancesStats.getData());
|
||||
};
|
||||
|
||||
$scope.$on('data_refreshed', function (event, data) {
|
||||
loadData(data);
|
||||
});
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
<section id="containers-plugin" class="plugin" ng-if="vm.containers.length">
|
||||
<span class="title">CONTAINERS</span> {{ vm.containers.length }} (served by Docker {{ vm.version }})
|
||||
|
||||
<div class="table">
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">Name</div>
|
||||
<div class="table-cell">Status</div>
|
||||
<div class="table-cell">Uptime</div>
|
||||
<div class="table-cell">CPU%</div>
|
||||
<div class="table-cell">MEM</div>
|
||||
<div class="table-cell">RSS</div>
|
||||
<div class="table-cell">IOR/s</div>
|
||||
<div class="table-cell">IOW/s</div>
|
||||
<div class="table-cell">RX/s</div>
|
||||
<div class="table-cell">TX/s</div>
|
||||
<div class="table-cell text-left">Command</div>
|
||||
</div>
|
||||
<div class="table-row" ng-repeat="container in vm.containers track by container.id">
|
||||
<div class="table-cell text-left">{{ container.name }}</div>
|
||||
<div class="table-cell" ng-class="container.status == 'Paused' ? 'careful' : 'ok'">{{ container.status }}
|
||||
</div>
|
||||
<div class="table-cell" ng-class="container.status == 'Paused' ? 'careful' : 'ok'">{{ container.uptime }}
|
||||
</div>
|
||||
<div class="table-cell">{{ container.cpu | number:1 }}</div>
|
||||
<div class="table-cell">{{ container.memory | bytes }}</div>
|
||||
<div class="table-cell">{{ container.rss | bytes }}</div>
|
||||
<div class="table-cell">{{ container.ior / container.io_time_since_update | bits }}</div>
|
||||
<div class="table-cell">{{ container.iow / container.io_time_since_update | bits }}</div>
|
||||
<div class="table-cell">{{ container.rx / container.net_time_since_update | bits }}</div>
|
||||
<div class="table-cell">{{ container.tx / container.net_time_since_update | bits }}</div>
|
||||
<div class="table-cell text-left">{{ container.command }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
57
glances/outputs/static/js/components/plugin-folders.vue
Normal file
57
glances/outputs/static/js/components/plugin-folders.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<section>
|
||||
<div class="table-row" v-if="folders.length > 0">
|
||||
<div class="table-cell text-left title">FOLDERS</div>
|
||||
<div class="table-cell"></div>
|
||||
<div class="table-cell">Size</div>
|
||||
</div>
|
||||
<div class="table-row" v-for="(folder, folderId) in folders" :key="folderId">
|
||||
<div class="table-cell text-left">{{ folder.path }}</div>
|
||||
<div class="table-cell"></div>
|
||||
<div class="table-cell" :class="vm.getDecoration(folder)">
|
||||
{{ $filters.bytes(folder.size) }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stats() {
|
||||
return this.data.stats['folders'];
|
||||
},
|
||||
folders() {
|
||||
return this.stats.map((folderData) => {
|
||||
return {
|
||||
path: folderData['path'],
|
||||
size: folderData['size'],
|
||||
careful: folderData['careful'],
|
||||
warning: folderData['warning'],
|
||||
critical: folderData['critical']
|
||||
};
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDecoration(folder) {
|
||||
if (!Number.isInteger(folder.size)) {
|
||||
return;
|
||||
}
|
||||
if (folder.critical !== null && folder.size > folder.critical * 1000000) {
|
||||
return 'critical';
|
||||
} else if (folder.warning !== null && folder.size > folder.warning * 1000000) {
|
||||
return 'warning';
|
||||
} else if (folder.careful !== null && folder.size > folder.careful * 1000000) {
|
||||
return 'careful';
|
||||
}
|
||||
return 'ok';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesPluginFsController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glancesPluginFolders", {
|
||||
controller: GlancesPluginFsController,
|
||||
controllerAs: "vm",
|
||||
templateUrl: template,
|
||||
});
|
||||
@ -1,49 +0,0 @@
|
||||
|
||||
export default function GlancesPluginFoldersController($scope, GlancesStats) {
|
||||
var vm = this;
|
||||
vm.folders = [];
|
||||
|
||||
vm.$onInit = function () {
|
||||
loadData(GlancesStats.getData());
|
||||
};
|
||||
|
||||
$scope.$on('data_refreshed', function (event, data) {
|
||||
loadData(data);
|
||||
});
|
||||
|
||||
var loadData = function (data) {
|
||||
var stats = data.stats['folders'];
|
||||
vm.folders = [];
|
||||
|
||||
for (var i = 0; i < stats.length; i++) {
|
||||
var folderData = stats[i];
|
||||
|
||||
var folder = {
|
||||
'path': folderData['path'],
|
||||
'size': folderData['size'],
|
||||
'careful': folderData['careful'],
|
||||
'warning': folderData['warning'],
|
||||
'critical': folderData['critical']
|
||||
};
|
||||
|
||||
vm.folders.push(folder);
|
||||
}
|
||||
}
|
||||
|
||||
vm.getDecoration = function (folder) {
|
||||
|
||||
if (!Number.isInteger(folder.size)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (folder.critical !== null && folder.size > (folder.critical * 1000000)) {
|
||||
return 'critical';
|
||||
} else if (folder.warning !== null && folder.size > (folder.warning * 1000000)) {
|
||||
return 'warning';
|
||||
} else if (folder.careful !== null && folder.size > (folder.careful * 1000000)) {
|
||||
return 'careful';
|
||||
}
|
||||
|
||||
return 'ok';
|
||||
};
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
<div class="table-row" ng-if="vm.folders.length > 0">
|
||||
<div class="table-cell text-left title">FOLDERS</div>
|
||||
<div class="table-cell"></div>
|
||||
<div class="table-cell">Size</div>
|
||||
</div>
|
||||
<div class="table-row" ng-repeat="folder in vm.folders">
|
||||
<div class="table-cell text-left">{{ folder.path }}</div>
|
||||
<div class="table-cell"></div>
|
||||
<div class="table-cell" ng-class="vm.getDecoration(folder)">{{ folder.size | bytes }}</div>
|
||||
</div>
|
||||
84
glances/outputs/static/js/components/plugin-fs.vue
Normal file
84
glances/outputs/static/js/components/plugin-fs.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<section>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left title">FILE SYS</div>
|
||||
<div class="table-cell">
|
||||
<span v-show="!args.fs_free_space">Used</span>
|
||||
<span v-show="args.fs_free_space">Free</span>
|
||||
</div>
|
||||
<div class="table-cell">Total</div>
|
||||
</div>
|
||||
<div class="table-row" v-for="(fs, fsId) in fileSystems" :key="fsId">
|
||||
<div class="table-cell text-left">
|
||||
{{ fs.shortMountPoint }}
|
||||
<span v-if="fs.shortMountPoint.length <= 12" class="visible-lg-inline">
|
||||
({{ fs.name }})
|
||||
</span>
|
||||
</div>
|
||||
<div class="table-cell" :class="getDecoration(fs.mountPoint, 'used')">
|
||||
<span v-show="!args.fs_free_space">
|
||||
{{ $filters.bytes(fs.used) }}
|
||||
</span>
|
||||
<span v-show="args.fs_free_space">
|
||||
{{ $filters.bytes(fs.free) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="table-cell">{{ $filters.bytes(fs.size) }}</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { orderBy } from 'lodash';
|
||||
import { store } from '../store.js';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
store
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
args() {
|
||||
return this.store.args || {};
|
||||
},
|
||||
stats() {
|
||||
return this.data.stats['fs'];
|
||||
},
|
||||
view() {
|
||||
return this.data.views['fs'];
|
||||
},
|
||||
fileSystems() {
|
||||
const fileSystems = this.stats.map((fsData) => {
|
||||
let shortMountPoint = fsData['mnt_point'];
|
||||
if (shortMountPoint.length > 22) {
|
||||
shortMountPoint = '_' + fsData['mnt_point'].slice(-21);
|
||||
}
|
||||
return {
|
||||
name: fsData['device_name'],
|
||||
mountPoint: fsData['mnt_point'],
|
||||
shortMountPoint: shortMountPoint,
|
||||
percent: fsData['percent'],
|
||||
size: fsData['size'],
|
||||
used: fsData['used'],
|
||||
free: fsData['free']
|
||||
};
|
||||
});
|
||||
return orderBy(fileSystems, ['mnt_point']);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDecoration(mountPoint, field) {
|
||||
if (this.view[mountPoint][field] == undefined) {
|
||||
return;
|
||||
}
|
||||
return this.view[mountPoint][field].decoration.toLowerCase();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesPluginFsController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glancesPluginFs", {
|
||||
controller: GlancesPluginFsController,
|
||||
controllerAs: 'vm',
|
||||
templateUrl: template,
|
||||
});
|
||||
@ -1,50 +0,0 @@
|
||||
|
||||
export default function GlancesPluginFsController($scope, $filter, GlancesStats, ARGUMENTS) {
|
||||
var vm = this;
|
||||
var _view = {};
|
||||
vm.arguments = ARGUMENTS;
|
||||
vm.fileSystems = [];
|
||||
|
||||
vm.$onInit = function () {
|
||||
loadData(GlancesStats.getData());
|
||||
};
|
||||
|
||||
$scope.$on('data_refreshed', function (event, data) {
|
||||
loadData(data);
|
||||
});
|
||||
|
||||
var loadData = function (data) {
|
||||
var stats = data.stats['fs'];
|
||||
_view = data.views['fs'];
|
||||
|
||||
vm.fileSystems = [];
|
||||
for (var i = 0; i < stats.length; i++) {
|
||||
var fsData = stats[i];
|
||||
|
||||
var shortMountPoint = fsData['mnt_point'];
|
||||
if (shortMountPoint.length > 22) {
|
||||
shortMountPoint = '_' + fsData['mnt_point'].slice(-21);
|
||||
}
|
||||
|
||||
vm.fileSystems.push({
|
||||
'name': fsData['device_name'],
|
||||
'mountPoint': fsData['mnt_point'],
|
||||
'shortMountPoint': shortMountPoint,
|
||||
'percent': fsData['percent'],
|
||||
'size': fsData['size'],
|
||||
'used': fsData['used'],
|
||||
'free': fsData['free']
|
||||
});
|
||||
}
|
||||
|
||||
vm.fileSystems = $filter('orderBy')(vm.fileSystems, 'mnt_point');
|
||||
};
|
||||
|
||||
vm.getDecoration = function (mountPoint, field) {
|
||||
if (_view[mountPoint][field] == undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
return _view[mountPoint][field].decoration.toLowerCase();
|
||||
};
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left title">FILE SYS</div>
|
||||
<div class="table-cell">
|
||||
<span ng-show="!vm.arguments.fs_free_space">Used</span>
|
||||
<span ng-show="vm.arguments.fs_free_space">Free</span>
|
||||
</div>
|
||||
<div class="table-cell">Total</div>
|
||||
</div>
|
||||
<div class="table-row" ng-repeat="fs in vm.fileSystems">
|
||||
<div class="table-cell text-left">{{ fs.shortMountPoint }}
|
||||
<span class="visible-lg-inline" ng-show="fs.shortMountPoint <= 12">({{ fs.name }})</span>
|
||||
</div>
|
||||
<div class="table-cell" ng-class="vm.getDecoration(fs.mountPoint, 'used')">
|
||||
<span ng-show="!vm.arguments.fs_free_space">{{ fs.used | bytes }}</span>
|
||||
<span ng-show="vm.arguments.fs_free_space">{{ fs.free | bytes }}</span>
|
||||
</div>
|
||||
<div class="table-cell">{{ fs.size | bytes }}</div>
|
||||
</div>
|
||||
131
glances/outputs/static/js/components/plugin-gpu.vue
Normal file
131
glances/outputs/static/js/components/plugin-gpu.vue
Normal file
@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<section id="gpu" class="plugin">
|
||||
<div class="gpu-name title">
|
||||
{{ name }}
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table-row" v-if="args.meangpu || gpus.length === 1">
|
||||
<div class="table-cell text-left">proc:</div>
|
||||
<div class="table-cell" :class="getMeanDecoration('proc')" v-if="mean.proc != null">
|
||||
{{ $filters.number(mean.proc, 0) }}%
|
||||
</div>
|
||||
<div class="table-cell" v-if="mean.proc == null">N/A</div>
|
||||
</div>
|
||||
<div class="table-row" v-if="args.meangpu || gpus.length === 1">
|
||||
<div class="table-cell text-left">mem:</div>
|
||||
<div class="table-cell" :class="getMeanDecoration('mem')" v-if="mean.mem != null">
|
||||
{{ $filters.number(mean.mem, 0) }}%
|
||||
</div>
|
||||
<div class="table-cell" v-if="mean.mem == null">N/A</div>
|
||||
</div>
|
||||
<div class="table-row" v-if="args.meangpu || gpus.length === 1">
|
||||
<div class="table-cell text-left">temperature::</div>
|
||||
<div
|
||||
class="table-cell"
|
||||
:class="getMeanDecoration('temperature')"
|
||||
v-if="mean.temperature != null"
|
||||
>
|
||||
{{ $filters.number(mean.temperature, 0) }}°
|
||||
</div>
|
||||
<div class="table-cell" v-if="mean.temperature == null">N/A</div>
|
||||
</div>
|
||||
<template v-if="!args.meangpu && gpus.length > 1">
|
||||
<div class="table-row" v-for="(gpu, gpuId) in gpus" :key="gpuId">
|
||||
<div class="table-cell text-left">
|
||||
{{ gpu.gpu_id }}:
|
||||
<span :class="getDecoration(gpu.gpu_id, 'proc')" v-if="gpu.proc != null">
|
||||
{{ $filters.number(gpu.proc, 0) }}%
|
||||
</span>
|
||||
<span v-if="gpu.proc == null">N/A</span>
|
||||
mem:
|
||||
<span :class="getDecoration(gpu.gpu_id, 'mem')" v-if="gpu.mem != null">
|
||||
{{ $filters.number(gpu.mem, 0) }}%
|
||||
</span>
|
||||
<span v-if="gpu.mem == null">N/A</span>
|
||||
temp:
|
||||
<span
|
||||
:class="getDecoration(gpu.gpu_id, 'temperature')"
|
||||
v-if="gpu.temperature != null"
|
||||
>
|
||||
{{ $filters.number(gpu.temperature, 0) }}C
|
||||
</span>
|
||||
<span v-if="gpu.temperature == null">N/A</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { store } from '../store.js';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
store
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
args() {
|
||||
return this.store.args || {};
|
||||
},
|
||||
stats() {
|
||||
return this.data.stats['gpu'];
|
||||
},
|
||||
view() {
|
||||
return this.data.views['gpu'];
|
||||
},
|
||||
gpus() {
|
||||
return this.stats;
|
||||
},
|
||||
name() {
|
||||
let name = 'GPU';
|
||||
const sameName = true;
|
||||
const { stats } = this;
|
||||
if (stats.length === 1) {
|
||||
name = stats[0].name;
|
||||
} else if (stats.length && sameName) {
|
||||
name = `${stats.length} GPU ${stats[0].name}`;
|
||||
}
|
||||
return name;
|
||||
},
|
||||
mean() {
|
||||
const mean = {
|
||||
proc: null,
|
||||
mem: null,
|
||||
temperature: null
|
||||
};
|
||||
const { stats } = this;
|
||||
if (!stats.length) {
|
||||
return mean;
|
||||
}
|
||||
for (let gpu of stats) {
|
||||
mean.proc += gpu.proc;
|
||||
mean.mem += gpu.mem;
|
||||
mean.temperature += gpu.temperature;
|
||||
}
|
||||
mean.proc = mean.proc / stats.length;
|
||||
mean.mem = mean.mem / stats.length;
|
||||
mean.temperature = mean.temperature / stats.length;
|
||||
return mean;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDecoration(gpuId, value) {
|
||||
if (this.view[gpuId][value] === undefined) {
|
||||
return;
|
||||
}
|
||||
return this.view[gpuId][value].decoration.toLowerCase();
|
||||
},
|
||||
getMeanDecoration(value) {
|
||||
return this.getDecoration(0, value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesPluginGpuController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glancesPluginGpu", {
|
||||
controller: GlancesPluginGpuController,
|
||||
controllerAs: "vm",
|
||||
templateUrl: template,
|
||||
});
|
||||
@ -1,69 +0,0 @@
|
||||
|
||||
export default function GlancesPluginGpuController($scope, GlancesStats, ARGUMENTS) {
|
||||
var vm = this;
|
||||
vm.arguments = ARGUMENTS;
|
||||
var _view = {};
|
||||
vm.gpus = [];
|
||||
vm.name = "GPU";
|
||||
vm.mean = {};
|
||||
|
||||
vm.$onInit = function () {
|
||||
loadData(GlancesStats.getData());
|
||||
};
|
||||
|
||||
$scope.$on('data_refreshed', function (event, data) {
|
||||
loadData(data);
|
||||
});
|
||||
|
||||
var loadData = function (data) {
|
||||
var stats = data.stats['gpu'];
|
||||
_view = data.views['gpu'];
|
||||
|
||||
if (stats.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
vm.gpus = [];
|
||||
vm.name = "GPU";
|
||||
vm.mean = {
|
||||
proc: null,
|
||||
mem: null,
|
||||
temperature: null
|
||||
};
|
||||
var sameName = true;
|
||||
|
||||
for (var i = 0; i < stats.length; i++) {
|
||||
var gpuData = stats[i];
|
||||
|
||||
var gpu = gpuData;
|
||||
|
||||
vm.mean.proc += gpu.proc;
|
||||
vm.mean.mem += gpu.mem;
|
||||
vm.mean.temperature += gpu.temperature;
|
||||
|
||||
vm.gpus.push(gpu);
|
||||
}
|
||||
|
||||
if (stats.length === 1) {
|
||||
vm.name = stats[0].name;
|
||||
} else if (sameName) {
|
||||
vm.name = stats.length + ' GPU ' + stats[0].name;
|
||||
}
|
||||
|
||||
vm.mean.proc = vm.mean.proc / stats.length;
|
||||
vm.mean.mem = vm.mean.mem / stats.length;
|
||||
vm.mean.temperature = vm.mean.temperature / stats.length;
|
||||
}
|
||||
|
||||
vm.getDecoration = function (gpuId, value) {
|
||||
if (_view[gpuId][value] == undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
return _view[gpuId][value].decoration.toLowerCase();
|
||||
};
|
||||
|
||||
vm.getMeanDecoration = function (value) {
|
||||
return vm.getDecoration(0, value);
|
||||
};
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
<section id="gpu" class="plugin">
|
||||
<div class="gpu-name title">
|
||||
{{ vm.name }}
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table-row" ng-if="arguments.meangpu || vm.gpus.length === 1">
|
||||
<div class="table-cell text-left">proc:</div>
|
||||
<div class="table-cell" ng-class="vm.getMeanDecoration('proc')" ng-if="vm.mean.proc != null">{{ vm.mean.proc |
|
||||
number : 0 }}%
|
||||
</div>
|
||||
<div class="table-cell" ng-if="vm.mean.proc == null">N/A</div>
|
||||
</div>
|
||||
<div class="table-row" ng-if="arguments.meangpu || vm.gpus.length === 1">
|
||||
<div class="table-cell text-left">mem:</div>
|
||||
<div class="table-cell" ng-class="vm.getMeanDecoration('mem')" ng-if="vm.mean.mem != null">{{ vm.mean.mem | number :
|
||||
0 }}%
|
||||
</div>
|
||||
<div class="table-cell" ng-if="vm.mean.mem == null">N/A</div>
|
||||
</div>
|
||||
<div class="table-row" ng-if="arguments.meangpu || vm.gpus.length === 1">
|
||||
<div class="table-cell text-left">temperature::</div>
|
||||
<div class="table-cell" ng-class="vm.getMeanDecoration('temperature')" ng-if="vm.mean.temperature != null">{{ vm.mean.temperature | number
|
||||
:
|
||||
0 }}°
|
||||
</div>
|
||||
<div class="table-cell" ng-if="vm.mean.temperature == null">N/A</div>
|
||||
</div>
|
||||
<div class="table-row" ng-if="!arguments.meangpu && vm.gpus.length > 1" ng-repeat="gpu in vm.gpus">
|
||||
<div class="table-cell text-left">
|
||||
{{ gpu.gpu_id }}:
|
||||
<span ng-class="vm.getDecoration(gpu.gpu_id, 'proc')" ng-if="gpu.proc != null">{{ gpu.proc | number : 0 }}%</span>
|
||||
<span ng-if="gpu.proc == null">N/A</span>
|
||||
mem:
|
||||
<span ng-class="vm.getDecoration(gpu.gpu_id, 'mem')" ng-if="gpu.mem != null">{{ gpu.mem | number : 0 }}%</span>
|
||||
<span ng-if="gpu.mem == null">N/A</span>
|
||||
temp:
|
||||
<span ng-class="vm.getDecoration(gpu.gpu_id, 'temperature')" ng-if="gpu.temperature != null">{{ gpu.temperature | number : 0 }}C</span>
|
||||
<span ng-if="gpu.temperature == null">N/A</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
43
glances/outputs/static/js/components/plugin-ip.vue
Normal file
43
glances/outputs/static/js/components/plugin-ip.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<section id="ip" v-if="address != undefined">
|
||||
-
|
||||
<span v-if="address != undefined" class="title">IP</span>
|
||||
<span v-if="address != undefined">{{ address }}/{{ maskCidr }}</span>
|
||||
<span v-if="publicAddress" class="title">Pub</span>
|
||||
<span v-if="publicAddress">{{ publicAddress }}</span>
|
||||
<span v-if="publicInfo">({{ publicInfo }})</span>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
ipStats() {
|
||||
return this.data.stats['ip'];
|
||||
},
|
||||
address() {
|
||||
return this.ipStats.address;
|
||||
},
|
||||
gateway() {
|
||||
return this.ipStats.gateway;
|
||||
},
|
||||
mask() {
|
||||
return this.ipStats.mask;
|
||||
},
|
||||
maskCdir() {
|
||||
return this.ipStats.mask_cidr;
|
||||
},
|
||||
publicAddress() {
|
||||
return this.ipStats.public_address;
|
||||
},
|
||||
publicInfo() {
|
||||
return this.ipStats.public_info_human;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesPluginIpController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glancesPluginIp", {
|
||||
controller: GlancesPluginIpController,
|
||||
controllerAs: "vm",
|
||||
templateUrl: template,
|
||||
});
|
||||
@ -1,30 +0,0 @@
|
||||
|
||||
export default function GlancesPluginIpController($scope, GlancesStats, ARGUMENTS) {
|
||||
var vm = this;
|
||||
vm.arguments = ARGUMENTS;
|
||||
|
||||
vm.address = null;
|
||||
vm.gateway = null;
|
||||
vm.mask = null;
|
||||
vm.maskCidr = null;
|
||||
vm.publicAddress = null;
|
||||
|
||||
vm.$onInit = function () {
|
||||
loadData(GlancesStats.getData());
|
||||
};
|
||||
|
||||
$scope.$on('data_refreshed', function (event, data) {
|
||||
loadData(data);
|
||||
});
|
||||
|
||||
var loadData = function (data) {
|
||||
var ipStats = data.stats['ip'];
|
||||
|
||||
vm.address = ipStats.address;
|
||||
vm.gateway = ipStats.gateway;
|
||||
vm.mask = ipStats.mask;
|
||||
vm.maskCidr = ipStats.mask_cidr;
|
||||
vm.publicAddress = ipStats.public_address
|
||||
vm.publicInfo = ipStats.public_info_human
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
<section id="ip" ng-if="vm.address != undefined && !vm.arguments.disable_ip">
|
||||
-
|
||||
<span ng-if="vm.address != undefined" class="title">IP</span>
|
||||
<spanng-if="vm.address != undefined">{{ vm.address }}/{{ vm.maskCidr }}</span>
|
||||
<span ng-if="vm.publicAddress" class="title">Pub</span>
|
||||
<span ng-if="vm.publicAddress">{{ vm.publicAddress }}</span>
|
||||
<span ng-if="vm.publicInfo">({{ vm.publicInfo }})</span>
|
||||
</section>
|
||||
39
glances/outputs/static/js/components/plugin-irq.vue
Normal file
39
glances/outputs/static/js/components/plugin-irq.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<section>
|
||||
<div class="table-row" v-if="irqs.length > 0">
|
||||
<div class="table-cell text-left title">IRQ</div>
|
||||
<div class="table-cell"></div>
|
||||
<div class="table-cell">Rate/s</div>
|
||||
</div>
|
||||
<div class="table-row" v-for="(irq, irqId) in irqs" :key="irqId">
|
||||
<div class="table-cell text-left">{{ irq.irq_line }}</div>
|
||||
<div class="table-cell"></div>
|
||||
<div class="table-cell">
|
||||
<span>{{ irq.irq_rate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stats() {
|
||||
return this.data.stats['irq'];
|
||||
},
|
||||
irqs() {
|
||||
return this.stats.map((IrqData) => {
|
||||
return {
|
||||
irq_line: IrqData['irq_line'],
|
||||
irq_rate: IrqData['irq_rate']
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesPluginIrqController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glancesPluginIrq", {
|
||||
controller: GlancesPluginIrqController,
|
||||
controllerAs: "vm",
|
||||
templateUrl: template,
|
||||
});
|
||||
@ -1,29 +0,0 @@
|
||||
|
||||
export default function GlancesPluginIrqController($scope, GlancesStats) {
|
||||
var vm = this;
|
||||
vm.irqs = [];
|
||||
|
||||
vm.$onInit = function () {
|
||||
loadData(GlancesStats.getData());
|
||||
};
|
||||
|
||||
$scope.$on('data_refreshed', function (event, data) {
|
||||
loadData(data);
|
||||
});
|
||||
|
||||
var loadData = function (data) {
|
||||
var stats = data.stats['irq'];
|
||||
vm.irqs = [];
|
||||
|
||||
for (var i = 0; i < stats.length; i++) {
|
||||
var IrqData = stats[i];
|
||||
|
||||
var irq = {
|
||||
'irq_line': IrqData['irq_line'],
|
||||
'irq_rate': IrqData['irq_rate']
|
||||
};
|
||||
|
||||
vm.irqs.push(irq);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
<div class="table-row" ng-if="vm.irqs.length > 0">
|
||||
<div class="table-cell text-left title">IRQ</div>
|
||||
<div class="table-cell"></div>
|
||||
<div class="table-cell">Rate/s</div>
|
||||
</div>
|
||||
<div class="table-row" ng-repeat="irq in vm.irqs">
|
||||
<div class="table-cell text-left">{{irq.irq_line}}</div>
|
||||
<div class="table-cell"></div>
|
||||
<div class="table-cell"><span>{{irq.irq_rate}}</span></div>
|
||||
</div>
|
||||
66
glances/outputs/static/js/components/plugin-load.vue
Normal file
66
glances/outputs/static/js/components/plugin-load.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<section id="load" class="plugin" v-if="cpucore != undefined">
|
||||
<div class="table">
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left title">LOAD</div>
|
||||
<div class="table-cell">{{ cpucore }}-core</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">1 min:</div>
|
||||
<div class="table-cell">
|
||||
{{ $filters.number(min1, 2) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">5 min:</div>
|
||||
<div class="table-cell" :class="getDecoration('min5')">
|
||||
{{ $filters.number(min5, 2) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">15 min:</div>
|
||||
<div class="table-cell" :class="getDecoration('min15')">
|
||||
{{ $filters.number(min15, 2) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stats() {
|
||||
return this.data.stats['load'];
|
||||
},
|
||||
view() {
|
||||
return this.data.views['load'];
|
||||
},
|
||||
cpucore() {
|
||||
return this.stats['cpucore'];
|
||||
},
|
||||
min1() {
|
||||
return this.stats['min1'];
|
||||
},
|
||||
min5() {
|
||||
return this.stats['min5'];
|
||||
},
|
||||
min15() {
|
||||
return this.stats['min15'];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDecoration(value) {
|
||||
if (this.view[value] === undefined) {
|
||||
return;
|
||||
}
|
||||
return this.view[value].decoration.toLowerCase();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesPluginLoadController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glancesPluginLoad", {
|
||||
controller: GlancesPluginLoadController,
|
||||
controllerAs: "vm",
|
||||
templateUrl: template,
|
||||
});
|
||||
@ -1,36 +0,0 @@
|
||||
|
||||
export default function GlancesPluginLoadController($scope, GlancesStats) {
|
||||
var vm = this;
|
||||
var _view = {};
|
||||
|
||||
vm.cpucore = null;
|
||||
vm.min1 = null;
|
||||
vm.min5 = null;
|
||||
vm.min15 = null;
|
||||
|
||||
vm.$onInit = function () {
|
||||
loadData(GlancesStats.getData());
|
||||
};
|
||||
|
||||
$scope.$on('data_refreshed', function (event, data) {
|
||||
loadData(data);
|
||||
});
|
||||
|
||||
var loadData = function (data) {
|
||||
var stats = data.stats['load'];
|
||||
_view = data.views['load'];
|
||||
|
||||
vm.cpucore = stats['cpucore'];
|
||||
vm.min1 = stats['min1'];
|
||||
vm.min5 = stats['min5'];
|
||||
vm.min15 = stats['min15'];
|
||||
};
|
||||
|
||||
vm.getDecoration = function (value) {
|
||||
if (_view[value] === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
return _view[value].decoration.toLowerCase();
|
||||
};
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
<section id="load" class="plugin" ng-if="vm.cpucore != undefined">
|
||||
<div class="table">
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left title">LOAD</div>
|
||||
<div class="table-cell">{{ vm.cpucore }}-core</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">1 min:</div>
|
||||
<div class="table-cell">
|
||||
{{ vm.min1 | number : 2}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">5 min:</div>
|
||||
<div class="table-cell" ng-class="vm.getDecoration('min5')">
|
||||
{{ vm.min5 | number : 2}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">15 min:</div>
|
||||
<div class="table-cell" ng-class="vm.getDecoration('min15')">
|
||||
{{ vm.min15 | number : 2}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
49
glances/outputs/static/js/components/plugin-mem-more.vue
Normal file
49
glances/outputs/static/js/components/plugin-mem-more.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<section id="mem-more" class="plugin">
|
||||
<div class="table">
|
||||
<div class="table-row" v-show="active != undefined">
|
||||
<div class="table-cell text-left">active:</div>
|
||||
<div class="table-cell">{{ $filters.bytes(active) }}</div>
|
||||
</div>
|
||||
<div class="table-row" v-show="inactive != undefined">
|
||||
<div class="table-cell text-left">inactive:</div>
|
||||
<div class="table-cell">{{ $filters.bytes(inactive) }}</div>
|
||||
</div>
|
||||
<div class="table-row" v-show="buffers != undefined">
|
||||
<div class="table-cell text-left">buffers:</div>
|
||||
<div class="table-cell">{{ $filters.bytes(buffers) }}</div>
|
||||
</div>
|
||||
<div class="table-row" v-show="cached != undefined">
|
||||
<div class="table-cell text-left">cached:</div>
|
||||
<div class="table-cell">{{ $filters.bytes(cached) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stats() {
|
||||
return this.data.stats['mem'];
|
||||
},
|
||||
active() {
|
||||
return this.stats['active'];
|
||||
},
|
||||
inactive() {
|
||||
return this.stats['inactive'];
|
||||
},
|
||||
buffers() {
|
||||
return this.stats['buffers'];
|
||||
},
|
||||
cached() {
|
||||
return this.stats['cached'];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesPluginMemMoreController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glancesPluginMemMore", {
|
||||
controller: GlancesPluginMemMoreController,
|
||||
controllerAs: "vm",
|
||||
templateUrl: template,
|
||||
});
|
||||
@ -1,26 +0,0 @@
|
||||
|
||||
export default function GlancesPluginMemMoreController($scope, GlancesStats) {
|
||||
var vm = this;
|
||||
|
||||
vm.active = null;
|
||||
vm.inactive = null;
|
||||
vm.buffers = null;
|
||||
vm.cached = null;
|
||||
|
||||
vm.$onInit = function () {
|
||||
loadData(GlancesStats.getData());
|
||||
};
|
||||
|
||||
$scope.$on('data_refreshed', function (event, data) {
|
||||
loadData(data);
|
||||
});
|
||||
|
||||
var loadData = function (data) {
|
||||
var stats = data.stats['mem'];
|
||||
|
||||
vm.active = stats['active'];
|
||||
vm.inactive = stats['inactive'];
|
||||
vm.buffers = stats['buffers'];
|
||||
vm.cached = stats['cached'];
|
||||
}
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
<section id="mem-more" class="plugin">
|
||||
<div class="table">
|
||||
<div class="table-row" ng-show="vm.active != undefined">
|
||||
<div class="table-cell text-left">active:</div>
|
||||
<div class="table-cell">{{ vm.active | bytes }}</div>
|
||||
</div>
|
||||
<div class="table-row" ng-show="vm.inactive != undefined">
|
||||
<div class="table-cell text-left">inactive:</div>
|
||||
<div class="table-cell">{{ vm.inactive | bytes }}</div>
|
||||
</div>
|
||||
<div class="table-row" ng-show="vm.buffers != undefined">
|
||||
<div class="table-cell text-left">buffers:</div>
|
||||
<div class="table-cell">{{ vm.buffers | bytes }}</div>
|
||||
</div>
|
||||
<div class="table-row" ng-show="vm.cached != undefined">
|
||||
<div class="table-cell text-left">cached:</div>
|
||||
<div class="table-cell">{{ vm.cached | bytes }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
62
glances/outputs/static/js/components/plugin-mem.vue
Normal file
62
glances/outputs/static/js/components/plugin-mem.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<section id="mem" class="plugin">
|
||||
<div class="table">
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left title">MEM</div>
|
||||
<div class="table-cell">{{ percent }}%</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">total:</div>
|
||||
<div class="table-cell">{{ $filters.bytes(total) }}</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">used:</div>
|
||||
<div class="table-cell" :class="getDecoration('used')">
|
||||
{{ $filters.bytes(used, 2) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">free:</div>
|
||||
<div class="table-cell">{{ $filters.bytes(free) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stats() {
|
||||
return this.data.stats['mem'];
|
||||
},
|
||||
view() {
|
||||
return this.data.views['mem'];
|
||||
},
|
||||
percent() {
|
||||
return this.stats['percent'];
|
||||
},
|
||||
total() {
|
||||
return this.stats['total'];
|
||||
},
|
||||
used() {
|
||||
return this.stats['used'];
|
||||
},
|
||||
free() {
|
||||
return this.stats['free'];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDecoration(value) {
|
||||
if (this.view[value] === undefined) {
|
||||
return;
|
||||
}
|
||||
return this.view[value].decoration.toLowerCase();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesPluginMemController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glancesPluginMem", {
|
||||
controller: GlancesPluginMemController,
|
||||
controllerAs: "vm",
|
||||
templateUrl: template,
|
||||
});
|
||||
@ -1,36 +0,0 @@
|
||||
|
||||
export default function GlancesPluginMemController($scope, GlancesStats) {
|
||||
var vm = this;
|
||||
var _view = {};
|
||||
|
||||
vm.percent = null;
|
||||
vm.total = null;
|
||||
vm.used = null;
|
||||
vm.free = null;
|
||||
|
||||
vm.$onInit = function () {
|
||||
loadData(GlancesStats.getData());
|
||||
};
|
||||
|
||||
$scope.$on('data_refreshed', function (event, data) {
|
||||
loadData(data);
|
||||
});
|
||||
|
||||
var loadData = function (data) {
|
||||
var stats = data.stats['mem'];
|
||||
_view = data.views['mem'];
|
||||
|
||||
vm.percent = stats['percent'];
|
||||
vm.total = stats['total'];
|
||||
vm.used = stats['used'];
|
||||
vm.free = stats['free'];
|
||||
}
|
||||
|
||||
vm.getDecoration = function (value) {
|
||||
if (_view[value] === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
return _view[value].decoration.toLowerCase();
|
||||
};
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
<section id="mem" class="plugin">
|
||||
<div class="table">
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left title">MEM</div>
|
||||
<div class="table-cell">{{ vm.percent }}%</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">total:</div>
|
||||
<div class="table-cell">{{ vm.total | bytes }}</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">used:</div>
|
||||
<div class="table-cell" ng-class="vm.getDecoration('used')">
|
||||
{{ vm.used | bytes:2 }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">free:</div>
|
||||
<div class="table-cell">{{ vm.free | bytes }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
62
glances/outputs/static/js/components/plugin-memswap.vue
Normal file
62
glances/outputs/static/js/components/plugin-memswap.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<section id="memswap" class="plugin">
|
||||
<div class="table">
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left title">SWAP</div>
|
||||
<div class="table-cell">{{ percent }}%</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">total:</div>
|
||||
<div class="table-cell">{{ $filters.bytes(total) }}</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">used:</div>
|
||||
<div class="table-cell" :class="getDecoration('used')">
|
||||
{{ $filters.bytes(used) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">free:</div>
|
||||
<div class="table-cell">{{ $filters.bytes(free) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stats() {
|
||||
return this.data.stats['memswap'];
|
||||
},
|
||||
view() {
|
||||
return this.data.views['memswap'];
|
||||
},
|
||||
percent() {
|
||||
return this.stats['percent'];
|
||||
},
|
||||
total() {
|
||||
return this.stats['total'];
|
||||
},
|
||||
used() {
|
||||
return this.stats['used'];
|
||||
},
|
||||
free() {
|
||||
return this.stats['free'];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDecoration(value) {
|
||||
if (this.view[value] === undefined) {
|
||||
return;
|
||||
}
|
||||
return this.view[value].decoration.toLowerCase();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesPluginMemswapController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glancesPluginMemswap", {
|
||||
controller: GlancesPluginMemswapController,
|
||||
controllerAs: "vm",
|
||||
templateUrl: template,
|
||||
});
|
||||
@ -1,36 +0,0 @@
|
||||
|
||||
export default function GlancesPluginMemswapController($scope, GlancesStats) {
|
||||
var vm = this;
|
||||
var _view = {};
|
||||
|
||||
vm.percent = null;
|
||||
vm.total = null;
|
||||
vm.used = null;
|
||||
vm.free = null;
|
||||
|
||||
vm.$onInit = function () {
|
||||
loadData(GlancesStats.getData());
|
||||
};
|
||||
|
||||
$scope.$on('data_refreshed', function (event, data) {
|
||||
loadData(data);
|
||||
});
|
||||
|
||||
var loadData = function (data) {
|
||||
var stats = data.stats['memswap'];
|
||||
_view = data.views['memswap'];
|
||||
|
||||
vm.percent = stats['percent'];
|
||||
vm.total = stats['total'];
|
||||
vm.used = stats['used'];
|
||||
vm.free = stats['free'];
|
||||
};
|
||||
|
||||
vm.getDecoration = function (value) {
|
||||
if (_view[value] === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
return _view[value].decoration.toLowerCase();
|
||||
};
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
<section id="memswap" class="plugin">
|
||||
<div class="table">
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left title">SWAP</div>
|
||||
<div class="table-cell">{{ vm.percent }}%</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">total:</div>
|
||||
<div class="table-cell">{{ vm.total | bytes }}</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">used:</div>
|
||||
<div class="table-cell" ng-class="vm.getDecoration('used')">
|
||||
{{ vm.used | bytes }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">free:</div>
|
||||
<div class="table-cell">{{ vm.free | bytes }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
88
glances/outputs/static/js/components/plugin-network.vue
Normal file
88
glances/outputs/static/js/components/plugin-network.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<!-- prettier-ignore -->
|
||||
<section>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left title">NETWORK</div>
|
||||
<div class="table-cell" v-show="!args.network_cumul && !args.network_sum">Rx/s</div>
|
||||
<div class="table-cell" v-show="!args.network_cumul && !args.network_sum">Tx/s</div>
|
||||
<div class="table-cell" v-show="!args.network_cumul && args.network_sum"></div>
|
||||
<div class="table-cell" v-show="!args.network_cumul && args.network_sum">Rx+Tx/s</div>
|
||||
<div class="table-cell" v-show="args.network_cumul && !args.network_sum">Rx</div>
|
||||
<div class="table-cell" v-show="args.network_cumul && !args.network_sum">Tx</div>
|
||||
<div class="table-cell" v-show="args.network_cumul && args.network_sum"></div>
|
||||
<div class="table-cell" v-show="args.network_cumul && args.network_sum">Rx+Tx</div>
|
||||
</div>
|
||||
<div class="table-row" v-for="(network, networkId) in networks" :key="networkId">
|
||||
<div class="table-cell text-left">
|
||||
<span class="visible-lg-inline">{{ network.ifname }}</span>
|
||||
<span class="hidden-lg">{{ $filters.minSize(network.ifname) }}</span>
|
||||
</div>
|
||||
<div class="table-cell" v-show="!args.network_cumul && !args.network_sum">
|
||||
{{ args.byte ? $filters.bytes(network.rx / network.time_since_update) : $filters.bits(network.rx / network.time_since_update) }}
|
||||
</div>
|
||||
<div class="table-cell" v-show="!args.network_cumul && !args.network_sum">
|
||||
{{ args.byte ? $filters.bytes(network.tx / network.time_since_update) : $filters.bits(network.tx / network.time_since_update) }}
|
||||
</div>
|
||||
<div class="table-cell" v-show="!args.network_cumul && args.network_sum"></div>
|
||||
<div class="table-cell" v-show="!args.network_cumul && args.network_sum">
|
||||
{{ args.byte ? $filters.bytes(network.cx / network.time_since_update) : $filters.bits(network.cx / network.time_since_update) }}
|
||||
</div>
|
||||
<div class="table-cell" v-show="args.network_cumul && !args.network_sum">
|
||||
{{ args.byte ? $filters.bytes(network.cumulativeRx) : $filters.bits(network.cumulativeRx) }}
|
||||
</div>
|
||||
<div class="table-cell" v-show="args.network_cumul && !args.network_sum">
|
||||
{{ args.byte ? $filters.bytes(network.cumulativeTx) : $filters.bits(network.cumulativeTx) }}
|
||||
</div>
|
||||
<div class="table-cell" v-show="args.network_cumul && args.network_sum"></div>
|
||||
<div class="table-cell" v-show="args.network_cumul && args.network_sum">
|
||||
{{ args.byte ? $filters.bytes(network.cumulativeCx) : $filters.bits(network.cumulativeCx) }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { orderBy } from 'lodash';
|
||||
import { store } from '../store.js';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
store
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
args() {
|
||||
return this.store.args || {};
|
||||
},
|
||||
stats() {
|
||||
return this.data.stats['network'];
|
||||
},
|
||||
networks() {
|
||||
const networks = this.stats.map((networkData) => {
|
||||
const alias = networkData['alias'] !== undefined ? networkData['alias'] : null;
|
||||
|
||||
const network = {
|
||||
interfaceName: networkData['interface_name'],
|
||||
ifname: alias ? alias : networkData['interface_name'],
|
||||
rx: networkData['rx'],
|
||||
tx: networkData['tx'],
|
||||
cx: networkData['cx'],
|
||||
time_since_update: networkData['time_since_update'],
|
||||
cumulativeRx: networkData['cumulative_rx'],
|
||||
cumulativeTx: networkData['cumulative_tx'],
|
||||
cumulativeCx: networkData['cumulative_cx']
|
||||
};
|
||||
|
||||
return network;
|
||||
});
|
||||
return orderBy(networks, ['interfaceName']);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesPluginNetworkController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glancesPluginNetwork", {
|
||||
controller: GlancesPluginNetworkController,
|
||||
controllerAs: "vm",
|
||||
templateUrl: template,
|
||||
});
|
||||
@ -1,40 +0,0 @@
|
||||
|
||||
export default function GlancesPluginNetworkController($scope, $filter, GlancesStats, ARGUMENTS) {
|
||||
var vm = this;
|
||||
vm.arguments = ARGUMENTS;
|
||||
vm.networks = [];
|
||||
|
||||
vm.$onInit = function () {
|
||||
loadData(GlancesStats.getData());
|
||||
};
|
||||
|
||||
$scope.$on('data_refreshed', function (event, data) {
|
||||
loadData(data);
|
||||
});
|
||||
|
||||
var loadData = function (data) {
|
||||
var networkStats = data.stats['network'];
|
||||
|
||||
vm.networks = [];
|
||||
for (var i = 0; i < networkStats.length; i++) {
|
||||
var networkData = networkStats[i];
|
||||
var alias = networkData['alias'] !== undefined ? networkData['alias'] : null
|
||||
|
||||
var network = {
|
||||
'interfaceName': networkData['interface_name'],
|
||||
'ifname': alias ? alias : networkData['interface_name'],
|
||||
'rx': networkData['rx'],
|
||||
'tx': networkData['tx'],
|
||||
'cx': networkData['cx'],
|
||||
'time_since_update': networkData['time_since_update'],
|
||||
'cumulativeRx': networkData['cumulative_rx'],
|
||||
'cumulativeTx': networkData['cumulative_tx'],
|
||||
'cumulativeCx': networkData['cumulative_cx'],
|
||||
};
|
||||
|
||||
vm.networks.push(network);
|
||||
}
|
||||
|
||||
vm.networks = $filter('orderBy')(vm.networks, 'interfaceName');
|
||||
}
|
||||
}
|
||||
@ -1,43 +0,0 @@
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left title">NETWORK</div>
|
||||
<div class="table-cell" ng-show="!vm.arguments.network_cumul && !vm.arguments.network_sum">Rx/s</div>
|
||||
<div class="table-cell" ng-show="!vm.arguments.network_cumul && !vm.arguments.network_sum">Tx/s</div>
|
||||
|
||||
<div class="table-cell" ng-show="!vm.arguments.network_cumul && vm.arguments.network_sum"></div>
|
||||
<div class="table-cell" ng-show="!vm.arguments.network_cumul && vm.arguments.network_sum">Rx+Tx/s</div>
|
||||
|
||||
<div class="table-cell" ng-show="vm.arguments.network_cumul && !vm.arguments.network_sum">Rx</div>
|
||||
<div class="table-cell" ng-show="vm.arguments.network_cumul && !vm.arguments.network_sum">Tx</div>
|
||||
|
||||
<div class="table-cell" ng-show="vm.arguments.network_cumul && vm.arguments.network_sum"></div>
|
||||
<div class="table-cell" ng-show="vm.arguments.network_cumul && vm.arguments.network_sum">Rx+Tx</div>
|
||||
</div>
|
||||
<div class="table-row" ng-repeat="network in vm.networks track by network.interfaceName">
|
||||
<div class="table-cell text-left">
|
||||
<span class="visible-lg-inline">{{ network.ifname }}</span>
|
||||
<span class="hidden-lg">{{ network.ifname | min_size }}</span>
|
||||
</div>
|
||||
<div class="table-cell" ng-show="!vm.arguments.network_cumul && !vm.arguments.network_sum">{{ vm.arguments.byte ?
|
||||
(network.rx / network.time_since_update | bytes) : (network.rx / network.time_since_update | bits) }}
|
||||
</div>
|
||||
<div class="table-cell" ng-show="!vm.arguments.network_cumul && !vm.arguments.network_sum">{{ vm.arguments.byte ?
|
||||
(network.tx / network.time_since_update | bytes) : (network.tx / network.time_since_update | bits) }}
|
||||
</div>
|
||||
|
||||
<div class="table-cell" ng-show="!vm.arguments.network_cumul && vm.arguments.network_sum"></div>
|
||||
<div class="table-cell" ng-show="!vm.arguments.network_cumul && vm.arguments.network_sum">{{ vm.arguments.byte ?
|
||||
(network.cx / network.time_since_update | bytes) : (network.cx / network.time_since_update | bits) }}
|
||||
</div>
|
||||
|
||||
<div class="table-cell" ng-show="vm.arguments.network_cumul && !vm.arguments.network_sum">{{ vm.arguments.byte ?
|
||||
(network.cumulativeRx | bytes) : (network.cumulativeRx | bits) }}
|
||||
</div>
|
||||
<div class="table-cell" ng-show="vm.arguments.network_cumul && !vm.arguments.network_sum">{{ vm.arguments.byte ?
|
||||
(network.cumulativeTx | bytes) : (network.cumulativeTx | bits) }}
|
||||
</div>
|
||||
|
||||
<div class="table-cell" ng-show="vm.arguments.network_cumul && vm.arguments.network_sum"></div>
|
||||
<div class="table-cell" ng-show="vm.arguments.network_cumul && vm.arguments.network_sum">{{ vm.arguments.byte ?
|
||||
(network.cumulativeCx | bytes) : (network.cumulativeCx | bits) }}
|
||||
</div>
|
||||
</div>
|
||||
104
glances/outputs/static/js/components/plugin-percpu.vue
Normal file
104
glances/outputs/static/js/components/plugin-percpu.vue
Normal file
@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<section id="percpu" class="plugin">
|
||||
<div class="table" v-for="(cpus, cpusChunkId) in cpusChunks" :key="cpusChunkId">
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left title">
|
||||
<span v-if="cpusChunkId === 0">PER CPU</span>
|
||||
</div>
|
||||
<div class="table-cell" v-for="(percpu, percpuId) in cpus" :key="percpuId">
|
||||
{{ percpu.total }}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">user:</div>
|
||||
<div
|
||||
class="table-cell"
|
||||
v-for="(percpu, percpuId) in cpus"
|
||||
:key="percpuId"
|
||||
:class="getUserAlert(percpu)"
|
||||
>
|
||||
{{ percpu.user }}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">system:</div>
|
||||
<div
|
||||
class="table-cell"
|
||||
v-for="(percpu, percpuId) in cpus"
|
||||
:key="percpuId"
|
||||
:class="getSystemAlert(percpu)"
|
||||
>
|
||||
{{ percpu.system }}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">idle:</div>
|
||||
<div class="table-cell" v-for="(percpu, percpuId) in cpus" :key="percpuId">
|
||||
{{ percpu.idle }}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row" v-if="cpus[0].iowait">
|
||||
<div class="table-cell text-left">iowait:</div>
|
||||
<div
|
||||
class="table-cell"
|
||||
v-for="(percpu, percpuId) in cpus"
|
||||
:key="percpuId"
|
||||
:class="getSystemAlert(percpu)"
|
||||
>
|
||||
{{ percpu.iowait }}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row" v-if="cpus[0].steal">
|
||||
<div class="table-cell text-left">steal:</div>
|
||||
<div
|
||||
class="table-cell"
|
||||
v-for="(percpu, percpuId) in cpus"
|
||||
:key="percpuId"
|
||||
:class="getSystemAlert(percpu)"
|
||||
>
|
||||
{{ percpu.steal }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GlancesHelper } from '../services.js';
|
||||
import { chunk } from 'lodash';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
percpuStats() {
|
||||
return this.data.stats['percpu'];
|
||||
},
|
||||
cpusChunks() {
|
||||
const retval = this.percpuStats.map((cpuData) => {
|
||||
return {
|
||||
number: cpuData.cpu_number,
|
||||
total: cpuData.total,
|
||||
user: cpuData.user,
|
||||
system: cpuData.system,
|
||||
idle: cpuData.idle,
|
||||
iowait: cpuData.iowait,
|
||||
steal: cpuData.steal
|
||||
};
|
||||
});
|
||||
return chunk(retval, 4);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUserAlert(cpu) {
|
||||
return GlancesHelper.getAlert('percpu', 'percpu_user_', cpu.user);
|
||||
},
|
||||
getSystemAlert(cpu) {
|
||||
return GlancesHelper.getAlert('percpu', 'percpu_system_', cpu.system);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesPluginPercpuController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glancesPluginPercpu", {
|
||||
controller: GlancesPluginPercpuController,
|
||||
controllerAs: "vm",
|
||||
templateUrl: template,
|
||||
});
|
||||
@ -1,44 +0,0 @@
|
||||
import _ from "lodash";
|
||||
|
||||
export default function GlancesPluginPercpuController($scope, GlancesStats, GlancesPluginHelper) {
|
||||
var vm = this;
|
||||
vm.cpusChunks = [];
|
||||
|
||||
vm.$onInit = function () {
|
||||
loadData(GlancesStats.getData());
|
||||
};
|
||||
|
||||
$scope.$on('data_refreshed', function (event, data) {
|
||||
loadData(data);
|
||||
});
|
||||
|
||||
var loadData = function (data) {
|
||||
var percpuStats = data.stats['percpu'];
|
||||
|
||||
var cpus = [];
|
||||
|
||||
for (var i = 0; i < percpuStats.length; i++) {
|
||||
var cpuData = percpuStats[i];
|
||||
|
||||
cpus.push({
|
||||
'number': cpuData.cpu_number,
|
||||
'total': cpuData.total,
|
||||
'user': cpuData.user,
|
||||
'system': cpuData.system,
|
||||
'idle': cpuData.idle,
|
||||
'iowait': cpuData.iowait,
|
||||
'steal': cpuData.steal
|
||||
});
|
||||
}
|
||||
|
||||
vm.cpusChunks = _.chunk(cpus, 4);
|
||||
};
|
||||
|
||||
vm.getUserAlert = function (cpu) {
|
||||
return GlancesPluginHelper.getAlert('percpu', 'percpu_user_', cpu.user)
|
||||
};
|
||||
|
||||
vm.getSystemAlert = function (cpu) {
|
||||
return GlancesPluginHelper.getAlert('percpu', 'percpu_system_', cpu.system);
|
||||
};
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
<section id="percpu" class="plugin">
|
||||
<div class="table" ng-repeat="cpus in vm.cpusChunks">
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left title"><span ng-if="$first">PER CPU</span></div>
|
||||
<div class="table-cell" ng-repeat="percpu in cpus track by percpu.number">{{ percpu.total }}%</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">user:</div>
|
||||
<div class="table-cell" ng-repeat="percpu in cpus track by percpu.number"
|
||||
ng-class="vm.getUserAlert(percpu)">
|
||||
{{ percpu.user }}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">system:</div>
|
||||
<div class="table-cell" ng-repeat="percpu in cpus track by percpu.number"
|
||||
ng-class="vm.getSystemAlert(percpu)">
|
||||
{{ percpu.system }}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="table-cell text-left">idle:</div>
|
||||
<div class="table-cell" ng-repeat="percpu in cpus track by percpu.number">{{ percpu.idle }}%</div>
|
||||
</div>
|
||||
<div class="table-row" ng-if="vm.cpus[0].iowait">
|
||||
<div class="table-cell text-left">iowait:</div>
|
||||
<div class="table-cell" ng-repeat="percpu in cpus track by percpu.number"
|
||||
ng-class="vm.getSystemAlert(percpu)">
|
||||
{{ percpu.iowait }}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row" ng-if="vm.cpus[0].steal">
|
||||
<div class="table-cell text-left">steal:</div>
|
||||
<div class="table-cell" ng-repeat="percpu in cpus track by percpu.number"
|
||||
ng-class="vm.getSystemAlert(percpu)">
|
||||
{{ percpu.steal }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
65
glances/outputs/static/js/components/plugin-ports.vue
Normal file
65
glances/outputs/static/js/components/plugin-ports.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<section>
|
||||
<div class="table-row" v-for="(port, portId) in ports" :key="portId">
|
||||
<div class="table-cell text-left">
|
||||
<!-- prettier-ignore -->
|
||||
{{ $filters.minSize(port.description ? port.description : port.host + ' ' + port.port, 20) }}
|
||||
</div>
|
||||
<div class="table-cell"></div>
|
||||
<div :class="getPortDecoration(port)" class="table-cell" v-if="port.host">
|
||||
<span v-if="port.status == 'null'">Scanning</span>
|
||||
<span v-else-if="port.status == 'false'">Timeout</span>
|
||||
<span v-else-if="port.status == 'true'">Open</span>
|
||||
<span v-else> {{ $filters.number(numberport.status * 1000.0, 0) }}ms </span>
|
||||
</div>
|
||||
<div :class="getWebDecoration(port)" class="table-cell" v-if="port.url">
|
||||
<span v-if="port.status == 'null'">Scanning</span>
|
||||
<span v-else-if="port.status == 'Error'">Error</span>
|
||||
<span v-else>Code {{ port.status }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stats() {
|
||||
return this.data.stats['ports'];
|
||||
},
|
||||
ports() {
|
||||
return this.stats;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPortDecoration(port) {
|
||||
if (port.status === null) {
|
||||
return 'careful';
|
||||
} else if (port.status === false) {
|
||||
return 'critical';
|
||||
} else if (port.rtt_warning !== null && port.status > port.rtt_warning) {
|
||||
return 'warning';
|
||||
}
|
||||
return 'ok';
|
||||
},
|
||||
getWebDecoration(web) {
|
||||
const okCodes = [200, 301, 302];
|
||||
|
||||
if (web.status === null) {
|
||||
return 'careful';
|
||||
} else if (okCodes.indexOf(web.status) === -1) {
|
||||
return 'critical';
|
||||
} else if (web.rtt_warning !== null && web.elapsed > web.rtt_warning) {
|
||||
return 'warning';
|
||||
}
|
||||
|
||||
return 'ok';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesPluginPortsController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glancesPluginPorts", {
|
||||
controller: GlancesPluginPortsController,
|
||||
controllerAs: "vm",
|
||||
templateUrl: template,
|
||||
});
|
||||
@ -1,48 +0,0 @@
|
||||
|
||||
export default function GlancesPluginPortsController($scope, GlancesStats) {
|
||||
var vm = this;
|
||||
vm.ports = [];
|
||||
|
||||
vm.$onInit = function () {
|
||||
loadData(GlancesStats.getData());
|
||||
};
|
||||
|
||||
$scope.$on('data_refreshed', function (event, data) {
|
||||
loadData(data);
|
||||
});
|
||||
|
||||
var loadData = function (data) {
|
||||
var stats = data.stats['ports'];
|
||||
|
||||
vm.ports = [];
|
||||
angular.forEach(stats, function (port) {
|
||||
vm.ports.push(port);
|
||||
}, this);
|
||||
}
|
||||
|
||||
vm.getPortDecoration = function (port) {
|
||||
if (port.status === null) {
|
||||
return 'careful';
|
||||
} else if (port.status === false) {
|
||||
return 'critical';
|
||||
} else if (port.rtt_warning !== null && port.status > port.rtt_warning) {
|
||||
return 'warning';
|
||||
}
|
||||
|
||||
return 'ok';
|
||||
};
|
||||
|
||||
vm.getWebDecoration = function (web) {
|
||||
var okCodes = [200, 301, 302];
|
||||
|
||||
if (web.status === null) {
|
||||
return 'careful';
|
||||
} else if (okCodes.indexOf(web.status) === -1) {
|
||||
return 'critical';
|
||||
} else if (web.rtt_warning !== null && web.elapsed > web.rtt_warning) {
|
||||
return 'warning';
|
||||
}
|
||||
|
||||
return 'ok';
|
||||
};
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
<div class="table-row" ng-repeat="port in vm.ports">
|
||||
<div class="table-cell text-left">{{(port.description ? port.description : port.host + ' ' + port.port) | min_size:
|
||||
20}}
|
||||
</div>
|
||||
<div class="table-cell"></div>
|
||||
<div ng-switch="port.status" ng-class="vm.getPortDecoration(port)" class="table-cell" ng-if="port.host">
|
||||
<span ng-switch-when="null">Scanning</span>
|
||||
<span ng-switch-when="false">Timeout</span>
|
||||
<span ng-switch-when="true">Open</span>
|
||||
<span ng-switch-default>{{port.status * 1000.0 | number:0}}ms</span>
|
||||
</div>
|
||||
<div ng-switch="port.status" ng-class="vm.getWebDecoration(port)" class="table-cell" ng-if="port.url">
|
||||
<span ng-switch-when="null">Scanning</span>
|
||||
<span ng-switch-when="Error">Error</span>
|
||||
<span ng-switch-default>Code {{ port.status }}</span>
|
||||
</div>
|
||||
</div>
|
||||
118
glances/outputs/static/js/components/plugin-process.vue
Normal file
118
glances/outputs/static/js/components/plugin-process.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div v-if="args.disable_process">PROCESSES DISABLED (press 'z' to display)</div>
|
||||
<div v-else>
|
||||
<glances-plugin-processcount :sorter="sorter" :data="data"></glances-plugin-processcount>
|
||||
<div class="row" v-if="!args.disable_amps">
|
||||
<div class="col-lg-18">
|
||||
<glances-plugin-amps :data="data"></glances-plugin-amps>
|
||||
</div>
|
||||
</div>
|
||||
<glances-plugin-processlist
|
||||
:sorter="sorter"
|
||||
:data="data"
|
||||
@update:sorter="sorter.column = $event"
|
||||
></glances-plugin-processlist>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import hotkeys from 'hotkeys-js';
|
||||
import { store } from '../store.js';
|
||||
import GlancesPluginAmps from './plugin-amps.vue';
|
||||
import GlancesPluginProcesscount from './plugin-processcount.vue';
|
||||
import GlancesPluginProcesslist from './plugin-processlist.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
GlancesPluginAmps,
|
||||
GlancesPluginProcesscount,
|
||||
GlancesPluginProcesslist
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
store,
|
||||
sorter: {
|
||||
column: 'cpu_percent',
|
||||
auto: true,
|
||||
isReverseColumn(column) {
|
||||
return !(column === 'username' || column === 'name');
|
||||
},
|
||||
getColumnLabel(column) {
|
||||
if (column === 'io_read' || column === 'io_write') {
|
||||
return 'io_counters';
|
||||
} else {
|
||||
return column;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
args() {
|
||||
return this.store.args || {};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setupHotKeys() {
|
||||
// a => Sort processes automatically
|
||||
hotkeys('a', () => {
|
||||
this.sorter.column = 'cpu_percent';
|
||||
this.sorter.auto = true;
|
||||
});
|
||||
|
||||
// c => Sort processes by CPU%
|
||||
hotkeys('c', () => {
|
||||
this.sorter.column = 'cpu_percent';
|
||||
this.sorter.auto = false;
|
||||
});
|
||||
|
||||
// m => Sort processes by MEM%
|
||||
hotkeys('m', () => {
|
||||
this.sorter.column = 'memory_percent';
|
||||
this.sorter.auto = false;
|
||||
});
|
||||
|
||||
// u => Sort processes by user
|
||||
hotkeys('u', () => {
|
||||
this.sorter.column = 'username';
|
||||
this.sorter.auto = false;
|
||||
});
|
||||
|
||||
// p => Sort processes by name
|
||||
hotkeys('p', () => {
|
||||
this.sorter.column = 'name';
|
||||
this.sorter.auto = false;
|
||||
});
|
||||
|
||||
// i => Sort processes by I/O rate
|
||||
hotkeys('i', () => {
|
||||
this.sorter.column = ['io_read', 'io_write'];
|
||||
this.sorter.auto = false;
|
||||
});
|
||||
|
||||
// t => Sort processes by time
|
||||
hotkeys('t', () => {
|
||||
this.sorter.column = 'timemillis';
|
||||
this.sorter.auto = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setupHotKeys();
|
||||
},
|
||||
beforeUnmount() {
|
||||
hotkeys.unbind('a');
|
||||
hotkeys.unbind('c');
|
||||
hotkeys.unbind('m');
|
||||
hotkeys.unbind('u');
|
||||
hotkeys.unbind('p');
|
||||
hotkeys.unbind('i');
|
||||
hotkeys.unbind('t');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesPluginProcessController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glancesPluginProcess", {
|
||||
controller: GlancesPluginProcessController,
|
||||
controllerAs: "vm",
|
||||
templateUrl: template,
|
||||
});
|
||||
@ -1,83 +0,0 @@
|
||||
|
||||
export default function GlancesPluginProcessController(ARGUMENTS, hotkeys) {
|
||||
var vm = this;
|
||||
vm.arguments = ARGUMENTS;
|
||||
|
||||
vm.sorter = {
|
||||
column: "cpu_percent",
|
||||
auto: true,
|
||||
isReverseColumn: function (column) {
|
||||
return !(column === 'username' || column === 'name');
|
||||
},
|
||||
getColumnLabel: function (column) {
|
||||
if (column === 'io_read' || column === 'io_write') {
|
||||
return 'io_counters';
|
||||
} else {
|
||||
return column;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// a => Sort processes automatically
|
||||
hotkeys.add({
|
||||
combo: 'a',
|
||||
callback: function () {
|
||||
vm.sorter.column = "cpu_percent";
|
||||
vm.sorter.auto = true;
|
||||
}
|
||||
});
|
||||
|
||||
// c => Sort processes by CPU%
|
||||
hotkeys.add({
|
||||
combo: 'c',
|
||||
callback: function () {
|
||||
vm.sorter.column = "cpu_percent";
|
||||
vm.sorter.auto = false;
|
||||
}
|
||||
});
|
||||
|
||||
// m => Sort processes by MEM%
|
||||
hotkeys.add({
|
||||
combo: 'm',
|
||||
callback: function () {
|
||||
vm.sorter.column = "memory_percent";
|
||||
vm.sorter.auto = false;
|
||||
}
|
||||
});
|
||||
|
||||
// u => Sort processes by user
|
||||
hotkeys.add({
|
||||
combo: 'u',
|
||||
callback: function () {
|
||||
vm.sorter.column = "username";
|
||||
vm.sorter.auto = false;
|
||||
}
|
||||
});
|
||||
|
||||
// p => Sort processes by name
|
||||
hotkeys.add({
|
||||
combo: 'p',
|
||||
callback: function () {
|
||||
vm.sorter.column = "name";
|
||||
vm.sorter.auto = false;
|
||||
}
|
||||
});
|
||||
|
||||
// i => Sort processes by I/O rate
|
||||
hotkeys.add({
|
||||
combo: 'i',
|
||||
callback: function () {
|
||||
vm.sorter.column = ['io_read', 'io_write'];
|
||||
vm.sorter.auto = false;
|
||||
}
|
||||
});
|
||||
|
||||
// t => Sort processes by time
|
||||
hotkeys.add({
|
||||
combo: 't',
|
||||
callback: function () {
|
||||
vm.sorter.column = "timemillis";
|
||||
vm.sorter.auto = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
<div ng-if="!vm.arguments.disable_process">
|
||||
<glances-plugin-processcount sorter="vm.sorter"></glances-plugin-processcount>
|
||||
<div class="row" ng-if="!vm.arguments.disable_amps">
|
||||
<div class="col-lg-18">
|
||||
<glances-plugin-amps></glances-plugin-amps>
|
||||
</div>
|
||||
</div>
|
||||
<glances-plugin-processlist sorter="vm.sorter"></glances-plugin-processlist>
|
||||
</div>
|
||||
<div ng-if="vm.arguments.disable_process">PROCESSES DISABLED (press 'z' to display)</div>
|
||||
46
glances/outputs/static/js/components/plugin-processcount.vue
Normal file
46
glances/outputs/static/js/components/plugin-processcount.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<section id="processcount" class="plugin">
|
||||
<span class="title">TASKS</span>
|
||||
<span>{{ total }} ({{ thread }} thr),</span>
|
||||
<span>{{ running }} run,</span>
|
||||
<span>{{ sleeping }} slp,</span>
|
||||
<span>{{ stopped }} oth</span>
|
||||
<span>
|
||||
sorted {{ sorter.auto ? 'automatically' : '' }} by
|
||||
{{ sorter.getColumnLabel(sorter.column) }}, flat view
|
||||
</span>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object
|
||||
},
|
||||
sorter: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stats() {
|
||||
return this.data.stats['processcount'];
|
||||
},
|
||||
total() {
|
||||
return this.stats['total'] || 0;
|
||||
},
|
||||
running() {
|
||||
return this.stats['running'] || 0;
|
||||
},
|
||||
sleeping() {
|
||||
return this.stats['sleeping'] || 0;
|
||||
},
|
||||
stopped() {
|
||||
return this.stats['stopped'] || 0;
|
||||
},
|
||||
thread() {
|
||||
return this.stats['thread'] || 0;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,14 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesPluginProcesscountController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glancesPluginProcesscount", {
|
||||
controller: GlancesPluginProcesscountController,
|
||||
controllerAs: "vm",
|
||||
bindings: {
|
||||
sorter: "<"
|
||||
},
|
||||
templateUrl: template,
|
||||
});
|
||||
@ -1,28 +0,0 @@
|
||||
|
||||
export default function GlancesPluginProcesscountController($scope, GlancesStats) {
|
||||
var vm = this;
|
||||
|
||||
vm.total = null;
|
||||
vm.running = null;
|
||||
vm.sleeping = null;
|
||||
vm.stopped = null;
|
||||
vm.thread = null;
|
||||
|
||||
vm.$onInit = function () {
|
||||
loadData(GlancesStats.getData());
|
||||
};
|
||||
|
||||
$scope.$on('data_refreshed', function (event, data) {
|
||||
loadData(data);
|
||||
});
|
||||
|
||||
var loadData = function (data) {
|
||||
var processcountStats = data.stats['processcount'];
|
||||
|
||||
vm.total = processcountStats['total'] || 0;
|
||||
vm.running = processcountStats['running'] || 0;
|
||||
vm.sleeping = processcountStats['sleeping'] || 0;
|
||||
vm.stopped = processcountStats['stopped'] || 0;
|
||||
vm.thread = processcountStats['thread'] || 0;
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
<section id="processcount" class="plugin">
|
||||
<span class="title">TASKS</span>
|
||||
<span>{{ vm.total }} ({{ vm.thread }} thr),</span>
|
||||
<span>{{ vm.running }} run,</span>
|
||||
<span>{{ vm.sleeping }} slp,</span>
|
||||
<span>{{ vm.stopped }} oth</span>
|
||||
<span> sorted {{ vm.sorter.auto ? 'automatically' : '' }} by {{ vm.sorter.getColumnLabel(vm.sorter.column) }}, flat view</span>
|
||||
</section>
|
||||
240
glances/outputs/static/js/components/plugin-processlist.vue
Normal file
240
glances/outputs/static/js/components/plugin-processlist.vue
Normal file
@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<!-- prettier-ignore -->
|
||||
<section id="processlist-plugin" class="plugin">
|
||||
<div class="table">
|
||||
<div class="table-row">
|
||||
<div
|
||||
class="table-cell"
|
||||
:class="['sortable', sorter.column === 'cpu_percent' && 'sort']"
|
||||
@click="$emit('update:sorter', 'cpu_percen')"
|
||||
>
|
||||
CPU%
|
||||
</div>
|
||||
<div
|
||||
class="table-cell"
|
||||
:class="['sortable', sorter.column === 'memory_percent' && 'sort']"
|
||||
@click="$emit('update:sorter', 'memory_percent')"
|
||||
>
|
||||
MEM%
|
||||
</div>
|
||||
<div class="table-cell hidden-xs hidden-sm">VIRT</div>
|
||||
<div class="table-cell hidden-xs hidden-sm">RES</div>
|
||||
<div class="table-cell">PID</div>
|
||||
<div
|
||||
class="table-cell text-left"
|
||||
:class="['sortable', sorter.column === 'username' && 'sort']"
|
||||
@click="$emit('update:sorter', 'username')"
|
||||
>
|
||||
USER
|
||||
</div>
|
||||
<div
|
||||
class="table-cell hidden-xs hidden-sm"
|
||||
:class="['sortable', sorter.column === 'timemillis' && 'sort']"
|
||||
@click="$emit('update:sorter', 'timemillis')"
|
||||
>
|
||||
TIME+
|
||||
</div>
|
||||
<div
|
||||
class="table-cell text-left hidden-xs hidden-sm"
|
||||
:class="['sortable', sorter.column === 'num_threads' && 'sort']"
|
||||
@click="$emit('update:sorter', 'num_threads')"
|
||||
>
|
||||
THR
|
||||
</div>
|
||||
<div class="table-cell">NI</div>
|
||||
<div class="table-cell">S</div>
|
||||
<div
|
||||
v-show="ioReadWritePresent"
|
||||
class="table-cell hidden-xs hidden-sm"
|
||||
:class="['sortable', sorter.column === 'io_read' && 'sort']"
|
||||
@click="$emit('update:sorter', 'io_read')"
|
||||
>
|
||||
IOR/s
|
||||
</div>
|
||||
<div
|
||||
v-show="ioReadWritePresent"
|
||||
class="table-cell text-left hidden-xs hidden-sm"
|
||||
:class="['sortable', sorter.column === 'io_write' && 'sort']"
|
||||
@click="$emit('update:sorter', 'io_write')"
|
||||
>
|
||||
IOW/s
|
||||
</div>
|
||||
<div
|
||||
class="table-cell text-left"
|
||||
:class="['sortable', sorter.column === 'name' && 'sort']"
|
||||
@click="$emit('update:sorter', 'name')"
|
||||
>
|
||||
Command
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="table-row"
|
||||
v-for="(process, processId) in processes"
|
||||
:key="processId"
|
||||
>
|
||||
<div class="table-cell" :class="getCpuPercentAlert(process)">
|
||||
{{ process.cpu_percent == -1 ? '?' : $filters.number(process.cpu_percent, 1) }}
|
||||
</div>
|
||||
<div class="table-cell" :class="getMemoryPercentAlert(process)">
|
||||
{{ process.memory_percent == -1 ? '?' : $filters.number(process.memory_percent, 1) }}
|
||||
</div>
|
||||
<div class="table-cell hidden-xs hidden-sm">
|
||||
{{ $filters.bytes(process.memvirt) }}
|
||||
</div>
|
||||
<div class="table-cell hidden-xs hidden-sm">
|
||||
{{ $filters.bytes(process.memres) }}
|
||||
</div>
|
||||
<div class="table-cell">
|
||||
{{ process.pid }}
|
||||
</div>
|
||||
<div class="table-cell text-left">
|
||||
{{ process.username }}
|
||||
</div>
|
||||
<div class="table-cell hidden-xs hidden-sm" v-if="process.timeplus != '?'">
|
||||
<span v-show="process.timeplus.hours > 0" class="highlight">{{ process.timeplus.hours }}h</span>
|
||||
{{ $filters.leftPad(process.timeplus.minutes, 2, '0') }}:{{ $filters.leftPad(process.timeplus.seconds, 2, '0') }}
|
||||
<span v-show="process.timeplus.hours <= 0">.{{ $filters.leftPad(process.timeplus.milliseconds, 2, '0') }}</span>
|
||||
</div>
|
||||
<div class="table-cell hidden-xs hidden-sm" v-if="process.timeplus == '?'">?</div>
|
||||
<div class="table-cell text-left hidden-xs hidden-sm">
|
||||
{{ process.num_threads == -1 ? '?' : process.num_threads }}
|
||||
</div>
|
||||
<div class="table-cell" :class="{ nice: process.isNice }">
|
||||
{{ $filters.exclamation(process.nice) }}
|
||||
</div>
|
||||
<div class="table-cell" :class="{ status: process.status == 'R' }">
|
||||
{{ process.status }}
|
||||
</div>
|
||||
<div class="table-cell hidden-xs hidden-sm" v-show="ioReadWritePresent">
|
||||
{{ $filters.bytes(process.io_read) }}
|
||||
</div>
|
||||
<div class="table-cell text-left hidden-xs hidden-sm" v-show="ioReadWritePresent">
|
||||
{{ $filters.bytes(process.io_write) }}
|
||||
</div>
|
||||
<div class="table-cell text-left" v-show="args.process_short_name">
|
||||
{{ process.name }}
|
||||
</div>
|
||||
<div class="table-cell text-left" v-show="!args.process_short_name">
|
||||
{{ process.cmdline }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { orderBy, last } from 'lodash';
|
||||
import { timemillis, timedelta } from '../filters.js';
|
||||
import { GlancesHelper } from '../services.js';
|
||||
import { store } from '../store.js';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object
|
||||
},
|
||||
sorter: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
store
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
args() {
|
||||
return this.store.args || {};
|
||||
},
|
||||
config() {
|
||||
return this.store.config || {};
|
||||
},
|
||||
stats() {
|
||||
return this.data.stats['processlist'];
|
||||
},
|
||||
processes() {
|
||||
const { sorter } = this;
|
||||
const isWindows = this.data.stats['isWindows'];
|
||||
const processes = (this.stats || []).map((process) => {
|
||||
process.memvirt = '?';
|
||||
process.memres = '?';
|
||||
if (process.memory_info) {
|
||||
process.memvirt = process.memory_info[1];
|
||||
process.memres = process.memory_info[0];
|
||||
}
|
||||
|
||||
process.timeplus = '?';
|
||||
process.timemillis = '?';
|
||||
if (process.cpu_times) {
|
||||
process.timeplus = timedelta(process.cpu_times);
|
||||
process.timemillis = timemillis(process.cpu_times);
|
||||
}
|
||||
|
||||
if (process.num_threads === null) {
|
||||
process.num_threads = -1;
|
||||
}
|
||||
|
||||
if (process.cpu_percent === null) {
|
||||
process.cpu_percent = -1;
|
||||
}
|
||||
|
||||
if (process.memory_percent === null) {
|
||||
process.memory_percent = -1;
|
||||
}
|
||||
|
||||
process.io_read = null;
|
||||
process.io_write = null;
|
||||
|
||||
if (process.io_counters) {
|
||||
process.io_read =
|
||||
(process.io_counters[0] - process.io_counters[2]) /
|
||||
process.time_since_update;
|
||||
process.io_write =
|
||||
(process.io_counters[1] - process.io_counters[3]) /
|
||||
process.time_since_update;
|
||||
}
|
||||
|
||||
process.isNice =
|
||||
process.nice !== undefined &&
|
||||
((isWindows && process.nice != 32) || (!isWindows && process.nice != 0));
|
||||
|
||||
if (Array.isArray(process.cmdline)) {
|
||||
process.cmdline = process.cmdline.join(' ');
|
||||
}
|
||||
|
||||
if (process.cmdline === null) {
|
||||
process.cmdline = process.name;
|
||||
}
|
||||
|
||||
if (isWindows && process.username !== null) {
|
||||
process.username = last(process.username.split('\\'));
|
||||
}
|
||||
|
||||
return process;
|
||||
});
|
||||
|
||||
return orderBy(
|
||||
processes,
|
||||
[sorter.column],
|
||||
[sorter.isReverseColumn(sorter.column) ? 'desc' : 'asc']
|
||||
).slice(0, this.limit);
|
||||
},
|
||||
ioReadWritePresent() {
|
||||
return (this.stats || []).some(({ io_counters }) => io_counters);
|
||||
},
|
||||
limit() {
|
||||
return this.config.outputs !== undefined
|
||||
? this.config.outputs.max_processes_display
|
||||
: undefined;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCpuPercentAlert(process) {
|
||||
return GlancesHelper.getAlert('processlist', 'processlist_cpu_', process.cpu_percent);
|
||||
},
|
||||
getMemoryPercentAlert(process) {
|
||||
return GlancesHelper.getAlert('processlist', 'processlist_mem_', process.cpu_percent);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,14 +0,0 @@
|
||||
|
||||
import angular from "angular";
|
||||
|
||||
import GlancesPluginProcesslistController from "./controller";
|
||||
import template from "./view.html";
|
||||
|
||||
export default angular.module("glancesApp").component("glancesPluginProcesslist", {
|
||||
controller: GlancesPluginProcesslistController,
|
||||
controllerAs: "vm",
|
||||
bindings: {
|
||||
sorter: "<"
|
||||
},
|
||||
templateUrl: template,
|
||||
});
|
||||
@ -1,91 +0,0 @@
|
||||
|
||||
export default function GlancesPluginProcesslistController($scope, GlancesStats, GlancesPluginHelper, $filter, CONFIG, ARGUMENTS) {
|
||||
var vm = this;
|
||||
vm.arguments = ARGUMENTS;
|
||||
vm.processes = [];
|
||||
vm.ioReadWritePresent = false;
|
||||
|
||||
vm.$onInit = function () {
|
||||
loadData(GlancesStats.getData());
|
||||
};
|
||||
|
||||
$scope.$on('data_refreshed', function (event, data) {
|
||||
loadData(data);
|
||||
});
|
||||
|
||||
var loadData = function (data) {
|
||||
var processlistStats = data.stats['processlist'] || [];
|
||||
|
||||
vm.processes = [];
|
||||
vm.ioReadWritePresent = false;
|
||||
|
||||
for (var i = 0; i < processlistStats.length; i++) {
|
||||
var process = processlistStats[i];
|
||||
|
||||
process.memvirt = "?";
|
||||
process.memres = "?";
|
||||
if (process.memory_info) {
|
||||
process.memvirt = process.memory_info[1];
|
||||
process.memres = process.memory_info[0];
|
||||
}
|
||||
|
||||
process.timeplus = "?";
|
||||
process.timemillis = "?";
|
||||
if (process.cpu_times) {
|
||||
process.timeplus = $filter('timedelta')(process.cpu_times);
|
||||
process.timemillis = $filter('timemillis')(process.cpu_times);
|
||||
}
|
||||
|
||||
if (process.num_threads === null) {
|
||||
process.num_threads = -1;
|
||||
}
|
||||
|
||||
if (process.cpu_percent === null) {
|
||||
process.cpu_percent = -1;
|
||||
}
|
||||
|
||||
if (process.memory_percent === null) {
|
||||
process.memory_percent = -1;
|
||||
}
|
||||
|
||||
|
||||
process.io_read = null;
|
||||
process.io_write = null;
|
||||
|
||||
if (process.io_counters) {
|
||||
vm.ioReadWritePresent = true;
|
||||
|
||||
process.io_read = (process.io_counters[0] - process.io_counters[2]) / process.time_since_update;
|
||||
process.io_write = (process.io_counters[1] - process.io_counters[3]) / process.time_since_update;
|
||||
}
|
||||
|
||||
process.isNice = process.nice !== undefined && ((data.stats.isWindows && process.nice != 32) || (!data.stats.isWindows && process.nice != 0));
|
||||
|
||||
if (Array.isArray(process.cmdline)) {
|
||||
process.cmdline = process.cmdline.join(' ');
|
||||
}
|
||||
|
||||
if (process.cmdline === null) {
|
||||
process.cmdline = process.name;
|
||||
}
|
||||
|
||||
if (data.isWindows && process.username !== null) {
|
||||
process.username = _.last(process.username.split('\\'));
|
||||
}
|
||||
|
||||
vm.processes.push(process);
|
||||
}
|
||||
}
|
||||
|
||||
vm.getCpuPercentAlert = function (process) {
|
||||
return GlancesPluginHelper.getAlert('processlist', 'processlist_cpu_', process.cpu_percent);
|
||||
};
|
||||
|
||||
vm.getMemoryPercentAlert = function (process) {
|
||||
return GlancesPluginHelper.getAlert('processlist', 'processlist_mem_', process.cpu_percent);
|
||||
};
|
||||
|
||||
vm.getLimit = function () {
|
||||
return CONFIG.outputs !== undefined ? CONFIG.outputs.max_processes_display : undefined;
|
||||
};
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
<section id="processlist-plugin" class="plugin">
|
||||
<div class="table">
|
||||
<div class="table-row">
|
||||
<div sortable-th sorter="vm.sorter" column="cpu_percent" class="table-cell">CPU%</div>
|
||||
<div sortable-th sorter="vm.sorter" column="memory_percent" class="table-cell">MEM%</div>
|
||||
<div class="table-cell hidden-xs hidden-sm">VIRT</div>
|
||||
<div class="table-cell hidden-xs hidden-sm">RES</div>
|
||||
<div class="table-cell">PID</div>
|
||||
<div sortable-th sorter="vm.sorter" column="username" class="table-cell text-left">USER</div>
|
||||
<div sortable-th sorter="vm.sorter" column="timemillis" class="table-cell hidden-xs hidden-sm">TIME+</div>
|
||||
<div sortable-th sorter="vm.sorter" column="num_threads" class="table-cell text-left hidden-xs hidden-sm">THR</div>
|
||||
<div class="table-cell">NI</div>
|
||||
<div class="table-cell">S</div>
|
||||
<div sortable-th sorter="vm.sorter" column="io_read" class="table-cell hidden-xs hidden-sm" ng-show="vm.ioReadWritePresent">IOR/s</div>
|
||||
<div sortable-th sorter="vm.sorter" column="io_write" class="table-cell text-left hidden-xs hidden-sm" ng-show="vm.ioReadWritePresent">IOW/s</div>
|
||||
<div sortable-th sorter="vm.sorter" column="name" class="table-cell text-left">Command</div>
|
||||
</div>
|
||||
<div class="table-row"
|
||||
ng-repeat="process in vm.processes | orderBy:vm.sorter.column:vm.sorter.isReverseColumn(vm.sorter.column) | limitTo: vm.getLimit() track by process.pid">
|
||||
<div class="table-cell" ng-class="vm.getCpuPercentAlert(process)">{{ process.cpu_percent == -1 ? '?' : (process.cpu_percent | number:1) }}</div>
|
||||
<div class="table-cell" ng-class="vm.getMemoryPercentAlert(process)">{{ process.memory_percent == -1 ? '?' : (process.memory_percent | number:1) }}</div>
|
||||
<div class="table-cell hidden-xs hidden-sm">{{process.memvirt | bytes}}</div>
|
||||
<div class="table-cell hidden-xs hidden-sm">{{process.memres | bytes}}</div>
|
||||
<div class="table-cell">{{process.pid}}</div>
|
||||
<div class="table-cell text-left">{{process.username}}</div>
|
||||
<div class="table-cell hidden-xs hidden-sm" ng-if="process.timeplus != '?'">
|
||||
<span ng-show="process.timeplus.hours > 0" class="highlight">{{ process.timeplus.hours }}h</span>{{
|
||||
process.timeplus.minutes | leftPad:2:'0' }}:{{ process.timeplus.seconds | leftPad:2:'0' }}<span
|
||||
ng-show="process.timeplus.hours <= 0">.{{ process.timeplus.milliseconds | leftPad:2:'0' }}</span>
|
||||
</div>
|
||||
<div class="table-cell hidden-xs hidden-sm" ng-if="process.timeplus == '?'">?</div>
|
||||
<div class="table-cell text-left hidden-xs hidden-sm">{{ process.num_threads == -1 ? '?' : process.num_threads }}</div>
|
||||
<div class="table-cell" ng-class="{nice: process.isNice}">{{process.nice | exclamation}}</div>
|
||||
<div class="table-cell" ng-class="{status: process.status == 'R'}">{{process.status}}</div>
|
||||
<div class="table-cell hidden-xs hidden-sm" ng-show="vm.ioReadWritePresent">{{process.io_read | bytes}}</div>
|
||||
<div class="table-cell text-left hidden-xs hidden-sm" ng-show="vm.ioReadWritePresent">{{process.io_write | bytes}}</div>
|
||||
<div class="table-cell text-left" ng-show="vm.arguments.process_short_name">{{process.name}}</div>
|
||||
<div class="table-cell text-left" ng-show="!vm.arguments.process_short_name">{{process.cmdline}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user