fix active application overview

src/components/page-active-component/active-component-toolbar.tsx

@@ -89,7 +89,7 @@ export function ActiveComponentToolbar({
             onScale={onScale}
             disabled={scaleState.isLoading}
             currentReplicas={
-              component.replicasOverride ?? component.replicaList.length
+              component.replicasOverride ?? component.replicaList?.length ?? 0
             }
           />
           <Button

src/components/page-active-component/component-replica-list.tsx

@@ -1,19 +1,24 @@
 import { Accordion, Typography } from '@equinor/eds-core-react';
-import * as PropTypes from 'prop-types';
-import type { FunctionComponent } from 'react';
-
 import type { ReplicaSummary } from '../../store/radix-api';
 import { getReplicaUrl } from '../../utils/routing';
 import { ReplicaList } from '../replica-list';
 
-export const ComponentReplicaList: FunctionComponent<{
+type Props = {
   title: string;
   appName: string;
   envName: string;
   componentName: string;
   replicaList?: Array<ReplicaSummary>;
   isExpanded?: boolean;
-}> = ({ title, appName, envName, componentName, replicaList, isExpanded }) => (
+};
+export const ComponentReplicaList = ({
+  title,
+  appName,
+  envName,
+  componentName,
+  replicaList,
+  isExpanded,
+}: Props) => (
   <Accordion className="accordion elevated" chevronPosition="right">
     <Accordion.Item isExpanded={isExpanded}>
       <Accordion.Header>
@@ -25,7 +30,7 @@ export const ComponentReplicaList: FunctionComponent<{
       </Accordion.Header>
       <Accordion.Panel>
         <div className="grid">
-          {replicaList?.length > 0 ? (
+          {replicaList && replicaList.length > 0 ? (
             <ReplicaList
               replicaList={replicaList}
               replicaUrlFunc={(name) =>
@@ -40,14 +45,3 @@ export const ComponentReplicaList: FunctionComponent<{
     </Accordion.Item>
   </Accordion>
 );
-
-ComponentReplicaList.propTypes = {
-  title: PropTypes.string.isRequired,
-  appName: PropTypes.string.isRequired,
-  envName: PropTypes.string.isRequired,
-  componentName: PropTypes.string.isRequired,
-  replicaList: PropTypes.arrayOf(
-    PropTypes.object as PropTypes.Validator<ReplicaSummary>
-  ),
-  isExpanded: PropTypes.bool,
-};

src/components/page-active-component/component-replica-log-accordion.tsx

@@ -8,7 +8,6 @@ import {
 } from '@equinor/eds-core-react';
 import { chevron_down, chevron_up, download, invert } from '@equinor/eds-icons';
 import { clsx } from 'clsx';
-import * as PropTypes from 'prop-types';
 import { Fragment, useCallback, useMemo, useState } from 'react';
 
 import { addMinutes } from 'date-fns';
@@ -177,9 +176,6 @@ function ReplicaLogTableRow({
   const [getLog, { isFetching }] =
     logApi.endpoints.getComponentReplicaLog.useLazyQuery();
 
-  const created = new Date(creationTimestamp);
-  const ended = new Date(lastKnown);
-
   return (
     <Table.Row className={clsx({ 'border-bottom-transparent': isExpanded })}>
       <Table.Cell className={'fitwidth padding-right-0'} variant="icon">
@@ -197,10 +193,10 @@ function ReplicaLogTableRow({
       </Table.Cell>
       <Table.Cell variant="numeric">{containers?.length || 0}</Table.Cell>
       <Table.Cell>
-        <RelativeToNow time={created} capitalize includeSeconds />
+        <RelativeToNow time={creationTimestamp} capitalize includeSeconds />
       </Table.Cell>
       <Table.Cell>
-        {Duration({ start: created, end: ended }) || 'N/A'}
+        {Duration({ start: creationTimestamp, end: lastKnown }) || 'N/A'}
       </Table.Cell>
       <Table.Cell className={'fitwidth padding-right-0'} variant="icon">
         <LogDownloadButton
@@ -214,12 +210,13 @@ function ReplicaLogTableRow({
                   envName,
                   componentName,
                   replicaName: name,
-                  start: created.toISOString(),
-                  end: addMinutes(ended, 10).toISOString(),
+                  start: creationTimestamp,
+                  // @ts-expect-error lastKnown is set, button is disabled when not
+                  end: addMinutes(lastKnown, 10).toISOString(),
                 }).unwrap() as Promise<string>
             )
           }
-          disabled={isFetching}
+          disabled={isFetching || !lastKnown}
         />
       </Table.Cell>
     </Table.Row>
@@ -242,9 +239,6 @@ function ReplicaContainerTableRow({
   const [getLog, { isFetching }] =
     logApi.endpoints.getComponentContainerLog.useLazyQuery();
 
-  const created = new Date(creationTimestamp);
-  const ended = new Date(lastKnown);
-
   return (
     <Table.Row className={className}>
       <Table.Cell className={'fitwidth padding-right-0'} variant="icon">
@@ -261,10 +255,10 @@ function ReplicaContainerTableRow({
       </Table.Cell>
       <Table.Cell />
       <Table.Cell>
-        <RelativeToNow time={created} capitalize includeSeconds />
+        <RelativeToNow time={creationTimestamp} capitalize includeSeconds />
       </Table.Cell>
       <Table.Cell>
-        <Duration start={created} end={ended} />
+        <Duration start={creationTimestamp} end={lastKnown} />
       </Table.Cell>
       <Table.Cell className={'fitwidth padding-right-0'} variant="icon">
         <LogDownloadButton
@@ -279,22 +273,15 @@ function ReplicaContainerTableRow({
                   componentName,
                   replicaName,
                   containerId: id,
-                  start: created.toISOString(),
-                  end: addMinutes(ended, 10).toISOString(),
+                  start: creationTimestamp,
+                  // @ts-expect-error last known is set, button is disabled when not
+                  end: addMinutes(lastKnown, 10).toISOString(),
                 }).unwrap() as Promise<string>
             )
           }
-          disabled={isFetching}
+          disabled={isFetching || !lastKnown}
         />
       </Table.Cell>
     </Table.Row>
   );
 }
-
-ComponentReplicaLogAccordion.propTypes = {
-  title: PropTypes.string.isRequired,
-  appName: PropTypes.string.isRequired,
-  envName: PropTypes.string.isRequired,
-  componentName: PropTypes.string.isRequired,
-  isExpanded: PropTypes.bool,
-};

src/components/page-active-component/dns-aliases.tsx

@@ -3,7 +3,7 @@ import type { FunctionComponent } from 'react';
 import { DNSAlias } from './dns-alias';
 
 export interface DefaultAppAliasProps {
-  urls?: string[];
+  urls: string[];
   title: string;
 }
 

src/components/page-active-component/external-dns.tsx

@@ -50,8 +50,8 @@ const TlsEditForm: FunctionComponent<{
       componentName,
       fqdn: fqdn,
       updateExternalDnsTlsRequest: {
-        certificate,
-        privateKey,
+        certificate: certificate!, // submit button is disabled if not set
+        privateKey: privateKey!, // submit button is disabled if not set
         skipValidation,
       },
     }).unwrap();

src/components/page-active-component/horizontal-scaling-summary.tsx

@@ -1,7 +1,5 @@
 import { Accordion, Typography } from '@equinor/eds-core-react';
 import { isNil } from 'lodash-es';
-import * as PropTypes from 'prop-types';
-
 import type {
   HorizontalScalingSummary as HorizontalScalingSummaryModel,
   HorizontalScalingSummaryTriggerStatus,
@@ -54,7 +52,7 @@ export const HorizontalScalingSummary = ({ summary }: Props) => (
               </>
             )}
 
-            {summary.pollingInterval > 0 && (
+            {summary.pollingInterval && summary.pollingInterval > 0 && (
               <>
                 <Typography as="dt">Polling interval:</Typography>
                 <Typography as="dd" variant="body_short_bold">
@@ -63,7 +61,7 @@ export const HorizontalScalingSummary = ({ summary }: Props) => (
               </>
             )}
 
-            {summary.cooldownPeriod > 0 && (
+            {summary.cooldownPeriod && summary.cooldownPeriod > 0 && (
               <>
                 <Typography as="dt">Cooldown period:</Typography>
                 <Typography as="dd" variant="body_short_bold">
@@ -73,7 +71,10 @@ export const HorizontalScalingSummary = ({ summary }: Props) => (
             )}
 
             {summary.triggers.map((trigger, i) => (
-              <TriggerStatus key={trigger.name + i} trigger={trigger} />
+              <TriggerStatus
+                key={(trigger.name ?? trigger.type ?? 'unknown') + i}
+                trigger={trigger}
+              />
             ))}
           </dl>
         </div>
@@ -82,15 +83,6 @@ export const HorizontalScalingSummary = ({ summary }: Props) => (
   </Accordion>
 );
 
-HorizontalScalingSummary.propTypes = {
-  currentCPUUtilizationPercentage: PropTypes.number,
-  currentMemoryUtilizationPercentage: PropTypes.number,
-  maxReplicas: PropTypes.number,
-  minReplicas: PropTypes.number,
-  targetCPUUtilizationPercentage: PropTypes.number,
-  targetMemoryUtilizationPercentage: PropTypes.number,
-};
-
 type TriggerStatusProps = {
   trigger: HorizontalScalingSummaryTriggerStatus;
 };

src/components/page-active-component/oauth-service.tsx

@@ -1,12 +1,9 @@
 import { Accordion, Typography } from '@equinor/eds-core-react';
-import * as PropTypes from 'prop-types';
-
-import { OAuthToolbar } from './oauth-toolbar';
-
 import type { OAuth2AuxiliaryResource } from '../../store/radix-api';
 import { getOAuthReplicaUrl } from '../../utils/routing';
 import { ReplicaList } from '../replica-list';
 import { ComponentStatusBadge } from '../status-badges';
+import { OAuthToolbar } from './oauth-toolbar';
 
 type Props = {
   appName: string;
@@ -49,7 +46,8 @@ export const OAuthService = ({
             </span>
           </div>
           <div className="grid">
-            {oauth2.deployment.replicaList?.length > 0 ? (
+            {oauth2.deployment.replicaList &&
+            oauth2.deployment.replicaList.length > 0 ? (
               <ReplicaList
                 replicaList={oauth2.deployment.replicaList}
                 replicaUrlFunc={(name) =>
@@ -65,11 +63,3 @@ export const OAuthService = ({
     </Accordion.Item>
   </Accordion>
 );
-
-OAuthService.propTypes = {
-  appName: PropTypes.string.isRequired,
-  envName: PropTypes.string.isRequired,
-  componentName: PropTypes.string.isRequired,
-  oauth2: PropTypes.object
-    .isRequired as PropTypes.Validator<OAuth2AuxiliaryResource>,
-};

src/components/page-active-component/overview.tsx

@@ -1,20 +1,16 @@
 import { Typography } from '@equinor/eds-core-react';
-import * as PropTypes from 'prop-types';
-
-import { DefaultAlias } from './default-alias';
-
-import { ComponentIdentity } from '../component/component-identity';
-import { ComponentPorts } from '../component/component-ports';
-import { DockerImage } from '../docker-image';
-import { ComponentStatusBadge } from '../status-badges';
-
 import type {
   ApplicationAlias,
   Component,
   Deployment,
   DnsAlias as DnsAliasModel,
   ExternalDns,
 } from '../../store/radix-api';
+import { ComponentIdentity } from '../component/component-identity';
+import { ComponentPorts } from '../component/component-ports';
+import { DockerImage } from '../docker-image';
+import { ComponentStatusBadge } from '../status-badges';
+import { DefaultAlias } from './default-alias';
 import './style.css';
 import { IngressAllowList } from '../component/ingress-allow-list';
 import { ExternalLink } from '../link/external-link';
@@ -67,7 +63,7 @@ export const Overview = ({
         <div className="grid grid--gap-medium">
           <div className="grid grid--gap-small grid--auto-columns">
             <Typography>Status</Typography>
-            <ComponentStatusBadge status={component.status} />
+            <ComponentStatusBadge status={component.status ?? 'Reconciling'} />
           </div>
           {component.variables?.[URL_VAR_NAME] && (
             <Typography>
@@ -86,10 +82,10 @@ export const Overview = ({
               envName={envName}
             />
           )}
-          {dnsAliasUrls?.length > 0 && (
+          {dnsAliasUrls && dnsAliasUrls.length > 0 && (
             <DNSAliases urls={dnsAliasUrls} title={'DNS aliases'} />
           )}
-          {dnsExternalAliasUrls?.length > 0 && (
+          {dnsExternalAliasUrls && dnsExternalAliasUrls.length > 0 && (
             <DNSAliases
               urls={dnsExternalAliasUrls}
               title={'DNS external aliases'}
@@ -116,13 +112,3 @@ export const Overview = ({
     </div>
   );
 };
-
-Overview.propTypes = {
-  appAlias: PropTypes.object as PropTypes.Validator<ApplicationAlias>,
-  dnsExternalAliases: PropTypes.arrayOf(
-    PropTypes.object as PropTypes.Validator<ExternalDns>
-  ),
-  envName: PropTypes.string.isRequired,
-  component: PropTypes.object.isRequired as PropTypes.Validator<Component>,
-  deployment: PropTypes.object.isRequired as PropTypes.Validator<Deployment>,
-};

src/components/page-active-job-component/active-job-component-overview.tsx

@@ -1,6 +1,3 @@
-import * as PropTypes from 'prop-types';
-import type { FunctionComponent } from 'react';
-
 import { JobComponentVulnerabilityDetails } from './job-component-vulnerability-details';
 import { Overview } from './overview';
 
@@ -25,11 +22,16 @@ import { EnvironmentVariables } from '../environment-variables';
 import { handlePromiseWithToast } from '../global-top-nav/styled-toaster';
 import { ComponentReplicaList } from '../page-active-component/component-replica-list';
 
-export const ActiveJobComponentOverview: FunctionComponent<{
+type Props = {
   appName: string;
   envName: string;
   jobComponentName: string;
-}> = ({ appName, envName, jobComponentName }) => {
+};
+export const ActiveJobComponentOverview = ({
+  appName,
+  envName,
+  jobComponentName,
+}: Props) => {
   const {
     data: environment,
     refetch,
@@ -168,9 +170,3 @@ export const ActiveJobComponentOverview: FunctionComponent<{
     </>
   );
 };
-
-ActiveJobComponentOverview.propTypes = {
-  appName: PropTypes.string.isRequired,
-  envName: PropTypes.string.isRequired,
-  jobComponentName: PropTypes.string.isRequired,
-};