Added info alert for overview and metrics tab for k8s data

openshift-pipelines · Jul 31, 2024 · cce473c · cce473c
1 parent c0edff5
commit cce473c
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 0 deletions.
diff --git a/locales/en/plugin__pipelines-console-plugin.json b/locales/en/plugin__pipelines-console-plugin.json
@@ -101,6 +101,7 @@
   "Custom Task": "Custom Task",
   "CustomRun": "CustomRun",
   "CustomRuns": "CustomRuns",
+  "Data is incomplete. To see the full view, please enable ": "Data is incomplete. To see the full view, please enable ",
   "Data source": "Data source",
   "Decrement": "Decrement",
   "Default value": "Default value",
@@ -172,6 +173,7 @@
   "Image Registry": "Image Registry",
   "Image Registry Credentials": "Image Registry Credentials",
   "Increment": "Increment",
+  "Info": "Info",
   "Init containers": "Init containers",
   "Install Cosign": "Install Cosign",
   "Installing": "Installing",
@@ -371,6 +373,7 @@
   "TaskRun name": "TaskRun name",
   "TaskRuns": "TaskRuns",
   "Tasks": "Tasks",
+  "Tekton results": "Tekton results",
   "TektonResult": "TektonResult",
   "TektonResults": "TektonResults",
   "The base server url (e.g. https://github.com)": "The base server url (e.g. https://github.com)",

diff --git a/src/components/pipelines-metrics/PipelinesMetrics.scss b/src/components/pipelines-metrics/PipelinesMetrics.scss
@@ -25,3 +25,10 @@
     }
   }
 }
+
+.k8s-overview-info-alert {
+  margin-top: var(--pf-v5-global--spacer--md);
+  margin-left: var(--pf-v5-global--spacer--md);
+  margin-right: var(--pf-v5-global--spacer--md);
+  margin-bottom: 0;
+}
diff --git a/src/components/pipelines-metrics/PipelinesMetricsPageK8s.tsx b/src/components/pipelines-metrics/PipelinesMetricsPageK8s.tsx
@@ -17,6 +17,7 @@ import PipelineRunsStatusCardK8s from '../pipelines-overview/PipelineRunsStatusC
 import PipelineRunsNumbersChartK8s from '../pipelines-overview/PipelineRunsNumbersChartK8s';
 import PipelineRunsDurationCardK8s from '../pipelines-overview/PipelineRunsDurationCardK8s';
 import PipelinesAverageDurationK8s from './PipelinesAverageDurationK8s';
+import { K8sDataLimitationAlert } from '../pipelines-overview/K8sDataLimitationAlert';
 
 type PipelinesMetricsPageProps = {
   obj: PipelineKind;
@@ -55,6 +56,9 @@ const PipelinesMetricsPageK8s: React.FC<PipelinesMetricsPageProps> = ({
 
   return (
     <>
+      <div className="k8s-overview-info-alert">
+        <K8sDataLimitationAlert />
+      </div>
       <Flex className="pipelines-metrix-dropdown">
         <FlexItem>
           <TimeRangeDropdown timespan={timespan} setTimespan={setTimespan} />

diff --git a/src/components/pipelines-overview/K8sDataLimitationAlert.tsx b/src/components/pipelines-overview/K8sDataLimitationAlert.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Alert } from '@patternfly/react-core';
+
+export const K8sDataLimitationAlert: React.FC = () => {
+  const { t } = useTranslation('plugin__pipelines-console-plugin');
+  return (
+    <Alert isInline variant="info" title={t('Info')}>
+      <p>
+        {t('Data is incomplete. To see the full view, please enable ')}
+        <a
+          href="https://docs.openshift.com/pipelines/latest/records/using-tekton-results-for-openshift-pipelines-observability.html#preparing-to-install_using-tekton-results-for-openshift-pipelines-observability"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {t('Tekton results')}
+          <span className="co-external-link" />
+        </a>
+        .
+      </p>
+    </Alert>
+  );
+};
diff --git a/src/components/pipelines-overview/PipelinesOverview.scss b/src/components/pipelines-overview/PipelinesOverview.scss
@@ -149,3 +149,9 @@
   padding-top: var(--pf-v5-global--spacer--md);
   padding-bottom: var(--pf-v5-global--spacer--sm);
 }
+
+.k8s-overview-info-alert {
+  margin-bottom: var(--pf-v5-global--spacer--md);
+  margin-left: var(--pf-v5-global--spacer--md);
+  margin-right: var(--pf-v5-global--spacer--md);
+}
diff --git a/src/components/pipelines-overview/PipelinesOverviewPageK8s.tsx b/src/components/pipelines-overview/PipelinesOverviewPageK8s.tsx
@@ -12,6 +12,8 @@ import PipelineRunsNumbersChartK8s from './PipelineRunsNumbersChartK8s';
 import PipelineRunsTotalCardK8s from './PipelineRunsTotalCardK8s';
 import PipelineRunsDurationCardK8s from './PipelineRunsDurationCardK8s';
 import PipelineRunsListPageK8s from './list-pages/PipelineRunsListPageK8s';
+import { K8sDataLimitationAlert } from './K8sDataLimitationAlert';
+import './PipelinesOverview.scss';
 
 const PipelinesOverviewPageK8s: React.FC = () => {
   const { t } = useTranslation('plugin__pipelines-console-plugin');
@@ -52,6 +54,9 @@ const PipelinesOverviewPageK8s: React.FC = () => {
           <span>{t('Overview')}</span>
         </h1>
       </div>
+      <div className="k8s-overview-info-alert">
+        <K8sDataLimitationAlert />
+      </div>
       <Flex className="project-dropdown-label__flex">
         <FlexItem>
           <NameSpaceDropdown selected={namespace} setSelected={setNamespace} />