Make top menu dynamic on WebUI

nicolargo · Nov 21, 2024 · 55d42d3 · 55d42d3
1 parent 9e945f1
commit 55d42d3
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 15 deletions.
diff --git a/glances/outputs/static/css/style.scss b/glances/outputs/static/css/style.scss
@@ -84,18 +84,22 @@ body {
     height: 30px;
 }
 
-.top {
-    height: 140px;
+.top-min {
+    height: 100px;
 }
 
-.left-sidebar {
+.top-max {
+    height: 180px;
+}
+
+.sidebar-min {
     overflow-y: auto;
-    height: calc(100vh - 30px - 140px);
+    height: calc(100vh - 30px - 100px);
 }
 
-.right-sidebar {
+.sidebar-max {
     overflow-y: auto;
-    height: calc(100vh - 30px - 140px);
+    height: calc(100vh - 30px - 180px);
 }
 
 // Table

diff --git a/glances/outputs/static/js/App.vue b/glances/outputs/static/js/App.vue
@@ -25,7 +25,7 @@
                 </div>
             </div>
         </div>
-        <div class="container-fluid top">
+        <div class="container-fluid" :class="{ 'top-min': !args.percpu, 'top-max': args.percpu }">
             <div class="row justify-content-between">
                 <!-- Quicklook -->
                 <div class="col-3 d-none d-lg-block d-xl-block d-xxl-block" v-if="!args.disable_quicklook">
@@ -65,14 +65,15 @@
         </div>
         <div class="container-fluid">
             <div class="row">
-                <div class="col-3 left-sidebar" v-if="!args.disable_left_sidebar">
+                <div class="col-3" :class="{ 'sidebar-min': !args.percpu, 'sidebar-max': args.percpu }"
+                    v-if="!args.disable_left_sidebar">
                     <template v-for="plugin in leftMenu">
                         <component v-if="!args[`disable_${plugin}`]" :is="`glances-plugin-${plugin}`"
                             :id="`plugin-${plugin}`" :data="data">
                         </component>
                     </template>
                 </div>
-                <div class="col right-sidebar">
+                <div class="col" :class="{ 'sidebar-min': !args.percpu, 'sidebar-max': args.percpu }">
                     <glances-plugin-vms v-if="!args.disable_vms" :data="data"></glances-plugin-vms>
                     <glances-plugin-containers v-if="!args.disable_containers" :data="data"></glances-plugin-containers>
                     <glances-plugin-process :data="data"></glances-plugin-process>

diff --git a/glances/outputs/static/js/components/plugin-quicklook.vue b/glances/outputs/static/js/components/plugin-quicklook.vue
@@ -31,7 +31,7 @@
                     </td>
                     <td scope="col" class="text-end">{{ percpu.total }}%</td>
                 </tr>
-                <tr v-if="!args.percpu" v-for="(key) in stats_list_after_cpu">
+                <tr v-for="(key) in stats_list_after_cpu">
                     <td scope="col">{{ key.toUpperCase() }}</td>
                     <td scope="col" class="progress">
                         <div :class="`progress-bar progress-bar-${getDecoration(key)}`" role="progressbar"

diff --git a/glances/outputs/static/public/browser.js b/glances/outputs/static/public/browser.js
diff --git a/glances/outputs/static/public/glances.js b/glances/outputs/static/public/glances.js