Merge pull request #22 from mononen/home-cards

Homepage Card setup

Author: joshuapare

backend/pkg/plugin/resource/controller.go

@@ -405,6 +405,11 @@ func (c *controller) StartConnection(pluginID, connectionID string) (types.Conne
 	}
 
 	if conn.Status == types.ConnectionStatusConnected && conn.Connection != nil {
+		// Stamp the refresh time so the frontend TTL check reflects the real state.
+		conn.Connection.LastRefresh = time.Now()
+		if conn.Connection.ExpiryTime == 0 {
+			conn.Connection.ExpiryTime = types.ConnectionDefaultExpiryTime
+		}
 		c.connsMu.Lock()
 		c.connections[pluginID] = mergeConnections(c.connections[pluginID], []types.Connection{*conn.Connection})
 		c.connsMu.Unlock()
@@ -435,6 +440,8 @@ func (c *controller) StopConnection(pluginID, connectionID string) (types.Connec
 		return types.Connection{}, err
 	}
 
+	// Clear LastRefresh so the frontend TTL check shows disconnected.
+	conn.LastRefresh = time.Time{}
 	c.connsMu.Lock()
 	c.connections[pluginID] = mergeConnections(c.connections[pluginID], []types.Connection{conn})
 	c.connsMu.Unlock()

packages/omniviewdev-runtime/src/types/extensions.ts

@@ -68,7 +68,7 @@ export type RegisterOpts<Props> = {
   /**
    * The component to render
    */
-  component: React.Component<Props>;
+  component: React.ComponentType<Props>;
 
   /**
    * Additional optional metadata for the component
@@ -118,6 +118,17 @@ export type CreateExtensionPointOptions<ComponentProps> = ExtensionPointSettings
   matcher?: (context: ExtensionRenderContext, item: Registration<ComponentProps>) => boolean;
 };
 
+/**
+ * A registration entry that a plugin exports to register a component into an extension point.
+ * The host app processes these at plugin load time.
+ */
+export type ExtensionRegistration<Props = any> = {
+  /** The ID of the extension point to register into */
+  extensionPointId: string;
+  /** The registration options for the component */
+  registration: RegisterOpts<Props>;
+};
+
 /**
  * A registry to hold an extension points registered extensions, providing type safe access to the components.
  *
@@ -272,7 +283,7 @@ export class ExtensionPointStore<ComponentProps> {
   /**
    * Provide the components that match the given context.
    */
-  provide(context: ExtensionRenderContext): Array<React.Component<ComponentProps>> {
+  provide(context: ExtensionRenderContext): Array<React.ComponentType<ComponentProps>> {
     if (this._settings.disabled) {
       return [];
     }
@@ -293,7 +304,7 @@ export class ExtensionPointStore<ComponentProps> {
     if (ids) {
       let components = ids.map((id) => this._extensions.get(id))
         .filter((v): v is Registration<ComponentProps> => !!v)
-        .map((v) => v.component);
+        .map((v) => v.component as React.ComponentType<ComponentProps>);
 
       if (this._settings.order) {
         components = this.reorderComponents(components, ids, this._settings.order);
@@ -308,7 +319,7 @@ export class ExtensionPointStore<ComponentProps> {
     // if the order is set, reorder the components
     let components = ids.map((id) => this._extensions.get(id))
       .filter((v): v is Registration<ComponentProps> => !!v)
-      .map((v) => v.component);
+      .map((v) => v.component as React.ComponentType<ComponentProps>);
 
     // Reorder components if order is set
     if (this._settings.order) {
@@ -318,9 +329,9 @@ export class ExtensionPointStore<ComponentProps> {
     return components;
   }
 
-  reorderComponents(components: Array<React.Component<ComponentProps>>, ids: string[], order: string[]): Array<React.Component<ComponentProps>> {
+  reorderComponents(components: Array<React.ComponentType<ComponentProps>>, ids: string[], order: string[]): Array<React.ComponentType<ComponentProps>> {
     const idToComponentMap = new Map(ids.map((id, index) => [id, components[index]]));
-    return order.map((id) => idToComponentMap.get(id)).filter((component): component is React.Component<ComponentProps> => !!component);
+    return order.map((id) => idToComponentMap.get(id)).filter((component): component is React.ComponentType<ComponentProps> => !!component);
   }
 
   /**

packages/omniviewdev-runtime/src/types/homepage.ts

@@ -0,0 +1,27 @@
+import type React from 'react';
+
+/**
+ * Types for the omniview/home/card extension point.
+ * Plugins that contribute homepage cards import these types.
+ */
+
+export type HomepageCardSection = 'recent' | 'favorites' | 'folders' | (string & {});
+
+export type HomepageCardConfig = {
+  sections: HomepageCardSection[];
+  maxItems?: number; // per section, default 5
+};
+
+export type HomepageCardProps = {
+  pluginID: string;
+  config: HomepageCardConfig;
+};
+
+export type HomepageCardMeta = {
+  label: string;
+  description?: string;
+  defaultConfig: HomepageCardConfig;
+  defaultWidth?: 'small' | 'medium' | 'large';
+  /** Optional icon component rendered in the card header instead of the text label. */
+  icon?: React.ComponentType<{ size?: number; color?: string }>;
+};

packages/omniviewdev-runtime/src/types/index.ts

@@ -2,3 +2,4 @@ export * from './app'
 export * from './plugin'
 export * from './extensions'
 export * from './watch'
+export * from './homepage'

plugins/kubernetes

@@ -1,5 +1,6 @@
 import sidebar from './sidebar/extensions';
 import logviewer from './logviewer/extensions';
 import dashboard from './dashboard/extensions';
+import homepage from './homepage/extensions';
 
-export default [...sidebar, ...logviewer, ...dashboard]
+export default [...sidebar, ...logviewer, ...dashboard, ...homepage]

ui/features/extensions/builtin.ts

@@ -0,0 +1,12 @@
+import { type CreateExtensionPointOptions } from '@omniviewdev/runtime';
+import { type HomepageCardProps } from './types';
+
+const card: CreateExtensionPointOptions<HomepageCardProps> = {
+  owner: 'core',
+  id: 'omniview/home/card',
+  name: 'Homepage Card',
+  description: 'Card displayed on the application home page.',
+  mode: 'multiple',
+};
+
+export default [card];

ui/features/extensions/homepage/extensions.ts

@@ -0,0 +1,7 @@
+// Re-export from the runtime package so the UI and plugins share the same types.
+export type {
+  HomepageCardSection,
+  HomepageCardConfig,
+  HomepageCardProps,
+  HomepageCardMeta,
+} from '@omniviewdev/runtime';

ui/features/extensions/homepage/types.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import builtInPlugins from './builtins';
-import { PluginWindow, DrawerContext, DrawerFactory } from '@omniviewdev/runtime';
+import { PluginWindow, DrawerContext, DrawerFactory, type ExtensionRegistration } from '@omniviewdev/runtime';
 import { EXTENSION_REGISTRY } from '../../extensions/store';
 import { registerPlugin, registerPluginSidebars, registerPluginDrawers } from '../PluginManager';
 import { SystemJS } from './systemjs';
@@ -165,6 +165,23 @@ export async function loadAndRegisterPlugin(
     registerPluginDrawers(pluginID, drawers);
   }
 
+  // Register extension point contributions if the plugin exports them
+  const { extensionRegistrations } = exports as { extensionRegistrations?: ExtensionRegistration[] };
+  if (extensionRegistrations) {
+    for (const { extensionPointId, registration } of extensionRegistrations) {
+      const ep = EXTENSION_REGISTRY.getExtensionPoint(extensionPointId);
+      if (ep) {
+        try {
+          ep.register(registration);
+        } catch (e) {
+          console.warn(`[loader] Failed to register extension "${registration.id}" into "${extensionPointId}":`, e);
+        }
+      } else {
+        console.warn(`[loader] Extension point "${extensionPointId}" not found — skipping "${registration.id}"`);
+      }
+    }
+  }
+
   console.debug(`[loader] loadAndRegisterPlugin "${pluginID}" complete — emitting recalc_routes`, { plugin: pluginID });
   EventsEmit('core/window/recalc_routes');
 }

ui/features/plugins/api/loader.ts

@@ -13,7 +13,7 @@ import InstalledPlugins from '../../pages/plugins/InstalledPlugins';
 import Settings from '../../pages/settings';
 
 // Home
-import Welcome from '../../pages/welcome';
+import Home from '../../pages/home';
 
 // Trivy
 import TrivyLayout from '../../pages/trivy';
@@ -33,7 +33,7 @@ export const coreRoutes: RouteObject[] = [
       {
         path: '/',
         index: true,
-        Component: Welcome,
+        Component: Home,
       },
       {
         path: 'plugins',