feature: add topology applications UI (mocked API for now)

keep-ui/app/topology/layout.tsx

@@ -1,30 +1,23 @@
 "use client";
-import { Subtitle, TextInput, Title } from "@tremor/react";
 import { useState } from "react";
 import { ServiceSearchContext } from "./service-search-context";
 
 export default function Layout({ children }: { children: any }) {
-  const [serviceInput, setServiceInput] = useState<string>("");
+  const [serviceQuery, setServiceQuery] = useState<string>("");
+  const [selectedServiceId, setSelectedServiceId] = useState<string | null>(
+    null
+  );
 
   return (
-    <main className="p-4 md:p-10 mx-auto max-w-full h-full">
-      <div className="flex w-full justify-between">
-        <div>
-          <Title>Service Topology</Title>
-          <Subtitle>
-            Data describing the topology of components in your environment.
-          </Subtitle>
-        </div>
-        <TextInput
-          placeholder="Search for a service"
-          value={serviceInput}
-          onValueChange={setServiceInput}
-          className="w-64 mt-2"
-        />
-      </div>
-      <ServiceSearchContext.Provider value={serviceInput}>
-        {children}
-      </ServiceSearchContext.Provider>
-    </main>
+    <ServiceSearchContext.Provider
+      value={{
+        serviceQuery,
+        setServiceQuery,
+        selectedServiceId,
+        setSelectedServiceId,
+      }}
+    >
+      {children}
+    </ServiceSearchContext.Provider>
   );
 }

keep-ui/app/topology/models.tsx

@@ -1,3 +1,6 @@
+import { InterfaceToType } from "utils/type-utils";
+import type { Node } from "@xyflow/react";
+
 export interface TopologyServiceDependency {
   serviceId: string;
   serviceName: string;
@@ -20,4 +23,20 @@ export interface TopologyService {
   ip_address?: string;
   mac_address?: string;
   manufacturer?: string;
+  applicationObject?: Application;
 }
+
+// We need to convert interface to type because only types are allowed in @xyflow/react
+// https://github.com/xyflow/web/issues/486
+export type ServiceNodeType = Node<InterfaceToType<TopologyService>, string>;
+
+export type Application = {
+  id: string;
+  name: string;
+  description: string;
+  services: {
+    id: string;
+    name: string;
+  }[];
+  // TODO: Consider adding tags, cost of disruption, etc.
+};

keep-ui/app/topology/service-search-context.tsx

@@ -1,3 +1,13 @@
 import { createContext } from "react";
 
-export const ServiceSearchContext = createContext("");
+export const ServiceSearchContext = createContext<{
+  serviceQuery: string;
+  setServiceQuery: (query: string) => void;
+  selectedServiceId: string | null;
+  setSelectedServiceId: (id: string | null) => void;
+}>({
+  serviceQuery: "",
+  setServiceQuery: (query: string) => {},
+  selectedServiceId: "",
+  setSelectedServiceId: (id: string | null) => {},
+});