DevConsole refactor

frontend/packages/gitops-plugin/locales/en/gitops-plugin.json

@@ -8,6 +8,9 @@
   "Commit details not available": "Commit details not available",
   "Last deployed": "Last deployed",
   "Application environments": "Application environments",
+  "Synced": "Synced",
+  "OutOfSync": "OutOfSync",
+  "Unknown": "Unknown",
   "{{x}} of {{total}} Unhealthy": "{{x}} of {{total}} Unhealthy",
   "{{x}} of {{total}} OutOfSync": "{{x}} of {{total}} OutOfSync",
   "Resources": "Resources",
@@ -28,9 +31,6 @@
   "Environment status": "Environment status",
   "Environment": "Environment",
   "Last deployment": "Last deployment",
-  "Synced": "Synced",
-  "OutOfSync": "OutOfSync",
-  "Unknown": "Unknown",
   "No GitOps manifest URLs found": "No GitOps manifest URLs found",
   "No Application groups found": "No Application groups found",
   "Environment details were not found. Try reloading the page or contacting an administrator.": "Environment details were not found. Try reloading the page or contacting an administrator."

frontend/packages/gitops-plugin/src/components/GitOpsEmptyState.scss

@@ -1,4 +1,4 @@
-.odc-gitops-empty-state {
+.gop-gitops-empty-state {
   &__icon {
     height: var(--pf-c-empty-state__icon--FontSize);
     max-width: 100%;

frontend/packages/gitops-plugin/src/components/GitOpsListPage.scss

@@ -1,4 +1,4 @@
-.odc-gitops-list-page-heading {
+.gop-gitops-list-page-heading {
   align-items: center;
   font-size: 12px;
 }

frontend/packages/gitops-plugin/src/components/details/GitOpsDetails.scss

@@ -1,4 +1,4 @@
-.odc-gitops-details {
+.gop-gitops-details {
   padding: var(--pf-global--spacer--xl);
   height: 100%;
   display: flex;

frontend/packages/gitops-plugin/src/components/details/GitOpsDetails.tsx

@@ -18,13 +18,9 @@ import { ExternalLink, Timestamp } from '@console/internal/components/utils';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 import { ConsoleLinkModel } from '@console/internal/models';
 import { K8sResourceKind, referenceForModel } from '@console/internal/module/k8s';
-import {
-  GreenCheckCircleIcon,
-  YellowExclamationTriangleIcon,
-  GrayUnknownIcon,
-} from '@console/shared';
 import * as argoIcon from '../../images/argo.png';
 import { GitOpsEnvironment } from '../utils/gitops-types';
+import GitOpsRenderStatusLabel from './GitOpsRenderStatusLabel';
 import GitOpsResourcesSection from './GitOpsResourcesSection';
 import './GitOpsDetails.scss';
 
@@ -46,45 +42,19 @@ const GitOpsDetails: React.FC<GitOpsDetailsProps> = ({ envs, appName }) => {
       link.metadata?.name === 'argocd' && link.spec?.location === 'ApplicationMenu',
   );
 
-  // eslint-disable-next-line no-shadow
-  const renderStatusLabel = (status: string) => {
-    switch (status) {
-      case 'Synced':
-        return (
-          <Label icon={<GreenCheckCircleIcon />} isTruncated>
-            Synced
-          </Label>
-        );
-      case 'OutOfSync':
-        return (
-          <Label icon={<YellowExclamationTriangleIcon />} isTruncated>
-            OutOfSync
-          </Label>
-        );
-      case 'Unknown':
-        return (
-          <Label icon={<GrayUnknownIcon />} isTruncated>
-            Unknown
-          </Label>
-        );
-      default:
-        return '';
-    }
-  };
-
   let oldAPI = false;
   if (envs && envs.length > 0) {
     oldAPI = envs[0] && envs[0].deployments ? envs[0].deployments === null : true;
   }
 
   return (
-    <div className="odc-gitops-details">
+    <div className="gop-gitops-details">
       {oldAPI && (
         <>
           <Alert
             isInline
             title={t('gitops-plugin~Compatibility Issue')}
-            className="odc-gitops-details__operator-upgrade-alert"
+            className="gop-gitops-details__operator-upgrade-alert"
           >
             {t('gitops-plugin~Compatibility Issue Message')}
           </Alert>
@@ -94,13 +64,13 @@ const GitOpsDetails: React.FC<GitOpsDetailsProps> = ({ envs, appName }) => {
         envs,
         (env) =>
           env && (
-            <Stack className="odc-gitops-details__env-section" key={env.environment}>
+            <Stack className="gop-gitops-details__env-section" key={env.environment}>
               <StackItem>
                 <Card>
-                  <CardTitle className="odc-gitops-details__env-section__header">
+                  <CardTitle className="gop-gitops-details__env-section__header">
                     <Stack>
                       <StackItem>
-                        <h2 className="co-section-heading co-truncate co-nowrap odc-gitops-details__env-section__app-name">
+                        <h2 className="co-section-heading co-truncate co-nowrap gop-gitops-details__env-section__app-name">
                           <Tooltip content={env.environment}>
                             <span>{env.environment}</span>
                           </Tooltip>
@@ -109,44 +79,44 @@ const GitOpsDetails: React.FC<GitOpsDetailsProps> = ({ envs, appName }) => {
                       <StackItem className="co-truncate co-nowrap">
                         {env.cluster ? (
                           <ExternalLink
-                            additionalClassName="odc-gitops-details__env-section__cluster-url"
+                            additionalClassName="gop-gitops-details__env-section__cluster-url"
                             href={env.cluster}
                           >
                             {env.cluster}
                           </ExternalLink>
                         ) : (
-                          <div className="odc-gitops-details__env-section__cluster-url-empty-state">
+                          <div className="gop-gitops-details__env-section__cluster-url-empty-state">
                             {t('gitops-plugin~Cluster URL not available')}
                           </div>
                         )}
                       </StackItem>
                       {env.status && (
-                        <StackItem className="odc-gitops-details__env-section__status-label">
+                        <StackItem className="gop-gitops-details__env-section__status-label">
                           <Tooltip content="Sync status">
-                            <span>{renderStatusLabel(env.status)}</span>
+                            <GitOpsRenderStatusLabel status={env.status} />
                           </Tooltip>
                         </StackItem>
                       )}
                     </Stack>
                   </CardTitle>
                   <CardBody>
-                    <Stack className="odc-gitops-details__revision">
+                    <Stack className="gop-gitops-details__revision">
                       {env.revision ? (
                         <>
                           {env.revision.message && (
-                            <StackItem className="odc-gitops-details__message">
+                            <StackItem className="gop-gitops-details__message">
                               {t('gitops-plugin~{{message}}', { message: env.revision.message })}
                             </StackItem>
                           )}
-                          <StackItem className="odc-gitops-details__author-sha">
+                          <StackItem className="gop-gitops-details__author-sha">
                             {env.revision.author && (
-                              <span className="odc-gitops-details__author">
+                              <span className="gop-gitops-details__author">
                                 {t('gitops-plugin~by {{author}}', { author: env.revision.author })}{' '}
                               </span>
                             )}
                             {env.revision.revision && (
                               <Label
-                                className="odc-gitops-details__sha"
+                                className="gop-gitops-details__sha"
                                 color="blue"
                                 icon={<GitAltIcon />}
                                 variant="outline"
@@ -160,20 +130,20 @@ const GitOpsDetails: React.FC<GitOpsDetailsProps> = ({ envs, appName }) => {
                         <span>{t('gitops-plugin~Commit details not available')}</span>
                       )}
                       {env.lastDeployed && (
-                        <StackItem className="co-truncate co-nowrap odc-gitops-details__env-section__time">
+                        <StackItem className="co-truncate co-nowrap gop-gitops-details__env-section__time">
                           {t('gitops-plugin~Last deployed')}&nbsp;
                           <Timestamp timestamp={env.lastDeployed} />
                         </StackItem>
                       )}
                       {argocdLink && (
                         <StackItem>
-                          <Split className="odc-gitops-details__env-section__deployment-history">
+                          <Split className="gop-gitops-details__env-section__deployment-history">
                             <Tooltip content="Argo CD">
-                              <SplitItem className="odc-gitops-details__env-section__deployment-history__argocd-link">
+                              <SplitItem className="gop-gitops-details__env-section__deployment-history__argocd-link">
                                 <ExternalLink
                                   href={`${argocdLink.spec.href}/applications/${env.environment}-${appName}`}
                                 >
-                                  <span className="odc-gitops-details__env-section__argo-external-link">
+                                  <span className="gop-gitops-details__env-section__argo-external-link">
                                     <img
                                       loading="lazy"
                                       src={argoIcon}

frontend/packages/gitops-plugin/src/components/details/GitOpsDetailsPageHeading.scss

@@ -1,4 +1,4 @@
-.odc-gitops-details-page-heading {
+.gop-gitops-details-page-heading {
   &__repo {
     align-items: center;
     font-weight: bold;

frontend/packages/gitops-plugin/src/components/details/GitOpsDetailsPageHeading.tsx

@@ -30,7 +30,7 @@ const GitOpsDetailsPageHeading: React.FC<GitOpsDetailsPageHeadingProps> = ({
   ];
 
   return (
-    <div className="odc-gitops-details-page-heading co-m-nav-title co-m-nav-title--breadcrumbs">
+    <div className="gop-gitops-details-page-heading co-m-nav-title co-m-nav-title--breadcrumbs">
       <BreadCrumbs breadcrumbs={breadcrumbs} />
       <h1 className="co-m-pane__heading" style={{ marginRight: 'var(--pf-global--spacer--sm)' }}>
         <div className="co-m-pane__name co-resource-item">

frontend/packages/gitops-plugin/src/components/details/GitOpsRenderStatusLabel.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Label } from '@patternfly/react-core';
+import { useTranslation } from 'react-i18next';
+import {
+  GreenCheckCircleIcon,
+  YellowExclamationTriangleIcon,
+  GrayUnknownIcon,
+} from '@console/shared';
+
+interface GitOpsRenderStatusLabelProps {
+  status: string;
+}
+
+const GitOpsRenderStatusLabel: React.FC<GitOpsRenderStatusLabelProps> = ({ status }) => {
+  const { t } = useTranslation();
+  switch (status) {
+    case 'Synced':
+      return (
+        <Label icon={<GreenCheckCircleIcon />} isTruncated>
+          {t('gitops-plugin~Synced')}
+        </Label>
+      );
+    case 'OutOfSync':
+      return (
+        <Label icon={<YellowExclamationTriangleIcon />} isTruncated>
+          {t('gitops-plugin~OutOfSync')}
+        </Label>
+      );
+    case 'Unknown':
+      return (
+        <Label icon={<GrayUnknownIcon />} isTruncated>
+          {t('gitops-plugin~Unknown')}
+        </Label>
+      );
+    default:
+      return null;
+  }
+};
+
+export default GitOpsRenderStatusLabel;

frontend/packages/gitops-plugin/src/components/details/GitOpsResourceRow.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { Split, SplitItem, Tooltip } from '@patternfly/react-core';
+import { HeartBrokenIcon, ExclamationTriangleIcon } from '@patternfly/react-icons';
+import {
+  global_danger_color_100 as RedColor,
+  global_warning_color_100 as YellowColor,
+} from '@patternfly/react-tokens';
+import { useTranslation } from 'react-i18next';
+import { GitOpsEnvironmentService, GitOpsHealthResources } from '../utils/gitops-types';
+import './GitOpsResourcesSection.scss';
+
+interface GitOpsResourceRowProps {
+  resources: GitOpsHealthResources[] | GitOpsEnvironmentService[];
+  degradedResources: string[] | null;
+  nonSyncedResources: string[];
+}
+
+const GitOpsResourceRow: React.FC<GitOpsResourceRowProps> = ({
+  resources,
+  degradedResources,
+  nonSyncedResources,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Split hasGutter>
+      {degradedResources?.length > 0 && (
+        <Tooltip
+          content={t('gitops-plugin~{{x}} of {{total}} Unhealthy', {
+            x: degradedResources.length.toString(),
+            total: resources?.length.toString() ?? '0',
+          })}
+        >
+          <SplitItem>
+            <>
+              {degradedResources.length}{' '}
+              <HeartBrokenIcon color={RedColor.value} className="co-icon-space-r" />
+            </>
+          </SplitItem>
+        </Tooltip>
+      )}
+      {nonSyncedResources.length > 0 && (
+        <Tooltip
+          content={t('gitops-plugin~{{x}} of {{total}} OutOfSync', {
+            x: nonSyncedResources.length.toString(),
+            total: resources?.length.toString() ?? '0',
+          })}
+        >
+          <SplitItem>
+            <>
+              {nonSyncedResources.length}{' '}
+              <ExclamationTriangleIcon color={YellowColor.value} className="co-icon-space-r" />
+            </>
+          </SplitItem>
+        </Tooltip>
+      )}
+      {(degradedResources === null || degradedResources.length === 0) &&
+        nonSyncedResources.length === 0 && <>&nbsp;</>}
+    </Split>
+  );
+};
+
+export default GitOpsResourceRow;

frontend/packages/gitops-plugin/src/components/details/GitOpsResourcesSection.scss

@@ -1,4 +1,4 @@
-.odc-gitops-resources {
+.gop-gitops-resources {
   &__title {
     font-weight: 400;
     font-size: 16px;