Skip to content

Commit

Permalink
Correct display issue on Containers plugin in WebUI #3028
Browse files Browse the repository at this point in the history
  • Loading branch information
@nicolargo
nicolargo committed Nov 23, 2024
1 parent 2061d1b commit ce0e3c7
Show file tree
Hide file tree
Showing 6 changed files with 89 additions and 49 deletions.
43 changes: 41 additions & 2 deletions glances/outputs/static/css/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,12 @@ body {
}

#vms {
span {
padding-left: 10px;
}
span:nth-child(1) {
padding-left: 0px;
}
.table {
margin-bottom: 1em;
}
Expand All @@ -232,13 +238,23 @@ body {
* > td:nth-child(7) {
width: 10em;
}
* > td:nth-child(6), td:nth-child(7), td:nth-child(8) {
text-overflow: ellipsis;
white-space: nowrap;
}
}

#containers {
span {
padding-left: 10px;
}
span:nth-child(1) {
padding-left: 0px;
}
.table {
margin-bottom: 1em;
}
* > th:not(:last-child), td:not(:last-child) {
* > td:not(:last-child) {
width: 5em;
}
* > td:nth-child(1) {
Expand All @@ -247,12 +263,31 @@ body {
* > td:nth-child(2), td:nth-child(3) {
width: 15em;
}
* > td:nth-child(4), td:nth-child(5) {
* > td:nth-child(4) {
width: 6em;
}
* > td:nth-child(5) {
width: 10em;
text-overflow: ellipsis;
white-space: nowrap;
}
* > td:nth-child(8) {
width: 10em;
text-overflow: ellipsis;
white-space: nowrap;
}
* > td:nth-child(9), td:nth-child(10) {
width: 8em;
text-overflow: ellipsis;
white-space: nowrap;
}
* > td:nth-child(7), td:nth-child(9), td:nth-child(11) {
text-align: right;
}
* > td:nth-child(13) {
text-overflow: ellipsis;
white-space: nowrap;
}
}

#processcount {
Expand All @@ -275,6 +310,10 @@ body {
.table {
margin-bottom: 1em;
}
* > td:nth-child(8) {
text-overflow: ellipsis;
white-space: nowrap;
}
}

#processlist {
Expand Down
65 changes: 33 additions & 32 deletions glances/outputs/static/js/components/plugin-containers.vue
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,68 @@
<template>
<section class="plugin" id="containers" v-if="containers.length">
<span class="title">CONTAINERS</span>
<span v-show="containers.length > 1"> {{ containers.length }} sorted by {{ sorter.getColumnLabel(sorter.column) }}</span>
<span v-show="containers.length > 1">{{ containers.length }} sorted by {{ sorter.getColumnLabel(sorter.column)
}}</span>
<table class="table table-sm table-borderless table-striped table-hover">
<thead>
<tr>
<td v-show="showEngine">Engine</td>
<td v-show="showPod">Pod</td>
<td :class="['sortable', sorter.column === 'name' && 'sort']"
<td scope="col" v-show="showEngine">Engine</td>
<td scope="col" v-show="showPod">Pod</td>
<td scope="col" :class="['sortable', sorter.column === 'name' && 'sort']"
@click="args.sort_processes_key = 'name'">
Name
</td>
<td>Status</td>
<td>Uptime</td>
<td :class="['sortable', sorter.column === 'cpu_percent' && 'sort']"
<td scope="col">Status</td>
<td scope="col">Uptime</td>
<td scope="col" :class="['sortable', sorter.column === 'cpu_percent' && 'sort']"
@click="args.sort_processes_key = 'cpu_percent'">
CPU%
</td>
<td :class="['sortable', sorter.column === 'memory_percent' && 'sort']"
<td scope="col" :class="['sortable', sorter.column === 'memory_percent' && 'sort']"
@click="args.sort_processes_key = 'memory_percent'">
MEM
</td>
<td>/ MAX</td>
<td>IOR/s</td>
<td>IOW/s</td>
<td>RX/s</td>
<td>TX/s</td>
<td>Command</td>
<td scope="col">/ MAX</td>
<td scope="col">IOR/s</td>
<td scope="col">IOW/s</td>
<td scope="col">RX/s</td>
<td scope="col">TX/s</td>
<td scope="col">Command</td>
</tr>
</thead>
<tbody>
<tr v-for="(container, containerId) in containers" :key="containerId">
<td v-show="showEngine">{{ container.engine }}</td>
<td v-show="showPod">{{ container.pod_id || '-' }}</td>
<td>{{ container.name }}</td>
<td :class="container.status == 'Paused' ? 'careful' : 'ok'">
<td scope="row" v-show="showEngine">{{ container.engine }}</td>
<td scope="row" v-show="showPod">{{ container.pod_id || '-' }}</td>
<td scope="row">{{ container.name }}</td>
<td scope="row" :class="container.status == 'Paused' ? 'careful' : 'ok'">
{{ container.status }}
</td>
<td>
<td scope="row">
{{ container.uptime }}
</td>
<td>
<td scope="row">
{{ $filters.number(container.cpu_percent, 1) }}
</td>
<td>
<td scope="row">
{{ $filters.bytes(container.memory_usage) }}
</td>
<td>
<td scope="row">
/ {{ $filters.bytes(container.limit) }}
</td>
<td>
<td scope="row">
{{ $filters.bytes(container.io_rx) }}
</td>
<td>
<td scope="row">
{{ $filters.bytes(container.io_wx) }}
</td>
<td>
<td scope="row">
{{ $filters.bits(container.network_rx) }}
</td>
<td>
<td scope="row">
{{ $filters.bits(container.network_tx) }}
</td>
<td>
<td scope="row">
{{ container.command }}
</td>
</tr>
Expand Down Expand Up @@ -118,11 +119,11 @@ export default {
'uptime': containerData.uptime,
'cpu_percent': containerData.cpu.total,
'memory_usage': memory_usage_no_cache,
'limit': containerData.memory.limit != undefined ? containerData.memory.limit : '?',
'io_rx': containerData.io_rx != undefined ? containerData.io_rx : '?',
'io_wx': containerData.io_wx != undefined ? containerData.io_wx : '?',
'network_rx': containerData.network_rx != undefined ? containerData.network_rx : '?',
'network_tx': containerData.network_tx != undefined ? containerData.network_tx : '?',
'limit': containerData.memory.limit != undefined && containerData.memory.limit != NaN ? containerData.memory.limit : '-',
'io_rx': containerData.io_rx != undefined && containerData.io_rx != NaN ? containerData.io_rx : '-',
'io_wx': containerData.io_wx != undefined && containerData.io_wx != NaN ? containerData.io_wx : '-',
'network_rx': containerData.network_rx != undefined && containerData.network_rx != NaN ? containerData.network_rx : '-',
'network_tx': containerData.network_tx != undefined && containerData.network_tx != NaN ? containerData.network_tx : '-',
'command': containerData.command,
'image': containerData.image,
'engine': containerData.engine,
Expand Down
18 changes: 9 additions & 9 deletions glances/outputs/static/js/components/plugin-processlist.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<section class="plugin" id="processlist" v-if="!args.programs">
<!-- Display processes -->
<table class=" table table-sm table-borderless table-striped table-hover">
<table class="table table-sm table-borderless table-striped table-hover">
<thead>
<tr>
<td scope="col" :class="['sortable', sorter.column === 'cpu_percent' && 'sort']"
Expand All @@ -23,36 +23,36 @@
<td scope="col" v-show="!getDisableStats().includes('pid')">
PID
</td>
<td scope="row" :class="['sortable', sorter.column === 'username' && 'sort']"
<td scope="col" :class="['sortable', sorter.column === 'username' && 'sort']"
@click="$emit('update:sorter', 'username')" v-show="!getDisableStats().includes('username')">
USER
</td>
<td scope="row" class="hidden-xs hidden-sm"
<td scope="col" class="hidden-xs hidden-sm"
:class="['sortable', sorter.column === 'timemillis' && 'sort']"
@click="$emit('update:sorter', 'timemillis')" v-show="!getDisableStats().includes('cpu_times')">
TIME+
</td>
<td scope="row" class="hidden-xs hidden-sm"
<td scope="col" class="hidden-xs hidden-sm"
:class="['sortable', sorter.column === 'num_threads' && 'sort']"
@click="$emit('update:sorter', 'num_threads')"
v-show="!getDisableStats().includes('num_threads')">
THR
</td>
<td scope="row" v-show="!getDisableStats().includes('nice')">NI</td>
<td scope="row" class="table-cell widtd-60" v-show="!getDisableStats().includes('status')">S
<td scope="col" v-show="!getDisableStats().includes('nice')">NI</td>
<td scope="col" class="table-cell widtd-60" v-show="!getDisableStats().includes('status')">S
</td>
<td scope="row" v-show="ioReadWritePresentProcesses && !getDisableStats().includes('io_counters')"
<td scope="col" v-show="ioReadWritePresentProcesses && !getDisableStats().includes('io_counters')"
class="hidden-xs hidden-sm" :class="['sortable', sorter.column === 'io_counters' && 'sort']"
@click="$emit('update:sorter', 'io_counters')">
IOR/s
</td>
<td scope="row" v-show="ioReadWritePresentProcesses && !getDisableStats().includes('io_counters')"
<td scope="col" v-show="ioReadWritePresentProcesses && !getDisableStats().includes('io_counters')"
class="text-start hidden-xs hidden-sm"
:class="['sortable', sorter.column === 'io_counters' && 'sort']"
@click="$emit('update:sorter', 'io_counters')">
IOW/s
</td>
<td scope="row" :class="['sortable', sorter.column === 'name' && 'sort']"
<td scope="col" :class="['sortable', sorter.column === 'name' && 'sort']"
@click="$emit('update:sorter', 'name')" v-show="!getDisableStats().includes('cmdline')">
Command
</td>
Expand Down
2 changes: 1 addition & 1 deletion glances/outputs/static/js/components/plugin-vms.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<section class="plugin" id="vms" v-if="vms.length">
<span class="title">VMs</span>
<span v-show="vms.length > 1"> {{ vms.length }} sorted by {{ sorter.getColumnLabel(sorter.column) }}</span>
<span v-show="vms.length > 1">{{ vms.length }} sorted by {{ sorter.getColumnLabel(sorter.column) }}</span>
<table class="table table-sm table-borderless table-striped table-hover">
<thead>
<tr>
Expand Down
2 changes: 1 addition & 1 deletion glances/outputs/static/public/browser.js
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions glances/outputs/static/public/glances.js
View file

Large diffs are not rendered by default.

0 comments on commit ce0e3c7

Please sign in to comment.