merge master

armadaproject · Jan 15, 2025 · e5d5eb6 · e5d5eb6
2 parents 716b059 + 7e6ca31
commit e5d5eb6
Show file tree

Hide file tree

Showing 39 changed files with 1,814 additions and 2,264 deletions.
diff --git a/.run/LookoutV2.run.xml b/.run/LookoutV2.run.xml
@@ -3,7 +3,7 @@
     <module name="armada" />
     <working_directory value="$PROJECT_DIR$" />
     <envs>
-      <env name="ARMADA_CORSALLOWEDORIGINS" value="&quot;http://localhost:3000,http://localhost:8089,http://localhost:10000,http://example.com:10000,http://example.com:8089&quot;" />
+      <env name="ARMADA_CORSALLOWEDORIGINS" value="&quot;http://localhost:3000,http://localhost:4173,http://localhost:8089,http://localhost:10000,http://example.com:10000,http://example.com:8089&quot;" />
       <env name="ARMADA_LOG_CONFIG" value="config/logging-dev.yaml" />
       <env name="ARMADA_POSTGRES_CONNECTION_HOST" value="localhost" />
       <env name="ARMADA_POSTGRES_CONNECTION_PORT" value="5432" />

diff --git a/.run/Server.run.xml b/.run/Server.run.xml
@@ -4,13 +4,13 @@
     <working_directory value="$PROJECT_DIR$" />
     <parameters value="--config ./developer/config/insecure-armada.yaml" />
     <envs>
-      <env name="ARMADA_CORSALLOWEDORIGINS" value="&quot;http://localhost:3000,http://localhost:8089,http://localhost:10000,http://example.com:10000,http://example.com:8089&quot;" />
+      <env name="ARMADA_CORSALLOWEDORIGINS" value="&quot;http://localhost:3000,http://localhost:4173,http://localhost:8089,http://localhost:10000,http://example.com:10000,http://example.com:8089&quot;" />
+      <env name="ARMADA_QUERYAPI_POSTGRES_CONNECTION_HOST" value="localhost" />
       <env name="ARMADA_EVENTSAPIREDIS_ADDRS" value="localhost:6379" />
       <env name="ARMADA_LOG_CONFIG" value="config/logging-dev.yaml" />
       <env name="ARMADA_METRICSPORT" value="9005" />
       <env name="ARMADA_POSTGRES_CONNECTION_HOST" value="localhost" />
       <env name="ARMADA_PULSAR_URL" value="pulsar://localhost:6650" />
-      <env name="ARMADA_QUERYAPI_POSTGRES_CONNECTION_HOST" value="localhost" />
       <env name="EXECUTOR_UPDATE_INTERVAL" value="&quot;1s&quot;" />
     </envs>
     <kind value="FILE" />
@@ -19,4 +19,4 @@
     <filePath value="$PROJECT_DIR$/cmd/server/main.go" />
     <method v="2" />
   </configuration>
-</component>
+</component>
diff --git a/.run/lookoutv2PostgresMigration.run.xml b/.run/lookoutv2PostgresMigration.run.xml
@@ -4,7 +4,7 @@
     <working_directory value="$PROJECT_DIR$" />
     <parameters value="--migrateDatabase" />
     <envs>
-      <env name="ARMADA_CORSALLOWEDORIGINS" value="&quot;http://localhost:3000,http://localhost:8089,http://localhost:10000,http://example.com:10000,http://example.com:8089&quot;" />
+      <env name="ARMADA_CORSALLOWEDORIGINS" value="&quot;http://localhost:3000,http://localhost:4173,http://localhost:8089,http://localhost:10000,http://example.com:10000,http://example.com:8089&quot;" />
       <env name="ARMADA_LOG_CONFIG" value="config/logging-dev.yaml" />
       <env name="ARMADA_POSTGRES_CONNECTION_HOST" value="localhost" />
       <env name="ARMADA_POSTGRES_CONNECTION_PORT" value="5432" />

diff --git a/deployment/lookout-v2/templates/cronjob.yaml b/deployment/lookout-v2/templates/cronjob.yaml
@@ -52,8 +52,8 @@ spec:
                 allowPrivilegeEscalation: false
           volumes:
             - name: user-config
-              secret:
-                secretName: {{ include "lookout_v2.config.name" . }}
+              configMap:
+                name: {{ include "lookout_v2.config.name" . }}
             {{- if .Values.additionalVolumes }}
             {{- toYaml .Values.additionalVolumes | nindent 12 }}
             {{- end }}

diff --git a/deployment/scheduler/templates/cronjob.yaml b/deployment/scheduler/templates/cronjob.yaml
@@ -65,8 +65,8 @@ spec:
                 allowPrivilegeEscalation: false
           volumes:
             - name: user-config
