Skip to content

Commit 81555f0

Browse files
keithchongkeithchong
authored
Merge pull request #91 from keithchong/5872-5873-5874-6978-PatternFlyUpgrade-TopologySupport
feat: Rollouts in Topology View (#5872, #5873, #5874, #6978)
2 parents d858af0 + 4016e63 commit 81555f0

40 files changed

+7639
-1726
lines changed

‎console-extensions.json‎

Lines changed: 164 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
1-
/**
2-
* This file declares all extensions contributed by the plugin.
3-
*
4-
* Depending on extension 'type', the 'properties' object may contain code references, encoded
5-
* as object literals { $codeRef: string }. The '$codeRef' value should be formatted as either
6-
* 'moduleName.exportName' (referring to a named export) or 'moduleName' (referring to the
7-
* 'default' export). Only the plugin's exposed modules may be used in code references.
8-
*
9-
* TODO: update properties.name and properties.href
10-
*/
111
[
122
{
133
"properties": {
@@ -48,5 +38,169 @@
4838
"exact": false,
4939
"path": "/envdynamic/:appName"
5040
}
41+
},
42+
{
43+
"type": "console.flag/hookProvider",
44+
"properties": {
45+
"handler": { "$codeRef": "gitopsFlags.detectOpenShiftVersion" }
46+
}
47+
},
48+
{
49+
"type": "console.flag/model",
50+
"properties": {
51+
"model": {
52+
"group": "argoproj.io",
53+
"version": "v1alpha1",
54+
"kind": "Rollout"
55+
},
56+
"flag": "ARGO_ROLLOUT"
57+
}
58+
},
59+
{
60+
"type": "console.topology/data/factory",
61+
"properties": {
62+
"id": "gitops-rollouts-topology-data-factory-dynamic-plugin",
63+
"priority": "300",
64+
"resources": {
65+
"rollouts": {
66+
"model": {
67+
"group": "argoproj.io",
68+
"version": "v1alpha1",
69+
"kind": "Rollout"
70+
},
71+
"opts": { "isList": true, "optional": true, "namespaced": true }
72+
}
73+
},
74+
"getDataModel": {
75+
"$codeRef": "topology.getRolloutTopologyDataModel"
76+
}
77+
},
78+
"flags": {
79+
"required": ["ARGO_ROLLOUT", "GITOPS_ENABLE_TOPOLOGY"]
80+
}
81+
},
82+
{
83+
"type": "console.topology/component/factory",
84+
"properties": {
85+
"getFactory": {
86+
"$codeRef": "topology.getRolloutViewComponentFactory"
87+
}
88+
},
89+
"flags": {
90+
"required": ["ARGO_ROLLOUT", "GITOPS_ENABLE_TOPOLOGY"]
91+
}
92+
},
93+
{
94+
"type": "console.topology/details/tab",
95+
"properties": {
96+
"id": "gitops-rollouts-topology-side-bar-tab-details",
97+
"label": "Details",
98+
"priority": "1000",
99+
"insertBefore": "topology-side-bar-tab-resource"
100+
},
101+
"flags": {
102+
"required": ["ARGO_ROLLOUT", "GITOPS_ENABLE_TOPOLOGY"]
103+
}
104+
},
105+
{
106+
"type": "console.topology/details/tab",
107+
"properties": {
108+
"id": "gitops-rollouts-topology-side-bar-tab-overview",
109+
"label": "Overview"
110+
},
111+
"flags": {
112+
"required": ["ARGO_ROLLOUT", "GITOPS_ENABLE_TOPOLOGY"]
113+
}
114+
},
115+
{
116+
"type": "console.topology/details/tab-section",
117+
"properties": {
118+
"id": "gitops-rollouts-topology-sidebar-details-tab-section",
119+
"tab": "gitops-rollouts-topology-side-bar-tab-details",
120+
"provider": { "$codeRef": "topology.useRolloutSideBarDetails" },
121+
"insertBefore": "gitops-rollouts-topology-sidebar-resource-tab-section"
122+
},
123+
"flags": {
124+
"required": ["ARGO_ROLLOUT", "GITOPS_ENABLE_TOPOLOGY"]
125+
}
126+
},
127+
{
128+
"type": "console.topology/details/tab-section",
129+
"properties": {
130+
"id": "gitops-rollouts-topology-sidebar-resource-tab-section",
131+
"tab": "topology-side-bar-tab-resource",
132+
"provider": { "$codeRef": "topology.useOperatorBackedPanelResourceSection" }
133+
},
134+
"flags": {
135+
"required": ["ARGO_ROLLOUT", "GITOPS_ENABLE_TOPOLOGY"]
136+
}
137+
},
138+
{
139+
"type": "console.action/provider",
140+
"properties": {
141+
"contextId": "topology-actions",
142+
"provider": { "$codeRef": "topology.useGitOpsActionProviderForTopology" }
143+
},
144+
"flags": {
145+
"required": ["ARGO_ROLLOUT", "GITOPS_ENABLE_TOPOLOGY"]
146+
}
147+
},
148+
{
149+
"type": "console.action/provider",
150+
"properties": {
151+
"contextId": "topology-context-actions",
152+
"provider": { "$codeRef": "topology.useTopologyActionProvider" }
153+
},
154+
"flags": {
155+
"required": ["ARGO_ROLLOUT", "GITOPS_ENABLE_TOPOLOGY"]
156+
}
157+
},
158+
{
159+
"type": "console.model-metadata",
160+
"properties": {
161+
"model": {
162+
"group": "argoproj.io",
163+
"version": "v1alpha1",
164+
"kind": "Rollout"
165+
},
166+
"badge": "dev",
167+
"color": "#E9654B",
168+
"label": "Argo Rollout",
169+
"labelPlural": "Argo Rollouts",
170+
"abbr": "AR"
171+
},
172+
"flags": {
173+
"required": ["ARGO_ROLLOUT", "GITOPS_ENABLE_TOPOLOGY"]
174+
}
175+
},
176+
{
177+
"type": "console.model-metadata",
178+
"properties": {
179+
"model": {
180+
"group": "argoproj.io",
181+
"version": "v1alpha1",
182+
"kind": "RolloutManager"
183+
},
184+
"badge": "dev",
185+
"color": "#E9654B",
186+
"label": "Argo Rollout Manager",
187+
"labelPlural": "Argo Rollout Managers",
188+
"abbr": "ARM"
189+
},
190+
"flags": {
191+
"required": ["ARGO_ROLLOUT", "GITOPS_ENABLE_TOPOLOGY"]
192+
}
193+
},
194+
{
195+
"type": "console.topology/decorator/provider",
196+
"properties": {
197+
"id": "argo-rollout-node-decorator",
198+
"priority": 100,
199+
"quadrant": "upperRight",
200+
"decorator": { "$codeRef": "topology.getArgoRolloutNodeDecorator" }
201+
},
202+
"flags": {
203+
"required": ["ARGO_ROLLOUT", "GITOPS_ENABLE_TOPOLOGY"]
204+
}
51205
}
52206
]

‎package.json‎

Lines changed: 42 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -16,25 +16,24 @@
1616
"lint": "eslint ./src --fix"
1717
},
1818
"devDependencies": {
19-
"@openshift-console/dynamic-plugin-sdk": "0.0.21",
20-
"@openshift-console/dynamic-plugin-sdk-internal": "0.0.11",
21-
"@openshift-console/dynamic-plugin-sdk-webpack": "0.0.11",
22-
"@openshift-console/plugin-shared": "^0.0.1",
23-
"@patternfly/quickstarts": "2.4.0",
24-
"@patternfly/react-charts": "6.94.19",
25-
"@patternfly/react-core": "4.276.8",
26-
"@patternfly/react-icons": "3.15.17",
27-
"@patternfly/react-table": "4.113.0",
28-
"@patternfly/react-tokens": "4.94.6",
29-
"@patternfly/react-topology": "5.0.0",
30-
"@types/classnames": "^2.2.7",
19+
"@openshift-console/dynamic-plugin-sdk": "^4.19.0-prerelease.2",
20+
"@openshift-console/dynamic-plugin-sdk-internal": "^4.19.0-prerelease.2",
21+
"@openshift-console/dynamic-plugin-sdk-webpack": "^4.19.0-prerelease.2",
22+
"@openshift-console/plugin-shared": "^0.0.3",
23+
"@patternfly/quickstarts": "^6.2.0",
24+
"@patternfly/react-charts": "^8.2.0",
25+
"@patternfly/react-core": "^6.2.0",
26+
"@patternfly/react-icons": "^6.2.0",
27+
"@patternfly/react-table": "^6.2.0",
28+
"@patternfly/react-tokens": "6.2.0",
29+
"@patternfly/react-topology": "^6.2.0",
30+
"@types/classnames": "^2.3.1",
3131
"@types/git-url-parse": "^9.0.0",
3232
"@types/node": "^17.0.21",
33-
"@types/react": "^17.0.37",
34-
"@types/react-helmet": "^6.1.4",
35-
"@types/react-redux": "7.1.24",
36-
"@types/react-router-dom": "5.3.3",
33+
"@types/react": "17.0.1",
34+
"@types/react-redux": "7.1.34",
3735
"@types/webpack-dev-server": "^4.7.2",
36+
"@types/semver": "7.7.0",
3837
"@typescript-eslint/eslint-plugin": "^5.15.0",
3938
"@typescript-eslint/parser": "^5.15.0",
4039
"copy-webpack-plugin": "12.0.2",
@@ -50,54 +49,65 @@
5049
"eslint-plugin-react": "^7.29.4",
5150
"eslint-plugin-react-hooks": "^4.3.0",
5251
"eslint-plugin-simple-import-sort": "^7.0.0",
53-
"file-loader": "2.x",
52+
"file-loader": "6.2.0",
5453
"i18next": "^19.8.3",
5554
"i18next-parser": "^3.3.0",
5655
"lodash-es": "^4.17.21",
5756
"prettier": "^2.6.0",
58-
"prop-types": "^15.6.1",
59-
"react": "^17.0.2",
60-
"react-dom": "^17.0.2",
61-
"react-helmet": "^6.1.0",
62-
"react-i18next": "^11.14.3",
57+
"prop-types": "15.7.x",
58+
"http-server": "0.12.x",
59+
"marked": "15.0.6",
60+
"react": "17.0.1",
61+
"react-dom": "17.0.1",
62+
"react-i18next": "^11.7.3",
6363
"sass": "^1.42.1",
6464
"sass-loader": "^10.1.1",
6565
"style-loader": "^2.0.0",
6666
"ts-loader": "^9.5.1",
6767
"ts-node": "^10.7.0",
68-
"typescript": "4.8.4",
69-
"webpack": "^5.94.0",
68+
"typescript": "5.8.3",
69+
"webpack": "^5.1.0",
7070
"webpack-cli": "^4.9.2",
7171
"webpack-dev-server": "^4.9.3"
7272
},
7373
"resolutions": {
7474
"glob-parent": "^5.1.2",
7575
"showdown": "^2.1.0",
76-
"express": "4.21.0"
76+
"express": "4.21.0",
77+
"@types/jest": "21.x",
78+
"hosted-git-info": "^3.0.8",
79+
"jquery": "3.5.1",
80+
"lodash-es": "^4.17.21",
81+
"minimist": "1.2.5",
82+
"ua-parser-js": "^0.7.24",
83+
"jest": "21.x",
84+
"postcss": "^8.2.13"
7785
},
7886
"consolePlugin": {
7987
"name": "gitops-plugin",
80-
"version": "0.0.14",
88+
"version": "0.0.15",
8189
"displayName": "GitOps Plugin",
8290
"description": "OpenShift Console plugin for GitOps.",
8391
"exposedModules": {
8492
"environments": "./components/ApplicationListPage",
8593
"detailsPage": "./components/EnvironmentDetailsPageTabs",
86-
"gitopsFlags": "./components/utils/flags"
94+
"gitopsFlags": "./components/utils/flags",
95+
"topology": "./components/topology"
8796
},
8897
"dependencies": {
8998
"@console/pluginAPI": "*"
9099
}
91100
},
92101
"dependencies": {
93-
"classnames": "2.x",
102+
"classnames": "^2.3.2",
94103
"git-url-parse": "^13.1.0",
95-
"react": "^17.0.2",
96-
"react-redux": "7.2.2",
104+
"react": "17.0.1",
105+
"react-helmet": "^6.1.0",
106+
"react-redux": "7.2.9",
97107
"react-router": "5.3.x",
98108
"react-router-dom": "5.3.x",
99-
"react-router-dom-v5-compat": "^6.11.2",
100-
"react-router-hash-link": "^2.0.0",
109+
"react-router-dom-v5-compat": "^6.22.0",
110+
"react-router-hash-link": "2.4.3",
101111
"redux": "4.0.1"
102112
},
103113
"//TODO": [

‎src/components/EnvironmentDetailsPageTabs.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import Helmet from 'react-helmet';
2+
import { Helmet } from 'react-helmet';
33
import { useTranslation } from 'react-i18next';
44
import { useParams } from 'react-router-dom-v5-compat';
55

‎src/components/EnvironmentEmptyState.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
11
import * as React from 'react';
22

3-
import {
4-
EmptyState,
5-
EmptyStateBody,
6-
EmptyStateIcon,
7-
EmptyStateVariant,
8-
} from '@patternfly/react-core';
3+
import { EmptyState, EmptyStateBody, EmptyStateVariant } from '@patternfly/react-core';
94
import { CubesIcon } from '@patternfly/react-icons';
105

116
interface EnvironmentEmptyStateProps {
127
emptyStateMsg: string;
138
}
149

10+
// TODO find alternative for <EmptyStateIcon variant="container" component={CubesIcon} />
1511
const EnvironmentEmptyState: React.FC<EnvironmentEmptyStateProps> = ({ emptyStateMsg }) => (
16-
<EmptyState variant={EmptyStateVariant.full}>
17-
<EmptyStateIcon variant="container" component={CubesIcon} />
12+
<EmptyState variant={EmptyStateVariant.full} icon={CubesIcon}>
1813
<EmptyStateBody>{emptyStateMsg}</EmptyStateBody>
1914
</EmptyState>
2015
);

‎src/components/details/EnvironmentDetails.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import { useTranslation } from 'react-i18next';
3-
import { Link } from 'react-router-dom';
3+
import { Link } from 'react-router-dom-v5-compat';
44
import * as _ from 'lodash';
55

66
import { Timestamp, useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';

‎src/components/details/RenderStatusLabel.tsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,23 +17,15 @@ const RenderStatusLabel: React.FC<RenderStatusLabelProps> = ({ status }) => {
1717
const { t } = useTranslation('plugin__gitops-plugin');
1818
switch (status) {
1919
case 'Synced':
20-
return (
21-
<Label icon={<GreenCheckCircleIcon />} isTruncated>
22-
{t('plugin__gitops-plugin~Synced')}
23-
</Label>
24-
);
20+
return <Label icon={<GreenCheckCircleIcon />}>{t('plugin__gitops-plugin~Synced')}</Label>;
2521
case 'OutOfSync':
2622
return (
27-
<Label icon={<YellowExclamationTriangleIcon />} isTruncated>
23+
<Label icon={<YellowExclamationTriangleIcon />}>
2824
{t('plugin__gitops-plugin~OutOfSync')}
2925
</Label>
3026
);
3127
case 'Unknown':
32-
return (
33-
<Label icon={<GrayUnknownIcon />} isTruncated>
34-
{t('plugin__gitops-plugin~Unknown')}
35-
</Label>
36-
);
28+
return <Label icon={<GrayUnknownIcon />}>{t('plugin__gitops-plugin~Unknown')}</Label>;
3729
default:
3830
return null;
3931
}

‎src/components/details/ResourceRow.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { useTranslation } from 'react-i18next';
33

44
import { Split, SplitItem, Tooltip } from '@patternfly/react-core';
55
import { ExclamationTriangleIcon, HeartBrokenIcon } from '@patternfly/react-icons';
6-
import RedColor from '@patternfly/react-tokens/dist/js/global_danger_color_100';
7-
import YellowColor from '@patternfly/react-tokens/dist/js/global_warning_color_100';
6+
import RedColor from '@patternfly/react-tokens/dist/esm/t_global_color_status_danger_100';
7+
import YellowColor from '@patternfly/react-tokens/dist/esm/t_global_color_status_warning_100';
88

99
import { GitOpsEnvironmentService, GitOpsHealthResources } from '../utils/gitops-types';
1010

‎src/components/import/badges/Badge.scss‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
.gitops-plugin__preview-badge {
2-
&.pf-c-label {
3-
--pf-c-label--BackgroundColor: #d93f00;
4-
--pf-c-label--BorderRadius: var(--pf-global--BorderRadius--sm);
5-
--pf-c-label__content--before--BorderWidth: 0;
6-
--pf-c-label__content--before--BorderColor: transparent;
7-
--pf-c-label__content--Color: var(--pf-global--Color--light-100);
8-
font-family: var(--pf-global--FontFamily--sans-serif); // Use RedHatText even when inside an <h1>
2+
&.pf-v6-c-label {
3+
--pf-v6-c-label--BackgroundColor: #d93f00;
4+
--pf-v6-c-label--Color: var(--pf-t--color--white);
95
}
106
}

0 commit comments

Comments
 (0)