feat: Modify NIM enablement process

backend/src/routes/api/components/list.ts

@@ -1,6 +1,10 @@
 import { FastifyRequest } from 'fastify';
 import { KubeFastifyInstance, OdhApplication } from '../../../types';
-import { getApplications, updateApplications } from '../../../utils/resourceUtils';
+import {
+  getApplications,
+  updateApplications,
+  isIntegrationApp,
+} from '../../../utils/resourceUtils';
 import { checkJupyterEnabled, getRouteForApplication } from '../../../utils/componentUtils';
 
 export const listComponents = async (
@@ -17,6 +21,10 @@ export const listComponents = async (
     return Promise.resolve(applications);
   }
   for (const app of applications) {
+    if (isIntegrationApp(app)) {
+      // Include all integration apps -- Client can check if it's enabled
+      installedComponents.push(app);
+    }
     if (app.spec.shownOnEnabledPage) {
       const newApp = {
         ...app,

backend/src/routes/api/integrations/nim/index.ts

@@ -0,0 +1,84 @@
+import { FastifyReply, FastifyRequest } from 'fastify';
+import { secureAdminRoute } from '../../../../utils/route-security';
+import { KubeFastifyInstance } from '../../../../types';
+import { isString } from 'lodash';
+import { isAppEnabled, getNIMAccount, createNIMAccount, createNIMSecret } from './nimUtils';
+
+module.exports = async (fastify: KubeFastifyInstance) => {
+  const { namespace } = fastify.kube;
+  const PAGE_NOT_FOUND_MESSAGE = '404 page not found';
+
+  fastify.get(
+    '/',
+    secureAdminRoute(fastify)(async (request: FastifyRequest, reply: FastifyReply) => {
+      await getNIMAccount(fastify, namespace)
+        .then((response) => {
+          if (isAppEnabled(response)) {
+            reply.send({ isAppEnabled: true, canEnable: false, error: '' });
+          } else {
+            reply.send({ isAppEnabled: false, canEnable: true, error: '' });
+          }
+        })
+        .catch((e) => {
+          if (e.response?.statusCode === 404) {
+            // 404 error means the Account CRD does not exist, so cannot create CR based on it.
+            if (
+              isString(e.response.body) &&
+              e.response.body.trim() === PAGE_NOT_FOUND_MESSAGE.trim()
+            ) {
+              fastify.log.error(`NIM not installed, ${e.response?.body}`);
+              reply
+                .status(404)
+                .send({ isAppEnabled: false, canEnable: false, error: 'NIM not installed' });
+            } else {
+              fastify.log.error(`NIM account does not exist, ${e.response.body.message}`);
+              reply.send({ isAppEnabled: false, canEnable: true, error: '' });
+            }
+          }
+        });
+    }),
+  );
+
+  fastify.post(
+    '/',
+    secureAdminRoute(fastify)(
+      async (
+        request: FastifyRequest<{
+          Body: { [key: string]: string };
+        }>,
+        reply: FastifyReply,
+      ) => {
+        const enableValues = request.body;
+
+        await createNIMSecret(fastify, namespace, enableValues)
+          .then(async () => {
+            await createNIMAccount(fastify, namespace)
+              .then((response) => {
+                if (isAppEnabled(response)) {
+                  reply.send({ isAppEnabled: true, canEnable: false, error: '' });
+                } else {
+                  reply.send({ isAppEnabled: false, canEnable: true, error: '' });
+                }
+              })
+              .catch((e) => {
+                fastify.log.error(`Failed to create NIM account.`);
+                reply
+                  .status(e.response.statusCode)
+                  .send(new Error(`Failed to create NIM account, ${e.response?.body?.message}`));
+              });
+          })
+          .catch((e) => {
+            if (e.response?.statusCode === 409) {
+              fastify.log.error(`NIM secret already exists, skipping creation.`);
+              reply.status(409).send(new Error(`NIM secret already exists, skipping creation.`));
+            } else {
+              fastify.log.error(`Failed to create NIM secret.`);
+              reply
+                .status(e.response.statusCode)
+                .send(new Error(`Failed to create NIM secret, ${e.response?.body?.message}`));
+            }
+          });
+      },
+    ),
+  );
+};

backend/src/routes/api/integrations/nim/nimUtils.ts

@@ -0,0 +1,88 @@
+import { KubeFastifyInstance, NIMAccountKind } from '../../../../types';
+
+const NIM_SECRET_NAME = 'nvidia-nim-access';
+const NIM_ACCOUNT_NAME = 'odh-nim-account';
+
+export const isAppEnabled = (app: NIMAccountKind): boolean => {
+  const conditions = app?.status?.conditions || [];
+  return (
+    conditions.find(
+      (condition) => condition.type === 'AccountStatus' && condition.status === 'True',
+    ) !== undefined
+  );
+};
+
+export const getNIMAccount = async (
+  fastify: KubeFastifyInstance,
+  namespace: string,
+): Promise<NIMAccountKind> => {
+  const { customObjectsApi } = fastify.kube;
+  try {
+    const response = await customObjectsApi.getNamespacedCustomObject(
+      'nim.opendatahub.io',
+      'v1',
+      namespace,
+      'accounts',
+      NIM_ACCOUNT_NAME,
+    );
+    return Promise.resolve(response.body as NIMAccountKind);
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
+export const createNIMAccount = async (
+  fastify: KubeFastifyInstance,
+  namespace: string,
+): Promise<NIMAccountKind> => {
+  const { customObjectsApi } = fastify.kube;
+  const account = {
+    apiVersion: 'nim.opendatahub.io/v1',
+    kind: 'Account',
+    metadata: {
+      name: NIM_ACCOUNT_NAME,
+      namespace,
+    },
+    spec: {
+      apiKeySecret: {
+        name: NIM_SECRET_NAME,
+      },
+    },
+  };
+  try {
+    const response = await customObjectsApi.createNamespacedCustomObject(
+      'nim.opendatahub.io',
+      'v1',
+      namespace,
+      'accounts',
+      account,
+    );
+    return Promise.resolve(response.body as NIMAccountKind);
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
+export const createNIMSecret = async (
+  fastify: KubeFastifyInstance,
+  namespace: string,
+  enableValues: { [key: string]: string },
+): Promise<void> => {
+  const { coreV1Api } = fastify.kube;
+  const nimSecret = {
+    apiVersion: 'v1',
+    kind: 'Secret',
+    metadata: {
+      name: NIM_SECRET_NAME,
+      namespace,
+    },
+    type: 'Opaque',
+    stringData: enableValues,
+  };
+
+  try {
+    await coreV1Api.createNamespacedSecret(namespace, nimSecret);
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};

backend/src/types.ts

@@ -326,6 +326,7 @@ export type OdhApplication = {
     displayName: string;
     docsLink: string;
     hidden?: boolean | null;
+    internalRoute?: string;
     enable?: {
       actionLabel: string;
       description?: string;
@@ -1228,3 +1229,18 @@ export enum ServiceAddressAnnotation {
   EXTERNAL_REST = 'routing.opendatahub.io/external-address-rest',
   EXTERNAL_GRPC = 'routing.opendatahub.io/external-address-grpc',
 }
+
+export type NIMAccountKind = K8sResourceCommon & {
+  metadata: {
+    name: string;
+    namespace: string;
+  };
+  spec: {
+    apiKeySecret: {
+      name: string;
+    };
+  };
+  status?: {
+    conditions?: K8sCondition[];
+  };
+};

backend/src/utils/resourceUtils.ts

@@ -332,33 +332,38 @@ export const fetchApplications = async (
     .then((result) => result.body)
     .catch(() => null);
   for (const appDef of applicationDefs) {
-    appDef.spec.shownOnEnabledPage = enabledAppsCM?.data?.[appDef.metadata.name] === 'true';
-    appDef.spec.isEnabled = await getIsAppEnabled(fastify, appDef).catch((e) => {
-      fastify.log.warn(
-        `"${
-          appDef.metadata.name
-        }" OdhApplication is being disabled due to an error determining if it's enabled. ${
-          e.response?.body?.message || e.message
-        }`,
-      );
+    if (isIntegrationApp(appDef)) {
+      // Ignore logic for apps that use internal routes for status information
+      applications.push(appDef);
+    } else {
+      appDef.spec.shownOnEnabledPage = enabledAppsCM?.data?.[appDef.metadata.name] === 'true';
+      appDef.spec.isEnabled = await getIsAppEnabled(fastify, appDef).catch((e) => {
+        fastify.log.warn(
+          `"${
+            appDef.metadata.name
+          }" OdhApplication is being disabled due to an error determining if it's enabled. ${
+            e.response?.body?.message || e.message
+          }`,
+        );
 
-      return false;
-    });
-    if (appDef.spec.isEnabled) {
-      if (!appDef.spec.shownOnEnabledPage) {
-        changed = true;
-        enabledAppsCMData[appDef.metadata.name] = 'true';
-        appDef.spec.shownOnEnabledPage = true;
+        return false;
+      });
+      if (appDef.spec.isEnabled) {
+        if (!appDef.spec.shownOnEnabledPage) {
+          changed = true;
+          enabledAppsCMData[appDef.metadata.name] = 'true';
+          appDef.spec.shownOnEnabledPage = true;
+        }
       }
+      applications.push({
+        ...appDef,
+        spec: {
+          ...appDef.spec,
+          getStartedLink: getRouteForClusterId(fastify, appDef.spec.getStartedLink),
+          link: appDef.spec.isEnabled ? await getRouteForApplication(fastify, appDef) : undefined,
+        },
+      });
     }
-    applications.push({
-      ...appDef,
-      spec: {
-        ...appDef.spec,
-        getStartedLink: getRouteForClusterId(fastify, appDef.spec.getStartedLink),
-        link: appDef.spec.isEnabled ? await getRouteForApplication(fastify, appDef) : undefined,
-      },
-    });
   }
   if (changed) {
     // write enabled apps configmap
@@ -1037,3 +1042,5 @@ export const translateDisplayNameForK8s = (name: string): string =>
     .toLowerCase()
     .replace(/\s/g, '-')
     .replace(/[^A-Za-z0-9-]/g, '');
+export const isIntegrationApp = (app: OdhApplication): boolean =>
+  app.spec.internalRoute?.startsWith('/api/');

frontend/src/pages/enabledApplications/EnabledApplications.tsx

@@ -6,6 +6,7 @@ import { OdhApplication } from '~/types';
 import ApplicationsPage from '~/pages/ApplicationsPage';
 import OdhAppCard from '~/components/OdhAppCard';
 import { fireMiscTrackingEvent } from '~/concepts/analyticsTracking/segmentIOUtils';
+import { useWatchIntegrationComponents } from '~/utilities/useWatchIntegrationComponents';
 
 const description = `Launch your enabled applications, view documentation, or get started with quick start instructions and tasks.`;
 
@@ -21,18 +22,20 @@ let enabledComponents: OdhApplication[] = [];
 export const EnabledApplicationsInner: React.FC<EnabledApplicationsInnerProps> = React.memo(
   ({ loaded, loadError, components }) => {
     const isEmpty = components.length === 0;
+    const { checkedComponents, isIntegrationComponentsChecked } =
+      useWatchIntegrationComponents(components);
 
     return (
       <ApplicationsPage
         title="Enabled"
         description={description}
-        loaded={loaded}
+        loaded={loaded && isIntegrationComponentsChecked}
         empty={isEmpty}
         loadError={loadError}
       >
         <PageSection isFilled data-testid="enabled-application">
           <Gallery maxWidths={{ default: '330px' }} role="list" hasGutter>
-            {components.map((c) => (
+            {checkedComponents.map((c) => (
               <OdhAppCard key={c.metadata.name} odhApp={c} />
             ))}
           </Gallery>

frontend/src/pages/exploreApplication/EnableModal.tsx

@@ -31,6 +31,7 @@ const EnableModal: React.FC<EnableModalProps> = ({ selectedApp, shown, onClose }
     selectedApp.metadata.name,
     selectedApp.spec.displayName,
     enableValues,
+    selectedApp.spec.internalRoute,
   );
   const focusRef = (element: HTMLElement | null) => {
     if (element) {

frontend/src/pages/exploreApplication/ExploreApplications.tsx

@@ -17,6 +17,7 @@ import { removeQueryArgument, setQueryArgument } from '~/utilities/router';
 import { ODH_PRODUCT_NAME } from '~/utilities/const';
 import { useAppContext } from '~/app/AppContext';
 import { fireMiscTrackingEvent } from '~/concepts/analyticsTracking/segmentIOUtils';
+import { useWatchIntegrationComponents } from '~/utilities/useWatchIntegrationComponents';
 import GetStartedPanel from './GetStartedPanel';
 
 import './ExploreApplications.scss';
@@ -98,10 +99,12 @@ const ExploreApplications: React.FC = () => {
   const selectedId = queryParams.get('selectId');
   const [selectedComponent, setSelectedComponent] = React.useState<OdhApplication>();
   const isEmpty = components.length === 0;
+  const { checkedComponents, isIntegrationComponentsChecked } =
+    useWatchIntegrationComponents(components);
 
   const updateSelection = React.useCallback(
     (currentSelectedId?: string | null): void => {
-      const selection = components.find(
+      const selection = checkedComponents.find(
         (c) => c.metadata.name && c.metadata.name === currentSelectedId,
       );
       if (currentSelectedId && selection) {
@@ -114,26 +117,26 @@ const ExploreApplications: React.FC = () => {
       removeQueryArgument(navigate, 'selectId');
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [components],
+    [checkedComponents],
   );
 
   const exploreComponents = React.useMemo<OdhApplication[]>(
     () =>
-      _.cloneDeep(components)
+      _.cloneDeep(checkedComponents)
         .filter((component) => !component.spec.hidden)
         .toSorted((a, b) => a.spec.displayName.localeCompare(b.spec.displayName)),
-    [components],
+    [checkedComponents],
   );
 
   React.useEffect(() => {
-    if (components.length > 0) {
+    if (checkedComponents.length > 0) {
       updateSelection(selectedId);
     }
-  }, [updateSelection, selectedId, components]);
+  }, [updateSelection, selectedId, checkedComponents]);
 
   return (
     <ExploreApplicationsInner
-      loaded={loaded}
+      loaded={loaded && isIntegrationComponentsChecked}
       isEmpty={isEmpty}
       loadError={loadError}
       exploreComponents={exploreComponents}