Improved experience of jobs, batch jobs, events and end-vars lists (#…

…1125) * Added an option and indication to deploy external DNS to apply-config job * Added an indication Override use build cache to build-deploy job * Added an indication Override use build cache to build-deploy and build job * Store expanded jobs, batches and events lists state in the local store * Stopped pulling events in collapsed lists * Stored in local storage the collapse state of env-vars list. Stopped pulling in collapsed lists * Distinguish expanded state between single job list and batch jobs * Extended batch overview, added batch name to batch job breadcrumbs * Added batch name to the batch job overview
equinor · Nov 11, 2024 · 4f01926 · 4f01926
1 parent 5ae416a
commit 4f01926
Show file tree

Hide file tree

Showing 23 changed files with 386 additions and 88 deletions.
diff --git a/src/components/app-navbar/index.tsx b/src/components/app-navbar/index.tsx
@@ -78,16 +78,16 @@ const NavbarLink = ({ collapsed, ...link }: NavbarLinkItem) => {
 };
 
 const NavbarExpanded = ({ appName, links }: NavbarProps) => {
-  const [favourites, setFacourites] = useLocalStorage<Array<string>>(
+  const [favourites, setFavourites] = useLocalStorage<Array<string>>(
     'favouriteApplications',
     []
   );
   const isFavourite = favourites.includes(appName);
   const toggleFavouriteApp = (app: string) => {
     if (isFavourite) {
-      setFacourites((old) => old.filter((a) => a !== app));
+      setFavourites((old) => old.filter((a) => a !== app));
     } else {
-      setFacourites((old) => uniq([...old, app]));
+      setFavourites((old) => uniq([...old, app]));
     }
   };
 

diff --git a/src/components/breadcrumb/index.tsx b/src/components/breadcrumb/index.tsx
@@ -8,10 +8,14 @@ export interface BreadcrumbProps {
 
 export const Breadcrumb: FunctionComponent<BreadcrumbProps> = ({ links }) => (
   <Breadcrumbs>
-    {links.map(({ to, label }, i) => (
-      <Breadcrumbs.Breadcrumb key={i} as={Link} to={to}>
-        {label}
-      </Breadcrumbs.Breadcrumb>
-    ))}
+    {links.map(({ to, label }, i) => {
+      return (
+        label !== '' && (
+          <Breadcrumbs.Breadcrumb key={i} as={Link} to={to}>
+            {label}
+          </Breadcrumbs.Breadcrumb>
+        )
+      );
+    })}
   </Breadcrumbs>
 );
diff --git a/src/components/component/scheduled-job/scheduled-batch-list.tsx b/src/components/component/scheduled-job/scheduled-batch-list.tsx
@@ -43,6 +43,7 @@ import { RelativeToNow } from '../../time/relative-to-now';
 import { BatchJobStatuses } from './batch-job-statuses';
 
 import './style.css';
+import useLocalStorage from '../../../effects/use-local-storage';
 
 function isBatchStoppable(status: ScheduledBatchSummary['status']): boolean {
   return status === 'Waiting' || status === 'Running';
@@ -53,7 +54,6 @@ type Props = {
   envName: string;
   jobComponentName: string;
   scheduledBatchList?: Array<ScheduledBatchSummary>;
-  isExpanded?: boolean;
   fetchBatches?: () => void;
 };
 
@@ -62,7 +62,6 @@ export function ScheduledBatchList({
   envName,
   jobComponentName,
   scheduledBatchList,
-  isExpanded,
   fetchBatches: refreshBatches,
 }: Props) {
   const [deleteBatch] = useDeleteBatchMutation();
@@ -84,6 +83,10 @@ export function ScheduledBatchList({
     (id, visible) => setVisibleRestartScrims((x) => ({ ...x, [id]: visible })),
     []
   );
+  const [isExpanded, setIsExpanded] = useLocalStorage<boolean>(
+    'batchJobListExpanded',
+    false
+  );
 
   const sortedData = useMemo(() => {
     return dataSorter(scheduledBatchList, [
@@ -102,7 +105,10 @@ export function ScheduledBatchList({
 
   return (
     <Accordion className="accordion elevated" chevronPosition="right">
-      <Accordion.Item isExpanded={isExpanded}>
+      <Accordion.Item
+        isExpanded={isExpanded}
+        onExpandedChange={(expanded) => setIsExpanded(expanded)}
+      >
         <Accordion.Header>
           <Accordion.HeaderTitle>
             <Typography className="whitespace-nowrap" variant="h4" as="span">
@@ -320,6 +326,5 @@ ScheduledBatchList.propTypes = {
   scheduledBatchList: PropTypes.arrayOf(
     PropTypes.object as PropTypes.Validator<ScheduledBatchSummary>
   ),
-  isExpanded: PropTypes.bool,
   fetchBatches: PropTypes.func,
 };
diff --git a/src/components/component/scheduled-job/scheduled-job-list.tsx b/src/components/component/scheduled-job/scheduled-job-list.tsx
@@ -36,7 +36,10 @@ import {
   useStopJobMutation,
 } from '../../../store/radix-api';
 import { promiseHandler } from '../../../utils/promise-handler';
-import { getScheduledJobUrl } from '../../../utils/routing';
+import {
+  getScheduledBatchJobUrl,
+  getScheduledJobUrl,
+} from '../../../utils/routing';
 import {
   dataSorter,
   sortCompareDate,
@@ -73,20 +76,24 @@ export const ScheduledJobList: FunctionComponent<{
   appName: string;
   envName: string;
   jobComponentName: string;
+  batchName?: string;
   totalJobCount: number;
   scheduledJobList?: Array<ScheduledJobSummary>;
-  isExpanded?: boolean;
   isDeletable?: boolean; // set if jobs can be deleted
   fetchJobs?: () => void;
+  isExpanded?: boolean;
+  onExpanded?: (isExpanded: boolean) => void;
 }> = ({
   appName,
   envName,
   jobComponentName,
   scheduledJobList,
   totalJobCount,
-  isExpanded,
+  batchName,
   isDeletable,
   fetchJobs: refreshJobs,
+  isExpanded,
+  onExpanded,
 }) => {
   const [deleteJob] = useDeleteJobMutation();
   const [stopJob] = useStopJobMutation();
@@ -134,7 +141,7 @@ export const ScheduledJobList: FunctionComponent<{
 
   return (
     <Accordion className="accordion elevated" chevronPosition="right">
-      <Accordion.Item isExpanded={isExpanded}>
+      <Accordion.Item isExpanded={isExpanded} onExpandedChange={onExpanded}>
         <Accordion.Header>
           <Accordion.HeaderTitle>
             <Typography variant="h4" as="span">
@@ -207,12 +214,22 @@ export const ScheduledJobList: FunctionComponent<{
                             <Typography
                               className="scheduled-job__link"
                               as={Link}
-                              to={getScheduledJobUrl(
-                                appName,
-                                envName,
-                                jobComponentName,
-                                job.name
-                              )}
+                              to={
+                                batchName
+                                  ? getScheduledBatchJobUrl(
+                                      appName,
+                                      envName,
+                                      jobComponentName,
+                                      batchName,
+                                      job.name
+                                    )
+                                  : getScheduledJobUrl(
+                                      appName,
+                                      envName,
+                                      jobComponentName,
+                                      job.name
+                                    )
+                              }
                               link
                               token={{ textDecoration: 'none' }}
                             >
@@ -380,7 +397,9 @@ ScheduledJobList.propTypes = {
   scheduledJobList: PropTypes.arrayOf(
     PropTypes.object as PropTypes.Validator<ScheduledJobSummary>
   ),
-  isExpanded: PropTypes.bool,
+  batchName: PropTypes.string,
   isDeletable: PropTypes.bool,
   fetchJobs: PropTypes.func,
+  isExpanded: PropTypes.bool,
+  onExpanded: PropTypes.func,
 };
diff --git a/src/components/create-job-form/pipeline-form-apply-config.tsx b/src/components/create-job-form/pipeline-form-apply-config.tsx
@@ -1,6 +1,11 @@
-import { Button, CircularProgress, Typography } from '@equinor/eds-core-react';
-import type { FormEvent } from 'react';
-
+import {
+  Button,
+  Checkbox,
+  CircularProgress,
+  List,
+  Typography,
+} from '@equinor/eds-core-react';
+import { type FormEvent, useState } from 'react';
 import { useTriggerPipelineApplyConfigMutation } from '../../store/radix-api';
 import { getFetchErrorMessage } from '../../store/utils';
 import { Alert } from '../alert';
@@ -13,13 +18,16 @@ export function PipelineFormApplyConfig({
   onSuccess,
 }: FormProp) {
   const [trigger, state] = useTriggerPipelineApplyConfigMutation();
+  const [deployExternalDNS, setDeployExternalDNS] = useState(false);
   const handleSubmit = handlePromiseWithToast(
     async (e: FormEvent<HTMLFormElement>) => {
       e.preventDefault();
 
       const response = await trigger({
         appName,
-        pipelineParametersApplyConfig: {},
+        pipelineParametersApplyConfig: {
+          deployExternalDNS: deployExternalDNS,
+        },
       }).unwrap();
       onSuccess(response.name);
     }
@@ -39,6 +47,20 @@ export function PipelineFormApplyConfig({
           >
             Apply Radix config
           </Typography>
+          <List className="grid grid--gap-x-small">
+            <List.Item>
+              Apply changes in DNS alias, build secrets, environments (create
+              new or soft-delete existing)
+            </List.Item>
+            <List.Item>
+              <Checkbox
+                label="Deploy External DNS-es"
+                name="deployExternalDNS"
+                checked={deployExternalDNS}
+                onChange={() => setDeployExternalDNS(!deployExternalDNS)}
+              />
+            </List.Item>
+          </List>
         </div>
         <div className="o-action-bar">
           {state.isLoading && (

diff --git a/src/components/environment-variables/index.tsx b/src/components/environment-variables/index.tsx
@@ -57,13 +57,17 @@ export const EnvironmentVariables: FunctionComponent<{
   componentType: Component['type'];
   hideRadixVars?: boolean;
   readonly?: boolean;
+  isExpanded?: boolean;
+  onExpanded?: (isExpanded: boolean) => void;
 }> = ({
   appName,
   envName,
   componentName,
   componentType,
   hideRadixVars,
   readonly,
+  isExpanded,
+  onExpanded,
 }) => {
   const [componentVars, setComponentVars] = useState<FormattedEnvVar[]>([]);
   const [radixVars, setRadixVars] = useState<FormattedEnvVar[]>([]);
@@ -77,7 +81,7 @@ export const EnvironmentVariables: FunctionComponent<{
   } = useEnvVarsQuery(
     { appName, envName, componentName },
     {
-      skip: !appName || !envName || !componentName,
+      skip: !appName || !envName || !componentName || !isExpanded,
       pollingInterval: pollVarsInterval,
     }
   );
@@ -131,7 +135,7 @@ export const EnvironmentVariables: FunctionComponent<{
 
   return (
     <Accordion className="accordion elevated" chevronPosition="right">
-      <Accordion.Item isExpanded>
+      <Accordion.Item isExpanded={isExpanded} onExpandedChange={onExpanded}>
         <Accordion.Header>
           <Accordion.HeaderTitle>
             <Typography className="whitespace-nowrap" variant="h4" as="span">
@@ -158,11 +162,13 @@ export const EnvironmentVariables: FunctionComponent<{
                         </Button>
                       </div>
                     ) : (
-                      <div>
-                        <Button onClick={handleSetEditMode}>
-                          <Icon data={edit} /> Edit
-                        </Button>
-                      </div>
+                      !readonly && (
+                        <div>
+                          <Button onClick={handleSetEditMode}>
+                            <Icon data={edit} /> Edit
+                          </Button>
+                        </div>
+                      )
                     )}
                   </div>
 
@@ -240,4 +246,6 @@ EnvironmentVariables.propTypes = {
   >,
   hideRadixVars: PropTypes.bool,
   readonly: PropTypes.bool,
+  isExpanded: PropTypes.bool,
+  onExpanded: PropTypes.func,
 };
diff --git a/src/components/events-list/index.tsx b/src/components/events-list/index.tsx
@@ -12,14 +12,16 @@ import './style.css';
 export interface EventsListProps {
   events: Readonly<Array<Event>>;
   isExpanded: boolean;
+  onExpanded?: (isExpanded: boolean) => void;
 }
 
 export const EventsList: FunctionComponent<EventsListProps> = ({
   events,
   isExpanded,
+  onExpanded,
 }) => (
   <Accordion className="accordion elevated" chevronPosition="right">
-    <Accordion.Item isExpanded={isExpanded}>
+    <Accordion.Item isExpanded={isExpanded} onExpandedChange={onExpanded}>
       <Accordion.Header>
         <Accordion.HeaderTitle>
           <Typography variant="h4">Events</Typography>
@@ -61,4 +63,5 @@ EventsList.propTypes = {
   events: PropTypes.arrayOf(PropTypes.object as PropTypes.Validator<Event>)
     .isRequired,
   isExpanded: PropTypes.bool.isRequired,
+  onExpanded: PropTypes.func,
 };
diff --git a/src/components/job-overview/index.tsx b/src/components/job-overview/index.tsx
@@ -1,4 +1,9 @@
-import { Button, CircularProgress, Typography } from '@equinor/eds-core-react';
+import {
+  Button,
+  Checkbox,
+  CircularProgress,
+  Typography,
+} from '@equinor/eds-core-react';
 import * as PropTypes from 'prop-types';
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -240,6 +245,24 @@ export const JobOverview = ({ appName, jobName }: Props) => {
                         </Typography>
                       </Typography>
                     )}
+                    {(job.pipeline === 'build-deploy' ||
+                      job.pipeline === 'build') &&
+                      job.overrideUseBuildCache !== undefined && (
+                        <Checkbox
+                          label="Override use build cache"
+                          name="overrideUseBuildCache"
+                          checked={job.overrideUseBuildCache}
+                          disabled={true}
+                        />
+                      )}
+                    {job.pipeline === 'apply-config' && (
+                      <Checkbox
+                        label="Deploy external DNS-es"
+                        name="deployExternalDNS"
+                        checked={job.deployExternalDNS === true}
+                        disabled={true}
+                      />
+                    )}
                     {job.branch && (
                       <div>
                         <Typography>