Almost ok

This commit is contained in:
nicolargo 2024-09-29 18:52:42 +02:00
parent 2e1abd3986
commit 3f97874c63
22 changed files with 220 additions and 150 deletions

View File

@ -50,6 +50,27 @@
font-weight: bold !important;
}
// Table
.table {
margin-bottom: 0px;
}
.margin-top {
margin-top: 0.5em;
}
.margin-bottom {
margin-bottom: 0.5em;
}
.table-sm > :not(caption) > * > * {
padding-top: 0em;
padding-right: 0.25rem;
padding-bottom: 0em;
padding-left: 0.25rem;
}
// Text
.sort {
@ -76,18 +97,18 @@
// Separator
.separator {
overflow:hidden;
height:5px;
overflow: hidden;
height: 5px;
}
.separator:after {
content:'';
display:block;
margin:-25px auto 0;
width:100%;
height:24px;
border-radius:125px / 12px;
box-shadow:0 0 8px #555555;
content: '';
display: block;
margin: -25px auto 0;
width: 100%;
height: 24px;
border-radius: 125px / 12px;
box-shadow: 0 0 8px #555555;
}
// Plugins
@ -109,6 +130,12 @@
}
#quicklook {
span {
padding-left: 10px;
}
span:nth-child(1) {
padding-left: 0px;
}
.progress {
margin-bottom: 0px;
min-width: 100px;
@ -137,19 +164,46 @@
}
}
#containers {
#vms {
.table {
margin-bottom: 1em;
}
* > th:not(:last-child), td:not(:last-child) {
width: 4em;
}
* > td:nth-child(7), td:nth-child(9), td:nth-child(11) {
* > td:nth-child(2) {
width: 15em;
}
* > td:nth-child(3) {
width: 6em;
}
* > td:nth-child(5) {
text-align: right;
}
* > td:nth-child(1), td:nth-child(2), td:nth-child(3) {
* > td:nth-child(7) {
width: 10em;
}
}
#containers {
.table {
margin-bottom: 1em;
}
* > th:not(:last-child), td:not(:last-child) {
width: 4em;
}
* > td:nth-child(1) {
width: 10em;
}
* > td:nth-child(2), td:nth-child(3) {
width: 15em;
}
* > td:nth-child(4), td:nth-child(5) {
width: 6em;
}
* > td:nth-child(7), td:nth-child(9), td:nth-child(11) {
text-align: right;
}
}
#processcount {
@ -169,6 +223,9 @@
padding-left: 10px;
text-overflow: ellipsis;
}
.table {
margin-bottom: 1em;
}
}
#processlist {
@ -178,10 +235,28 @@
* > td:nth-child(5), td:nth-child(7), td:nth-child(9), td:nth-child(11) {
text-align: right;
}
* > td:nth-child(6), td:nth-child(7) {
* > td:nth-child(6) {
width: 7em;
}
* > td:nth-child(7) {
width: 6em;
}
* > td:nth-child(9),td:nth-child(10) {
width: 2em;
}
.table {
margin-bottom: 1em;
}
}
#alerts {
span {
padding-left: 10px;
}
span:nth-child(1) {
padding-left: 0px;
}
* > td:nth-child(1) {
width: 20em;
}
}

View File

@ -4,7 +4,7 @@
</div>
<glances-help v-else-if="args.help_tag"></glances-help>
<main v-else>
<div class="container-fluid">
<div class="container-fluid margin-bottom">
<div class="row justify-content-between">
<div class="col-auto" v-if="!args.disable_system">
<glances-plugin-system :data="data"></glances-plugin-system>
@ -16,14 +16,14 @@
<glances-plugin-uptime :data="data"></glances-plugin-uptime>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col" v-if="!args.disable_cloud">
<div class="row" v-if="!args.disable_cloud">
<div class="col">
<glances-plugin-cloud :data="data"></glances-plugin-cloud>
</div>
</div>
<div class="row separator" v-if="args.enable_separator"></div>
</div>
<div class="row separator" v-if="args.enable_separator"></div>
<div class="container-fluid margin-top margin-bottom">
<div class="row justify-content-between">
<!-- Quicklook -->
<div class="col-3 d-none d-lg-block d-xl-block d-xxl-block"
@ -66,9 +66,9 @@
<glances-plugin-load :data="data"></glances-plugin-load>
</div>
</div>
<div class="row separator" v-if="args.enable_separator"></div>
</div>
<div class="container-fluid">
<div class="row separator" v-if="args.enable_separator"></div>
<div class="container-fluid margin-top">
<div class="row">
<div class="col-3 sidebar" v-if="!args.disable_left_sidebar">
<template v-for="plugin in leftMenu">

