Improve theme and refactor getDecoration for stats

Makefile

@@ -310,6 +310,9 @@ run-client: ## Start Glances in client mode (RPC)
 run-browser: ## Start Glances in browser mode (RPC)
 	$(PYTHON) -m glances -C $(CONF) --browser
 
+run-web-browser: ## Start Web Central Browser
+	$(PYTHON) -m glances -C $(CONF) -w --browser
+
 run-issue: ## Start Glances in issue mode
 	$(PYTHON) -m glances -C $(CONF) --issue
 

glances/outputs/glances_restful_api.py

@@ -231,6 +231,7 @@ class GlancesRestfulApi:
             f'{plugin_path}/limits': self._api_limits,
             f'{plugin_path}/views': self._api_views,
             f'{plugin_path}/{{item}}': self._api_item,
+            f'{plugin_path}/{{item}}/views': self._api_item_views,
             f'{plugin_path}/{{item}}/history': self._api_item_history,
             f'{plugin_path}/{{item}}/history/{{nb}}': self._api_item_history,
             f'{plugin_path}/{{item}}/description': self._api_item_description,
@@ -610,6 +611,30 @@ class GlancesRestfulApi:
 
         return GlancesJSONResponse(ret)
 
+    def _api_item_views(self, plugin: str, item: str):
+        """Glances API RESTful implementation.
+
+        Return the JSON view representation of the couple plugin/item
+        HTTP/200 if OK
+        HTTP/400 if plugin is not found
+        HTTP/404 if others error
+        """
+        self._check_if_plugin_available(plugin)
+
+        # Update the stat
+        self.__update_stats()
+
+        try:
+            # Get the RAW value of the stat views
+            ret = self.stats.get_plugin(plugin).get_views().get(item)
+        except Exception as e:
+            raise HTTPException(
+                status.HTTP_404_NOT_FOUND,
+                f"Cannot get item {item} in plugin view {plugin} ({str(e)})",
+            )
+
+        return GlancesJSONResponse(ret)
+
     def _api_item_history(self, plugin: str, item: str, nb: int = 0):
         """Glances API RESTful implementation.
 

glances/outputs/static/css/custom.scss

@@ -18,7 +18,7 @@
 @import "../node_modules/bootstrap/scss/functions";
 
 // // 2. Include any default variable overrides here
-// $bg-color: black;
+// $body-bg: black;
 
 // // 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
 @import "../node_modules/bootstrap/scss/variables";

glances/outputs/static/css/style.scss

@@ -12,16 +12,14 @@ $glances-fonts-size: 14px;
 :root {
     --bs-body-bg: $glances-bg;
     --bs-body-color: $glances-fg;
-    --bs-link-hover-color: $glances-link-hover-color;
     --bs-body-font-size: $glances-fonts-size;
 }
 
-#app {
-    font-family: $glances-fonts;
-}
-
-#browser {
+body {
+    background-color: $glances-bg;
+    color: $glances-fg;
     font-family: $glances-fonts;
+    font-size: $glances-fonts-size;
 }
 
 .title {
@@ -73,6 +71,11 @@ $glances-fonts-size: 14px;
     color: #EE6600 !important;
     font-weight: bold !important;
 }
+.error_log {
+    background-color: #EE6600 !important;
+    color: white !important;
+    font-weight: bold !important;
+}
 
 // Table
 
@@ -112,6 +115,10 @@ $glances-fonts-size: 14px;
     white-space: nowrap;
 }
 
+.table-hover tbody tr:hover td {
+    background: $glances-link-hover-color;
+}
+
 // Separator
 
 .separator {

glances/outputs/static/js/Browser.vue

@@ -33,7 +33,8 @@
                     <td class="">
                         {{ server.protocol }}
                     </td>
-                    <td v-if="servers.length" v-for="(column, columnId) in server.columns" :key="columnId">
+                    <td v-if="servers.length" v-for="(column, columnId) in server.columns" :key="columnId"
+                        :class="getDecoration(server, column)">
                         {{ formatNumber(server[column]) }}
                     </td>
                 </tr>
@@ -83,6 +84,12 @@ export default {
             } else {
                 window.location.href = server.uri;
             }
+        },
+        getDecoration(server, column) {
+            if (server[column + '_decoration'] === undefined) {
+                return;
+            }
+            return server[column + '_decoration'].decoration.replace('_LOG', '').toLowerCase();
         }
     },
     computed: {

glances/servers_list.py

@@ -178,6 +178,7 @@ class GlancesServersList:
 
         for column in self.static_server.get_columns():
             server_key = self.__get_key(column)
+            # Value
             try:
                 r = requests.get(f'{uri}/{column['plugin']}/{column['field']}', timeout=3)
             except requests.exceptions.RequestException as e:
@@ -185,6 +186,15 @@ class GlancesServersList:
                 return server
             else:
                 server[server_key] = r.json()[column['field']]
+            # Decoration
+            try:
+                r = requests.get(f'{uri}/{column['plugin']}/{column['field']}/views', timeout=3)
+            except requests.exceptions.RequestException as e:
+                logger.debug(f"Error while grabbing stats view form server ({e})")
+                return server
+            else:
+                if r.json():
+                    server[server_key + '_decoration'] = r.json()
 
         return server