Skip to content

Commit 0b9ed75

Browse files
callmevladikcallmevladik
committed
feat: Make abstract quick links (#534)
1 parent df8b22c commit 0b9ed75

File tree

21 files changed

+202
-101
lines changed

21 files changed

+202
-101
lines changed

‎src/components/QuickLink/index.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { QuickLinkExternalLinkProps } from './types';
1010
export const QuickLink = ({
1111
name,
1212
icon,
13+
iconBase64,
1314
externalLink,
1415
enabledText = `Open in ${name.label}`,
1516
configurationLink,
@@ -60,6 +61,7 @@ export const QuickLink = ({
6061
return externalLink ? (
6162
<ResourceIconLink
6263
icon={icon}
64+
iconBase64={iconBase64}
6365
tooltipTitle={enabledText}
6466
link={externalLink}
6567
variant={variant}
@@ -71,6 +73,7 @@ export const QuickLink = ({
7173
<ResourceIconLink
7274
disabled
7375
icon={icon}
76+
iconBase64={iconBase64}
7477
tooltipTitle={renderDisabledTooltip()}
7578
name={name.label}
7679
variant={variant}

‎src/components/QuickLink/types.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import { ButtonProps } from '@mui/material';
22
import { QuickLinkKubeObjectInterface } from '../../k8s/groups/EDP/QuickLink/types';
33

44
export interface QuickLinkExternalLinkProps {
5-
icon: string;
65
externalLink: string;
6+
icon?: string;
7+
iconBase64?: string;
78
name?: {
89
label?: string;
910
value?: string;

‎src/components/ResourceIconLink/index.tsx

+34-3
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const iconSizeByBtnSize = (btnSize: ButtonProps['size']) => {
2626
const DisabledResourceIconLink = ({
2727
tooltipTitle,
2828
icon,
29+
iconBase64,
2930
withoutDisabledStyle,
3031
variant,
3132
isTextButton,
@@ -44,13 +45,26 @@ const DisabledResourceIconLink = ({
4445
endIcon={<Icon icon={ICONS.NEW_WINDOW} color={theme.palette.grey['500']} width={iconSize} />}
4546
size={size}
4647
>
47-
Open in {name}
48+
{name}
4849
</Button>
4950
) : (
5051
<Tooltip title={<div>{tooltipTitle}</div>}>
5152
<div>
5253
<IconButton disabled style={!withoutDisabledStyle ? { opacity: 0.5 } : {}} size={size}>
53-
<Icon icon={icon} color={theme.palette.grey['500']} width={iconSize} height={iconSize} />
54+
{iconBase64 ? (
55+
<img
56+
src={`data:image/svg+xml;base64,${iconBase64}`}
57+
style={{ width: theme.typography.pxToRem(16), height: theme.typography.pxToRem(16) }}
58+
alt=""
59+
/>
60+
) : (
61+
<Icon
62+
icon={icon}
63+
color={theme.palette.grey['500']}
64+
width={iconSize}
65+
height={iconSize}
66+
/>
67+
)}
5468
</IconButton>
5569
</div>
5670
</Tooltip>
@@ -60,6 +74,7 @@ const DisabledResourceIconLink = ({
6074
const EnabledResourceIconLink = ({
6175
tooltipTitle,
6276
icon,
77+
iconBase64,
6378
link,
6479
variant,
6580
isTextButton,
@@ -106,7 +121,20 @@ const EnabledResourceIconLink = ({
106121
>
107122
<span>
108123
<IconButton component={MuiLink} href={link} target={'_blank'} size={size}>
109-
<Icon icon={icon} width={iconSize} height={iconSize} color={theme.palette.text.primary} />
124+
{iconBase64 ? (
125+
<img
126+
src={`data:image/svg+xml;base64,${iconBase64}`}
127+
style={{ width: theme.typography.pxToRem(16), height: theme.typography.pxToRem(16) }}
128+
alt=""
129+
/>
130+
) : (
131+
<Icon
132+
icon={icon}
133+
color={theme.palette.grey['500']}
134+
width={iconSize}
135+
height={iconSize}
136+
/>
137+
)}
110138
</IconButton>
111139
</span>
112140
</Tooltip>
@@ -117,6 +145,7 @@ export const ResourceIconLink = ({
117145
disabled = false,
118146
tooltipTitle,
119147
icon,
148+
iconBase64,
120149
link,
121150
withoutDisabledStyle,
122151
variant,
@@ -131,6 +160,7 @@ export const ResourceIconLink = ({
131160
<DisabledResourceIconLink
132161
tooltipTitle={tooltipTitle}
133162
icon={icon}
163+
iconBase64={iconBase64}
134164
withoutDisabledStyle={withoutDisabledStyle}
135165
variant={variant}
136166
isTextButton={isTextButton}
@@ -141,6 +171,7 @@ export const ResourceIconLink = ({
141171
<EnabledResourceIconLink
142172
tooltipTitle={tooltipTitle}
143173
icon={icon}
174+
iconBase64={iconBase64}
144175
link={link}
145176
variant={variant}
146177
isTextButton={isTextButton}

‎src/components/ResourceIconLink/types.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import { ButtonProps } from '@mui/material';
33
export interface ResourceIconLinkProps {
44
tooltipTitle: string | React.ReactElement;
55
name: string;
6-
icon: string;
6+
icon?: string;
7+
iconBase64?: string;
78
link?: string;
89
disabled?: boolean;
910
withoutDisabledStyle?: boolean;

‎src/icons/iconify-icons-mapping.ts

-2
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,6 @@ export enum ICONS {
3131
GIT_BRANCH = 'ph:git-branch',
3232
NEW_WINDOW = 'material-symbols:open-in-new',
3333
ARGOCD = 'devicon:argocd',
34-
GRAFANA = 'logos:grafana',
35-
KIBANA = 'logos:kibana',
3634
KUBERNETES = 'simple-icons:kubernetes',
3735
SONAR = 'simple-icons:sonarsource',
3836
JIRA = 'fontisto:jira',

‎src/k8s/groups/EDP/QuickLink/constants.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@ export const SYSTEM_QUICK_LINKS = {
44
ARGOCD: 'argocd',
55
DEFECT_DOJO: 'defectdojo',
66
DEPENDENCY_TRACK: 'dependency-track',
7-
GRAFANA: 'grafana',
8-
KIBANA: 'kibana',
7+
MONITORING: 'monitoring',
8+
LOGGING: 'logging',
99
NEXUS: 'nexus',
1010
SONAR: 'sonar',
1111
CODEMIE: 'codemie',
1212
} as const;
1313

1414
export const SYSTEM_QUICK_LINKS_LABELS = {
1515
[SYSTEM_QUICK_LINKS.ARGOCD]: 'Argo CD',
16-
[SYSTEM_QUICK_LINKS.GRAFANA]: 'Grafana',
17-
[SYSTEM_QUICK_LINKS.KIBANA]: 'Kibana',
16+
[SYSTEM_QUICK_LINKS.MONITORING]: 'Monitoring',
17+
[SYSTEM_QUICK_LINKS.LOGGING]: 'Logging',
1818
[SYSTEM_QUICK_LINKS.SONAR]: 'Sonar',
1919
} as const;

‎src/k8s/groups/EDP/QuickLink/labels.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const QUICK_LINK_LABEL_SELECTOR_TYPE = 'app.edp.epam.com/quicklink-type';

‎src/k8s/groups/EDP/QuickLink/types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export interface QuickLinkSpec {
77
type: string | ValueOf<typeof SYSTEM_QUICK_LINKS>;
88
url: string;
99
visible: boolean;
10+
provider: string;
1011
}
1112

1213
export interface QuickLinkKubeObjectInterface extends KubeObjectInterface {

‎src/pages/cdpipeline-details/components/StageList/components/EnvironmentStage/index.tsx

+21-16
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
SYSTEM_QUICK_LINKS,
1212
SYSTEM_QUICK_LINKS_LABELS,
1313
} from '../../../../../../k8s/groups/EDP/QuickLink/constants';
14+
import { QUICK_LINK_LABEL_SELECTOR_TYPE } from '../../../../../../k8s/groups/EDP/QuickLink/labels';
1415
import { StageKubeObject } from '../../../../../../k8s/groups/EDP/Stage';
1516
import { LinkCreationService } from '../../../../../../services/link-creation';
1617
import { routeArgoCD } from '../../../../../configuration/pages/argocd/route';
@@ -29,10 +30,10 @@ export const EnvironmentStage = ({
2930
}: EnvironmentStageProps) => {
3031
const theme = useTheme();
3132

32-
const grafanaQuickLink =
33-
QuickLinks && QuickLinks?.find((el) => el.metadata.name === SYSTEM_QUICK_LINKS.GRAFANA);
34-
const kibanaQuickLink =
35-
QuickLinks && QuickLinks?.find((el) => el.metadata.name === SYSTEM_QUICK_LINKS.KIBANA);
33+
const monitoringQuickLink =
34+
QuickLinks && QuickLinks?.find((el) => el.metadata.name === SYSTEM_QUICK_LINKS.MONITORING);
35+
const loggingQuickLink =
36+
QuickLinks && QuickLinks?.find((el) => el.metadata.name === SYSTEM_QUICK_LINKS.LOGGING);
3637

3738
const stageIsLoaded = stage?.status;
3839

@@ -138,28 +139,32 @@ export const EnvironmentStage = ({
138139
/>
139140
<QuickLink
140141
name={{
141-
label: SYSTEM_QUICK_LINKS_LABELS[SYSTEM_QUICK_LINKS.GRAFANA],
142-
value: SYSTEM_QUICK_LINKS.GRAFANA,
142+
label: SYSTEM_QUICK_LINKS_LABELS[SYSTEM_QUICK_LINKS.MONITORING],
143+
value: SYSTEM_QUICK_LINKS.MONITORING,
143144
}}
144-
icon={ICONS.GRAFANA}
145-
externalLink={LinkCreationService.grafana.createDashboardLink(
146-
QuickLinksURLS?.[SYSTEM_QUICK_LINKS.GRAFANA],
145+
iconBase64={monitoringQuickLink?.spec?.icon}
146+
enabledText="Open Monitoring Dashboard"
147+
externalLink={LinkCreationService.monitoring.createDashboardLink(
148+
monitoringQuickLink?.metadata?.labels[QUICK_LINK_LABEL_SELECTOR_TYPE],
149+
QuickLinksURLS?.[SYSTEM_QUICK_LINKS.MONITORING],
147150
stage.spec.namespace
148151
)}
149-
QuickLinkComponent={grafanaQuickLink}
152+
QuickLinkComponent={monitoringQuickLink}
150153
size="small"
151154
/>
152155
<QuickLink
153156
name={{
154-
label: SYSTEM_QUICK_LINKS_LABELS[SYSTEM_QUICK_LINKS.KIBANA],
155-
value: SYSTEM_QUICK_LINKS.KIBANA,
157+
label: SYSTEM_QUICK_LINKS_LABELS[SYSTEM_QUICK_LINKS.LOGGING],
158+
value: SYSTEM_QUICK_LINKS.LOGGING,
156159
}}
157-
icon={ICONS.KIBANA}
158-
externalLink={LinkCreationService.kibana.createDashboardLink(
159-
QuickLinksURLS?.[SYSTEM_QUICK_LINKS.KIBANA],
160+
iconBase64={loggingQuickLink?.spec?.icon}
161+
enabledText="Open Logging Dashboard"
162+
externalLink={LinkCreationService.logging.createDashboardLink(
163+
loggingQuickLink?.metadata?.labels[QUICK_LINK_LABEL_SELECTOR_TYPE],
164+
QuickLinksURLS?.[SYSTEM_QUICK_LINKS.LOGGING],
160165
stage.spec.namespace
161166
)}
162-
QuickLinkComponent={kibanaQuickLink}
167+
QuickLinkComponent={loggingQuickLink}
163168
size="small"
164169
/>
165170
</Stack>

‎src/pages/stage-details/components/Monitoring/index.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import React from 'react';
22
import { LinkCreationService } from '../../../../services/link-creation';
33

44
export const Monitoring = ({
5-
grafanaBaseUrl,
5+
provider,
6+
baseUrl,
67
namespace,
78
}: {
8-
grafanaBaseUrl: string;
9+
provider: string;
10+
baseUrl: string;
911
namespace: string;
1012
}) => {
1113
return (
@@ -14,7 +16,7 @@ export const Monitoring = ({
1416
frameBorder="0"
1517
height="800"
1618
width="100%"
17-
src={LinkCreationService.grafana.createDashboardLink(grafanaBaseUrl, namespace)}
19+
src={LinkCreationService.monitoring.createDashboardLink(provider, baseUrl, namespace)}
1820
></iframe>
1921
);
2022
};

‎src/pages/stage-details/hooks/usePageTabs.tsx

+16-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ import { LoadingWrapper } from '../../../components/LoadingWrapper';
99
import { TabSection } from '../../../components/TabSection';
1010
import { PIPELINE_TYPES } from '../../../constants/pipelineTypes';
1111
import { EDP_USER_GUIDE } from '../../../constants/urls';
12+
import { SYSTEM_QUICK_LINKS } from '../../../k8s/groups/EDP/QuickLink/constants';
13+
import { useQuickLinksQuery } from '../../../k8s/groups/EDP/QuickLink/hooks/useQuickLinksQuery';
1214
import { useQuickLinksURLsQuery } from '../../../k8s/groups/EDP/QuickLink/hooks/useQuickLinksURLQuery';
15+
import { QUICK_LINK_LABEL_SELECTOR_TYPE } from '../../../k8s/groups/EDP/QuickLink/labels';
1316
import { PipelineRunKubeObject } from '../../../k8s/groups/Tekton/PipelineRun';
1417
import { PIPELINE_RUN_REASON } from '../../../k8s/groups/Tekton/PipelineRun/constants';
1518
import { FilterContextProvider } from '../../../providers/Filter/provider';
@@ -29,6 +32,15 @@ import { useTypedPermissions } from './useTypedPermissions';
2932
export const usePageTabs = () => {
3033
const { namespace, stageName } = useParams<EDPStageDetailsRouteParams>();
3134
const { data: QuickLinksURLS } = useQuickLinksURLsQuery(namespace);
35+
const { data: QuickLinks } = useQuickLinksQuery({
36+
props: {
37+
namespace,
38+
},
39+
});
40+
41+
const monitoringQuickLink =
42+
QuickLinks &&
43+
QuickLinks?.items?.find((el) => el.metadata.name === SYSTEM_QUICK_LINKS.MONITORING);
3244

3345
const {
3446
stage,
@@ -150,7 +162,8 @@ export const usePageTabs = () => {
150162
<LoadingWrapper isLoading={_isLoading}>
151163
<TabSection title="Monitoring">
152164
<Monitoring
153-
grafanaBaseUrl={QuickLinksURLS?.grafana}
165+
provider={monitoringQuickLink?.metadata?.labels[QUICK_LINK_LABEL_SELECTOR_TYPE]}
166+
baseUrl={QuickLinksURLS?.monitoring}
154167
namespace={stage.data?.spec.namespace}
155168
/>
156169
</TabSection>
@@ -183,14 +196,15 @@ export const usePageTabs = () => {
183196
},
184197
];
185198
}, [
186-
QuickLinksURLS?.grafana,
199+
QuickLinksURLS?.monitoring,
187200
argoApplications.isLoading,
188201
enrichedApplications.isLoading,
189202
enrichedApplicationsWithArgoApplications,
190203
infoColumns,
191204
isLoading,
192205
latestCleanPipelineRunIsRunning,
193206
latestDeployPipelineRunIsRunning,
207+
monitoringQuickLink?.metadata?.labels,
194208
newPipelineRunAdded,
195209
permissions,
196210
pipelineRuns.data,

‎src/pages/stage-details/view.tsx

+23-19
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
SYSTEM_QUICK_LINKS,
1313
SYSTEM_QUICK_LINKS_LABELS,
1414
} from '../../k8s/groups/EDP/QuickLink/constants';
15+
import { QUICK_LINK_LABEL_SELECTOR_TYPE } from '../../k8s/groups/EDP/QuickLink/labels';
1516
import { Tabs } from '../../providers/Tabs/components/Tabs';
1617
import { useTabsContext } from '../../providers/Tabs/hooks';
1718
import { LinkCreationService } from '../../services/link-creation';
@@ -33,13 +34,12 @@ export const PageView = () => {
3334
stage: { data: stage, isLoading: isStageLoading, error: stageError },
3435
} = useDynamicDataContext();
3536

36-
const grafanaQuickLink =
37-
QuickLinks && QuickLinks.data?.find((el) => el.metadata.name === SYSTEM_QUICK_LINKS.GRAFANA);
38-
const kibanaQuickLink =
39-
QuickLinks && QuickLinks.data?.find((el) => el.metadata.name === SYSTEM_QUICK_LINKS.KIBANA);
37+
const monitoringQuickLink =
38+
QuickLinks && QuickLinks.data?.find((el) => el.metadata.name === SYSTEM_QUICK_LINKS.MONITORING);
39+
const loggingQuickLink =
40+
QuickLinks && QuickLinks.data?.find((el) => el.metadata.name === SYSTEM_QUICK_LINKS.LOGGING);
4041

4142
const stageSpecName = stage?.spec.name;
42-
const stageSpecNamespace = stage?.spec.namespace;
4343

4444
const tabs = usePageTabs();
4545

@@ -109,28 +109,32 @@ export const PageView = () => {
109109
/>
110110
<QuickLink
111111
name={{
112-
label: SYSTEM_QUICK_LINKS_LABELS[SYSTEM_QUICK_LINKS.GRAFANA],
113-
value: SYSTEM_QUICK_LINKS.GRAFANA,
112+
label: SYSTEM_QUICK_LINKS_LABELS[SYSTEM_QUICK_LINKS.MONITORING],
113+
value: SYSTEM_QUICK_LINKS.MONITORING,
114114
}}
115-
icon={ICONS.GRAFANA}
116-
externalLink={LinkCreationService.grafana.createDashboardLink(
117-
QuickLinksURLs.data?.[SYSTEM_QUICK_LINKS.GRAFANA],
118-
stageSpecNamespace
115+
enabledText="monitoring dashboard"
116+
iconBase64={monitoringQuickLink?.spec?.icon}
117+
externalLink={LinkCreationService.monitoring.createDashboardLink(
118+
monitoringQuickLink?.metadata?.labels[QUICK_LINK_LABEL_SELECTOR_TYPE],
119+
QuickLinksURLs.data?.[SYSTEM_QUICK_LINKS.MONITORING],
120+
stage.spec.namespace
119121
)}
120-
QuickLinkComponent={grafanaQuickLink}
122+
QuickLinkComponent={monitoringQuickLink}
121123
isTextButton
122124
/>
123125
<QuickLink
124126
name={{
125-
label: SYSTEM_QUICK_LINKS_LABELS[SYSTEM_QUICK_LINKS.KIBANA],
126-
value: SYSTEM_QUICK_LINKS.KIBANA,
127+
label: SYSTEM_QUICK_LINKS_LABELS[SYSTEM_QUICK_LINKS.LOGGING],
128+
value: SYSTEM_QUICK_LINKS.LOGGING,
127129
}}
128-
icon={ICONS.KIBANA}
129-
externalLink={LinkCreationService.kibana.createDashboardLink(
130-
QuickLinksURLs.data?.[SYSTEM_QUICK_LINKS.KIBANA],
131-
stageSpecNamespace
130+
enabledText="logging dashboard"
131+
iconBase64={loggingQuickLink?.spec?.icon}
132+
externalLink={LinkCreationService.logging.createDashboardLink(
133+
loggingQuickLink?.metadata?.labels[QUICK_LINK_LABEL_SELECTOR_TYPE],
134+
QuickLinksURLs.data?.[SYSTEM_QUICK_LINKS.LOGGING],
135+
stage.spec.namespace
132136
)}
133-
QuickLinkComponent={kibanaQuickLink}
137+
QuickLinkComponent={loggingQuickLink}
134138
isTextButton
135139
/>
136140
<Box sx={{ ml: (t) => t.typography.pxToRem(20) }}>

0 commit comments

Comments
 (0)