Skip to content

Commit 004bb1f

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

File tree

32 files changed

+385
-149
lines changed

32 files changed

+385
-149
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-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',
@@ -82,4 +80,6 @@ export enum ICONS {
8280
TIMEOUT = 'eos-icons:timeout',
8381
ARROW_DROPDOWN = 'material-symbols:arrow-drop-down',
8482
COMMENT = 'mdi:comment-text-outline',
83+
OPENSEARCH = 'simple-icons:opensearch',
84+
GRAFANA = 'devicon-plain:grafana',
8585
}

‎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-provider';

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

+22-15
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,34 @@ 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
}}
144145
icon={ICONS.GRAFANA}
145-
externalLink={LinkCreationService.grafana.createDashboardLink(
146-
QuickLinksURLS?.[SYSTEM_QUICK_LINKS.GRAFANA],
146+
iconBase64={monitoringQuickLink?.spec?.icon}
147+
enabledText="Open Metrics"
148+
externalLink={LinkCreationService.monitoring.createDashboardLink(
149+
monitoringQuickLink?.metadata?.labels[QUICK_LINK_LABEL_SELECTOR_TYPE],
150+
QuickLinksURLS?.[SYSTEM_QUICK_LINKS.MONITORING],
147151
stage.spec.namespace
148152
)}
149-
QuickLinkComponent={grafanaQuickLink}
153+
QuickLinkComponent={monitoringQuickLink}
150154
size="small"
151155
/>
152156
<QuickLink
153157
name={{
154-
label: SYSTEM_QUICK_LINKS_LABELS[SYSTEM_QUICK_LINKS.KIBANA],
155-
value: SYSTEM_QUICK_LINKS.KIBANA,
158+
label: SYSTEM_QUICK_LINKS_LABELS[SYSTEM_QUICK_LINKS.LOGGING],
159+
value: SYSTEM_QUICK_LINKS.LOGGING,
156160
}}
157-
icon={ICONS.KIBANA}
158-
externalLink={LinkCreationService.kibana.createDashboardLink(
159-
QuickLinksURLS?.[SYSTEM_QUICK_LINKS.KIBANA],
161+
icon={ICONS.OPENSEARCH}
162+
iconBase64={loggingQuickLink?.spec?.icon}
163+
enabledText="Open Logs"
164+
externalLink={LinkCreationService.logging.createDashboardLink(
165+
loggingQuickLink?.metadata?.labels[QUICK_LINK_LABEL_SELECTOR_TYPE],
166+
QuickLinksURLS?.[SYSTEM_QUICK_LINKS.LOGGING],
160167
stage.spec.namespace
161168
)}
162-
QuickLinkComponent={kibanaQuickLink}
169+
QuickLinkComponent={loggingQuickLink}
163170
size="small"
164171
/>
165172
</Stack>

‎src/pages/configuration/pages/clusters/view.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -152,8 +152,8 @@ export const PageView = () => {
152152
cursor: singleItem ? 'default' : 'pointer',
153153
}}
154154
>
155-
<Grid container spacing={3} alignItems={'center'}>
156-
<Grid item xs={12}>
155+
<Grid container spacing={1} alignItems={'center'}>
156+
<Grid item>
157157
<Typography variant={'h6'} component="div">
158158
{secret.metadata.name}
159159
</Typography>
@@ -177,6 +177,7 @@ export const PageView = () => {
177177
<ManageClusterSecret
178178
formData={{
179179
currentElement: secret,
180+
ownerReference,
180181
mode: FORM_MODES.EDIT,
181182
handleClosePlaceholder: handleCloseCreateDialog,
182183
permissions,
@@ -300,6 +301,7 @@ export const PageView = () => {
300301
component: (
301302
<ManageClusterSecret
302303
formData={{
304+
ownerReference: null,
303305
mode: FORM_MODES.CREATE,
304306
handleClosePlaceholder: handleCloseCreateDialog,
305307
permissions,

‎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,

0 commit comments

Comments
 (0)