mirror
/
glances
mirror of https://github.com/nicolargo/glances.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve WebUI display on low screen

This commit is contained in:
nicolargo 2025-01-04 10:14:34 +01:00
parent 0b818e99fa
commit 2c9beccea5
8 changed files with 46 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Makefile
View File

@ -143,7 +143,7 @@ profiling-gprof: CPROF = glances.cprof
profiling-gprof: ## Callgraph profiling (need "apt install graphviz")
$(DISPLAY-BANNER)
$(PYTHON) -m cProfile -o $(CPROF) run-venv.py -C $(CONF) --stop-after $(TIMES)
$(venv_dev)/gprof2dot -f pstats $(CPROF) | dot -Tsvg -o $(OUT_DIR)/glances-cgraph.svg
$(venv_full)/gprof2dot -f pstats $(CPROF) | dot -Tsvg -o $(OUT_DIR)/glances-cgraph.svg
rm -f $(CPROF)
profiling-pyinstrument: ## PyInstrument profiling
@ -153,7 +153,7 @@ profiling-pyinstrument: ## PyInstrument profiling
profiling-pyspy: ## Flame profiling
$(DISPLAY-BANNER)
$(venv_dev)/py-spy record -o $(OUT_DIR)/glances-flame.svg -d 60 -s -- $(PYTHON) run-venv.py -C $(CONF) --stop-after $(TIMES)
$(venv_full)/py-spy record -o $(OUT_DIR)/glances-flame.svg -d 60 -s -- $(PYTHON) run-venv.py -C $(CONF) --stop-after $(TIMES)
profiling: profiling-gprof profiling-pyinstrument profiling-pyspy ## Profiling of the Glances software

2
glances/outputs/static/js/App.vue
View File

@ -70,7 +70,7 @@
<!-- Display bottom of the screen with sidebar and processlist -->
<div class="bottom container-fluid">
<div class="row">
<div class="col-3 d-none d-lg-block"
<div class="col-3 d-none d-md-block"
:class="{ 'sidebar-min': !args.percpu, 'sidebar-max': args.percpu }"
v-if="!args.disable_left_sidebar">
<template v-for="plugin in leftMenu">

10
glances/outputs/static/js/components/plugin-containers.vue
View File

@ -3,7 +3,7 @@
<span class="title">CONTAINERS</span>
<span v-show="containers.length > 1">{{ containers.length }} sorted by {{
sorter.getColumnLabel(sorter.column)
}}</span>
}}</span>
<div class="table-responsive d-md-none">
<table class="table table-sm table-borderless table-striped table-hover">
<thead>
@ -75,10 +75,10 @@
MEM
</td>
<td scope="col" v-show="!getDisableStats().includes('mem')">MAX</td>
<td scope="col" v-show="!getDisableStats().includes('diskio')">IOR</td>
<td scope="col" v-show="!getDisableStats().includes('diskio')">IOW</td>
<td scope="col" v-show="!getDisableStats().includes('networkio')">RX</td>
<td scope="col" v-show="!getDisableStats().includes('networkio')">TX</td>
<td scope="col" v-show="!getDisableStats().includes('diskio')">IORps</td>
<td scope="col" v-show="!getDisableStats().includes('diskio')">IOWps</td>
<td scope="col" v-show="!getDisableStats().includes('networkio')">RXps</td>
<td scope="col" v-show="!getDisableStats().includes('networkio')">TXps</td>
<td scope="col" v-show="!getDisableStats().includes('command')">Command</td>
</tr>
</thead>

18
glances/outputs/static/js/components/plugin-diskio.vue
View File

@ -4,16 +4,16 @@
<thead>
<tr>
<th scope="col">DISK I/O</th>
<th scope="col" class="text-end w-25" v-show="!args.diskio_iops">R/s</th>
<th scope="col" class="text-end w-25" v-show="!args.diskio_iops">W/s</th>
<th scope="col" class="text-end w-25" v-show="args.diskio_iops">IOR/s</th>
<th scope="col" class="text-end w-25" v-show="args.diskio_iops">IOW/s</th>
<th scope="col" class="text-end w-25" v-show="!args.diskio_iops">Rps</th>
<th scope="col" class="text-end w-25" v-show="!args.diskio_iops">Wps</th>
<th scope="col" class="text-end w-25" v-show="args.diskio_iops">IORps</th>
<th scope="col" class="text-end w-25" v-show="args.diskio_iops">IOWps</th>
</tr>
</thead>
<tbody>
<tr v-for="(disk, diskId) in disks" :key="diskId">
<td scope="row">
{{ $filters.minSize(disk.alias ? disk.alias : disk.name, 32) }}
<td scope="row" class="text-truncate">
{{ $filters.minSize(disk.alias ? disk.alias : disk.name, 16) }}
</td>
<td class="text-end w-25" :class="getDecoration(disk.name, 'write_bytes_rate_per_sec')"
v-show="!args.diskio_iops">
@ -76,9 +76,9 @@ export default {
}
};
}).filter(disk => {
const readBytesRate = this.view[disk.name]['read_bytes_rate_per_sec'];
const writeBytesRate = this.view[disk.name]['write_bytes_rate_per_sec'];
return (!readBytesRate || readBytesRate.hidden === false) && (!writeBytesRate || writeBytesRate.hidden === false);
const readBytesRate = this.view[disk.name]['read_bytes_rate_per_sec'];
const writeBytesRate = this.view[disk.name]['write_bytes_rate_per_sec'];
return (!readBytesRate || readBytesRate.hidden === false) && (!writeBytesRate || writeBytesRate.hidden === false);
});
return orderBy(disks, ['name']);
},