-              secret:
-                secretName: {{ include "armada-scheduler-pruner.config.name" . }}
+              configMap:
+                name: {{ include "armada-scheduler-pruner.config.name" . }}
             {{- if .Values.scheduler.additionalVolumes }}
             {{- toYaml .Values.scheduler.additionalVolumes | nindent 12 }}
             {{- end }}

diff --git a/developer/env/docker/binoculars.env b/developer/env/docker/binoculars.env
@@ -1,2 +1,2 @@
-ARMADA_CORSALLOWEDORIGINS="http://localhost:3000,http://localhost:10000,http://example.com:10000"
+ARMADA_CORSALLOWEDORIGINS="http://localhost:3000,http://localhost:4173,http://localhost:10000,http://example.com:10000"
 ARMADA_HTTP_PORT=8082
diff --git a/developer/env/docker/lookoutv2.env b/developer/env/docker/lookoutv2.env
@@ -1,4 +1,4 @@
 ARMADA_POSTGRES_CONNECTION_PORT=5432
-ARMADA_CORSALLOWEDORIGINS="http://localhost:3000,http://localhost:10000,http://localhost:8082,http://example.com:10000"
+ARMADA_CORSALLOWEDORIGINS="http://localhost:3000,http://localhost:4173,http://localhost:10000,http://localhost:8082,http://example.com:10000"
 ARMADA_UICONFIG_ARMADAAPIBASEURL="http://localhost:8080"
 ARMADA_UICONFIG_BINOCULARSBASEURLPATTERN="http://localhost:8082"
diff --git a/developer/env/docker/server.env b/developer/env/docker/server.env
@@ -1,3 +1,3 @@
 ARMADA_QUEUECACHEREFRESHPERIOD="1s"
-ARMADA_CORSALLOWEDORIGINS="http://localhost:3000,http://localhost:10000,http://example.com:10000"
+ARMADA_CORSALLOWEDORIGINS="http://localhost:3000,http://localhost:4173,http://localhost:10000,http://example.com:10000"
 ARMADA_QUERYAPI_POSTGRES_CONNECTION_HOST=postgres
diff --git a/developer/env/local/binoculars.env b/developer/env/local/binoculars.env
@@ -1 +1 @@
-  ARMADA_CORSALLOWEDORIGINS="http://localhost:3000,http://localhost:8089,http://example.com:8089"
+  ARMADA_CORSALLOWEDORIGINS="http://localhost:3000,http://localhost:4173,http://localhost:8089,http://example.com:8089"
diff --git a/developer/env/local/lookoutv2.env b/developer/env/local/lookoutv2.env
@@ -1,4 +1,4 @@
 ARMADA_POSTGRES_CONNECTION_HOST="localhost"
 ARMADA_POSTGRES_CONNECTION_DBNAME=postgres
 ARMADA_POSTGRES_CONNECTION_PORT=5432
-ARMADA_CORSALLOWEDORIGINS="http://localhost:3000,http://localhost:8089,http://localhost:10000,http://example.com:10000,http://example.com:8089"
+ARMADA_CORSALLOWEDORIGINS="http://localhost:3000,http://localhost:4173,http://localhost:8089,http://localhost:10000,http://example.com:10000,http://example.com:8089"
diff --git a/developer/env/local/server.env b/developer/env/local/server.env
@@ -1,5 +1,5 @@
 EXECUTOR_UPDATE_INTERVAL="1s"
-ARMADA_CORSALLOWEDORIGINS=="http://localhost:3000,http://localhost:8089,http://localhost:10000,http://example.com:10000,http://example.com:8089"
+ARMADA_CORSALLOWEDORIGINS=="http://localhost:3000,http://localhost:4173,http://localhost:8089,http://localhost:10000,http://example.com:10000,http://example.com:8089"
 ARMADA_EVENTSAPIREDIS_ADDRS=localhost:6379
 ARMADA_POSTGRES_CONNECTION_HOST=localhost
 ARMADA_PULSAR_URL=pulsar://localhost:6650

