Lookout - configurable title

armadaproject · May 12, 2023 · ca17d02 · ca17d02
1 parent b8df46e
commit ca17d02
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 4 deletions.
diff --git a/internal/lookout/configuration/types.go b/internal/lookout/configuration/types.go
@@ -8,6 +8,8 @@ import (
 )
 
 type LookoutUIConfig struct {
+	CustomTitle string
+
 	ArmadaApiBaseUrl         string
 	UserAnnotationPrefix     string
 	BinocularsEnabled        bool

diff --git a/internal/lookout/ui/src/App.tsx b/internal/lookout/ui/src/App.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect } from "react"
 
 import { ThemeProvider as ThemeProviderV4, createTheme as createThemeV4, StylesProvider } from "@material-ui/core"
 import { createGenerateClassName } from "@material-ui/core/styles"
@@ -61,6 +61,7 @@ const themeV4 = createThemeV4(theme)
 const themeV5 = createThemeV5(theme)
 
 type AppProps = {
+  customTitle: string
   jobService: JobService
   v2GetJobsService: IGetJobsService
   v2GroupJobsService: IGroupJobsService
@@ -76,6 +77,11 @@ type AppProps = {
 }
 
 export function App(props: AppProps) {
+  useEffect(() => {
+    if (props.customTitle) {
+      document.title = `${props.customTitle} - Armada Lookout`
+    }
+  }, [props.customTitle])
   return (
     <StylesProvider generateClassName={generateClassName}>
       <ThemeProviderV4 theme={themeV4}>
@@ -87,7 +93,7 @@ export function App(props: AppProps) {
           >
             <BrowserRouter>
               <div className="app-container">
-                <NavBar />
+                <NavBar customTitle={props.customTitle} />
                 <div className="app-content">
                   <Routes>
                     <Route path="/" element={<OverviewContainer {...props} />} />

diff --git a/internal/lookout/ui/src/components/NavBar.tsx b/internal/lookout/ui/src/components/NavBar.tsx
@@ -3,7 +3,7 @@ import React from "react"
 import { AppBar, Tab, Tabs, Toolbar, Typography } from "@material-ui/core"
 import { Link } from "react-router-dom"
 
-import { PropsWithRouter, withRouter } from "../utils"
+import { PropsWithRouter, Router, withRouter } from "../utils"
 
 import "./NavBar.css"
 
@@ -49,7 +49,12 @@ function locationFromIndex(pages: Page[], index: number): string {
   return "/"
 }
 
-function NavBar({ router }: PropsWithRouter) {
+interface NavBarProps {
+  customTitle: string
+  router: Router
+}
+
+function NavBar({ customTitle, router }: NavBarProps) {
   const currentLocation = router.location.pathname
   const currentValue = locationMap.has(currentLocation) ? locationMap.get(currentLocation) : 0
   return (
@@ -60,6 +65,11 @@ function NavBar({ router }: PropsWithRouter) {
           <Typography variant="h6" className="app-name">
             Lookout
           </Typography>
+          {customTitle && (
+            <Typography variant="h5" className="app-name" style={{ paddingLeft: "3em" }}>
+              {customTitle}
+            </Typography>
+          )}
         </a>
         <div className="nav-items">
           <Tabs

diff --git a/internal/lookout/ui/src/index.tsx b/internal/lookout/ui/src/index.tsx
@@ -61,6 +61,7 @@ import "./index.css"
 
   ReactDOM.render(
     <App
+      customTitle={uiConfig.customTitle}
       jobService={jobService}
       v2GetJobsService={v2GetJobsService}
       v2GroupJobsService={v2GroupJobsService}

diff --git a/internal/lookout/ui/src/utils.tsx b/internal/lookout/ui/src/utils.tsx
@@ -11,6 +11,7 @@ interface UIConfig {
   debugEnabled: boolean
   fakeDataEnabled: boolean
   lookoutV2ApiBaseUrl: string
+  customTitle: string
 }
 
 export type RequestStatus = "Loading" | "Idle"
@@ -38,6 +39,7 @@ export async function getUIConfig(): Promise<UIConfig> {
     debugEnabled: queryParams.has("debug"),
     fakeDataEnabled: queryParams.has("fakeData"),
     lookoutV2ApiBaseUrl: "",
+    customTitle: "",
   }
 
   try {
@@ -51,6 +53,7 @@ export async function getUIConfig(): Promise<UIConfig> {
     if (json.JobSetsAutoRefreshMs) config.jobSetsAutoRefreshMs = json.JobSetsAutoRefreshMs
     if (json.JobsAutoRefreshMs) config.jobsAutoRefreshMs = json.JobsAutoRefreshMs
     if (json.LookoutV2ApiBaseUrl) config.lookoutV2ApiBaseUrl = json.LookoutV2ApiBaseUrl
+    if (json.CustomTitle) config.customTitle = json.CustomTitle
   } catch (e) {
     console.error(e)
   }