Merge pull request #7 from ether/add_plugin_version_update_info

Add information about plugin version and if update is available

src/pages/instances.tsx

@@ -1,6 +1,6 @@
 import {useEffect, useMemo, useState} from "react";
 import axios, {AxiosError, AxiosResponse} from "axios";
-import {Instance, InstancesResponse} from "@/types/InstancesResponse.ts";
+import {Instance, InstancesResponse, PluginData} from "@/types/InstancesResponse.ts";
 import {AlertTriangle, Check, NotepadText, PlusIcon} from 'lucide-react'
 
 import {
@@ -69,6 +69,16 @@ export const Instances = () => {
         return replacedVersion < "200"
     }
 
+    const renderPluginInfo = (plugin: PluginData) => {
+        if (plugin.update_available) {
+            return <span className="text-red-700">
+                {plugin.name} (Update available: {plugin.version} => {plugin.latest_version})
+            </span>
+        }
+
+        return <>{plugin.name} ({plugin.version})</>
+    }
+
     if (!filteredInstances) return <LoadingSpinner/>
 
     const dbFailures = (instance?.scan.db_reads_failed || 0) + (instance?.scan.db_writes_failed || 0)
@@ -225,8 +235,9 @@ export const Instances = () => {
                                             <CardTitle>Plugins</CardTitle>
                                         </CardHeader>
                                         <CardContent className="">
-                                            <ul className="list-disc ml-5">{instance?.scan.plugins.map(p =>
-                                                <li key={p}>{p}</li>)}</ul>
+                                            <ul className="list-disc ml-5">{instance?.scan.plugin_data.map(p =>
+                                                <li key={p.name}>{renderPluginInfo(p)}</li>)}
+                                            </ul>
                                         </CardContent>
                                     </Card>
                                 </div>

src/types/InstancesResponse.ts

@@ -12,7 +12,15 @@ type ScanResult = {
     version: string,
     scan_time: string,
     plugins: string[],
+    plugin_data: PluginData[],
     websocket_available: boolean | null,
     db_reads_failed: number,
     db_writes_failed: number,
 }
+
+export type PluginData = {
+    name: string,
+    version: string,
+    latest_version: string | null,
+    update_available: boolean,
+}