View File

@ -1,28 +1,27 @@
<template>
<div class="plugin">
<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">
<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 }}) -
<section class="plugin" 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>
<table class="table table-sm table-borderless">
<tbody>
<tr v-for="(alert, alertId) in alerts" :key="alertId">
<td scope="row">
<span>{{ formatDate(alert.begin) }}</span>
<span>({{ alert.ongoing ? 'ongoing' : alert.duration }})</span>
</td>
<td scope="row"></td>
<td scope="row">
<span v-show="!alert.ongoing"> {{ alert.state }} on </span>
<span :class="alert.state.toLowerCase()">
{{ alert.type }}
</span>
({{ $filters.number(alert.max, 1) }})
{{ alert.top }}
</div>
</div>
</div>
</section>
</div>
<span :class="alert.state.toLowerCase()">{{ alert.type }}</span>
<span>({{ $filters.number(alert.max, 1) }})</span>
<span>: {{ alert.top }}</span>
</td>
</tr>
</tbody>
</table>
</section>
</template>
<script>

View File

@ -1,5 +1,5 @@
<template>
<section id="cloud" class="plugin" v-if="instance || provider">
<section class="plugin" id="cloud" v-if="instance || provider">
<span class="title">{{ provider }}</span> {{ instance }}
</section>
</template>

View File

@ -1,6 +1,6 @@
<template>
<section class="plugin" id="connections">
<table class="table table-sm table-borderless">
<table class="table table-sm table-borderless margin-bottom">
<thead>
<tr>
<th scope="col">TCP CONNECTIONS</th>

View File

@ -1,7 +1,7 @@
<template>
<section class="plugin" id="containers" v-if="containers.length">
<span class="title">CONTAINERS</span>
{{ containers.length }} sorted by {{ sorter.getColumnLabel(sorter.column) }}
<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>

View File

@ -1,6 +1,6 @@
<template v-if="hasDisks">
<section class="plugin" id="diskio">
<table class="table table-sm table-borderless">
<template>
<section class="plugin" id="diskio" v-if="hasDisks">
<table class="table table-sm table-borderless margin-bottom">
<thead>
<tr>
<th scope="col">DISK I/O</th>

View File

@ -1,6 +1,6 @@
<template v-if="hasFolders">
<section class="plugin" id="folders">
<table class="table table-sm table-borderless">
<template>
<section class="plugin" id="folders" v-if="hasFolders">
<table class="table table-sm table-borderless margin-bottom">
<thead>
<tr>
<th scope="col">FOLDERS</th>

View File

@ -1,6 +1,6 @@
<template v-if="hasFs">
<section class="plugin" id="fs">
<table class="table table-sm table-borderless">
<template>
<section class="plugin" id="fs" v-if="hasFs">
<table class="table table-sm table-borderless margin-bottom">
<thead>
<tr>
<th scope="col">FILE SYSTEM</th>

View File

@ -1,6 +1,6 @@
<template>
<section class="plugin" id="irq">
<table class="table table-sm table-borderless">
<table class="table table-sm table-borderless margin-bottom">
<thead>
<tr>
<th scope="col">IRQ</th>

View File

@ -1,6 +1,6 @@
<template v-if="hasNetworks">
<section class="plugin" id="network">
<table class="table table-sm table-borderless">
<template>
<section class="plugin" id="network" v-if="hasNetworks">
<table class="table table-sm table-borderless margin-bottom">
<thead>
<tr>
<th scope="col">NETWORK</th>

