Merge pull request #108 from keithchong/7267-DetailsPageForApplication

Add Application Detail Pages and Tabs (#7267)

Author: keithchong

console-extensions.json

@@ -333,6 +333,24 @@
         }
     }
   },
+  {
+    "type": "console.page/resource/details",
+    "flags": {
+        "required": [
+            "APPLICATION"
+        ]
+    },
+    "properties": {
+        "model": {
+            "group": "argoproj.io",
+            "kind": "Application",
+            "version": "v1alpha1"
+        },
+        "component": {
+            "$codeRef": "ApplicationDetails"
+        }
+    }
+  },
   {
     "type": "console.page/resource/list",
     "flags": {

plugin-metadata.ts

@@ -14,6 +14,7 @@ const metadata: ConsolePluginBuildMetadata = {
     "gitopsFlags": "./components/utils/flags",
     "topology": "./components/topology",
     ApplicationList: "./gitops/components/application/ApplicationListTab.tsx",
+    ApplicationDetails: "./gitops/components/application/ApplicationNavPage.tsx",
     ApplicationSetList: "./gitops/components/application/ApplicationSetListTab.tsx",
     yamlApplicationTemplates: "./gitops/components/application/templates/index.ts"
   }

src/gitops/Revision/Revision.tsx

@@ -7,18 +7,22 @@ interface RevisionProps {
   repoURL: string;
   revision: string;
   helm: boolean;
+  revisionExtra?: string;
 }
 
-const Revision: React.FC<RevisionProps> = ({ repoURL, revision, helm }) => {
+const Revision: React.FC<RevisionProps> = ({ repoURL, revision, helm, revisionExtra }) => {
   if (revision) {
     return (
       <>
         {!helm && (
-          <ExternalLink href={createRevisionURL(repoURL, revision)}>
-            ({revision.substring(0, 7) || ''})
-          </ExternalLink>
+          <span>
+            <ExternalLink href={createRevisionURL(repoURL, revision)}>
+              ({revision.substring(0, 7) || ''})
+            </ExternalLink>
+            {revisionExtra && revisionExtra}
+          </span>
         )}
-        {helm && <span>{revision}</span>}
+        {helm && <span>({revision.substring(0, 7) || ''})</span>}
       </>
     );
   } else {

src/gitops/Statuses/HealthStatus.tsx

@@ -6,9 +6,11 @@ import {
   HealthProgressingIcon,
   HealthSuspendedIcon,
   HealthUnknownIcon,
+  SpinningIcon,
 } from 'src/gitops/utils/components/Icons/Icons';
 import { HealthStatus as HS } from 'src/gitops/utils/constants';
 
+import { COLORS } from '@gitops/components/shared/colors';
 import { Button, Popover } from '@patternfly/react-core';
 
 interface HealthProps {
@@ -64,4 +66,50 @@ const HealthStatus: React.FC<HealthProps> = ({ status, message }) => {
   return <div>{showStatus}</div>;
 };
 
+export type HealthStatusCode =
+  | 'Unknown'
+  | 'Progressing'
+  | 'Healthy'
+  | 'Suspended'
+  | 'Degraded'
+  | 'Missing';
+
+export interface HealthStatusModel {
+  status: HealthStatusCode;
+  message: string;
+}
+
+export const HealthStatusIcon = ({ status }: { status: HealthStatusCode }) => {
+  let color = COLORS.health.unknown;
+  let icon = 'fa-question-circle';
+
+  switch (status) {
+    case HS.HEALTHY:
+      color = COLORS.health.healthy;
+      icon = 'fa-heart';
+      break;
+    case HS.SUSPENDED:
+      color = COLORS.health.suspended;
+      icon = 'fa-pause-circle';
+      break;
+    case HS.DEGRADED:
+      color = COLORS.health.degraded;
+      icon = 'fa-heart-broken';
+      break;
+    case HS.PROGRESSING:
+      color = COLORS.health.progressing;
+      icon = `fa fa-circle-notch fa-spin`;
+      break;
+    case HS.MISSING:
+      color = COLORS.health.missing;
+      icon = 'fa-ghost';
+      break;
+  }
+  return icon.includes('fa-spin') ? (
+    <SpinningIcon color={color} title={status} />
+  ) : (
+    <i title={status} className={'fa ' + icon + ' utils-health-status-icon'} style={{ color }} />
+  );
+};
+
 export default HealthStatus;