5
glances/outputs/static/js/components/plugin-fs.vue
View File

@ -16,8 +16,9 @@
<tbody>
<tr v-for="(fs, fsId) in fileSystems" :key="fsId">
<td scope="row">
{{ $filters.minSize(fs.alias ? fs.alias : fs.mountPoint, 26, begin=false) }}
<span v-if="(fs.alias ? fs.alias : fs.mountPoint).length + fs.name.length <= 24" class="visible-lg-inline">
{{ $filters.minSize(fs.alias ? fs.alias : fs.mountPoint, 16, begin = false) }}
<span v-if="(fs.alias ? fs.alias : fs.mountPoint).length + fs.name.length <= 15"
class="visible-lg-inline">
({{ fs.name }})
</span>
</td>

33
glances/outputs/static/js/components/plugin-network.vue
View File

@ -4,10 +4,10 @@
<thead>
<tr>
<th scope="col">NETWORK</th>
<th scope="col" class="text-end w-25" v-show="!args.network_cumul && !args.network_sum">Rx/s</th>
<th scope="col" class="text-end w-25" v-show="!args.network_cumul && !args.network_sum">Tx/s</th>
<th scope="col" class="text-end w-25" v-show="!args.network_cumul && !args.network_sum">Rxps</th>
<th scope="col" class="text-end w-25" v-show="!args.network_cumul && !args.network_sum">Txps</th>
<th scope="col" class="text-end w-25" v-show="!args.network_cumul && args.network_sum"></th>
<th scope="col" class="text-end w-25" v-show="!args.network_cumul && args.network_sum">Rx+Tx/s</th>
<th scope="col" class="text-end w-25" v-show="!args.network_cumul && args.network_sum">Rx+Txps</th>
<th scope="col" class="text-end w-25" v-show="args.network_cumul && !args.network_sum">Rx</th>
<th scope="col" class="text-end w-25" v-show="args.network_cumul && !args.network_sum">Tx</th>
<th scope="col" class="text-end w-25" v-show="args.network_cumul && args.network_sum"></th>
@ -16,32 +16,32 @@
</thead>
<tbody>
<tr v-for="(network, networkId) in networks" :key="networkId">
<td scope="row" class="visible-lg-inline">
{{ network.ifname }}
<td scope="row" class="visible-lg-inline text-truncate">
{{ $filters.minSize(network.alias ? network.alias : network.ifname, 16) }}
</td>
<td class="text-end w-25" :class="getDecoration(network.interfaceName, 'bytes_recv_rate_per_sec')"
<td class="text-end" :class="getDecoration(network.interfaceName, 'bytes_recv_rate_per_sec')"
v-show="!args.network_cumul && !args.network_sum">
{{ args.byte ? $filters.bytes(network.bytes_recv_rate_per_sec) :
$filters.bits(network.bytes_recv_rate_per_sec) }}
</td>
<td class="text-end w-25" :class="getDecoration(network.interfaceName, 'bytes_sent_rate_per_sec')"
<td class="text-end" :class="getDecoration(network.interfaceName, 'bytes_sent_rate_per_sec')"
v-show="!args.network_cumul && !args.network_sum">
{{ args.byte ? $filters.bytes(network.bytes_sent_rate_per_sec) :
$filters.bits(network.bytes_sent_rate_per_sec) }}
</td>
<td class="text-end w-25" v-show="!args.network_cumul && args.network_sum"></td>
<td class="text-end w-25" v-show="!args.network_cumul && args.network_sum">
<td class="text-end" v-show="!args.network_cumul && args.network_sum"></td>
<td class="text-end" v-show="!args.network_cumul && args.network_sum">
{{ args.byte ? $filters.bytes(network.bytes_all_rate_per_sec) :
$filters.bits(network.bytes_all_rate_per_sec) }}
</td>
<td class="text-end w-25" v-show="args.network_cumul && !args.network_sum">
<td class="text-end" v-show="args.network_cumul && !args.network_sum">
{{ args.byte ? $filters.bytes(network.bytes_recv) : $filters.bits(network.bytes_recv) }}
</td>
<td class="text-end w-25" v-show="args.network_cumul && !args.network_sum">
<td class="text-end" v-show="args.network_cumul && !args.network_sum">
{{ args.byte ? $filters.bytes(network.bytes_sent) : $filters.bits(network.bytes_sent) }}
</td>
<td class="text-end w-25" v-show="args.network_cumul && args.network_sum"></td>
<td class="text-end w-25" v-show="args.network_cumul && args.network_sum">
<td class="text-end" v-show="args.network_cumul && args.network_sum"></td>
<td class="text-end" v-show="args.network_cumul && args.network_sum">
{{ args.byte ? $filters.bytes(network.bytes_all) : $filters.bits(network.bytes_all) }}
</td>
</tr>
@ -53,6 +53,7 @@
<script>
import { orderBy } from 'lodash';
import { store } from '../store.js';
import { bytes } from '../filters.js';
export default {
props: {
@ -92,9 +93,9 @@ export default {
return network;
}).filter(network => {
const bytesRecvRate = this.view[network.interfaceName]['bytes_recv_rate_per_sec'];
const bytesSentRate = this.view[network.interfaceName]['bytes_sent_rate_per_sec'];
return (!bytesRecvRate || bytesRecvRate.hidden === false) && (!bytesSentRate || bytesSentRate.hidden === false);
const bytesRecvRate = this.view[network.interfaceName]['bytes_recv_rate_per_sec'];
const bytesSentRate = this.view[network.interfaceName]['bytes_sent_rate_per_sec'];
return (!bytesRecvRate || bytesRecvRate.hidden === false) && (!bytesSentRate || bytesSentRate.hidden === false);
});
return orderBy(networks, ['interfaceName']);
},

