stackrox · dvail · Feb 26, 2025 · Feb 26, 2025 · Feb 26, 2025 · Feb 26, 2025
@@ -11,3 +11,4 @@
 # hidden configuration files
 !.eslintrc.js
 !.prettierrc.js
+vite.config.ts
@@ -39,6 +39,14 @@ module.exports = {
         optionalDependencies: false,
       },
     ],
+
+    // The following rules began throwing errors after tooling updates. These should probably
+    // be re-enabled and fixed at some point
+    'react/jsx-no-bind': 'off',
+    '@typescript-eslint/no-floating-promises': 'off',
+    '@typescript-eslint/no-misused-promises': 'off',
+    '@typescript-eslint/no-unsafe-argument': 'off',
+    // End disabled tooling rules
   },
 
   overrides: [

@@ -24,7 +24,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>StackRox Infra</title>
-  </head>
+  <script type="module" src="src/index"></script></head>
   <body class="flex h-full overflow-hidden theme-light">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root" class="w-full"></div>

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "PORT=3001 HTTPS=true NODE_OPTIONS=--openssl-legacy-provider EXTEND_ESLINT=true react-scripts start",
-    "build": "NODE_OPTIONS=--openssl-legacy-provider EXTEND_ESLINT=true react-scripts build",
+    "start": "PORT=3001 HTTPS=true NODE_OPTIONS=--openssl-legacy-provider EXTEND_ESLINT=true vite",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider EXTEND_ESLINT=true vite build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint-check": "npm-run-all lint-check:*",
@@ -19,16 +19,18 @@
     "@patternfly/patternfly": "^6.1.0",
     "@patternfly/react-core": "^6.0.0",
     "@patternfly/react-icons": "^6.0.0",
+    "@tanstack/react-query": "^5.66.9",
     "axios": "^0.21.4",
+    "eslint": "^7.11.0",
     "formik": "^2.4.2",
     "history": "^5.0.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
-    "namor": "^2.0.3",
+    "random-words": "^2.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-markdown": "^8.0.0",
-    "react-router-dom": "^6.14.1",
+    "react-router-dom": "^6.29.0",
     "yup": "^1.3.3"
   },
   "devDependencies": {
@@ -37,19 +39,22 @@
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^27.0.2",
     "@types/lodash": "^4.14.195",
-    "@types/node": "^20.5.4",
+    "@types/node": "^22.13.4",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.14",
     "eslint-config-airbnb-typescript": "^12.0.0",
     "eslint-config-prettier": "^7.2.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-prettier": "^3.4.1",
     "http-proxy-middleware": "^2.0.6",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.2.1",
-    "react-scripts": "^4.0.1",
-    "typescript": "~5.1.6"
+    "typescript": "~5.1.6",
+    "vite": "^6.1.0",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "browserslist": {
     "production": [

@@ -0,0 +1,19 @@
+import { FlavorServiceApi, V1Flavor } from 'generated/client';
+import { QueryClient } from '@tanstack/react-query';
+import configuration from './configuration';
+
+const flavorService = new FlavorServiceApi(configuration);
+
+export function flavorInfoQueryOptions(flavorId: string) {
+  return {
+    queryKey: ['flavorInfo', flavorId],
+    queryFn: () => flavorService.info(flavorId),
+    staleTime: 60 * 60 * 1000, // One hour - this info almost never changes
+  };
+}
+
+export function prefetchFlavors(queryClient: QueryClient, flavors: V1Flavor[]) {
+  flavors.forEach(async ({ ID }) => {
+    await queryClient.prefetchQuery(flavorInfoQueryOptions(ID ?? ''));
+  });
+}
@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { Flex, Page } from '@patternfly/react-core';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import UserAuthProvider from 'containers/UserAuthProvider';
 import AppHeader from 'containers/AppHeader';
@@ -10,6 +11,14 @@ import LaunchClusterPage from 'containers/LaunchClusterPage';
 import ClusterInfoPage from 'containers/ClusterInfoPage';
 import FourOhFour from 'components/FourOhFour';
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 10 * 1000,
+    },
+  },
+});
+
 function AppRoutes(): ReactElement {
   return (
     <Routes>
@@ -26,15 +35,17 @@ export default function App(): ReactElement {
   return (
     <Router>
       <UserAuthProvider>
-        <Flex
-          direction={{ default: 'column' }}
-          flexWrap={{ default: 'nowrap' }}
-          className="pf-v6-u-h-100 pf-v6-u-w-100"
-        >
-          <Page masthead={<AppHeader />}>
-            <AppRoutes />
-          </Page>
-        </Flex>
+        <QueryClientProvider client={queryClient}>
+          <Flex
+            direction={{ default: 'column' }}
+            flexWrap={{ default: 'nowrap' }}
+            className="pf-v6-u-h-100 pf-v6-u-w-100"
+          >
+            <Page masthead={<AppHeader />}>
+              <AppRoutes />
+            </Page>
+          </Flex>
+        </QueryClientProvider>
       </UserAuthProvider>
     </Router>
   );

@@ -1,10 +1,10 @@
-import React, { useState, useCallback, ReactElement } from 'react';
+import React, { useState, ReactElement } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { Button, Divider, Flex, PageSection, Title } from '@patternfly/react-core';
 import { DownloadIcon, TrashIcon } from '@patternfly/react-icons';
+import { useQuery } from '@tanstack/react-query';
 
 import { ClusterServiceApi, V1Status } from 'generated/client';
-import useApiQuery from 'client/useApiQuery';
 import configuration from 'client/configuration';
 import FullPageSpinner from 'components/FullPageSpinner';
 import FullPageError from 'components/FullPageError';
@@ -20,56 +20,80 @@ const clusterService = new ClusterServiceApi(configuration);
 export default function ClusterInfoPage(): ReactElement {
   const navigate = useNavigate();
   const { clusterId = '' } = useParams();
-  const fetchClusterInfo = useCallback(() => clusterService.info(clusterId), [clusterId]);
-  const { loading, error, data: cluster } = useApiQuery(fetchClusterInfo, { pollInterval: 10000 });
+
+  const {
+    isLoading: clusterInfoLoading,
+    error: clusterInfoError,
+    data: clusterInfoData,
+  } = useQuery({
+    queryKey: ['clusterInfo', clusterId],
+    queryFn: () => clusterService.info(clusterId),
+    refetchInterval: 10000,
+  });
+
+  const cluster = clusterInfoData?.data;
   const [deletionModalOpen, setDeletionModalOpen] = useState<boolean>(false);
   const [downloadArtifactsOpen, setDownloadArtifactsOpen] = useState<boolean>(false);
 
-  if (loading) {
-    return <FullPageSpinner />;
-  }
+  const clusterIsReady = cluster?.Status === V1Status.Ready;
 
-  if (error || !cluster?.ID) {
-    return <FullPageError message={error?.message || 'Unexpected server response'} />;
-  }
-
-  const clusterIsReady = cluster.Status === V1Status.Ready;
+  const {
+    isLoading: clusterLogsLoading,
+    error: clusterLogsError,
+    data: clusterLogsData,
+  } = useQuery({
+    queryKey: ['clusterLogs', clusterId],
+    queryFn: () => clusterService.logs(clusterId),
+    refetchInterval: 10000,
+  });
 
   return (
     <>
       <div style={{ overflow: 'auto' }}>
-        <PageSection className="pf-v6-u-h-100" style={{ overflow: 'auto' }}>
-          <Flex direction={{ default: 'column' }}>
-            <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
-              <Title headingLevel="h1">
-                {cluster.ID}
-                {cluster.Description && ` (${cluster.Description})`} -{' '}
-                {cluster.Status || V1Status.Failed}
-              </Title>
-              {!!cluster && <MutableLifespan cluster={cluster} />}
+        {clusterInfoLoading ? (
+          <FullPageSpinner title="Loading cluster information" />
+        ) : clusterInfoError || !cluster?.ID ? (
+          <FullPageError message={clusterInfoError?.message || 'Unexpected server response'} />
+        ) : (
+          <PageSection className="pf-v6-u-h-100" style={{ overflow: 'auto' }}>
+            <Flex direction={{ default: 'column' }}>
+              <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+                <Title headingLevel="h1">
+                  {cluster.ID}
+                  {cluster.Description && ` (${cluster.Description})`} -{' '}
+                  {cluster.Status || V1Status.Failed}
+                </Title>
+                {!!cluster && <MutableLifespan cluster={cluster} />}
+              </Flex>
+              {cluster.Connect && (
+                <>
+                  <Divider component="div" />
+                  <ClusterConnect connect={cluster.Connect} />
+                </>
+              )}
+              {cluster.URL && (
+                <>
+                  <Divider component="div" />
+                  <span>
+                    URL:{' '}
+                    <a href={cluster.URL} target="_blank" rel="noreferrer">
+                      {cluster.URL}
+                    </a>
+                  </span>
+                </>
+              )}
             </Flex>
-            {cluster.Connect && (
-              <>
-                <Divider component="div" />
-                <ClusterConnect connect={cluster.Connect} />
-              </>
-            )}
-            {cluster.URL && (
-              <>
-                <Divider component="div" />
-                <span>
-                  URL:{' '}
-                  <a href={cluster.URL} target="_blank" rel="noreferrer">
-                    {cluster.URL}
-                  </a>
-                </span>
-              </>
-            )}
-          </Flex>
-        </PageSection>
+          </PageSection>
+        )}
 
         <PageSection>
-          <ClusterLogs clusterId={clusterId} />
+          {clusterLogsLoading ? (
+            <FullPageSpinner title="Loading cluster setup logs" />
+          ) : clusterLogsError || !clusterLogsData?.data.Logs ? (
+            <FullPageError message={clusterLogsError?.message || 'No logs found'} />
+          ) : (
+            <ClusterLogs logs={clusterLogsData.data.Logs} />
+          )}
         </PageSection>
       </div>
 
@@ -96,15 +120,15 @@ export default function ClusterInfoPage(): ReactElement {
 
       {deletionModalOpen && (
         <DeleteClusterModal
-          cluster={cluster}
+          clusterId={clusterId}
           onCancel={(): void => setDeletionModalOpen(false)}
           onDeleted={(): void => navigate('/')}
         />
       )}
 
       {downloadArtifactsOpen && (
         <DownloadArtifactsModal
-          cluster={cluster}
+          clusterId={clusterId}
           onClose={(): void => setDownloadArtifactsOpen(false)}
         />
       )}

@@ -1,42 +1,27 @@
-import React, { useCallback, ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 
-import { ClusterServiceApi } from 'generated/client';
-import useApiQuery from 'client/useApiQuery';
-import configuration from 'client/configuration';
-import FullPageSpinner from 'components/FullPageSpinner';
-import FullPageError from 'components/FullPageError';
+import { V1Log } from 'generated/client';
 import { CodeBlock, CodeBlockCode } from '@patternfly/react-core';
 
-const clusterService = new ClusterServiceApi(configuration);
-
 type Props = {
-  clusterId: string;
+  logs: V1Log[];
 };
 
-export default function ClusterLogs({ clusterId }: Props): ReactElement {
-  const fetchClusterLogs = useCallback(() => clusterService.logs(clusterId), [clusterId]);
-  const { loading, error, data } = useApiQuery(fetchClusterLogs, { pollInterval: 10000 });
-
-  if (loading) {
-    return <FullPageSpinner />;
-  }
-
-  if (error || !data?.Logs) {
-    return <FullPageError message={error?.message || 'No logs found'} />;
-  }
-
+export default function ClusterLogs({ logs }: Props): ReactElement {
   // combine all log entries into a single log with sections split same way infractl does
-  const logs = data.Logs.map((logEntry) => {
-    if (!logEntry.Name || !logEntry.Body) return '';
+  const logsJoined = logs
+    .map((logEntry) => {
+      if (!logEntry.Name || !logEntry.Body) return '';
 
-    const logEntryHeaderBorder = '-'.repeat(logEntry.Name.length);
-    const logText = atob(logEntry.Body);
-    return `${logEntry.Name}\n${logEntryHeaderBorder}\n${logEntry.Message || ''}\n${logText}`;
-  }).join('\n\n');
+      const logEntryHeaderBorder = '-'.repeat(logEntry.Name.length);
+      const logText = atob(logEntry.Body);
+      return `${logEntry.Name}\n${logEntryHeaderBorder}\n${logEntry.Message || ''}\n${logText}`;
+    })
+    .join('\n\n');
 
   return (
     <CodeBlock>
-      <CodeBlockCode>{logs}</CodeBlockCode>
+      <CodeBlockCode>{logsJoined}</CodeBlockCode>
     </CodeBlock>
   );
 }