feat: Make abstract quick links (#534)

epam · Jan 6, 2025 · 0b9ed75 · 0b9ed75
1 parent df8b22c
commit 0b9ed75
Show file tree

Hide file tree

Showing 21 changed files with 202 additions and 101 deletions.
diff --git a/src/components/QuickLink/index.tsx b/src/components/QuickLink/index.tsx
@@ -10,6 +10,7 @@ import { QuickLinkExternalLinkProps } from './types';
 export const QuickLink = ({
   name,
   icon,
+  iconBase64,
   externalLink,
   enabledText = `Open in ${name.label}`,
   configurationLink,
@@ -60,6 +61,7 @@ export const QuickLink = ({
   return externalLink ? (
     <ResourceIconLink
       icon={icon}
+      iconBase64={iconBase64}
       tooltipTitle={enabledText}
       link={externalLink}
       variant={variant}
@@ -71,6 +73,7 @@ export const QuickLink = ({
     <ResourceIconLink
       disabled
       icon={icon}
+      iconBase64={iconBase64}
       tooltipTitle={renderDisabledTooltip()}
       name={name.label}
       variant={variant}

diff --git a/src/components/QuickLink/types.ts b/src/components/QuickLink/types.ts
@@ -2,8 +2,9 @@ import { ButtonProps } from '@mui/material';
 import { QuickLinkKubeObjectInterface } from '../../k8s/groups/EDP/QuickLink/types';
 
 export interface QuickLinkExternalLinkProps {
-  icon: string;
   externalLink: string;
+  icon?: string;
+  iconBase64?: string;
   name?: {
     label?: string;
     value?: string;

diff --git a/src/components/ResourceIconLink/index.tsx b/src/components/ResourceIconLink/index.tsx
@@ -26,6 +26,7 @@ const iconSizeByBtnSize = (btnSize: ButtonProps['size']) => {
 const DisabledResourceIconLink = ({
   tooltipTitle,
   icon,
+  iconBase64,
   withoutDisabledStyle,
   variant,
   isTextButton,
@@ -44,13 +45,26 @@ const DisabledResourceIconLink = ({
       endIcon={<Icon icon={ICONS.NEW_WINDOW} color={theme.palette.grey['500']} width={iconSize} />}
       size={size}
     >
-      Open in {name}
+      {name}
     </Button>
   ) : (
     <Tooltip title={<div>{tooltipTitle}</div>}>
       <div>
         <IconButton disabled style={!withoutDisabledStyle ? { opacity: 0.5 } : {}} size={size}>
-          <Icon icon={icon} color={theme.palette.grey['500']} width={iconSize} height={iconSize} />
+          {iconBase64 ? (
+            <img
+              src={`data:image/svg+xml;base64,${iconBase64}`}
+              style={{ width: theme.typography.pxToRem(16), height: theme.typography.pxToRem(16) }}
+              alt=""
+            />
+          ) : (
+            <Icon
+              icon={icon}
+              color={theme.palette.grey['500']}
+              width={iconSize}
+              height={iconSize}
+            />
+          )}
         </IconButton>
       </div>
     </Tooltip>
@@ -60,6 +74,7 @@ const DisabledResourceIconLink = ({
 const EnabledResourceIconLink = ({
   tooltipTitle,
   icon,
+  iconBase64,
   link,
   variant,
   isTextButton,
@@ -106,7 +121,20 @@ const EnabledResourceIconLink = ({
     >
       <span>
         <IconButton component={MuiLink} href={link} target={'_blank'} size={size}>
-          <Icon icon={icon} width={iconSize} height={iconSize} color={theme.palette.text.primary} />
+          {iconBase64 ? (
+            <img
+              src={`data:image/svg+xml;base64,${iconBase64}`}
+              style={{ width: theme.typography.pxToRem(16), height: theme.typography.pxToRem(16) }}
+              alt=""
+            />
+          ) : (
+            <Icon
+              icon={icon}
+              color={theme.palette.grey['500']}
+              width={iconSize}
+              height={iconSize}
+            />
+          )}
         </IconButton>
       </span>
     </Tooltip>
@@ -117,6 +145,7 @@ export const ResourceIconLink = ({
   disabled = false,
   tooltipTitle,
   icon,
+  iconBase64,
   link,
   withoutDisabledStyle,
   variant,
@@ -131,6 +160,7 @@ export const ResourceIconLink = ({
         <DisabledResourceIconLink
           tooltipTitle={tooltipTitle}
           icon={icon}
+          iconBase64={iconBase64}
           withoutDisabledStyle={withoutDisabledStyle}
           variant={variant}
           isTextButton={isTextButton}
@@ -141,6 +171,7 @@ export const ResourceIconLink = ({
         <EnabledResourceIconLink
           tooltipTitle={tooltipTitle}
           icon={icon}
+          iconBase64={iconBase64}
           link={link}
           variant={variant}
           isTextButton={isTextButton}

diff --git a/src/components/ResourceIconLink/types.ts b/src/components/ResourceIconLink/types.ts
@@ -3,7 +3,8 @@ import { ButtonProps } from '@mui/material';
 export interface ResourceIconLinkProps {
   tooltipTitle: string | React.ReactElement;
   name: string;
-  icon: string;
+  icon?: string;
+  iconBase64?: string;
   link?: string;
   disabled?: boolean;
   withoutDisabledStyle?: boolean;

diff --git a/src/icons/iconify-icons-mapping.ts b/src/icons/iconify-icons-mapping.ts
@@ -31,8 +31,6 @@ export enum ICONS {
   GIT_BRANCH = 'ph:git-branch',
   NEW_WINDOW = 'material-symbols:open-in-new',
   ARGOCD = 'devicon:argocd',
-  GRAFANA = 'logos:grafana',
-  KIBANA = 'logos:kibana',
   KUBERNETES = 'simple-icons:kubernetes',
   SONAR = 'simple-icons:sonarsource',
   JIRA = 'fontisto:jira',

diff --git a/src/k8s/groups/EDP/QuickLink/constants.ts b/src/k8s/groups/EDP/QuickLink/constants.ts
@@ -4,16 +4,16 @@ export const SYSTEM_QUICK_LINKS = {
   ARGOCD: 'argocd',
   DEFECT_DOJO: 'defectdojo',
   DEPENDENCY_TRACK: 'dependency-track',
-  GRAFANA: 'grafana',
-  KIBANA: 'kibana',
+  MONITORING: 'monitoring',
+  LOGGING: 'logging',
   NEXUS: 'nexus',
   SONAR: 'sonar',
   CODEMIE: 'codemie',
 } as const;
 
 export const SYSTEM_QUICK_LINKS_LABELS = {
   [SYSTEM_QUICK_LINKS.ARGOCD]: 'Argo CD',
-  [SYSTEM_QUICK_LINKS.GRAFANA]: 'Grafana',
-  [SYSTEM_QUICK_LINKS.KIBANA]: 'Kibana',
+  [SYSTEM_QUICK_LINKS.MONITORING]: 'Monitoring',
+  [SYSTEM_QUICK_LINKS.LOGGING]: 'Logging',
   [SYSTEM_QUICK_LINKS.SONAR]: 'Sonar',
 } as const;
diff --git a/src/k8s/groups/EDP/QuickLink/labels.ts b/src/k8s/groups/EDP/QuickLink/labels.ts
@@ -0,0 +1 @@
+export const QUICK_LINK_LABEL_SELECTOR_TYPE = 'app.edp.epam.com/quicklink-type';
diff --git a/src/k8s/groups/EDP/QuickLink/types.ts b/src/k8s/groups/EDP/QuickLink/types.ts
@@ -7,6 +7,7 @@ export interface QuickLinkSpec {
   type: string | ValueOf<typeof SYSTEM_QUICK_LINKS>;
   url: string;
   visible: boolean;
+  provider: string;
 }
 
 export interface QuickLinkKubeObjectInterface extends KubeObjectInterface {

diff --git a/src/pages/cdpipeline-details/components/StageList/components/EnvironmentStage/index.tsx b/src/pages/cdpipeline-details/components/StageList/components/EnvironmentStage/index.tsx
@@ -11,6 +11,7 @@ import {
   SYSTEM_QUICK_LINKS,
   SYSTEM_QUICK_LINKS_LABELS,
 } from '../../../../../../k8s/groups/EDP/QuickLink/constants';
+import { QUICK_LINK_LABEL_SELECTOR_TYPE } from '../../../../../../k8s/groups/EDP/QuickLink/labels';
 import { StageKubeObject } from '../../../../../../k8s/groups/EDP/Stage';
 import { LinkCreationService } from '../../../../../../services/link-creation';
 import { routeArgoCD } from '../../../../../configuration/pages/argocd/route';
@@ -29,10 +30,10 @@ export const EnvironmentStage = ({
 }: EnvironmentStageProps) => {
   const theme = useTheme();
 
-  const grafanaQuickLink =
-    QuickLinks && QuickLinks?.find((el) => el.metadata.name === SYSTEM_QUICK_LINKS.GRAFANA);
-  const kibanaQuickLink =
-    QuickLinks && QuickLinks?.find((el) => el.metadata.name === SYSTEM_QUICK_LINKS.KIBANA);
+  const monitoringQuickLink =
+    QuickLinks && QuickLinks?.find((el) => el.metadata.name === SYSTEM_QUICK_LINKS.MONITORING);
+  const loggingQuickLink =
+    QuickLinks && QuickLinks?.find((el) => el.metadata.name === SYSTEM_QUICK_LINKS.LOGGING);
 
   const stageIsLoaded = stage?.status;
 
@@ -138,28 +139,32 @@ export const EnvironmentStage = ({
                     />
                     <QuickLink
                       name={{
-                        label: SYSTEM_QUICK_LINKS_LABELS[SYSTEM_QUICK_LINKS.GRAFANA],
-                        value: SYSTEM_QUICK_LINKS.GRAFANA,
+                        label: SYSTEM_QUICK_LINKS_LABELS[SYSTEM_QUICK_LINKS.MONITORING],
+                        value: SYSTEM_QUICK_LINKS.MONITORING,
                       }}
-                      icon={ICONS.GRAFANA}
-                      externalLink={LinkCreationService.grafana.createDashboardLink(
-                        QuickLinksURLS?.[SYSTEM_QUICK_LINKS.GRAFANA],
+                      iconBase64={monitoringQuickLink?.spec?.icon}
+                      enabledText="Open Monitoring Dashboard"
+                      externalLink={LinkCreationService.monitoring.createDashboardLink(
+                        monitoringQuickLink?.metadata?.labels[QUICK_LINK_LABEL_SELECTOR_TYPE],
+                        QuickLinksURLS?.[SYSTEM_QUICK_LINKS.MONITORING],
                         stage.spec.namespace
                       )}
-                      QuickLinkComponent={grafanaQuickLink}
+                      QuickLinkComponent={monitoringQuickLink}
                       size="small"
                     />
                     <QuickLink
                       name={{
-                        label: SYSTEM_QUICK_LINKS_LABELS[SYSTEM_QUICK_LINKS.KIBANA],
-                        value: SYSTEM_QUICK_LINKS.KIBANA,
+                        label: SYSTEM_QUICK_LINKS_LABELS[SYSTEM_QUICK_LINKS.LOGGING],
+                        value: SYSTEM_QUICK_LINKS.LOGGING,
                       }}
-                      icon={ICONS.KIBANA}
-                      externalLink={LinkCreationService.kibana.createDashboardLink(
-                        QuickLinksURLS?.[SYSTEM_QUICK_LINKS.KIBANA],
+                      iconBase64={loggingQuickLink?.spec?.icon}
+                      enabledText="Open Logging Dashboard"
+                      externalLink={LinkCreationService.logging.createDashboardLink(
+                        loggingQuickLink?.metadata?.labels[QUICK_LINK_LABEL_SELECTOR_TYPE],
+                        QuickLinksURLS?.[SYSTEM_QUICK_LINKS.LOGGING],
                         stage.spec.namespace
                       )}
-                      QuickLinkComponent={kibanaQuickLink}
+                      QuickLinkComponent={loggingQuickLink}
                       size="small"
                     />
                   </Stack>

diff --git a/src/pages/stage-details/components/Monitoring/index.tsx b/src/pages/stage-details/components/Monitoring/index.tsx
@@ -2,10 +2,12 @@ import React from 'react';
 import { LinkCreationService } from '../../../../services/link-creation';
 
 export const Monitoring = ({
-  grafanaBaseUrl,
+  provider,
+  baseUrl,
   namespace,
 }: {
-  grafanaBaseUrl: string;
+  provider: string;
+  baseUrl: string;
   namespace: string;
 }) => {
   return (
@@ -14,7 +16,7 @@ export const Monitoring = ({
       frameBorder="0"
       height="800"
       width="100%"
-      src={LinkCreationService.grafana.createDashboardLink(grafanaBaseUrl, namespace)}
+      src={LinkCreationService.monitoring.createDashboardLink(provider, baseUrl, namespace)}
     ></iframe>
   );
 };
diff --git a/src/pages/stage-details/hooks/usePageTabs.tsx b/src/pages/stage-details/hooks/usePageTabs.tsx
@@ -9,7 +9,10 @@ import { LoadingWrapper } from '../../../components/LoadingWrapper';
 import { TabSection } from '../../../components/TabSection';
 import { PIPELINE_TYPES } from '../../../constants/pipelineTypes';
 import { EDP_USER_GUIDE } from '../../../constants/urls';
+import { SYSTEM_QUICK_LINKS } from '../../../k8s/groups/EDP/QuickLink/constants';
+import { useQuickLinksQuery } from '../../../k8s/groups/EDP/QuickLink/hooks/useQuickLinksQuery';
 import { useQuickLinksURLsQuery } from '../../../k8s/groups/EDP/QuickLink/hooks/useQuickLinksURLQuery';
+import { QUICK_LINK_LABEL_SELECTOR_TYPE } from '../../../k8s/groups/EDP/QuickLink/labels';
 import { PipelineRunKubeObject } from '../../../k8s/groups/Tekton/PipelineRun';
 import { PIPELINE_RUN_REASON } from '../../../k8s/groups/Tekton/PipelineRun/constants';
 import { FilterContextProvider } from '../../../providers/Filter/provider';
@@ -29,6 +32,15 @@ import { useTypedPermissions } from './useTypedPermissions';
 export const usePageTabs = () => {
   const { namespace, stageName } = useParams<EDPStageDetailsRouteParams>();
   const { data: QuickLinksURLS } = useQuickLinksURLsQuery(namespace);
+  const { data: QuickLinks } = useQuickLinksQuery({
+    props: {
+      namespace,
+    },
+  });
+
+  const monitoringQuickLink =
+    QuickLinks &&
+    QuickLinks?.items?.find((el) => el.metadata.name === SYSTEM_QUICK_LINKS.MONITORING);
 
   const {
     stage,
@@ -150,7 +162,8 @@ export const usePageTabs = () => {
           <LoadingWrapper isLoading={_isLoading}>
             <TabSection title="Monitoring">
               <Monitoring
-                grafanaBaseUrl={QuickLinksURLS?.grafana}
+                provider={monitoringQuickLink?.metadata?.labels[QUICK_LINK_LABEL_SELECTOR_TYPE]}
+                baseUrl={QuickLinksURLS?.monitoring}
                 namespace={stage.data?.spec.namespace}
               />
             </TabSection>
@@ -183,14 +196,15 @@ export const usePageTabs = () => {
       },
     ];
   }, [
-    QuickLinksURLS?.grafana,
+    QuickLinksURLS?.monitoring,
     argoApplications.isLoading,
     enrichedApplications.isLoading,
     enrichedApplicationsWithArgoApplications,
     infoColumns,
     isLoading,
     latestCleanPipelineRunIsRunning,
     latestDeployPipelineRunIsRunning,
+    monitoringQuickLink?.metadata?.labels,
     newPipelineRunAdded,
     permissions,
     pipelineRuns.data,

diff --git a/src/pages/stage-details/view.tsx b/src/pages/stage-details/view.tsx
@@ -12,6 +12,7 @@ import {
   SYSTEM_QUICK_LINKS,
   SYSTEM_QUICK_LINKS_LABELS,
 } from '../../k8s/groups/EDP/QuickLink/constants';
+import { QUICK_LINK_LABEL_SELECTOR_TYPE } from '../../k8s/groups/EDP/QuickLink/labels';
 import { Tabs } from '../../providers/Tabs/components/Tabs';
 import { useTabsContext } from '../../providers/Tabs/hooks';
 import { LinkCreationService } from '../../services/link-creation';
@@ -33,13 +34,12 @@ export const PageView = () => {
     stage: { data: stage, isLoading: isStageLoading, error: stageError },
   } = useDynamicDataContext();
 
-  const grafanaQuickLink =
-    QuickLinks && QuickLinks.data?.find((el) => el.metadata.name === SYSTEM_QUICK_LINKS.GRAFANA);
-  const kibanaQuickLink =
-    QuickLinks && QuickLinks.data?.find((el) => el.metadata.name === SYSTEM_QUICK_LINKS.KIBANA);
+  const monitoringQuickLink =
+    QuickLinks && QuickLinks.data?.find((el) => el.metadata.name === SYSTEM_QUICK_LINKS.MONITORING);
+  const loggingQuickLink =
+    QuickLinks && QuickLinks.data?.find((el) => el.metadata.name === SYSTEM_QUICK_LINKS.LOGGING);
 
   const stageSpecName = stage?.spec.name;
-  const stageSpecNamespace = stage?.spec.namespace;
 
   const tabs = usePageTabs();
 
@@ -109,28 +109,32 @@ export const PageView = () => {
             />
             <QuickLink
               name={{
-                label: SYSTEM_QUICK_LINKS_LABELS[SYSTEM_QUICK_LINKS.GRAFANA],
-                value: SYSTEM_QUICK_LINKS.GRAFANA,
+                label: SYSTEM_QUICK_LINKS_LABELS[SYSTEM_QUICK_LINKS.MONITORING],
+                value: SYSTEM_QUICK_LINKS.MONITORING,
               }}
-              icon={ICONS.GRAFANA}
-              externalLink={LinkCreationService.grafana.createDashboardLink(
-                QuickLinksURLs.data?.[SYSTEM_QUICK_LINKS.GRAFANA],
-                stageSpecNamespace
+              enabledText="monitoring dashboard"
+              iconBase64={monitoringQuickLink?.spec?.icon}
+              externalLink={LinkCreationService.monitoring.createDashboardLink(
+                monitoringQuickLink?.metadata?.labels[QUICK_LINK_LABEL_SELECTOR_TYPE],
+                QuickLinksURLs.data?.[SYSTEM_QUICK_LINKS.MONITORING],
+                stage.spec.namespace
               )}
-              QuickLinkComponent={grafanaQuickLink}
+              QuickLinkComponent={monitoringQuickLink}
               isTextButton
             />
             <QuickLink
               name={{
-                label: SYSTEM_QUICK_LINKS_LABELS[SYSTEM_QUICK_LINKS.KIBANA],
-                value: SYSTEM_QUICK_LINKS.KIBANA,
+                label: SYSTEM_QUICK_LINKS_LABELS[SYSTEM_QUICK_LINKS.LOGGING],
+                value: SYSTEM_QUICK_LINKS.LOGGING,
               }}
-              icon={ICONS.KIBANA}
-              externalLink={LinkCreationService.kibana.createDashboardLink(
-                QuickLinksURLs.data?.[SYSTEM_QUICK_LINKS.KIBANA],
-                stageSpecNamespace
+              enabledText="logging dashboard"
+              iconBase64={loggingQuickLink?.spec?.icon}
+              externalLink={LinkCreationService.logging.createDashboardLink(
+                loggingQuickLink?.metadata?.labels[QUICK_LINK_LABEL_SELECTOR_TYPE],
+                QuickLinksURLs.data?.[SYSTEM_QUICK_LINKS.LOGGING],
+                stage.spec.namespace
               )}
-              QuickLinkComponent={kibanaQuickLink}
+              QuickLinkComponent={loggingQuickLink}
               isTextButton
             />
             <Box sx={{ ml: (t) => t.typography.pxToRem(20) }}>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const QUICK_LINK_LABEL_SELECTOR_TYPE = 'app.edp.epam.com/quicklink-type';