hide resource utilization for job manager, fix linting errors

equinor · Jan 15, 2025 · eba00de · eba00de
1 parent 725a804
commit eba00de
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 55 deletions.
diff --git a/src/components/app-list-item/index.tsx b/src/components/app-list-item/index.tsx
@@ -60,14 +60,15 @@ export interface AppListItemProps {
   isFavourite?: boolean;
   showStatus?: boolean;
   isDeleted?: boolean;
+  isLoading: boolean;
 }
 
 const visibleKeys: Array<Lowercase<Vulnerability['severity']>> = [
   'critical',
   'high',
 ];
 
-export const AppListItem = (props: AppListItemProps) => {
+export const AppListItem = ({ isLoading, ...props }: AppListItemProps) => {
   const { data: vulnerabilitySummary, isLoading: isVulnSummaryLoading } =
     useGetApplicationVulnerabilitySummariesQuery(
       { appName: props.appName },
@@ -84,7 +85,7 @@ export const AppListItem = (props: AppListItemProps) => {
     <AppListItemLayout
       utilization={utilization}
       vulnerabilitySummary={vulnerabilitySummary}
-      isLoading={isUtilizationLoading || isVulnSummaryLoading}
+      isLoading={isUtilizationLoading || isVulnSummaryLoading || isLoading}
       {...props}
     />
   );
@@ -166,56 +167,67 @@ export const AppListItemLayout = ({
               </Button>
             </div>
           </div>
-          {isDeleted && showStatus && (
-            <Tooltip title="This application does not exist">
-              <Icon data={error_outlined} />
-            </Tooltip>
-          )}
-          {!isDeleted && showStatus && (
-            <div className="grid grid--gap-small app-list-status">
-              <div className="app-list-status--last-job grid--gap-small">
-                <div>
-                  {time && (
-                    <Typography style={{ fontWeight: 400 }}>
-                      {formatDistanceToNow(new Date(time), {
-                        addSuffix: true,
-                      })}
-                    </Typography>
-                  )}
-                </div>
 
-                <div className="grid grid--gap-x-small grid--auto-columns">
-                  {(latestJobIsChanging || isLoading) && (
-                    <CircularProgress
-                      // @ts-expect-error the other status icons are 22px, we should match it
-                      size={22}
-                    />
+          {showStatus && (
+            <>
+              <div className="grid grid--gap-small app-list-status">
+                <div className="app-list-status--last-job grid--gap-small">
+                  {isDeleted && !isLoading && (
+                    <div>
+                      <Tooltip title="This application does not exist">
+                        <Icon data={error_outlined} />
+                      </Tooltip>
+                    </div>
                   )}
+                  {(!isDeleted || isLoading) && (
+                    <>
+                      <div>
+                        {time && (
+                          <Typography style={{ fontWeight: 400 }}>
+                            {formatDistanceToNow(new Date(time), {
+                              addSuffix: true,
+                            })}
+                          </Typography>
+                        )}
+                      </div>
 
-                  {visibleKeys.some((key) => vulnerabilities[key] > 0) && (
-                    <EnvironmentVulnerabilityIndicator
-                      title="Vulnerabilities"
-                      size={22}
-                      summary={filterFields(vulnerabilities, visibleKeys)}
-                      visibleKeys={visibleKeys}
-                    />
-                  )}
+                      <div className="grid grid--gap-x-small grid--auto-columns">
+                        {(latestJobIsChanging || isLoading) && (
+                          <CircularProgress
+                            // @ts-expect-error the other status icons are 22px, we should match it
+                            size={22}
+                          />
+                        )}
+
+                        {visibleKeys.some(
+                          (key) => vulnerabilities[key] > 0
+                        ) && (
+                          <EnvironmentVulnerabilityIndicator
+                            title="Vulnerabilities"
+                            size={22}
+                            summary={filterFields(vulnerabilities, visibleKeys)}
+                            visibleKeys={visibleKeys}
+                          />
+                        )}
 
-                  <UtilizationPopover
-                    path={''}
-                    utilization={utilization}
-                    minimumSeverity={Severity.Warning}
-                  />
+                        <UtilizationPopover
+                          path={''}
+                          utilization={utilization}
+                          minimumSeverity={Severity.Warning}
+                        />
 
-                  {statusElements && (
-                    <EnvironmentCardStatus
-                      title="Application status"
-                      statusElements={statusElements}
-                    />
+                        {statusElements && (
+                          <EnvironmentCardStatus
+                            title="Application status"
+                            statusElements={statusElements}
+                          />
+                        )}
+                      </div>
+                    </>
                   )}
                 </div>
               </div>
-            </div>
+            </>
           )}
         </div>
       </div>

diff --git a/src/components/app-list/index.tsx b/src/components/app-list/index.tsx
@@ -26,11 +26,10 @@ const LoadingCards: FunctionComponent<{ amount: number }> = ({ amount }) => (
     {[...Array(amount || 1)].map((_, i) => (
       <AppListItem
         key={i}
-        appName={'dummy'}
+        appName={''}
         handler={(e) => e.preventDefault()}
         isPlaceholder
-        name={''}
-        isLoaded={false}
+        isLoading={false}
       />
     ))}
   </div>
@@ -149,8 +148,7 @@ export default function AppList() {
                       }}
                       isFavourite
                       showStatus
-                      isLoaded={favsState.isSuccess}
-                      name={appName}
+                      isLoading={favsState.isLoading}
                     />
                   );
                 })}
@@ -217,8 +215,7 @@ export default function AppList() {
                           e.preventDefault();
                         }}
                         isFavourite={app.isFavourite}
-                        name={app.name}
-                        isLoaded={true}
+                        isLoading={false}
                       />
                     );
                   })}

diff --git a/src/components/environments-summary/environment-card.tsx b/src/components/environments-summary/environment-card.tsx
@@ -153,7 +153,11 @@ export const EnvironmentCardLayout = ({
           </Typography>
         )}
 
-        <EnvironmentIngress components={components} />
+        <EnvironmentIngress
+          components={components}
+          appName={appName}
+          envName={env.name}
+        />
 
         <DeploymentDetails appName={appName} deployment={deployment} />
 

diff --git a/src/components/environments-summary/environment-ingress.tsx b/src/components/environments-summary/environment-ingress.tsx
@@ -12,9 +12,15 @@ export const URL_VAR_NAME = 'RADIX_PUBLIC_DOMAIN_NAME';
 const MAX_DISPLAY_COMPONENTS = 2;
 
 export interface EnvironmentIngressProps {
+  appName: string;
+  envName: string;
   components?: Component[];
 }
-export const EnvironmentIngress = ({ components }: EnvironmentIngressProps) => {
+export const EnvironmentIngress = ({
+  components,
+  appName,
+  envName,
+}: EnvironmentIngressProps) => {
   const comps = components?.reduce<{
     public: Array<Component>;
     passive: Array<Component>;

diff --git a/src/components/page-active-component/active-component-overview.tsx b/src/components/page-active-component/active-component-overview.tsx
@@ -113,6 +113,7 @@ export const ActiveComponentOverview: FunctionComponent<{
 
             <div className="grid grid--gap-large">
               <ComponentReplicaList
+                showUtilization
                 title={'Replicas'}
                 appName={appName}
                 envName={envName}

diff --git a/src/components/page-active-component/component-replica-list.tsx b/src/components/page-active-component/component-replica-list.tsx
@@ -10,6 +10,7 @@ type Props = {
   componentName: string;
   replicaList?: Array<ReplicaSummary>;
   isExpanded?: boolean;
+  showUtilization?: boolean;
 };
 export const ComponentReplicaList = ({
   title,
@@ -18,6 +19,7 @@ export const ComponentReplicaList = ({
   componentName,
   replicaList,
   isExpanded,
+  showUtilization,
 }: Props) => (
   <Accordion className="accordion elevated" chevronPosition="right">
     <Accordion.Item isExpanded={isExpanded}>
@@ -32,7 +34,7 @@ export const ComponentReplicaList = ({
         <div className="grid">
           {replicaList && replicaList.length > 0 ? (
             <ReplicaList
-              showUtilization
+              showUtilization={showUtilization}
               appName={appName}
               envName={envName}
               compName={componentName}

diff --git a/src/components/replica-list/index.tsx b/src/components/replica-list/index.tsx
@@ -4,7 +4,6 @@ import { clsx } from 'clsx';
 import { Fragment, useCallback, useEffect, useState } from 'react';
 
 import {
-  type ReplicaResourcesUtilizationResponse,
   type ReplicaSummary,
   useGetApplicationResourcesUtilizationQuery,
 } from '../../store/radix-api';