View File

@ -1,6 +1,6 @@
<template v-if="hasPorts">
<section class="plugin" id="ports">
<table class="table table-sm table-borderless">
<template>
<section class="plugin" id="ports" v-if="hasPorts">
<table class="table table-sm table-borderless margin-bottom">
<tbody>
<tr v-for="(port, portId) in ports" :key="portId">
<td scope="row">

View File

@ -37,7 +37,7 @@
THR
</td>
<td scope="row">NI</td>
<td scope="row" class="table-cell width-60">S</td>
<td scope="row" class="table-cell widtd-60">S</td>
<td scope="row"
v-show="ioReadWritePresent"
class="hidden-xs hidden-sm"

View File

@ -1,10 +1,12 @@
<template>
<section id="quicklook" class="plugin">
<div class="cpu-name text-left">
{{ cpu_name }}
</div>
<div class="cpu-freq text-left" v-if="cpu_hz_current">
Frequency: {{ cpu_hz_current }}/{{ cpu_hz }}Ghz
<div>
<span>
{{ cpu_name }}
</span>
<span class="text-right" v-if="cpu_hz_current">
{{ cpu_hz_current }}/{{ cpu_hz }}Ghz
</span>
</div>
<div class="table-responsive">
<table class="table table-sm table-borderless">

View File

@ -1,9 +1,9 @@
<template v-if="hasDisks">
<section class="plugin" id="raid">
<table class="table table-sm table-borderless">
<template>
<section class="plugin" id="raid" v-if="hasDisks">
<table class="table table-sm table-borderless margin-bottom">
<thead>
<tr>
<th scope="col">RAID disks</th>
<th scope="col">RAID disks {{ disks.length }}</th>
<th scope="col" class="text-end">Used</th>
<th scope="col" class="text-end">Total</th>
</tr>

View File

@ -1,5 +1,5 @@
<template v-if="hasSensors">
<section class="plugin" id="sensors">
<template>
<section class="plugin" id="sensors" v-if="hasSensors">
<table class="table table-sm table-borderless">
<thead>
<tr>

View File

@ -1,6 +1,6 @@
<template v-if="hasDrives">
<section id="smart" class="plugin">
<table class="table table-sm table-borderless">
<template>
<section id="smart" class="plugin" v-if="hasDrives">
<table class="table table-sm table-borderless margin-bottom">
<thead>
<tr>
<th scope="col">SMART DISKS</th>

View File

