Add Plugins.svelte widget to Statusbar.svelte

src/backend/plugins/handler.py

@@ -1,4 +1,4 @@
-from typing import Optional
+from typing import List, Optional
 
 import importlib
 import logging
@@ -7,6 +7,9 @@
 from plugins import priority
 
 
+_PLUGINS: List[Plugin] = []
+
+
 def load_all() -> None:
     for plugin_name, prio in priority.fetch_plugins():
         logging.info(f'Loading plugin "{plugin_name}" with priority {prio}')
@@ -19,6 +22,8 @@ def load(name: str) -> Optional[Plugin]:
     try:
         source = f'plugins.plugins.{name}.backend.main'
         plugin: Plugin = importlib.import_module(source).init()
+        if plugin and plugin not in _PLUGINS:
+            _PLUGINS.append(plugin)
         return plugin
     except TypeError:
         # Abstract class (Plugin) does not implement methods like load & unload
@@ -31,3 +36,7 @@ def load(name: str) -> Optional[Plugin]:
         logging.error(f'Plugin "{name}" does not exist')
 
     return None
+
+
+def get_plugin_names() -> List[str]:
+    return [plugin.name for plugin in _PLUGINS]

src/backend/server/main.py

@@ -213,3 +213,11 @@ async def ws_plugins(websocket: WebSocket, plugin: str, endpoint: str) -> Any:
         logging.error(f'Plugin "{plugin}" uses synchronous functions, request blocked')
         response.status_code = 503
         return response
+
+
+@app.get('/plugins/status', response_class=ORJSONResponse)
+async def plugin_status(request: Request) -> ORJSONResponse:
+    if not database.uuid_exists(request.cookies.get('auth_cookie')):
+        return ORJSONResponse({'ok': False})
+
+    return ORJSONResponse({'ok': True, 'plugins': handler.get_plugin_names()})

src/frontend/src/lib/components/shared/statusbar/Clock.svelte

@@ -39,6 +39,6 @@
     font-size: 12px;
     margin: 0px;
     display: grid;
-    grid-column: 6;
+    grid-column: 7;
   }
 </style>

src/frontend/src/lib/components/shared/statusbar/Latency.svelte

@@ -81,7 +81,7 @@
     font-size: 12px;
     margin: 0px;
     display: grid;
-    grid-column: 4;
+    grid-column: 5;
   }
 
   span {

src/frontend/src/lib/components/shared/statusbar/Plugins.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  let out_of: string = "";
+  let status: string = "success";
+  let content: string = "LOAD*";
+  onMount(() => {
+    fetch("/plugins/status")
+      .then((response) => response.json())
+      .then((responseJson) => {
+        if (responseJson.ok == true) {
+          status = "success";
+          out_of = `/${responseJson.plugins.length}`;
+          content = responseJson.plugins.length;
+        } else {
+          status = "failure";
+          out_of = "";
+          content = "ERROR";
+        }
+      });
+  });
+</script>
+
+<a href="/plugins">
+  <pre class="plugins">Plugins: <span id={status}>{content}</span>{out_of}</pre>
+</a>
+
+<style>
+  pre {
+    color: whitesmoke;
+    font-family: monaco, Consolas, "Lucida Console", monospace;
+    font-size: 12px;
+    margin: 0px;
+  }
+
+  .plugins {
+    grid-column: 4;
+    padding: 4px;
+  }
+
+  .plugins:hover {
+    background-color: rgb(102, 153, 255);
+  }
+
+  #success {
+    color: rgb(0, 255, 0);
+  }
+
+  #failure {
+    color: red;
+  }
+
+  a {
+    flex-grow: 1;
+    text-decoration: none;
+  }
+</style>

src/frontend/src/lib/components/shared/statusbar/Statusbar.svelte

@@ -4,12 +4,14 @@
   import Latency from "./Latency.svelte";
   import Rebuild from "./Rebuild.svelte";
   import Fullscreen from "./Fullscreen.svelte";
+  import Plugins from "./Plugins.svelte";
 </script>
 
 <div class="container">
   <Version />
   <Rebuild />
   <Fullscreen />
+  <Plugins />
   <Latency />
   <Clock />
 </div>
@@ -31,6 +33,6 @@
     text-align: center;
     display: inline-grid;
     column-gap: 2px;
-    grid-template-columns: 160px 60px 80px 60px auto 100px;
+    grid-template-columns: 160px 70px 80px 120px 60px auto 100px;
   }
 </style>