16
glances/outputs/static/js/components/plugin-processlist.vue
View File

@ -2,7 +2,7 @@
<!-- Display processes -->
<section class="plugin" id="processlist" v-if="!args.programs">
<div class="table-responsive d-md-none">
<div class="table-responsive d-lg-none">
<table class="table table-sm table-borderless table-striped table-hover">
<thead>
<tr>
@ -55,7 +55,7 @@
</tbody>
</table>
</div>
<div class="table-responsive-md d-none d-md-block">
<div class="table-responsive-md d-none d-lg-block">
<table class="table table-sm table-borderless table-striped table-hover">
<thead>
<tr>
@ -99,13 +99,13 @@
<td scope="col" class="" :class="['sortable', sorter.column === 'io_counters' && 'sort']"
v-show="ioReadWritePresentProcesses && !getDisableStats().includes('io_counters')"
@click="$emit('update:sorter', 'io_counters')">
IOR
IORps
</td>
<td scope="col" class="text-start"
:class="['sortable', sorter.column === 'io_counters' && 'sort']"
v-show="ioReadWritePresentProcesses && !getDisableStats().includes('io_counters')"
@click="$emit('update:sorter', 'io_counters')">
IOW
IOWps
</td>
<td scope="col" :class="['sortable', sorter.column === 'name' && 'sort']"
@click="$emit('update:sorter', 'name')" v-show="!getDisableStats().includes('cmdline')">
@ -175,7 +175,7 @@
<!-- Display programs -->
<section class="plugin" id="processlist" v-if="args.programs">
<div class="table-responsive d-md-none">
<div class="table-responsive d-lg-none">
<table class="table table-sm table-borderless table-striped table-hover">
<thead>
<tr>
@ -222,7 +222,7 @@
</tbody>
</table>
</div>
<div class="table-responsive d-none d-md-block">
<div class="table-responsive d-none d-lg-block">
<table class="table table-sm table-borderless table-striped table-hover">
<thead>
<tr>
@ -266,13 +266,13 @@
<td scope="row" class="" :class="['sortable', sorter.column === 'io_counters' && 'sort']"
v-show="ioReadWritePresentPrograms && !getDisableStats().includes('io_counters')"
@click="$emit('update:sorter', 'io_counters')">
IOR
IORps
</td>
<td scope="row" class="text-start"
:class="['sortable', sorter.column === 'io_counters' && 'sort']"
v-show="ioReadWritePresentPrograms && !getDisableStats().includes('io_counters')"
@click="$emit('update:sorter', 'io_counters')">
IOW
IOWps
</td>
<td scope="row" :class="['sortable', sorter.column === 'name' && 'sort']"
@click="$emit('update:sorter', 'name')" v-show="!getDisableStats().includes('cmdline')">

2
glances/outputs/static/public/glances.js vendored
View File

File diff suppressed because one or more lines are too long