Show All Namespaces or Current Namespace Only option (#8535)

Signed-off-by: Keith Chong <kykchong@redhat.com>

Author: keithchong

locales/en/olm.json

@@ -0,0 +1,5 @@
+{
+  "Show operands in:": "Show operands in:",
+  "All namespaces": "All namespaces",
+  "Current namespace only": "Current namespace only"
+}

locales/ja/olm.json

@@ -0,0 +1,5 @@
+{
+  "Show operands in:": "Show operands in:",
+  "All namespaces": "All namespaces",
+  "Current namespace only": "Current namespace only"
+}

locales/ko/olm.json

@@ -0,0 +1,5 @@
+{
+  "Show operands in:": "Show operands in:",
+  "All namespaces": "All namespaces",
+  "Current namespace only": "Current namespace only"
+}

locales/zh/olm.json

@@ -0,0 +1,5 @@
+{
+  "Show operands in:": "Show operands in:",
+  "All namespaces": "All namespaces",
+  "Current namespace only": "Current namespace only"
+}

src/gitops/components/project/ProjectList.tsx

@@ -35,6 +35,10 @@ import { Tbody, Td, Tr } from '@patternfly/react-table';
 
 import { ApplicationKind } from '../../models/ApplicationModel';
 import { AppProjectKind, AppProjectModel } from '../../models/AppProjectModel';
+import {
+  ShowOperandsInAllNamespacesRadioGroup,
+  useShowOperandsInAllNamespaces,
+} from '../shared/AllNamespaces';
 import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../shared/DataView';
 
 import { useProjectActionsProvider } from './hooks/useProjectActionsProvider';
@@ -53,14 +57,20 @@ const ProjectList: React.FC<ProjectListTabProps> = ({
   showTitle,
 }) => {
   const location = useLocation();
+  const [showOperandsInAllNamespaces] = useShowOperandsInAllNamespaces();
+  const listAllNamespaces =
+    location.pathname?.includes('openshift-gitops-operator') && showOperandsInAllNamespaces;
+  if (listAllNamespaces) {
+    namespace = null;
+  }
   const [appProjects, loaded, loadError] = useK8sWatchResource<K8sResourceCommon[]>({
     isList: true,
     groupVersionKind: {
       group: 'argoproj.io',
       kind: 'AppProject',
       version: 'v1alpha1',
     },
-    namespaced: true,
+    namespaced: !listAllNamespaces,
     namespace,
   });
 
@@ -77,17 +87,16 @@ const ProjectList: React.FC<ProjectListTabProps> = ({
   });
 
   const columnSortConfig = React.useMemo(() => {
-    const showNamespace = !namespace || namespace === '';
     return [
       'name',
-      ...(showNamespace ? ['namespace'] : []),
+      ...(!listAllNamespaces || !namespace || namespace === '' ? ['namespace'] : []),
       'description',
       'applications',
       'labels',
       'last-updated',
       'actions',
     ].map((key) => ({ key }));
-  }, [namespace]);
+  }, [listAllNamespaces, namespace]);
 
   const { searchParams, sortBy, direction, getSortParams } =
     useGitOpsDataViewSort(columnSortConfig);
