Add list of loaded plugins to /plugins page

src/backend/plugins/handler.py

@@ -1,4 +1,4 @@
-from typing import Dict, Tuple, Optional
+from typing import Any, Dict, List,  Optional, Tuple
 
 import importlib
 import logging
@@ -78,3 +78,14 @@ def unload_all() -> bool:
 
 def get_plugin_names() -> Tuple[str, ...]:
     return tuple(_PLUGINS.keys())
+
+
+def get_plugin_statuses() -> List[Dict[str, Any]]:
+    result = []
+    for name, _ in priority.fetch_plugins(reload=False):
+        if name in _PLUGINS:
+            result.append({'name': name, 'status': True})
+            continue
+        result.append({'name': name, 'status': False})
+
+    return result

src/backend/server/main.py

@@ -182,7 +182,8 @@ async def plugins(request: Request, plugin: str, endpoint: str) -> Any:
         return_value = await callback(endpoint, request)
     else:
         # Sync function detected
-        logging.error(f'Plugin "{plugin}" uses synchronous functions, request blocked')
+        logging.error(
+            f'Plugin "{plugin}" uses synchronous functions, request blocked')
         response.status_code = 503
     if return_value is not None:
         return return_value
@@ -210,14 +211,15 @@ async def ws_plugins(websocket: WebSocket, plugin: str, endpoint: str) -> Any:
         await callback(endpoint, websocket)
     else:
         # Sync function detected
-        logging.error(f'Plugin "{plugin}" uses synchronous functions, request blocked')
+        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': False, 'error': 'Auth failed'})
 
-    return ORJSONResponse({'ok': True, 'plugins': handler.get_plugin_names()})
+    return ORJSONResponse({'ok': True, 'plugins': handler.get_plugin_statuses()})

src/frontend/src/lib/components/plugins/Error.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+  /* TODO: Implement this */
+  export let error: string;
+</script>

src/frontend/src/lib/components/plugins/Plugin.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { PluginStatus } from "../shared/api/plugins.type";
+
+  export let data: PluginStatus;
+</script>
+
+{#if data.status}
+  <pre class="online">[<span style="color: rgb(0, 255, 0);">ONLINE</span
+    >]   {data.name}</pre>
+{:else}
+  <pre class="offline"><span style="color: red;">OFFLINE</span
+    >]    {data.name}</pre>
+{/if}
+
+<style>
+  pre {
+    white-space: pre;
+    font-family: monaco, Consolas, "Lucida Console", monospace;
+    color: whitesmoke;
+    font-size: 16px;
+    margin: 0px;
+  }
+
+  span {
+    font-family: monaco, Consolas, "Lucida Console", monospace;
+  }
+</style>

src/frontend/src/lib/components/plugins/PluginsContainer.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { PluginStatus } from "../shared/api/plugins.type";
+  import Error from "./Error.svelte";
+  import Plugin from "./Plugin.svelte";
+  import Separator from "../shared/Separator.svelte";
+
+  let plugins: Array<PluginStatus> = [];
+  let error: string;
+
+  onMount(() => {
+    fetch("/plugins/status")
+      .then((response) => response.json())
+      .then((responseJson) => {
+        if (responseJson.ok == true) {
+          plugins = responseJson.plugins;
+        } else {
+          plugins = [];
+          error = responseJson.error;
+        }
+      });
+  });
+</script>
+
+
+<Separator />
+{#if plugins.length == 0}
+  <Error {error} />
+{/if}
+{#each plugins as plugin}
+  <Plugin data={plugin} />
+{/each}
+
+<style>
+</style>

src/frontend/src/lib/components/shared/api/plugins.type.ts

@@ -0,0 +1,4 @@
+export type PluginStatus = {
+  name: string;
+  status: boolean;
+};

src/frontend/src/routes/plugins/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Box from "$lib/components/plugins/Box.svelte";
   import Header from "$lib/components/plugins/Header.svelte";
+  import PluginsContainer from "$lib/components/plugins/PluginsContainer.svelte";
   import UrlField from "$lib/components/plugins/UrlField.svelte";
   import Separator from "$lib/components/shared/Separator.svelte";
   import Statusbar from "$lib/components/shared/statusbar/Statusbar.svelte";
@@ -11,6 +12,7 @@
   <Header />
   <Separator />
   <UrlField />
+  <PluginsContainer />
 </Box>
 
 <DNotificationContainer />