From 7d1366c64647c3bf15b3a64e700e25a13deb2713 Mon Sep 17 00:00:00 2001 From: Vladyslav Palyvoda Date: Mon, 6 Jan 2025 15:27:27 +0200 Subject: [PATCH] feat: Make abstract quick links (#534) --- src/components/QuickLink/index.tsx | 3 ++ src/components/QuickLink/types.ts | 3 +- src/components/ResourceIconLink/index.tsx | 37 ++++++++++++++-- src/components/ResourceIconLink/types.ts | 3 +- src/icons/iconify-icons-mapping.ts | 2 - src/k8s/groups/EDP/QuickLink/constants.ts | 8 ++-- src/k8s/groups/EDP/QuickLink/labels.ts | 1 + src/k8s/groups/EDP/QuickLink/types.ts | 1 + .../components/EnvironmentStage/index.tsx | 37 +++++++++------- .../components/Monitoring/index.tsx | 8 ++-- src/pages/stage-details/hooks/usePageTabs.tsx | 18 +++++++- src/pages/stage-details/view.tsx | 42 ++++++++++--------- .../link-creation/grafana/index.test.ts | 11 ----- src/services/link-creation/grafana/index.ts | 13 ------ src/services/link-creation/index.ts | 12 +++--- .../link-creation/kibana/index.test.ts | 11 ----- src/services/link-creation/kibana/index.ts | 9 ---- .../link-creation/logging/index.test.ts | 21 ++++++++++ src/services/link-creation/logging/index.ts | 16 +++++++ .../link-creation/monitoring/index.test.ts | 26 ++++++++++++ .../link-creation/monitoring/index.ts | 21 ++++++++++ 21 files changed, 202 insertions(+), 101 deletions(-) create mode 100644 src/k8s/groups/EDP/QuickLink/labels.ts delete mode 100644 src/services/link-creation/grafana/index.test.ts delete mode 100644 src/services/link-creation/grafana/index.ts delete mode 100644 src/services/link-creation/kibana/index.test.ts delete mode 100644 src/services/link-creation/kibana/index.ts create mode 100644 src/services/link-creation/logging/index.test.ts create mode 100644 src/services/link-creation/logging/index.ts create mode 100644 src/services/link-creation/monitoring/index.test.ts create mode 100644 src/services/link-creation/monitoring/index.ts diff --git a/src/components/QuickLink/index.tsx b/src/components/QuickLink/index.tsx index 85a537faf..41bc450a8 100644 --- 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 ? ( { const DisabledResourceIconLink = ({ tooltipTitle, icon, + iconBase64, withoutDisabledStyle, variant, isTextButton, @@ -44,13 +45,26 @@ const DisabledResourceIconLink = ({ endIcon={} size={size} > - Open in {name} + {name} ) : ( {tooltipTitle}}>
- + {iconBase64 ? ( + + ) : ( + + )}
@@ -60,6 +74,7 @@ const DisabledResourceIconLink = ({ const EnabledResourceIconLink = ({ tooltipTitle, icon, + iconBase64, link, variant, isTextButton, @@ -106,7 +121,20 @@ const EnabledResourceIconLink = ({ > - + {iconBase64 ? ( + + ) : ( + + )} @@ -117,6 +145,7 @@ export const ResourceIconLink = ({ disabled = false, tooltipTitle, icon, + iconBase64, link, withoutDisabledStyle, variant, @@ -131,6 +160,7 @@ export const ResourceIconLink = ({ ; 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 index d8dc83565..96fc172bc 100644 --- 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 = ({ /> diff --git a/src/pages/stage-details/components/Monitoring/index.tsx b/src/pages/stage-details/components/Monitoring/index.tsx index 8bb9dd32f..cbde39e7b 100644 --- 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)} > ); }; diff --git a/src/pages/stage-details/hooks/usePageTabs.tsx b/src/pages/stage-details/hooks/usePageTabs.tsx index 40e92045b..0989aca66 100644 --- 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(); 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 = () => { @@ -183,7 +196,7 @@ export const usePageTabs = () => { }, ]; }, [ - QuickLinksURLS?.grafana, + QuickLinksURLS?.monitoring, argoApplications.isLoading, enrichedApplications.isLoading, enrichedApplicationsWithArgoApplications, @@ -191,6 +204,7 @@ export const usePageTabs = () => { 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 index 05cf8a037..296069587 100644 --- 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 = () => { /> t.typography.pxToRem(20) }}> diff --git a/src/services/link-creation/grafana/index.test.ts b/src/services/link-creation/grafana/index.test.ts deleted file mode 100644 index a4012b5e4..000000000 --- a/src/services/link-creation/grafana/index.test.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { GrafanaURLService } from './index'; - -describe('testing link-creation GrafanaURLService', () => { - it('should successfully create grafana url based on given grafanaURLOrigin and namespace params', () => { - expect( - GrafanaURLService.createDashboardLink('https://grafana-test.com', 'test-namespace', 'light') - ).toEqual( - 'https://grafana-test.com/d/85a562078cdf77779eaa1add43ccec1e/kubernetes-compute-resources-namespace-pods?orgId=1&refresh=10s&var-datasource=default&var-cluster=&var-namespace=test-namespace&theme=light' - ); - }); -}); diff --git a/src/services/link-creation/grafana/index.ts b/src/services/link-creation/grafana/index.ts deleted file mode 100644 index 33adcbd35..000000000 --- a/src/services/link-creation/grafana/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -export const GrafanaURLService = { - createDashboardLink: ( - grafanaURLOrigin: string, - namespace: string, - theme: string = localStorage.getItem('headlampThemePreference') || 'light' - ) => { - if (!grafanaURLOrigin) { - return undefined; - } - - return `${grafanaURLOrigin}/d/85a562078cdf77779eaa1add43ccec1e/kubernetes-compute-resources-namespace-pods?orgId=1&refresh=10s&var-datasource=default&var-cluster=&var-namespace=${namespace}&theme=${theme}`; - }, -}; diff --git a/src/services/link-creation/index.ts b/src/services/link-creation/index.ts index 6d20226f0..369f0e2c3 100644 --- a/src/services/link-creation/index.ts +++ b/src/services/link-creation/index.ts @@ -1,9 +1,9 @@ import { ArgoCDURLService } from './argocd'; import { DepTrackURLService } from './deptrack'; import { GitURLService } from './git'; -import { GrafanaURLService } from './grafana'; import { JaegerURLService } from './jaeger'; -import { KibanaURLService } from './kibana'; +import { LoggingURLService } from './logging'; +import { MonitoringURLService } from './monitoring'; import { SonarQubeURLService } from './sonar'; export const createURLObjectFromURLOrigin = (urlOrigin: string) => { @@ -23,14 +23,14 @@ export const LinkCreationService = { sonar: { ...SonarQubeURLService, }, - grafana: { - ...GrafanaURLService, + monitoring: { + ...MonitoringURLService, }, jaeger: { ...JaegerURLService, }, - kibana: { - ...KibanaURLService, + logging: { + ...LoggingURLService, }, git: { ...GitURLService, diff --git a/src/services/link-creation/kibana/index.test.ts b/src/services/link-creation/kibana/index.test.ts deleted file mode 100644 index 712168398..000000000 --- a/src/services/link-creation/kibana/index.test.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { KibanaURLService } from './index'; - -describe('testing link-creation KibanaURLService', () => { - it('should successfully create kibana url based on given kibanaURLOrigin and namespace params', () => { - expect( - KibanaURLService.createDashboardLink('https://kibana-test.com', 'test-namespace') - ).toEqual( - "https://kibana-test.com/app/discover#/?_g=()&_a=(columns:!(log),filters:!(('$state':(store:appState),meta:(alias:!n,disabled:!f,key:kubernetes.namespace_name,negate:!f,params:(query:test-namespace),type:phrase),query:(match_phrase:(kubernetes.namespace_name:test-namespace)))),interval:auto,query:(language:kuery,query:''),sort:!(!('@timestamp',desc)))" - ); - }); -}); diff --git a/src/services/link-creation/kibana/index.ts b/src/services/link-creation/kibana/index.ts deleted file mode 100644 index 7eadc8bd5..000000000 --- a/src/services/link-creation/kibana/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -export const KibanaURLService = { - createDashboardLink: (kibanaURLOrigin: string, namespace: string) => { - if (!kibanaURLOrigin) { - return undefined; - } - - return `${kibanaURLOrigin}/app/discover#/?_g=()&_a=(columns:!(log),filters:!(('$state':(store:appState),meta:(alias:!n,disabled:!f,key:kubernetes.namespace_name,negate:!f,params:(query:${namespace}),type:phrase),query:(match_phrase:(kubernetes.namespace_name:${namespace})))),interval:auto,query:(language:kuery,query:''),sort:!(!('@timestamp',desc)))`; - }, -}; diff --git a/src/services/link-creation/logging/index.test.ts b/src/services/link-creation/logging/index.test.ts new file mode 100644 index 000000000..5c3f835ab --- /dev/null +++ b/src/services/link-creation/logging/index.test.ts @@ -0,0 +1,21 @@ +import { LoggingURLService } from './index'; + +describe('testing link-creation LoggingURLService', () => { + it('should successfully create kibana url based on given baseURL and namespace params', () => { + expect( + LoggingURLService.createDashboardLink('kibana', 'https://kibana-test.com', 'test-namespace') + ).toEqual( + "https://kibana-test.com/app/discover#/?_g=()&_a=(columns:!(log),filters:!(('$state':(store:appState),meta:(alias:!n,disabled:!f,key:kubernetes.namespace_name,negate:!f,params:(query:test-namespace),type:phrase),query:(match_phrase:(kubernetes.namespace_name:test-namespace)))),interval:auto,query:(language:kuery,query:''),sort:!(!('@timestamp',desc)))" + ); + }); + + it('should successfully return baseURL if provider is unknown', () => { + expect( + LoggingURLService.createDashboardLink( + 'some-provider', + 'https://kibana-test.com', + 'test-namespace' + ) + ).toEqual('https://kibana-test.com'); + }); +}); diff --git a/src/services/link-creation/logging/index.ts b/src/services/link-creation/logging/index.ts new file mode 100644 index 000000000..2f75445fc --- /dev/null +++ b/src/services/link-creation/logging/index.ts @@ -0,0 +1,16 @@ +export const LoggingURLService = { + createDashboardLink: (provider: string, baseURL: string, namespace: string) => { + if (!baseURL) { + return undefined; + } + + switch (provider) { + case 'kibana': { + return `${baseURL}/app/discover#/?_g=()&_a=(columns:!(log),filters:!(('$state':(store:appState),meta:(alias:!n,disabled:!f,key:kubernetes.namespace_name,negate:!f,params:(query:${namespace}),type:phrase),query:(match_phrase:(kubernetes.namespace_name:${namespace})))),interval:auto,query:(language:kuery,query:''),sort:!(!('@timestamp',desc)))`; + } + default: { + return baseURL; + } + } + }, +}; diff --git a/src/services/link-creation/monitoring/index.test.ts b/src/services/link-creation/monitoring/index.test.ts new file mode 100644 index 000000000..e6962df84 --- /dev/null +++ b/src/services/link-creation/monitoring/index.test.ts @@ -0,0 +1,26 @@ +import { MonitoringURLService } from './index'; + +describe('testing link-creation MonitoringURLService', () => { + it('should successfully create grafana url based on given baseURL and namespace params', () => { + expect( + MonitoringURLService.createDashboardLink( + 'grafana', + 'https://grafana-test.com', + 'test-namespace', + 'light' + ) + ).toEqual( + 'https://grafana-test.com/d/85a562078cdf77779eaa1add43ccec1e/kubernetes-compute-resources-namespace-pods?orgId=1&refresh=10s&var-datasource=default&var-cluster=&var-namespace=test-namespace&theme=light' + ); + }); + it('should successfully return base url if provider is unknown', () => { + expect( + MonitoringURLService.createDashboardLink( + 'some-provider', + 'https://grafana-test.com', + 'test-namespace', + 'light' + ) + ).toEqual('https://grafana-test.com'); + }); +}); diff --git a/src/services/link-creation/monitoring/index.ts b/src/services/link-creation/monitoring/index.ts new file mode 100644 index 000000000..2f1dc7086 --- /dev/null +++ b/src/services/link-creation/monitoring/index.ts @@ -0,0 +1,21 @@ +export const MonitoringURLService = { + createDashboardLink: ( + provider: string, + baseURL: string, + namespace: string, + theme: string = localStorage.getItem('headlampThemePreference') || 'light' + ) => { + if (!baseURL) { + return undefined; + } + + switch (provider) { + case 'grafana': { + return `${baseURL}/d/85a562078cdf77779eaa1add43ccec1e/kubernetes-compute-resources-namespace-pods?orgId=1&refresh=10s&var-datasource=default&var-cluster=&var-namespace=${namespace}&theme=${theme}`; + } + default: { + return baseURL; + } + } + }, +};