@@ -195,6 +204,11 @@ const ProjectList: React.FC<ProjectListTabProps> = ({
           badge={
             location?.pathname?.includes('openshift-gitops-operator') ? null : <DevPreviewBadge />
           }
+          helpText={
+            location.pathname?.includes('openshift-gitops-operator') ? (
+              <ShowOperandsInAllNamespacesRadioGroup />
+            ) : null
+          }
           hideFavoriteButton={false}
         >
           <ListPageCreate groupVersionKind={modelToRef(AppProjectModel)}>

src/gitops/components/rollout/RolloutList.tsx

@@ -34,6 +34,10 @@ import { DataViewTh, DataViewTr } from '@patternfly/react-data-view/dist/esm/Dat
 import { CubesIcon, SearchIcon } from '@patternfly/react-icons';
 import { Tbody, Td, ThProps, Tr } from '@patternfly/react-table';
 
+import {
+  ShowOperandsInAllNamespacesRadioGroup,
+  useShowOperandsInAllNamespaces,
+} from '../shared/AllNamespaces';
 import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../shared/DataView';
 
 import { useRolloutActionsProvider } from './hooks/useRolloutActionsProvider';
@@ -73,29 +77,35 @@ const RolloutList: React.FC<RolloutListTabProps> = ({
   hideNameLabelFilters,
   showTitle,
 }) => {
+  const [showOperandsInAllNamespaces] = useShowOperandsInAllNamespaces();
+  const listAllNamespaces =
+    location.pathname?.includes('openshift-gitops-operator') && showOperandsInAllNamespaces;
+  if (listAllNamespaces) {
+    namespace = null;
+  }
   const [rollouts, loaded, loadError] = useK8sWatchResource<K8sResourceCommon[]>({
     isList: true,
     groupVersionKind: {
       group: 'argoproj.io',
       kind: 'Rollout',
       version: 'v1alpha1',
     },
-    namespaced: true,
+    namespaced: !listAllNamespaces,
     namespace,
   });
   const columnSortConfig = React.useMemo(
     () =>
       [
         'name',
-        ...(!namespace ? ['namespace'] : []),
+        ...(!listAllNamespaces || !namespace ? ['namespace'] : []),
         'status',
         'pods',
         'labels',
         'selector',
         'last-updated',
         'actions',
       ].map((key) => ({ key })),
-    [namespace],
+    [listAllNamespaces, namespace],
   );
 
   const { searchParams, sortBy, direction, getSortParams } =
@@ -153,7 +163,7 @@ const RolloutList: React.FC<RolloutListTabProps> = ({
           <ErrorState
             titleText={t('Unable to load data')}
             bodyText={t(
-              '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.',
             )}
           />
         </Td>
@@ -164,6 +174,7 @@ const RolloutList: React.FC<RolloutListTabProps> = ({
   const topologyUrl = namespace
     ? '/topology/ns/' + namespace + '?view=graph'
     : '/topology/all-namespaces?view=graph';
+
   return (
     <>
       {showTitle == undefined && (
@@ -172,6 +183,11 @@ const RolloutList: React.FC<RolloutListTabProps> = ({
           badge={
             location.pathname?.includes('openshift-gitops-operator') ? null : <DevPreviewBadge />
           }
+          helpText={
+            location.pathname?.includes('openshift-gitops-operator') ? (
+              <ShowOperandsInAllNamespacesRadioGroup />
+            ) : null
+          }
         >
           <ListPageCreate groupVersionKind={modelToRef(RolloutModel)}>
             {t('Create Rollout')}

src/gitops/components/rollout/components/AnalysisRunStatus/AnalysisRunStatus.tsx

@@ -101,11 +101,7 @@ const Metrics: React.FC<MetricsProps> = ({ arInfo }) => {
   }
   return (
     <>
-      <DescriptionList
-        isHorizontal
-        isCompact
-        className="gitops_plugin__tight_description_list"
-      >
+      <DescriptionList isHorizontal isCompact className="gitops_plugin__tight_description_list">
         <DescriptionListGroup>
           <DescriptionListTerm>Started At:</DescriptionListTerm>
           <DescriptionListDescription>

src/gitops/components/shared/AllNamespaces/ShowOperandsInAllNamespacesRadioGroup.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+import { t } from '@gitops/utils/hooks/useGitOpsTranslation';
+import { useShowOperandsInAllNamespaces } from '@gitops-shared/AllNamespaces/useShowOperandsInAllNamespaces';
+import { Form, FormGroup, Radio } from '@patternfly/react-core';
+
+export const ShowOperandsInAllNamespacesRadioGroup: React.FC = () => {
+  const [showOperandsInAllNamespaces, setShowOperandsInAllNamespaces] =
+    useShowOperandsInAllNamespaces();
+  return (
+    <Form isHorizontal>
+      <FormGroup
+        role="radiogroup"
+        fieldId="show-operands"
+        label={t('olm~Show operands in:')}
+        isInline
+        hasNoPaddingTop
+      >
+        <Radio
+          id="all-namespaces"
+          name="show-operands"
+          value="true"
+          label={t('olm~All namespaces')}
+          onChange={() => setShowOperandsInAllNamespaces(true)}
+          isChecked={showOperandsInAllNamespaces}
+          data-checked-state={showOperandsInAllNamespaces}
+        />
+        <Radio
+          id="current-namespace-only"
+          name="show-operands"
+          value="false"
+          label={t('olm~Current namespace only')}
+          onChange={() => setShowOperandsInAllNamespaces(false)}
+          isChecked={!showOperandsInAllNamespaces}
+          data-checked-state={!showOperandsInAllNamespaces}
+        />
+      </FormGroup>
+    </Form>
+  );
+};

src/gitops/components/shared/AllNamespaces/index.ts

@@ -0,0 +1,2 @@
+export * from './ShowOperandsInAllNamespacesRadioGroup';
+export * from './useShowOperandsInAllNamespaces';

src/gitops/components/shared/AllNamespaces/useShowOperandsInAllNamespaces.ts

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+import { RootStateOrAny, useDispatch, useSelector } from 'react-redux';
+import { action } from 'typesafe-actions';
+type UseShowOperandsInAllNamespaces = () => [boolean, (value: boolean) => void];
+
+// This hook can be used to consume and update the showOperandsInAllNamespaces redux state
+export const useShowOperandsInAllNamespaces: UseShowOperandsInAllNamespaces = () => {
+  const dispatch = useDispatch();
+  const showOperandsInAllNamespaces = useSelector((state: RootStateOrAny) =>
+    state.UI.get('showOperandsInAllNamespaces'),
+  );
+  const setShowOperandsInAllNamespaces = useCallback(
+    (value: boolean) => dispatch(uiActionsSetShowOperandsInAllNamespaces(value)),
+    [dispatch],
+  );
+  return [showOperandsInAllNamespaces, setShowOperandsInAllNamespaces];
+};
+
+export enum ActionType {
+  SetShowOperandsInAllNamespaces = 'setShowOperandsInAllNamespaces',
+}
+
+export const uiActionsSetShowOperandsInAllNamespaces = (value: boolean) => {
+  return action(ActionType.SetShowOperandsInAllNamespaces, { value });
+};