Merge pull request #153 from keithchong/8123-RevisionsTab

Add Revisions Tab to Rollouts Details page (#8123)

Author: keithchong

locales/en/plugin__gitops-plugin.json

@@ -171,13 +171,16 @@
   "There are no pods associated with the rollout.": "There are no pods associated with the rollout.",
   "Edit Pod": "Edit Pod",
   "Promote": "Promote",
-  "Full Promote": "Full Promote",
   "Abort": "Abort",
+  "Full Promote": "Full Promote",
   "Retry": "Retry",
   "Restart": "Restart",
   "Edit Rollout": "Edit Rollout",
-  "No revisions": "No revisions",
-  "Revisions": "Revisions",
+  "Age": "Age",
+  "Info": "Info",
+  "Ready containers": "Ready containers",
+  "ready": "ready",
+  "0 Pods": "0 Pods",
   "Rollout details": "Rollout details",
   "Replicas": "Replicas",
   "The number of desired replicas for the rollout": "The number of desired replicas for the rollout",
@@ -188,12 +191,13 @@
   "No Argo Rollouts": "No Argo Rollouts",
   "There are no Argo Rollouts in this project.": "There are no Argo Rollouts in this project.",
   "There are no Argo Rollouts in all projects.": "There are no Argo Rollouts in all projects.",
-  "There was an error retrieving applications. Check your connection and reload the page.": "There was an error retrieving applications. Check your connection and reload the page.",
+  "There was an error retrieving rollouts. Check your connection and reload the page.": "There was an error retrieving rollouts. Check your connection and reload the page.",
   "Argo Rollouts": "Argo Rollouts",
   "Create Rollout": "Create Rollout",
   "Pods": "Pods",
   "Selector": "Selector",
   "Rollout Status": "Rollout Status",
+  "Revisions": "Revisions",
   "There was an error retrieving the rollout. Check your connection and reload the page.": "There was an error retrieving the rollout. Check your connection and reload the page.",
   "There was an error retrieving the rollout revisions. Check your connection and reload the page.": "There was an error retrieving the rollout revisions. Check your connection and reload the page.",
   "Rollout Revisions": "Rollout Revisions",
@@ -216,6 +220,7 @@
   "Try removing the filter or selecting a different label to see more applications.": "Try removing the filter or selecting a different label to see more applications.",
   "There are no Argo CD Applications in this project.": "There are no Argo CD Applications in this project.",
   "There are no Argo CD Applications in all projects.": "There are no Argo CD Applications in all projects.",
+  "There was an error retrieving applications. Check your connection and reload the page.": "There was an error retrieving applications. Check your connection and reload the page.",
   "No Argo CD ApplicationSets match the label filter": "No Argo CD ApplicationSets match the label filter",
   "Try removing the filter or selecting a different label to see more ApplicationSets.": "Try removing the filter or selecting a different label to see more ApplicationSets.",
   "There are no Argo CD ApplicationSets in this project.": "There are no Argo CD ApplicationSets in this project.",

locales/ja/plugin__gitops-plugin.json

@@ -171,13 +171,16 @@
   "There are no pods associated with the rollout.": "There are no pods associated with the rollout.",
   "Edit Pod": "Edit Pod",
   "Promote": "Promote",
-  "Full Promote": "Full Promote",
   "Abort": "Abort",
+  "Full Promote": "Full Promote",
   "Retry": "Retry",
   "Restart": "Restart",
   "Edit Rollout": "Edit Rollout",
-  "No revisions": "No revisions",
-  "Revisions": "Revisions",
+  "Age": "Age",
+  "Info": "Info",
+  "Ready containers": "Ready containers",
+  "ready": "ready",
+  "0 Pods": "0 Pods",
   "Rollout details": "Rollout details",
   "Replicas": "Replicas",
   "The number of desired replicas for the rollout": "The number of desired replicas for the rollout",
@@ -188,12 +191,13 @@
   "No Argo Rollouts": "No Argo Rollouts",
   "There are no Argo Rollouts in this project.": "There are no Argo Rollouts in this project.",
   "There are no Argo Rollouts in all projects.": "There are no Argo Rollouts in all projects.",
-  "There was an error retrieving applications. Check your connection and reload the page.": "There was an error retrieving applications. Check your connection and reload the page.",
+  "There was an error retrieving rollouts. Check your connection and reload the page.": "There was an error retrieving rollouts. Check your connection and reload the page.",
   "Argo Rollouts": "Argo Rollouts",
   "Create Rollout": "Create Rollout",
   "Pods": "Pods",
   "Selector": "Selector",
   "Rollout Status": "Rollout Status",
+  "Revisions": "Revisions",
   "There was an error retrieving the rollout. Check your connection and reload the page.": "There was an error retrieving the rollout. Check your connection and reload the page.",
   "There was an error retrieving the rollout revisions. Check your connection and reload the page.": "There was an error retrieving the rollout revisions. Check your connection and reload the page.",
   "Rollout Revisions": "Rollout Revisions",
@@ -216,6 +220,7 @@
   "Try removing the filter or selecting a different label to see more applications.": "Try removing the filter or selecting a different label to see more applications.",
   "There are no Argo CD Applications in this project.": "There are no Argo CD Applications in this project.",
   "There are no Argo CD Applications in all projects.": "There are no Argo CD Applications in all projects.",
+  "There was an error retrieving applications. Check your connection and reload the page.": "There was an error retrieving applications. Check your connection and reload the page.",
   "No Argo CD ApplicationSets match the label filter": "No Argo CD ApplicationSets match the label filter",
   "Try removing the filter or selecting a different label to see more ApplicationSets.": "Try removing the filter or selecting a different label to see more ApplicationSets.",
   "There are no Argo CD ApplicationSets in this project.": "There are no Argo CD ApplicationSets in this project.",

locales/ko/plugin__gitops-plugin.json

@@ -171,13 +171,16 @@
   "There are no pods associated with the rollout.": "There are no pods associated with the rollout.",
   "Edit Pod": "Edit Pod",
   "Promote": "Promote",
-  "Full Promote": "Full Promote",
   "Abort": "Abort",
+  "Full Promote": "Full Promote",
   "Retry": "Retry",
   "Restart": "Restart",
   "Edit Rollout": "Edit Rollout",
-  "No revisions": "No revisions",
-  "Revisions": "Revisions",
+  "Age": "Age",
+  "Info": "Info",
+  "Ready containers": "Ready containers",
+  "ready": "ready",
+  "0 Pods": "0 Pods",
   "Rollout details": "Rollout details",
   "Replicas": "Replicas",
   "The number of desired replicas for the rollout": "The number of desired replicas for the rollout",
@@ -188,12 +191,13 @@
   "No Argo Rollouts": "No Argo Rollouts",
   "There are no Argo Rollouts in this project.": "There are no Argo Rollouts in this project.",
   "There are no Argo Rollouts in all projects.": "There are no Argo Rollouts in all projects.",
-  "There was an error retrieving applications. Check your connection and reload the page.": "There was an error retrieving applications. Check your connection and reload the page.",
+  "There was an error retrieving rollouts. Check your connection and reload the page.": "There was an error retrieving rollouts. Check your connection and reload the page.",
   "Argo Rollouts": "Argo Rollouts",
   "Create Rollout": "Create Rollout",
   "Pods": "Pods",
   "Selector": "Selector",
   "Rollout Status": "Rollout Status",
+  "Revisions": "Revisions",
   "There was an error retrieving the rollout. Check your connection and reload the page.": "There was an error retrieving the rollout. Check your connection and reload the page.",
   "There was an error retrieving the rollout revisions. Check your connection and reload the page.": "There was an error retrieving the rollout revisions. Check your connection and reload the page.",
   "Rollout Revisions": "Rollout Revisions",
@@ -216,6 +220,7 @@
   "Try removing the filter or selecting a different label to see more applications.": "Try removing the filter or selecting a different label to see more applications.",
   "There are no Argo CD Applications in this project.": "There are no Argo CD Applications in this project.",
   "There are no Argo CD Applications in all projects.": "There are no Argo CD Applications in all projects.",
+  "There was an error retrieving applications. Check your connection and reload the page.": "There was an error retrieving applications. Check your connection and reload the page.",
   "No Argo CD ApplicationSets match the label filter": "No Argo CD ApplicationSets match the label filter",
   "Try removing the filter or selecting a different label to see more ApplicationSets.": "Try removing the filter or selecting a different label to see more ApplicationSets.",
   "There are no Argo CD ApplicationSets in this project.": "There are no Argo CD ApplicationSets in this project.",

locales/zh/plugin__gitops-plugin.json

@@ -171,13 +171,16 @@
   "There are no pods associated with the rollout.": "There are no pods associated with the rollout.",
   "Edit Pod": "Edit Pod",
   "Promote": "Promote",
-  "Full Promote": "Full Promote",
   "Abort": "Abort",
+  "Full Promote": "Full Promote",
   "Retry": "Retry",
   "Restart": "Restart",
   "Edit Rollout": "Edit Rollout",
-  "No revisions": "No revisions",
-  "Revisions": "Revisions",
+  "Age": "Age",
+  "Info": "Info",
+  "Ready containers": "Ready containers",
+  "ready": "ready",
+  "0 Pods": "0 Pods",
   "Rollout details": "Rollout details",
   "Replicas": "Replicas",
   "The number of desired replicas for the rollout": "The number of desired replicas for the rollout",
@@ -188,12 +191,13 @@
   "No Argo Rollouts": "No Argo Rollouts",
   "There are no Argo Rollouts in this project.": "There are no Argo Rollouts in this project.",
   "There are no Argo Rollouts in all projects.": "There are no Argo Rollouts in all projects.",
-  "There was an error retrieving applications. Check your connection and reload the page.": "There was an error retrieving applications. Check your connection and reload the page.",
+  "There was an error retrieving rollouts. Check your connection and reload the page.": "There was an error retrieving rollouts. Check your connection and reload the page.",
   "Argo Rollouts": "Argo Rollouts",
   "Create Rollout": "Create Rollout",
   "Pods": "Pods",
   "Selector": "Selector",
   "Rollout Status": "Rollout Status",
+  "Revisions": "Revisions",
   "There was an error retrieving the rollout. Check your connection and reload the page.": "There was an error retrieving the rollout. Check your connection and reload the page.",
   "There was an error retrieving the rollout revisions. Check your connection and reload the page.": "There was an error retrieving the rollout revisions. Check your connection and reload the page.",
   "Rollout Revisions": "Rollout Revisions",
@@ -216,6 +220,7 @@
   "Try removing the filter or selecting a different label to see more applications.": "Try removing the filter or selecting a different label to see more applications.",
   "There are no Argo CD Applications in this project.": "There are no Argo CD Applications in this project.",
   "There are no Argo CD Applications in all projects.": "There are no Argo CD Applications in all projects.",
+  "There was an error retrieving applications. Check your connection and reload the page.": "There was an error retrieving applications. Check your connection and reload the page.",
   "No Argo CD ApplicationSets match the label filter": "No Argo CD ApplicationSets match the label filter",
   "Try removing the filter or selecting a different label to see more ApplicationSets.": "Try removing the filter or selecting a different label to see more ApplicationSets.",
   "There are no Argo CD ApplicationSets in this project.": "There are no Argo CD ApplicationSets in this project.",

src/gitops/components/rollout/RolloutNavPage.tsx

@@ -13,6 +13,7 @@ import { useRolloutActionsProvider } from './hooks/useRolloutActionsProvider';
 import { RolloutKind, RolloutModel } from './model/RolloutModel';
 import RolloutDetailsTab from './RolloutDetailsTab';
 import RolloutPodsTab from './RolloutPodsTab';
+import RolloutRevisionsTab from './RolloutRevisionsTab';
 
 type RolloutPageProps = {
   name: string;
@@ -47,6 +48,11 @@ const RolloutNavPage: React.FC<RolloutPageProps> = ({ name, namespace, kind }) =
         name: t('YAML'),
         component: ResourceYAMLTab,
       },
+      {
+        href: 'revisions',
+        name: t('Revisions'),
+        component: RolloutRevisionsTab,
+      },
       {
         href: 'pods',
         name: t('Pods'),

src/gitops/components/rollout/RolloutRevisionsTab.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { PodKind } from 'src/components/topology/console/types';
+
+import { useGitOpsTranslation } from '@gitops/utils/hooks/useGitOpsTranslation';
+import { resourceAsArray } from '@gitops/utils/utils';
+import { K8sResourceCommon, useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
+import { ErrorState } from '@patternfly/react-component-groups';
+import { Flex, FlexItem, PageSection, PageSectionVariants, Title } from '@patternfly/react-core';
+
+import { ReplicaSetKind, RolloutKind } from './model/RolloutModel';
+import { Revisions } from './revisions/Revisions';
+
+type RolloutRevisionsTabProps = {
+  obj?: RolloutKind;
+};
+
+const RolloutRevisionsTab: React.FC<RolloutRevisionsTabProps> = ({ obj: rollout }) => {
+  const { t } = useGitOpsTranslation();
+
+  const [replicaSets, loaded, loadError] = useK8sWatchResource<K8sResourceCommon>({
+    groupVersionKind: { group: 'apps', version: 'v1', kind: 'ReplicaSet' },
+    isList: true,
+    namespaced: true,
+    namespace: rollout.metadata?.namespace,
+    selector: rollout.spec.selector,
+  });
+  const [pods, podsloaded, podsloadError] = useK8sWatchResource({
+    isList: true,
+    groupVersionKind: {
+      kind: 'Pod',
+      version: 'v1',
+    },
+    namespaced: true,
+    namespace: rollout.metadata?.namespace,
+  });
+
+  const error = (
+    <FlexItem>
+      <ErrorState
+        titleText={t('Unable to load data')}
+        bodyText={t(
+          'There was an error retrieving the rollout revisions. Check your connection and reload the page.',
+        )}
+      />
+    </FlexItem>
+  );
+  return (
+    <PageSection
+      variant={PageSectionVariants.default}
+      className={classNames('co-m-pane__body', { 'co-m-pane__body--section-heading': true })}
+    >
+      <Title headingLevel="h2" className="co-section-heading">
+        {t('Rollout Revisions')}
+      </Title>
+
+      {loadError || !loaded || !podsloaded || podsloadError ? (
+        <div>
+          <Flex
+            justifyContent={{ default: 'justifyContentSpaceEvenly' }}
+            direction={{ default: 'column', lg: 'row' }}
+          >
+            <FlexItem fullWidth={{ default: 'fullWidth' }}>{error}</FlexItem>
+          </Flex>
+        </div>
+      ) : (
+        <Revisions
+          rollout={rollout}
+          replicaSets={resourceAsArray(replicaSets) as ReplicaSetKind[]}
+          pods={resourceAsArray(pods) as PodKind[]}
+        />
+      )}
+    </PageSection>
+  );
+};
+
+export default RolloutRevisionsTab;

src/gitops/components/rollout/components/AnalysisRunStatus/AnalysisRunStatus.scss

@@ -0,0 +1,3 @@
+.gitops_plugin__tight_description_list {
+    --pf-c-description-list--m-compact--RowGap: 0.2rem;
+}