Add enhancements to GitOpsDetailsPage

openshift · Jun 23, 2021 · d44db04 · d44db04
1 parent d2be105
commit d44db04
Show file tree

Hide file tree

Showing 18 changed files with 529 additions and 350 deletions.
diff --git a/frontend/packages/gitops-plugin/locales/en/gitops-plugin.json b/frontend/packages/gitops-plugin/locales/en/gitops-plugin.json
@@ -3,10 +3,18 @@
   "by {{author}}": "by {{author}}",
   "Commit details not available": "Commit details not available",
   "Cluster URL not available": "Cluster URL not available",
+  "Last deployed": "Last deployed",
+  "Deployment history": "Deployment history",
+  "Deployment success ratio": "Deployment success ratio",
+  "Last 30 days": "Last 30 days",
+  "{{synced}} of {{totalValue}} succeeded": "{{synced}} of {{totalValue}} succeeded",
+  "Overview": "Overview",
+  "Deployment History": "Deployment History",
   "Application environments": "Application environments",
-  "Manifest file repo": "Manifest file repo",
-  "Image not available": "Image not available",
-  "Service source URL not available": "Service source URL not available",
+  "Resources": "Resources",
+  "Deployments": "Deployments",
+  "Secrets": "Secrets",
+  "Services": "Services",
   "Pod info not available": "Pod info not available",
   "Info not available": "Info not available",
   "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.",

diff --git a/frontend/packages/gitops-plugin/src/components/GitOpsDetailsPage.tsx b/frontend/packages/gitops-plugin/src/components/GitOpsDetailsPage.tsx
@@ -3,61 +3,27 @@ import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { RouteComponentProps } from 'react-router-dom';
 import * as _ from 'lodash';
-import { LoadingBox } from '@console/internal/components/utils';
 import { DevPreviewBadge } from '@console/shared';
-import { GitOpsAppGroupData, GitOpsEnvironment } from './utils/gitops-types';
-import {
-  fetchAppGroups,
-  getEnvData,
-  getPipelinesBaseURI,
-  getApplicationsBaseURI,
-} from './utils/gitops-utils';
+import { GitOpsEnvironment } from './utils/gitops-types';
+import { getEnvData, getPipelinesBaseURI, getApplicationsBaseURI } from './utils/gitops-utils';
 import useDefaultSecret from './utils/useDefaultSecret';