@ -1,63 +1,55 @@
<template>
<section id="vms" class="plugin" v-if="vms.length">
<section class="plugin" id="vms" v-if="vms.length">
<span class="title">VMs</span>
{{ vms.length }} sorted by {{ sorter.getColumnLabel(sorter.column) }}
<div class="table">
<div class="table-row">
<div class="table-cell text-left" v-show="showEngine">Engine</div>
<div
class="table-cell text-left"
:class="['sortable', sorter.column === 'name' && 'sort']"
@click="args.sort_processes_key = 'name'"
>
Name
</div>
<div class="table-cell">Status</div>
<div class="table-cell">Core</div>
<div
class="table-cell"
:class="['sortable', sorter.column === 'memory_usage' && 'sort']"
@click="args.sort_processes_key = 'memory_usage'"
>
MEM
</div>
<div class="table-cell text-left">/MAX</div>
<div
class="table-cell"
:class="['sortable', sorter.column === 'load_1min' && 'sort']"
@click="args.sort_processes_key = 'load_1min'"
>
LOAD 1/5/15min
</div>
<div class="table-cell text-right">Release</div>
</div>
<div
class="table-row"
v-for="(vm, vmId) in vms"
:key="vmId"
>
<div class="table-cell text-left" v-show="showEngine">{{ vm.engine }}</div>
<div class="table-cell text-left">{{ vm.name }}</div>
<div class="table-cell" :class="vm.status == 'stopped' ? 'careful' : 'ok'">
{{ vm.status }}
</div>
<div class="table-cell">
{{ $filters.number(vm.cpu_count, 1) }}
</div>
<div class="table-cell">
{{ $filters.bytes(vm.memory_usage) }}
</div>
<div class="table-cell text-left">
/{{ $filters.bytes(vm.memory_total) }}
</div>
<div class="table-cell">
{{ $filters.number(vm.load_1min) }}/{{ $filters.number(vm.load_5min) }}/{{ $filters.number(vm.load_15min) }}
</div>
<div class="table-cell text-right">
{{ vm.release }}
</div>
</div>
</div>
<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>
<td v-show="showEngine">Engine</td>
<td :class="['sortable', sorter.column === 'name' && 'sort']"
@click="args.sort_processes_key = 'name'">
Name
</td>
<td>Status</td>
<td>Core</td>
<td :class="['sortable', sorter.column === 'memory_usage' && 'sort']"
@click="args.sort_processes_key = 'memory_usage'">
MEM
</td>
<td>/ MAX</td>
<td :class="['sortable', sorter.column === 'load_1min' && 'sort']"
@click="args.sort_processes_key = 'load_1min'">
LOAD 1/5/15min
</td>
<td>Release</td>
</tr>
</thead>
<tbody>
<tr v-for="(vm, vmId) in vms" :key="vmId">
<td v-show="showEngine">{{ vm.engine }}</td>
<td>{{ vm.name }}</td>
<td :class="vm.status == 'stopped' ? 'careful' : 'ok'">
{{ vm.status }}
</td>
<td>
{{ $filters.number(vm.cpu_count, 1) }}
</td>
<td>
{{ $filters.bytes(vm.memory_usage) }}
</td>
<td>
/ {{ $filters.bytes(vm.memory_total) }}
</td>
<td>
{{ $filters.number(vm.load_1min) }}/{{ $filters.number(vm.load_5min) }}/{{
$filters.number(vm.load_15min) }}
</td>
<td>
{{ vm.release }}
</td>
</tr>
</tbody>
</table>
</section>
</template>

View File

@ -1,6 +1,6 @@
<template v-if="hasHotpots">
<section class="plugin" id="wifi">
<table class="table table-sm table-borderless">
<template>
<section class="plugin" id="wifi" v-if="hasHotpots">
<table class="table table-sm table-borderless margin-bottom">
<thead>
<tr>
<th scope="col">WIFI</th>

File diff suppressed because one or more lines are too long

View File

@ -294,10 +294,11 @@ class PluginModel(GlancesPluginModel):
def build_title(self, ret):
msg = '{}'.format('CONTAINERS')
ret.append(self.curse_add_line(msg, "TITLE"))
msg = f' {len(self.stats)}'
ret.append(self.curse_add_line(msg))
msg = f' sorted by {sort_for_human[self.sort_key]}'
ret.append(self.curse_add_line(msg))
if len(self.stats) > 1:
msg = f' {len(self.stats)}'
ret.append(self.curse_add_line(msg))
msg = f' sorted by {sort_for_human[self.sort_key]}'
ret.append(self.curse_add_line(msg))
if not self.views['show_engine_name']:
msg = f' (served by {self.stats[0].get("engine", "")})'
ret.append(self.curse_add_line(msg))

View File

@ -200,10 +200,11 @@ class PluginModel(GlancesPluginModel):
# Title
msg = '{}'.format('VMs')
ret.append(self.curse_add_line(msg, "TITLE"))
msg = f' {len(self.stats)}'
ret.append(self.curse_add_line(msg))
msg = f' sorted by {sort_for_human[self.sort_key]}'
ret.append(self.curse_add_line(msg))
if len(self.stats) > 1:
msg = f' {len(self.stats)}'
ret.append(self.curse_add_line(msg))
msg = f' sorted by {sort_for_human[self.sort_key]}'
ret.append(self.curse_add_line(msg))
if not self.views['show_engine_name']:
msg = f' (served by {self.stats[0].get("engine", "")})'
ret.append(self.curse_add_line(msg))