Added project select page for non-admin user for all namespace

openshift-pipelines · Oct 24, 2024 · 6be4741 · 6be4741
1 parent 74a94ae
commit 6be4741
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 54 deletions.
diff --git a/console-extensions.json b/console-extensions.json
@@ -144,7 +144,10 @@
     "type": "console.page/route",
     "properties": {
       "exact": true,
-      "path": ["/pipelines-overview/ns/:ns"],
+      "path": [
+        "/pipelines-overview/ns/:ns",
+        "/pipelines-overview/all-namespaces"
+      ],
       "component": {
         "$codeRef": "pipelinesComponent.PipelinesOverviewPage"
       }
@@ -157,7 +160,10 @@
     "type": "console.page/route",
     "properties": {
       "exact": true,
-      "path": ["/pipelines-overview/ns/:ns"],
+      "path": [
+        "/pipelines-overview/ns/:ns",
+        "/pipelines-overview/all-namespaces"
+      ],
       "component": {
         "$codeRef": "pipelinesComponent.PipelinesOverviewPageK8s"
       }
@@ -167,33 +173,6 @@
       "disallowed": ["PIPELINE_TEKTON_RESULT_INSTALLED"]
     }
   },
-  {
-    "type": "console.page/route",
-    "properties": {
-      "exact": true,
-      "path": ["/pipelines-overview/all-namespaces"],
-      "component": {
-        "$codeRef": "pipelinesComponent.PipelinesOverviewPage"
-      }
-    },
-    "flags": {
-      "required": ["PIPELINE_TEKTON_RESULT_INSTALLED", "CAN_LIST_NS"]
-    }
-  },
-  {
-    "type": "console.page/route",
-    "properties": {
-      "exact": true,
-      "path": ["/pipelines-overview/all-namespaces"],
-      "component": {
-        "$codeRef": "pipelinesComponent.PipelinesOverviewPageK8s"
-      }
-    },
-    "flags": {
-      "required": ["OPENSHIFT_PIPELINE", "CAN_LIST_NS"],
-      "disallowed": ["PIPELINE_TEKTON_RESULT_INSTALLED"]
-    }
-  },
   {
     "type": "console.navigation/href",
     "properties": {

diff --git a/src/components/pipelines-overview/PipelinesOverviewPage.tsx b/src/components/pipelines-overview/PipelinesOverviewPage.tsx
@@ -1,7 +1,11 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import PipelineRunsStatusCard from './PipelineRunsStatusCard';
 import { Flex, FlexItem } from '@patternfly/react-core';
+import PipelineRunsStatusCard from './PipelineRunsStatusCard';
+import {
+  useActiveNamespace,
+  useFlag,
+} from '@openshift-console/dynamic-plugin-sdk';
 import PipelinesRunsDurationCard from './PipelineRunsDurationCard';
 import PipelinesRunsTotalCard from './PipelineRunsTotalCard';
 import PipelinesRunsNumbersChart from './PipelineRunsNumbersChart';
@@ -11,19 +15,18 @@ import PipelineRunsListPage from './list-pages/PipelineRunsListPage';
 import TimeRangeDropdown from './TimeRangeDropdown';
 import RefreshDropdown from './RefreshDropdown';
 import { IntervalOptions, TimeRangeOptions, useQueryParams } from './utils';
-import { useActiveNamespace } from '@openshift-console/dynamic-plugin-sdk';
+import { ALL_NAMESPACES_KEY } from '../../consts';
+import AllProjectsPage from '../projects-list/AllProjectsPage';
+import { FLAGS } from '../../types';
 
 const PipelinesOverviewPage: React.FC = () => {
   const { t } = useTranslation('plugin__pipelines-console-plugin');
+  const canListNS = useFlag(FLAGS.CAN_LIST_NS);
   const [activeNamespace, setActiveNamespace] = useActiveNamespace();
-  const [namespace, setNamespace] = React.useState(activeNamespace);
   const [timespan, setTimespan] = React.useState(parsePrometheusDuration('1d'));
   const [interval, setInterval] = React.useState(
     parsePrometheusDuration('30s'),
   );
-  React.useEffect(() => {
-    setActiveNamespace(namespace);
-  }, [namespace]);
 
   useQueryParams({
     key: 'refreshinterval',
@@ -45,6 +48,10 @@ const PipelinesOverviewPage: React.FC = () => {
     loadFormat: parsePrometheusDuration,
   });
 
+  if (!canListNS && activeNamespace === ALL_NAMESPACES_KEY) {
+    return <AllProjectsPage pageTitle={t('Overview')} />;
+  }
+
   return (
     <>
       <div className="co-m-nav-title">
@@ -54,7 +61,10 @@ const PipelinesOverviewPage: React.FC = () => {
       </div>
       <Flex className="project-dropdown-label__flex">
         <FlexItem>
-          <NameSpaceDropdown selected={namespace} setSelected={setNamespace} />
+          <NameSpaceDropdown
+            selected={activeNamespace}
+            setSelected={setActiveNamespace}
+          />
         </FlexItem>
         <FlexItem>
           <TimeRangeDropdown timespan={timespan} setTimespan={setTimespan} />
@@ -68,7 +78,7 @@ const PipelinesOverviewPage: React.FC = () => {
           timespan={timespan}
           domain={{ y: [0, 100] }}
           bordered={true}
-          namespace={namespace}
+          namespace={activeNamespace}
           interval={interval}
         />
 
@@ -79,7 +89,7 @@ const PipelinesOverviewPage: React.FC = () => {
             className="pipelines-overview__cards"
           >
             <PipelinesRunsDurationCard
-              namespace={namespace}
+              namespace={activeNamespace}
               timespan={timespan}
               interval={interval}
               bordered={true}
@@ -91,7 +101,7 @@ const PipelinesOverviewPage: React.FC = () => {
             className="pipelines-overview__cards"
           >
             <PipelinesRunsTotalCard
-              namespace={namespace}
+              namespace={activeNamespace}
               timespan={timespan}
               interval={interval}
               bordered={true}
@@ -103,7 +113,7 @@ const PipelinesOverviewPage: React.FC = () => {
             className="pipelines-overview__cards"
           >
             <PipelinesRunsNumbersChart
-              namespace={namespace}
+              namespace={activeNamespace}
               timespan={timespan}
               interval={interval}
               domain={{ y: [0, 500] }}
@@ -114,7 +124,7 @@ const PipelinesOverviewPage: React.FC = () => {
       </div>
       <div className="pipelines-metrics__background">
         <PipelineRunsListPage
-          namespace={namespace}
+          namespace={activeNamespace}
           timespan={timespan}
           interval={interval}
         />

diff --git a/src/components/pipelines-overview/PipelinesOverviewPageK8s.tsx b/src/components/pipelines-overview/PipelinesOverviewPageK8s.tsx
@@ -1,31 +1,34 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flex, FlexItem } from '@patternfly/react-core';
+import {
+  useActiveNamespace,
+  useFlag,
+} from '@openshift-console/dynamic-plugin-sdk';
 import { formatPrometheusDuration, parsePrometheusDuration } from './dateTime';
 import NameSpaceDropdown from './NamespaceDropdown';
 import TimeRangeDropdown from './TimeRangeDropdown';
 import RefreshDropdown from './RefreshDropdown';
 import { IntervalOptions, TimeRangeOptionsK8s, useQueryParams } from './utils';
-import { useActiveNamespace } from '@openshift-console/dynamic-plugin-sdk';
 import PipelineRunsStatusCardK8s from './PipelineRunsStatusCardK8s';
 import PipelineRunsNumbersChartK8s from './PipelineRunsNumbersChartK8s';
 import PipelineRunsTotalCardK8s from './PipelineRunsTotalCardK8s';
 import PipelineRunsDurationCardK8s from './PipelineRunsDurationCardK8s';
 import PipelineRunsListPageK8s from './list-pages/PipelineRunsListPageK8s';
 import { K8sDataLimitationAlert } from './K8sDataLimitationAlert';
+import { FLAGS } from '../../types';
+import { ALL_NAMESPACES_KEY } from '../../consts';
+import AllProjectsPage from '../projects-list/AllProjectsPage';
 import './PipelinesOverview.scss';
 
 const PipelinesOverviewPageK8s: React.FC = () => {
   const { t } = useTranslation('plugin__pipelines-console-plugin');
+  const canListNS = useFlag(FLAGS.CAN_LIST_NS);
   const [activeNamespace, setActiveNamespace] = useActiveNamespace();
-  const [namespace, setNamespace] = React.useState(activeNamespace);
   const [timespan, setTimespan] = React.useState(parsePrometheusDuration('1d'));
   const [interval, setInterval] = React.useState(
     parsePrometheusDuration('30s'),
   );
-  React.useEffect(() => {
-    setActiveNamespace(namespace);
-  }, [namespace]);
 
   useQueryParams({
     key: 'refreshinterval',
@@ -47,6 +50,10 @@ const PipelinesOverviewPageK8s: React.FC = () => {
     loadFormat: parsePrometheusDuration,
   });
 
+  if (!canListNS && activeNamespace === ALL_NAMESPACES_KEY) {
+    return <AllProjectsPage pageTitle={t('Overview')} />;
+  }
+
   return (
     <>
       <div className="co-m-nav-title">
@@ -59,7 +66,10 @@ const PipelinesOverviewPageK8s: React.FC = () => {
       </div>
       <Flex className="project-dropdown-label__flex">
         <FlexItem>
-          <NameSpaceDropdown selected={namespace} setSelected={setNamespace} />
+          <NameSpaceDropdown
+            selected={activeNamespace}
+            setSelected={setActiveNamespace}
+          />
         </FlexItem>
         <FlexItem>
           <TimeRangeDropdown timespan={timespan} setTimespan={setTimespan} />
@@ -73,7 +83,7 @@ const PipelinesOverviewPageK8s: React.FC = () => {
           timespan={timespan}
           domain={{ y: [0, 100] }}
           bordered={true}
-          namespace={namespace}
+          namespace={activeNamespace}
           interval={interval}
         />
 
@@ -84,7 +94,7 @@ const PipelinesOverviewPageK8s: React.FC = () => {
             className="pipelines-overview__cards"
           >
             <PipelineRunsDurationCardK8s
-              namespace={namespace}
+              namespace={activeNamespace}
               timespan={timespan}
               interval={interval}
               bordered={true}
@@ -96,7 +106,7 @@ const PipelinesOverviewPageK8s: React.FC = () => {
             className="pipelines-overview__cards"
           >
             <PipelineRunsTotalCardK8s
-              namespace={namespace}
+              namespace={activeNamespace}
               timespan={timespan}
               interval={interval}
               bordered={true}
@@ -108,7 +118,7 @@ const PipelinesOverviewPageK8s: React.FC = () => {
             className="pipelines-overview__cards"
           >
             <PipelineRunsNumbersChartK8s
-              namespace={namespace}
+              namespace={activeNamespace}
               timespan={timespan}
               interval={interval}
               domain={{ y: [0, 500] }}
@@ -119,7 +129,7 @@ const PipelinesOverviewPageK8s: React.FC = () => {
       </div>
       <div className="pipelines-metrics__background">
         <PipelineRunsListPageK8s
-          namespace={namespace}
+          namespace={activeNamespace}
           timespan={timespan}
           interval={interval}
         />

diff --git a/src/components/projects-list/AllProjectsPage.tsx b/src/components/projects-list/AllProjectsPage.tsx
@@ -10,11 +10,15 @@ import { useTranslation } from 'react-i18next';
 import ProjectsList from './ProjectsList';
 import './AllProjectsPage.scss';
 
-const AllProjectsPage = () => {
+interface AllProjectsPageProps {
+  pageTitle?: string;
+}
+
+const AllProjectsPage: React.FC<AllProjectsPageProps> = ({ pageTitle }) => {
   const { t } = useTranslation('plugin__pipelines-console-plugin');
   return (
     <>
-      <ListPageHeader title={t('Pipelines')} />
+      <ListPageHeader title={pageTitle || t('Pipelines')} />
       <TextContent className="cp-all-projects-page-description">
         <Text component={TextVariants.p}>
           {t('Select a Project to view its details')}