diff --git a/docs/helm.md b/docs/helm.md
@@ -65,6 +65,16 @@ applicationConfig:
     armadaUrl: "server.url.com:443"  
 ```
 
+**Note:** The values you enter in this section will be placed into a K8s configmap. For senistive values (e.g. database passwords) we recommend setting them as environmental variables from a non-helm managed secret:
+```yaml
+env:
+- name: ARMADA_POSTGRES_CONNECTION_PASSWORD
+  valueFrom:
+    secretKeyRef:
+      key: password
+      name: lookout-postgres-password
+```
+
 #### Credentials
 
 ##### Open Id

diff --git a/internal/lookout/ui/README.md b/internal/lookout/ui/README.md
@@ -76,3 +76,10 @@ yarn build
 
 This builds the app for production to the `build` folder. It correctly bundles
 React in production mode and optimizes the build for the best performance.
+
+You can then run a server to serve this production bundle locally on
+[http://localhost:4173](http://localhost:4173):
+
+```bash
+yarn serve
+```
diff --git a/internal/lookout/ui/package.json b/internal/lookout/ui/package.json
@@ -69,6 +69,7 @@
     ]
   },
   "devDependencies": {
+    "@emotion/babel-plugin": "^11.13.5",
     "@eslint/compat": "^1.2.4",
     "@tanstack/eslint-plugin-query": "^5.62.1",
     "@testing-library/dom": "^10.4.0",
@@ -96,7 +97,7 @@
     "prettier": "^3.4.2",
     "typescript": "^4.9.3",
     "vite": "^6.0.3",
-    "vitest": "^2.1.8"
+    "vitest": "^3.0.0-beta.4"
   },
   "resolutions": {
     "@types/react": "^18",

diff --git a/internal/lookout/ui/src/components/CodeBlock.tsx b/internal/lookout/ui/src/components/CodeBlock.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from "react"
 
 import { Download } from "@mui/icons-material"
-import { IconButton, styled, useColorScheme } from "@mui/material"
+import { IconButton, Skeleton, styled, useColorScheme } from "@mui/material"
 import { Highlight, themes } from "prism-react-renderer"
 import Prism from "prismjs"
 import "prismjs/components/prism-bash"
@@ -13,6 +13,9 @@ import { CopyIconButton } from "./CopyIconButton"
 // import "prismjs/components/prism-{language}"
 type SupportedLanguage = "bash" | "yaml"
 
+const DEFAULT_LOADING_LINES = 20
+const DEFAULT_LOADING_LINE_LENGTH = 80
+
 const DARK_PRISM_THEME = themes.oneDark
 const LIGHT_PRISM_THEME = themes.oneLight
 
@@ -69,31 +72,55 @@ const CodeLineNumber = styled("span")({
   },
 })
 
-export type CodeBlockProps = {
-  language: SupportedLanguage | "text"
+interface CodeBlockLoadingProps {
+  loading: true
+  code?: undefined | string
+  language?: undefined | SupportedLanguage | "text"
+}
+
+interface CodeBlockLoadedProps {
+  loading: false
   code: string
+  language: SupportedLanguage | "text"
+}
+
+interface CodeBlockDownloadbaleProps {
+  downloadable: true
+  downloadBlobType: string
+  downloadFileName: string
+}
+
+interface CodeBlockNonDownloadbaleProps {
+  downloadable: false
+  downloadBlobType?: undefined | string
+  downloadFileName?: undefined | string
+}
+
+interface CodeBlockbaseProps {
   showLineNumbers: boolean
-} & (
-  | {
-      downloadable: true
-      downloadBlobType: string
-      downloadFileName: string
-    }
-  | { downloadable: false; downloadBlobType?: undefined | string; downloadFileName?: undefined | string }
-)
+  loadingLines?: number
+  loadingLineLength?: number
+}
+
+export type CodeBlockProps = CodeBlockbaseProps &
+  (CodeBlockLoadedProps | CodeBlockLoadingProps) &
+  (CodeBlockDownloadbaleProps | CodeBlockNonDownloadbaleProps)
 
 export const CodeBlock = ({
   language,
   code,
-  showLineNumbers,
+  loading,
   downloadable,
   downloadBlobType,
   downloadFileName,
+  showLineNumbers,
+  loadingLines = DEFAULT_LOADING_LINES,
+  loadingLineLength = DEFAULT_LOADING_LINE_LENGTH,
 }: CodeBlockProps) => {
   const { colorScheme } = useColorScheme()
 
   const downloadFile = useCallback(() => {
-    if (!downloadable) {
+    if (!downloadable || loading) {
       return
     }
 
@@ -107,6 +134,40 @@ export const CodeBlock = ({
     element.click()
   }, [code, downloadable, downloadBlobType, downloadFileName])
 
+  if (loading) {
+    return (
+      <CodeBlockContainer>
+        <Highlight
+          prism={Prism}
+          theme={colorScheme === "dark" ? DARK_PRISM_THEME : LIGHT_PRISM_THEME}
+          language="text"
+          code={Array(loadingLines).fill("").join("\n")}
+        >
+          {({ style, tokens, getLineProps }) => (
+            <StyledPre style={style}>
+              <Code>
+                {tokens.map((line, i) =>
+                  showLineNumbers ? (
+                    <CodeLine key={i} {...getLineProps({ line })}>
+                      <CodeLineNumber />
+                      <span>
+                        <Skeleton>{Array(loadingLineLength).fill(" ").join("")}</Skeleton>
+                      </span>
+                    </CodeLine>
+                  ) : (
+                    <div key={i} {...getLineProps({ line })}>
+                      <Skeleton>{Array(loadingLineLength).fill(" ").join("")}</Skeleton>
+                    </div>
+                  ),
+                )}
+              </Code>
+            </StyledPre>
+          )}
+        </Highlight>
+      </CodeBlockContainer>
+    )
+  }
+
   return (
     <CodeBlockContainer>
       <CodeActionsContainer className="codeActionsContainer">

diff --git a/internal/lookout/ui/src/components/lookoutV2/sidebar/ContainerDetails.module.css b/internal/lookout/ui/src/components/lookoutV2/sidebar/ContainerDetails.module.css
diff --git a/internal/lookout/ui/src/components/lookoutV2/sidebar/ContainerDetails.tsx b/internal/lookout/ui/src/components/lookoutV2/sidebar/ContainerDetails.tsx
@@ -1,14 +1,29 @@
-import { useEffect, useMemo, useState } from "react"
+import { useEffect, useMemo } from "react"
 
-import { CircularProgress, Collapse, ListItemButton, Typography } from "@mui/material"
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Alert,
+  Paper,
+  Skeleton,
+  Stack,
+  styled,
+  Typography,
+} from "@mui/material"
 
-import styles from "./ContainerDetails.module.css"
 import { KeyValuePairTable } from "./KeyValuePairTable"
+import { SidebarTabSubheading } from "./sidebarTabContentComponents"
 import { useCustomSnackbar } from "../../../hooks/useCustomSnackbar"
 import { Job } from "../../../models/lookoutV2Models"
 import { useGetJobSpec } from "../../../services/lookoutV2/useGetJobSpec"
+import { SPACING } from "../../../styling/spacing"
 import { CodeBlock } from "../../CodeBlock"
 
+const LoadingContainerPaper = styled(Paper)(({ theme }) => ({
+  padding: theme.spacing(2),
+}))
+
 export interface ContainerData {
   name: string
   command: string
@@ -73,17 +88,16 @@ export const ContainerDetails = ({ job }: ContainerDetailsProps) => {
 
   if (getJobSpecResult.status === "pending") {
     return (
-      <div className={styles.container + " " + styles.centerContent}>
-        <CircularProgress />
-      </div>
+      <LoadingContainerPaper variant="outlined">
+        <Skeleton />
+      </LoadingContainerPaper>
     )
   }
   if (containers.length === 0) {
-    return <>No containers found.</>
+    return <Alert severity="info">No containers found.</Alert>
   }
   return (
-    <div className={styles.container}>
-      <Typography>Containers</Typography>
+    <div>
       {containers.map((c, i) => (
         <SingleContainerDetails key={i} container={c} openByDefault={i === 0} />
       ))}
@@ -92,23 +106,19 @@ export const ContainerDetails = ({ job }: ContainerDetailsProps) => {
 }
 
 const SingleContainerDetails = ({ container, openByDefault }: { container: ContainerData; openByDefault: boolean }) => {
-  const [open, setOpen] = useState<boolean>(openByDefault)
   const entrypoint = container.command + " " + container.args
-
-  const handleClick = () => {
-    setOpen(!open)
-  }
-
   const containerName = container.name !== "" ? container.name : "No name"
 
   return (
-    <>
-      <ListItemButton onClick={handleClick}>{containerName}</ListItemButton>
-      <Collapse in={open}>
-        <div className={styles.singleContainer}>
-          <div className={styles.commandContainer}>
+    <Accordion defaultExpanded={openByDefault}>
+      <AccordionSummary>
+        <SidebarTabSubheading>{containerName}</SidebarTabSubheading>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Stack spacing={SPACING.sm}>
+          <div>
             <Typography>Command</Typography>
-            <CodeBlock code={entrypoint} language="bash" downloadable={false} showLineNumbers={false} />
+            <CodeBlock code={entrypoint} language="bash" downloadable={false} showLineNumbers={false} loading={false} />
           </div>
           <div>
             <Typography>Resources</Typography>
@@ -131,8 +141,8 @@ const SingleContainerDetails = ({ container, openByDefault }: { container: Conta
               ]}
             />
           </div>
-        </div>
-      </Collapse>
-    </>
+        </Stack>
+      </AccordionDetails>
+    </Accordion>
   )
 }
diff --git a/internal/lookout/ui/src/components/lookoutV2/sidebar/KeyValuePairTable.module.css b/internal/lookout/ui/src/components/lookoutV2/sidebar/KeyValuePairTable.module.css
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		ARMADA_CORSALLOWEDORIGINS="http://localhost:3000,http://localhost:8089,http://example.com:8089"
		ARMADA_CORSALLOWEDORIGINS="http://localhost:3000,http://localhost:4173,http://localhost:8089,http://example.com:8089"