added ui support to runtime

Signed-off-by: Eneko Fernandez <eneko@weave.works>

ui/App.tsx

@@ -40,7 +40,6 @@ import Error from "./pages/Error";
 import SignIn from "./pages/SignIn";
 import Automations from "./pages/v2/Automations";
 import BucketDetail from "./pages/v2/BucketDetail";
-import FluxRuntime from "./pages/v2/FluxRuntime";
 import GitRepositoryDetail from "./pages/v2/GitRepositoryDetail";
 import HelmChartDetail from "./pages/v2/HelmChartDetail";
 import HelmReleasePage from "./pages/v2/HelmReleasePage";
@@ -52,6 +51,7 @@ import OCIRepositoryPage from "./pages/v2/OCIRepositoryPage";
 import PoliciesList from "./pages/v2/PoliciesList";
 import PolicyDetailsPage from "./pages/v2/PolicyDetailsPage";
 import ProviderPage from "./pages/v2/ProviderPage";
+import Runtime from "./pages/v2/Runtime";
 import Sources from "./pages/v2/Sources";
 import UserInfo from "./pages/v2/UserInfo";
 
@@ -65,6 +65,26 @@ function withSearchParams(Cmp) {
   };
 }
 
+// gets the right runtime navigation item based on the feature WEAVE_GITOPS_FEATURE_GITOPS_RUNTIME
+// function getRuntimeConfiguration() {
+//   const { isFlagEnabled } = useFeatureFlags();
+//
+//   if (isFlagEnabled("WEAVE_GITOPS_FEATURE_GITOPS_RUNTIME")) {
+//     return {
+//       label: "Runtime",
+//       route: V2Routes.Runtime,
+//       component: {Runtime},
+//     };
+//   }
+//   return {
+//     label: "Flux Runtime",
+//     route: V2Routes.FluxRuntime,
+//     component: {FluxRuntime},
+//   };
+// }
+
+// const runtimeConfiguration = getRuntimeConfiguration();
+
 const navItems: NavItem[] = [
   {
     label: "Applications",
@@ -88,7 +108,7 @@ const navItems: NavItem[] = [
   },
   {
     label: "Runtime",
-    link: { value: V2Routes.FluxRuntime },
+    link: { value: V2Routes.Runtime },
     icon: IconType.FluxIcon,
   },
   {
@@ -143,7 +163,8 @@ const App = () => {
             path={V2Routes.ImagePolicyDetails}
             component={withSearchParams(ImagePolicyDetails)}
           />
-          <Route path={V2Routes.FluxRuntime} component={FluxRuntime} />
+          // TODO should be configurable based on feature flag
+          <Route path={V2Routes.Runtime} component={Runtime} />
           <Route
             path={V2Routes.GitRepo}
             component={withSearchParams(GitRepositoryDetail)}

ui/hooks/flux.ts

@@ -2,10 +2,10 @@ import { useContext } from "react";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { CoreClientContext } from "../contexts/CoreClientContext";
 import {
-  ListFluxCrdsResponse,
-  ListFluxRuntimeObjectsResponse,
-  ToggleSuspendResourceRequest,
-  ToggleSuspendResourceResponse,
+    ListFluxCrdsResponse,
+    ListFluxRuntimeObjectsResponse, ListRuntimeObjectsResponse,
+    ToggleSuspendResourceRequest,
+    ToggleSuspendResourceResponse,
 } from "../lib/api/core/core.pb";
 import { GroupVersionKind, Kind } from "../lib/api/core/types.pb";
 import { getChildren } from "../lib/graph";
@@ -44,6 +44,33 @@ export function useListFluxCrds(clusterName = DefaultCluster) {
   );
 }
 
+export function useListRuntimeObjects(
+    clusterName = DefaultCluster,
+    namespace = NoNamespace,
+    opts: ReactQueryOptions<ListRuntimeObjectsResponse, RequestError> = {
+        retry: false,
+        refetchInterval: 5000,
+    }
+) {
+    const { api } = useContext(CoreClientContext);
+
+    return useQuery<ListRuntimeObjectsResponse, RequestError>(
+        "runtime_objects",
+        () => api.ListRuntimeObjects({ namespace, clusterName }),
+        opts
+    );
+}
+
+export function useListRuntimeCrds(clusterName = DefaultCluster) {
+    const { api } = useContext(CoreClientContext);
+
+    return useQuery<ListFluxCrdsResponse, RequestError>(
+        "runtime_crds",
+        () => api.ListRuntimeCrds({ clusterName }),
+        { retry: false, refetchInterval: 5000 }
+    );
+}
+
 export function flattenChildren(children: FluxObject[]) {
   return children.flatMap((child) =>
     [child].concat(flattenChildren(child.children))

ui/lib/types.ts

@@ -28,6 +28,7 @@ export enum V2Routes {
   Automations = "/applications",
   Sources = "/sources",
   FluxRuntime = "/flux_runtime",
+  Runtime = "/runtime",
   Kustomization = "/kustomization",
   HelmRelease = "/helm_release",
   HelmRepo = "/helm_repo",

ui/pages/v2/Runtime.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import {useContext} from "react";
+import styled from "styled-components";
+import FluxRuntimeComponent from "../../components/FluxRuntime";
+import Page from "../../components/Page";
+import {CoreClientContext} from "../../contexts/CoreClientContext";
+import { useFeatureFlags } from "../../hooks/featureflags";
+import {useListFluxCrds, useListFluxRuntimeObjects, useListRuntimeCrds, useListRuntimeObjects} from "../../hooks/flux";
+
+type Props = {
+  className?: string;
+};
+
+function Runtime({ className }: Props) {
+  const { data, isLoading, error } = useListRuntimeObjects();
+  const {
+    data: crds,
+    isLoading: crdsLoading,
+    error: crdsError,
+  } = useListRuntimeCrds();
+  return (
+
+  <Page
+      loading={isLoading || crdsLoading}
+      error={error || crdsError}
+      className={className}
+      path={[{ label: "Runtime" }]}
+    >
+      <FluxRuntimeComponent deployments={data?.deployments} crds={crds?.crds} />
+    </Page>
+  );
+}
+
+export default styled(Runtime).attrs({ className: Runtime.name })``;