+import useEnvDetails from './utils/useEnvDetails';
 import GitOpsDetailsPageHeading from './details/GitOpsDetailsPageHeading';
 import GitOpsDetailsController from './details/GitOpsDetailsController';
 
 type GitOpsDetailsPageProps = RouteComponentProps<{ appName?: string }>;
 
 const GitOpsDetailsPage: React.FC<GitOpsDetailsPageProps> = ({ match, location }) => {
   const { t } = useTranslation();
-  const [envs, setEnvs] = React.useState<string[]>(null);
   const [envsData, setEnvsData] = React.useState<GitOpsEnvironment[]>(null);
-  const [emptyStateMsg, setEmptyStateMsg] = React.useState(null);
   const [secretNS, secretName] = useDefaultSecret();
   const { appName } = match.params;
   const searchParams = new URLSearchParams(location.search);
   const manifestURL = searchParams.get('url');
   const pipelinesBaseURI = getPipelinesBaseURI(secretNS, secretName);
   const applicationBaseURI = getApplicationsBaseURI(appName, secretNS, secretName, manifestURL);
   const environmentBaseURI = `/api/gitops/environments`;
-
-  React.useEffect(() => {
-    let ignore = false;
-
-    const getEnvs = async () => {
-      if (!pipelinesBaseURI) return;
-      let appGroups: GitOpsAppGroupData[];
-      let emptyMsg = null;
-      try {
-        appGroups = await fetchAppGroups(pipelinesBaseURI, manifestURL);
-      } catch {} // eslint-disable-line no-empty
-      if (ignore) return;
-      const app = _.find(appGroups, (appObj) => appName === appObj?.name);
-      if (!app?.environments) {
-        emptyMsg = t(
-          'gitops-plugin~Environment details were not found. Try reloading the page or contacting an administrator.',
-        );
-      }
-      setEmptyStateMsg(emptyMsg);
-      setEnvs(app?.environments);
-    };
-
-    getEnvs();
-
-    return () => {
-      ignore = true;
-    };
-  }, [appName, manifestURL, pipelinesBaseURI, t]);
+  const [envs, emptyStateMsg] = useEnvDetails(appName, manifestURL, pipelinesBaseURI);
 
   React.useEffect(() => {
     const getEnvsData = async () => {
@@ -86,15 +52,12 @@ const GitOpsDetailsPage: React.FC<GitOpsDetailsPageProps> = ({ match, location }
         manifestURL={manifestURL}
         badge={<DevPreviewBadge />}
       />
-      {!envsData && !emptyStateMsg ? (
-        <LoadingBox />
-      ) : (
-        <GitOpsDetailsController
-          envsData={envsData}
-          emptyStateMsg={emptyStateMsg}
-          appName={appName}
-        />
-      )}
+      <GitOpsDetailsController
+        envsData={envsData}
+        appName={appName}
+        emptyStateMsg={emptyStateMsg}
+        match={match}
+      />
     </>
   );
 };

diff --git a/frontend/packages/gitops-plugin/src/components/GitOpsListPage.tsx b/frontend/packages/gitops-plugin/src/components/GitOpsListPage.tsx
@@ -21,6 +21,7 @@ const GitOpsListPage: React.FC = () => {
   const baseURL = getPipelinesBaseURI(secretNS, secretName);
   const { t } = useTranslation();
 
+  // fix T in this useEffect
   React.useEffect(() => {
     let ignore = false;
 

diff --git a/frontend/packages/gitops-plugin/src/components/details/CommitDetails.scss b/frontend/packages/gitops-plugin/src/components/details/CommitDetails.scss
@@ -1,13 +1,17 @@
 .odc-gitops-commit {
-    padding-top: 3px;
-    padding-right: 0px;
-
-    &__item {
-        font-size: 12px;
-        width: 100%;
-        .pf-c-label__text {
-            max-width: 22ch;
-            min-width: 22ch;    
-        }
-    }
+  &__commit-author-sha {
+    margin-bottom: 'var(--pf-global--spacer--sm)';
+    margin-right: 'var(--pf-global--spacer--sm)';
+    display: flex;
+    align-items: flex-end;
+    color: var(--pf-global--palette--black-600);
+  }
+  &__commit-label {
+    left: -6px;
+    font-size: 12px;
+    background-color: inherit;
+    color: var(--pf-global--link--Color);
+    width: 25ch;
+    border-color: var(--pf-c-label--m-blue__content--before--BorderColor)
+  }
 }
diff --git a/frontend/packages/gitops-plugin/src/components/details/CommitDetails.tsx b/frontend/packages/gitops-plugin/src/components/details/CommitDetails.tsx
@@ -7,10 +7,11 @@ import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { k8sCreate } from '@console/internal/module/k8s';
 import { ImageStreamImportsModel } from '@console/internal/models';
-import { LoadingInline, Timestamp } from '@console/internal/components/utils';
+import { LoadingInline } from '@console/internal/components/utils';
 import { getActiveNamespace } from '@console/internal/reducers/ui';
 import { CommitData } from '../utils/gitops-types';
-import { Label, Split, SplitItem } from '@patternfly/react-core';
+import { Label } from '@patternfly/react-core';
+import { routeDecoratorIcon } from '@console/dev-console/src/components/import/render-utils';
 import './CommitDetails.scss';
 
 interface CommitDetailsProps {
@@ -84,34 +85,21 @@ const CommitDetails: React.FC<CommitDetailsProps> = ({ imageName }) => {
     <>
       {commitData.id ? (
         <>
-          <Split className="odc-gitops-commit">
-            <SplitItem isFilled>
-              <Label className="odc-gitops-commit__item" isTruncated>
-                <Timestamp timestamp={commitData.timestamp} />
-              </Label>
-            </SplitItem>
-          </Split>
-          <Split className="odc-gitops-commit">
-            <SplitItem isFilled>
-              <Label className="odc-gitops-commit__item" isTruncated>
-                {commitData.id}
-              </Label>
-            </SplitItem>
-          </Split>
-          <Split className="odc-gitops-commit">
-            <SplitItem isFilled>
-              <Label className="odc-gitops-commit__item" isTruncated>
-                {commitData.msg}
-              </Label>
-            </SplitItem>
-          </Split>
-          <Split className="odc-gitops-commit">
-            <SplitItem isFilled>
-              <Label className="odc-gitops-commit__item" isTruncated>
-                {t('gitops-plugin~by {{author}}', { author: commitData.author })}
-              </Label>
-            </SplitItem>
-          </Split>
+          <div>
+            <strong>{commitData.id}</strong>
+            {commitData.msg}
+          </div>
+          <div className="odc-gitops-commit__commit-author-sha">
+            {t('gitops-plugin~by {{author}}', { author: commitData.author })}{' '}
+            <Label
+              className="odc-gitops-commit__commit-label"
+              color="blue"
+              icon={routeDecoratorIcon('https://www.github.com/reginapizza/taxi', 12, t)}
+              variant="outline"
+            >
+              {commitData.ref}
+            </Label>
+          </div>
         </>
       ) : (
         <span>{t('gitops-plugin~Commit details not available')}</span>

diff --git a/frontend/packages/gitops-plugin/src/components/details/GitOpsDeploymentSuccessSection.scss b/frontend/packages/gitops-plugin/src/components/details/GitOpsDeploymentSuccessSection.scss
@@ -0,0 +1,20 @@
+.odc-gitops-deployment-success {
+  &__header {
+    padding: 1.5rem 1.5rem 0rem;
+    margin: 0px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  &__title {
+    font-weight: 400;
+    font-size: 16px;
+    margin: 0px;
+  }
+  &__timespan {
+    color: var(--pf-global--palette--black-600);
+    font-size: 14px;
+    font-weight: 400;
+    margin: 0px;
+  }
+}
diff --git a/frontend/packages/gitops-plugin/src/components/details/GitOpsDeploymentSuccessSection.tsx b/frontend/packages/gitops-plugin/src/components/details/GitOpsDeploymentSuccessSection.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import { useTranslation } from 'react-i18next';
+import { truncateMiddle } from '@console/internal/components/utils';
+import { StackItem, Card, CardBody, Split, SplitItem, Tooltip } from '@patternfly/react-core';
+import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import './GitOpsDeploymentSuccessSection.scss';
+
+const GitOpsDeploymentSuccessSection: React.FC = () => {
+  const { t } = useTranslation();
+
+  const synced = 35;
+  const outOfSync = 55;
+  const unknown = 10;
+  const totalValue = synced + outOfSync + unknown;
+
+  const title = synced ? `${((synced * 100) / totalValue).toFixed(1)}%` : '';
+  const subTitle = synced
+    ? t('gitops-plugin~{{synced}} of {{totalValue}} succeeded', {
+        synced,
+        totalValue,
+      })
+    : '';
+
+  return (
+    <>
+      <StackItem>
+        <Card>
+          <Split className="odc-gitops-deployment-success__header">
+            <SplitItem>
+              <h3 className="odc-gitops-deployment-success__title co-nowrap">
+                {t('gitops-plugin~Deployment success ratio')}
+              </h3>
+            </SplitItem>
+            <SplitItem>
+              <p className="odc-gitops-deployment-success__timespan co-nowrap">
+                {t('gitops-plugin~Last 30 days')}
+              </p>
+            </SplitItem>
+          </Split>
+          <CardBody style={{ height: '216px', paddingBottom: '0px' }}>
+            <Tooltip content={t('gitops-plugin~Synced {{title}}', title)}>
+              <ChartDonut
+                ariaDesc={t('gitops-plugin~Success Ratio of Deployments')}
+                ariaTitle={''}
+                constrainToVisibleArea
+                data={[
+                  { x: t('gitops-plugin~Synced'), y: synced },
+                  { x: t('OutOfSync'), y: outOfSync + unknown },
+                ]}
+                sortKey={synced ? ['success', 'failed'] : ['failed']}
+                labels={({ datum }) => `${_.capitalize(datum.x)}: ${datum.y}%`}
+                colorScale={
+                  synced ? [ChartThemeColor.green, dangerColor.value] : [dangerColor.value]
+                }
+                radius={85}
+                innerRadius={75}
+                subTitle={truncateMiddle(subTitle, { length: 20 })}
+                title={truncateMiddle(title, { length: 10 })}
+              />
+            </Tooltip>
+          </CardBody>
+        </Card>
+      </StackItem>
+    </>
+  );
+};
+
+export default GitOpsDeploymentSuccessSection;