adds inspect extraInfo to ig-desktop

Signed-off-by: KapilSareen <kapilsareen584@gmail.com>

Author: KapilSareen

frontend/package-lock.json

@@ -42,7 +42,8 @@
 		"@tailwindcss/vite": "^4.1.7",
 		"d3": "^7.9.0",
 		"js-yaml": "^4.1.0",
-		"marked": "^15.0.12",
+		"marked": "^15.0.11",
+		"mermaid": "^11.6.0",
 		"monaco-editor": "^0.52.2"
 	}
 }

frontend/package.json

@@ -0,0 +1,105 @@
+<script>
+	import Monaco from '../monaco.svelte';
+	import { getContext } from 'svelte';
+	import { page } from '$app/state';
+	import { environments } from '$lib/shared/environments.svelte.js';
+	import mermaid from 'mermaid';
+
+	let { data, gadgetInfo } = $props();
+	const api = getContext('api');
+
+	let env = $derived(environments[page.params.env]);
+
+	let graphs = $state({});
+	let info = $state({});
+
+	$effect(() => {
+		if (!env.id || !gadgetInfo?.imageName) {
+			return;
+		}
+
+		mermaid.initialize({ startOnLoad: true, theme: 'dark' });
+
+		api
+			.request({ cmd: 'getGadgetInfo', data: { url: gadgetInfo.imageName, environmentID: env.id } })
+			.then((res) => {
+				let extraInfo = res.extraInfo.data;
+				if (!extraInfo) {
+					return;
+				}
+				for (const key in extraInfo) {
+					if (extraInfo[key].contentType == 'text/mermaid') {
+						let graph = atob(extraInfo[key].content);
+						let id = `mermaid-${Math.random().toString(2).substring(2, 15)}`;
+						mermaid
+							.render(id, graph)
+							.then(({ svg }) => {
+								console.log(svg);
+								graphs[key] = svg;
+							})
+							.catch((err) => {
+								console.error(`Error rendering mermaid graph for key ${key}:`, err);
+								graphs[key] = `<div>Error rendering graph: ${err.message}</div>`;
+							});
+					}
+
+					if (
+						extraInfo[key].contentType == 'text/plain' ||
+						extraInfo[key].contentType == 'application/json'
+					) {
+						try {
+							info[key] = atob(extraInfo[key].content);
+						} catch (e) {
+							console.error(`Error decoding content for key ${key}:`, e);
+							info[key] = 'Error decoding content.';
+						}
+					}
+				}
+			})
+			.catch((err) => {
+				console.error('Error fetching gadget info:', err);
+			});
+	});
+</script>
+
+<div class="flex flex-1 flex-col space-y-4 overflow-scroll">
+	<!-- Mermaid graphs -->
+	{#if graphs && Object.keys(graphs).length > 0}
+		{#each Object.entries(graphs) as [key, svg]}
+			<div class="mb-4">
+				<h3 class="text-md mb-2 font-semibold">{key}</h3>
+				<button
+					class="text-sm text-blue-500 hover:underline"
+					onclick={() => {
+						const pre = document.getElementById(`extra-info-${key}`);
+						if (pre) {
+							pre.classList.toggle('hidden');
+						}
+					}}>Toggle Content</button
+				>
+				<div id={`extra-info-${key}`} class="hidden overflow-x-auto rounded border p-2">
+					{@html svg}
+				</div>
+			</div>
+		{/each}
+	{/if}
+
+	<!-- JSON extra info -->
+	{#if info && Object.keys(info).length > 0}
+		{#each Object.entries(info) as [key, content]}
+			<div class="mb-4">
+				<h3 class="text-md mb-2 font-semibold">{key}</h3>
+				<button
+					class="cursor-pointer text-sm text-blue-500"
+					onclick={() => {
+						const pre = document.getElementById(`extra-info-${key}`);
+						if (pre) {
+							pre.classList.toggle('hidden');
+						}
+					}}>Toggle Content</button
+				>
+			</div>
+			<div id={`extra-info-${key}`} class="hidden">{content}</div>
+		{/each}
+	{/if}
+</div>

frontend/src/lib/components/gadget-attribs/extrainfo.svelte

@@ -12,6 +12,7 @@
 	import Metadata from './gadget-attribs/metadata.svelte';
 	import GadgetInfo from './gadget-attribs/gadgetinfo.svelte';
 	import Inspect from './gadget-attribs/inspect.svelte';
+	import ExtraInfo from './gadget-attribs/extrainfo.svelte';
 
 	let {
 		gadgetInfo, onclose = () => {
@@ -24,7 +25,7 @@
 		{ class: Metadata, name: 'Metadata', icon: Book },
 		{ class: GadgetInfo, name: 'Gadget Information', icon: Bug },
 		{ class: Inspect, name: 'Inspect', icon: Layers },
-		// { class: Inspect, name: 'Inspect', icon: Adjustments }
+		{ class: ExtraInfo, name: 'Extra Info', icon: Adjustments }
 	];
 
 	let tabIndex = $state(0); // gadget.attribsPage;

frontend/src/lib/components/gadget-settings.svelte

@@ -11,6 +11,4 @@ export function GetEnvironments():Promise<Array<main.Environment>>;
 
 export function GetRuntime(arg1:string):Promise<grpcruntime.Runtime>;
 
-export function Greet(arg1:string):Promise<string>;
-
 export function Run():Promise<void>;

frontend/wailsjs/go/main/App.d.ts

@@ -18,10 +18,6 @@ export function GetRuntime(arg1) {
   return window['go']['main']['App']['GetRuntime'](arg1);
 }
 
-export function Greet(arg1) {
-  return window['go']['main']['App']['Greet'](arg1);
-}
-
 export function Run() {
   return window['go']['main']['App']['Run']();
 }

frontend/wailsjs/go/main/App.js

@@ -0,0 +1 @@
+{}

package-lock.json

@@ -44,9 +44,10 @@ func (r *Runtime) GetGadgetInfo(gadgetCtx runtime.GadgetContext, runtimeParams *
 	client := api.NewGadgetManagerClient(conn)
 
 	in := &api.GetGadgetInfoRequest{
-		ParamValues: paramValues,
-		ImageName:   gadgetCtx.ImageName(),
-		Version:     api.VersionGadgetInfo,
+		ParamValues:      paramValues,
+		ImageName:        gadgetCtx.ImageName(),
+		Version:          api.VersionGadgetInfo,
+		RequestExtraInfo: gadgetCtx.ExtraInfo(),
 	}
 
 	// specify that ImageName will contain a gadget instance ID
@@ -58,13 +59,18 @@ func (r *Runtime) GetGadgetInfo(gadgetCtx runtime.GadgetContext, runtimeParams *
 	if err != nil {
 		return nil, fmt.Errorf("getting gadget info: %w", err)
 	}
+	extraInfo := &api.ExtraInfo{}
 
-	err = gadgetCtx.LoadGadgetInfo(out.GadgetInfo, paramValues, false, nil)
+	if gadgetCtx.ExtraInfo() {
+		extraInfo = out.GadgetInfo.ExtraInfo
+	}
+
+	err = gadgetCtx.LoadGadgetInfo(out.GadgetInfo, paramValues, false, extraInfo)
 	if err != nil {
 		return nil, fmt.Errorf("initializing local operators: %w", err)
 	}
 
-	return gadgetCtx.SerializeGadgetInfo(false)
+	return gadgetCtx.SerializeGadgetInfo(gadgetCtx.ExtraInfo())
 }
 
 func (r *Runtime) RunGadget(gadgetCtx runtime.GadgetContext, runtimeParams *params.Params, paramValues api.ParamValues) error {

package.json

@@ -564,6 +564,7 @@ func (w *App) Run() error {
 				gadgetCtx := gadgetcontext.New(
 					ctx,
 					gadgetInfoRequest.URL,
+					gadgetcontext.IncludeExtraInfo(true),
 				)
 
 				// use default params; TODO!