Skip to content

Commit

Permalink
[v1.73] Graph context menu fixed + downgrade openshift-sdk to support…
Browse files Browse the repository at this point in the history 
… OCP 4.12+ (#263)

* Align frontend runtime libraries with Kiali application v1.73 (#261)

* Copy of Kiali frontend source code
Kiali frontend source originated from:
* git ref:    v1.73
* git commit: 1ac06a5ad1b2e4a04e2da057b00b4d1c96a85f93
* GitHub URL: https://github.com/kiali/kiali/tree/1ac06a5ad1b2e4a04e2da057b00b4d1c96a85f93/frontend/src

Signed-off-by: Fernando Hoyos <fhoyosle@redhat.com>

* Update frontend libraries

* Downgrade openshift-console libraries to support OCP 4.12+

---------

Signed-off-by: Fernando Hoyos <fhoyosle@redhat.com>

* Upgrade axios library

* Copy of Kiali frontend source code
Kiali frontend source originated from:
* git ref:    v1.73
* git commit: e0589b3dfac102a5299451b7d3c29ae16ac7ce85
* GitHub URL: https://github.com/kiali/kiali/tree/e0589b3dfac102a5299451b7d3c29ae16ac7ce85/frontend/src

Signed-off-by: Fernando Hoyos <fhoyosle@redhat.com>

* useParams working for OCP 4.14+

* Remove resolutions section - outdated

---------

Signed-off-by: Fernando Hoyos <fhoyosle@redhat.com>
  • Loading branch information
@ferhoyos
ferhoyos committed Apr 1, 2024
1 parent 8acd1dd commit 3353fdb
Show file tree
Hide file tree
Showing 23 changed files with 362 additions and 639 deletions.
40 changes: 40 additions & 0 deletions plugin/console-extensions.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,46 @@
"component": { "$codeRef": "GraphPage" }
}
},
{
"type": "console.page/route",
"properties": {
"exact": true,
"path": ["/ossmconsole/graph/ns/:namespace/aggregates/:aggregate/:aggregateValue"],
"component": { "$codeRef": "GraphPage" }
}
},
{
"type": "console.page/route",
"properties": {
"exact": true,
"path": ["/ossmconsole/graph/ns/:namespace/applications/:app/versions/:version"],
"component": { "$codeRef": "GraphPage" }
}
},
{
"type": "console.page/route",
"properties": {
"exact": true,
"path": ["/ossmconsole/graph/ns/:namespace/applications/:app"],
"component": { "$codeRef": "GraphPage" }
}
},
{
"type": "console.page/route",
"properties": {
"exact": true,
"path": ["/ossmconsole/graph/ns/:namespace/services/:service"],
"component": { "$codeRef": "GraphPage" }
}
},
{
"type": "console.page/route",
"properties": {
"exact": true,
"path": ["/ossmconsole/graph/ns/:namespace/workloads/:workload"],
"component": { "$codeRef": "GraphPage" }
}
},
{
"type": "console.navigation/href",
"properties": {
Expand Down
28 changes: 10 additions & 18 deletions plugin/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,20 +27,19 @@
"pre-commit": "yarn run pretty-quick --staged --no-restage --bail --pattern \"**/*.{ts,tsx,scss,json}\" && npm run lint:precommit"
},
"dependencies": {
"@openshift-console/dynamic-plugin-sdk": "^0.0.19",
"@openshift-console/dynamic-plugin-sdk": "0.0.18",
"@patternfly/patternfly": "4.224.2",
"@patternfly/react-charts": "6.94.18",
"@patternfly/react-core": "4.276.6",
"@patternfly/react-table": "4.112.39",
"@patternfly/react-tokens": "4.94.6",
"@patternfly/react-topology": "4.91.27",
"axios": "^0.21.4",
"axios": "^1.6.8",
"bootstrap-slider-without-jquery": "10.0.0",
"cy-node-html-label": "2.0.0",
"cytoscape": "3.15.5",
"cytoscape-canvas": "3.0.1",
"cytoscape-popper": "1.0.7",
"dagre": "0.8.5",
"dagre": "0.8.2",
"deep-freeze": "0.0.1",
"eventemitter3": "4.0.7",
"js-yaml": "^3.13.1",
Expand All @@ -59,31 +58,31 @@
"react-router": "5.2.0",
"react-router-dom": "5.2.0",
"react-virtualized": "9.x",
"redux": "4.0.3",
"redux": "4.0.1",
"redux-persist": "5.10.0",
"redux-persist-transform-filter": "0.0.18",
"redux-thunk": "2.4.1",
"redux-persist-transform-filter": "^0.0.22",
"redux-thunk": "2.4.0",
"regression": "^2.0.1",
"reselect": "4.0.0",
"screenfull": "5.0.2",
"tippy.js": "3.4.1",
"typesafe-actions": "^4.2.1",
"typestyle": "^2.4.0",
"victory": "36.3.0",
"victory-box-plot": "^36.6.7",
"visibilityjs": "2.0.2"
},
"devDependencies": {
"@babel/core": "^7.16.0",
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@badeball/cypress-cucumber-preprocessor": "^19.2.0",
"@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
"@openshift-console/dynamic-plugin-sdk-webpack": "^0.0.10",
"@openshift-console/dynamic-plugin-sdk-webpack": "0.0.9",
"@types/cytoscape": "3.14.0",
"@types/enzyme": "3.10.5",
"@types/jest": "23.3.10",
"@types/js-yaml": "^4.0.5",
"@types/lodash-es": "4.17.x",
"@types/node": "12.12.14",
"@types/node": "^18.17.14",
"@types/react": "^17.0.1",
"@types/react-dom": "^17.0.1",
"@types/react-redux": "7.1.7",
Expand All @@ -93,7 +92,7 @@
"@typescript-eslint/eslint-plugin": "^5.3.0",
"@typescript-eslint/parser": "^5.3.0",
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
"axios-mock-adapter": "1.16.0",
"axios-mock-adapter": "^1.22.0",
"babel-loader": "^9.1.2",
"babel-preset-react-app": "^10.0.1",
"css-loader": "^6.5.1",
Expand Down Expand Up @@ -126,13 +125,6 @@
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.5.0"
},
"resolutions": {
"async": "^3.2.2",
"json-schema": "^0.4.0",
"minimist": "^1.2.6",
"nth-check": "^2.0.1",
"postcss": "^8.4.12"
},
"engines": {
"node": ">=18.0.0",
"yarn": ">=1.0.0"
Expand Down
4 changes: 2 additions & 2 deletions plugin/src/kiali/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@
Copy of Kiali frontend source code
Kiali frontend source originated from:
* git ref: v1.73
* git commit: 05eecc1f81990aa38fa855aa400caf0398c5499a
* GitHub URL: https://github.com/kiali/kiali/tree/05eecc1f81990aa38fa855aa400caf0398c5499a/frontend/src
* git commit: e0589b3dfac102a5299451b7d3c29ae16ac7ce85
* GitHub URL: https://github.com/kiali/kiali/tree/e0589b3dfac102a5299451b7d3c29ae16ac7ce85/frontend/src
11 changes: 10 additions & 1 deletion plugin/src/kiali/components/IstioActions/IstioActionsNamespaceDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { serverConfig } from '../../config';
import { NEW_ISTIO_RESOURCE } from '../../pages/IstioConfigNew/IstioConfigNewPage';
import { K8SGATEWAY } from '../../pages/IstioConfigNew/K8sGatewayForm';
import { groupMenuStyle } from 'styles/DropdownStyles';
import { isParentKiosk, kioskContextMenuAction } from 'components/Kiosk/KioskActions';
import { store } from 'store/ConfigStore';

type Props = {};

Expand Down Expand Up @@ -38,7 +40,14 @@ export class IstioActionsNamespaceDropdown extends React.Component<Props, State>
};

onClickCreate = (type: string) => {
history.push('/istio/new/' + type);
const kiosk = store.getState().globalState.kiosk;
const newUrl = `/istio/new/${type}`;

if (isParentKiosk(kiosk)) {
kioskContextMenuAction(newUrl);
} else {
history.push(newUrl);
}
};

render() {
Expand Down
14 changes: 11 additions & 3 deletions plugin/src/kiali/components/Metrics/CustomMetrics.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ import { bindActionCreators } from 'redux';
import { UserSettingsActions } from '../../actions/UserSettingsActions';
import { timeRangeSelector } from '../../store/Selectors';
import { TimeDurationIndicator } from '../Time/TimeDurationIndicator';
import { isParentKiosk, kioskContextMenuAction } from 'components/Kiosk/KioskActions';

type MetricsState = {
cluster?: string;
Expand All @@ -66,6 +67,7 @@ type CustomMetricsProps = RouteComponentProps<{}> & {

type ReduxProps = {
jaegerIntegration: boolean;
kiosk: string;
timeRange: TimeRange;
setTimeRange: (range: TimeRange) => void;
};
Expand Down Expand Up @@ -207,9 +209,14 @@ class CustomMetricsComponent extends React.Component<Props, MetricsState> {
} else if ('traceId' in datum) {
const traceId = datum.traceId;
const spanId = datum.spanId;
history.push(
`/namespaces/${this.props.namespace}/applications/${this.props.app}?tab=traces&${URLParam.JAEGER_TRACE_ID}=${traceId}&${URLParam.JAEGER_SPAN_ID}=${spanId}`
);

const traceUrl = `/namespaces/${this.props.namespace}/applications/${this.props.app}?tab=traces&${URLParam.JAEGER_TRACE_ID}=${traceId}&${URLParam.JAEGER_SPAN_ID}=${spanId}`;

if (isParentKiosk(this.props.kiosk)) {
kioskContextMenuAction(traceUrl);
} else {
history.push(traceUrl);
}
}
};

Expand Down Expand Up @@ -366,6 +373,7 @@ class CustomMetricsComponent extends React.Component<Props, MetricsState> {
const mapStateToProps = (state: KialiAppState) => {
return {
jaegerIntegration: state.jaegerState.info ? state.jaegerState.info.integration : false,
kiosk: state.globalState.kiosk,
timeRange: timeRangeSelector(state)
};
};
Expand Down
14 changes: 11 additions & 3 deletions plugin/src/kiali/components/Metrics/IstioMetrics.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import { refreshIntervalSelector, timeRangeSelector } from 'store/Selectors';
import { UserSettingsActions } from 'actions/UserSettingsActions';
import { KialiCrippledFeatures } from 'types/ServerConfig';
import { TimeDurationIndicator } from '../Time/TimeDurationIndicator';
import { isParentKiosk, kioskContextMenuAction } from 'components/Kiosk/KioskActions';

type MetricsState = {
crippledFeatures?: KialiCrippledFeatures;
Expand Down Expand Up @@ -60,6 +61,7 @@ type IstioMetricsProps = ObjectId &

type ReduxProps = {
jaegerIntegration: boolean;
kiosk: string;
timeRange: TimeRange;
refreshInterval: IntervalInMilliseconds;
setTimeRange: (range: TimeRange) => void;
Expand Down Expand Up @@ -252,9 +254,14 @@ class IstioMetricsComponent extends React.Component<Props, MetricsState> {
: this.props.objectType === MetricsObjectTypes.SERVICE
? 'services'
: 'workloads';
history.push(
`/namespaces/${this.props.namespace}/${domain}/${this.props.object}?tab=traces&${URLParam.JAEGER_TRACE_ID}=${traceId}&${URLParam.JAEGER_SPAN_ID}=${spanId}`
);

const traceUrl = `/namespaces/${this.props.namespace}/${domain}/${this.props.object}?tab=traces&${URLParam.JAEGER_TRACE_ID}=${traceId}&${URLParam.JAEGER_SPAN_ID}=${spanId}`;

if (isParentKiosk(this.props.kiosk)) {
kioskContextMenuAction(traceUrl);
} else {
history.push(traceUrl);
}
}
};

Expand Down Expand Up @@ -413,6 +420,7 @@ class IstioMetricsComponent extends React.Component<Props, MetricsState> {
const mapStateToProps = (state: KialiAppState) => {
return {
jaegerIntegration: state.jaegerState.info ? state.jaegerState.info.integration : false,
kiosk: state.globalState.kiosk,
timeRange: timeRangeSelector(state),
refreshInterval: refreshIntervalSelector(state)
};
Expand Down
21 changes: 19 additions & 2 deletions plugin/src/kiali/pages/Graph/GraphToolbar/GraphToolbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,13 @@ import { GraphSecondaryMasthead } from './GraphSecondaryMasthead';
import { INITIAL_USER_SETTINGS_STATE } from 'reducers/UserSettingsState';
import { GraphReset } from './GraphReset';
import { GraphFindPF } from './GraphFindPF';
import { isParentKiosk, kioskContextMenuAction } from 'components/Kiosk/KioskActions';

type ReduxProps = {
activeNamespaces: Namespace[];
edgeLabels: EdgeLabelMode[];
graphType: GraphType;
kiosk: string;
node?: NodeParamsType;
rankBy: RankMode[];
replayActive: boolean;
Expand Down Expand Up @@ -261,22 +263,37 @@ class GraphToolbarComponent extends React.PureComponent<GraphToolbarProps> {
!this.props.summaryData ||
(this.props.summaryData.summaryType !== 'node' && this.props.summaryData.summaryType !== 'box')
) {
history.push(`/${route}/namespaces`);
const returnUrl = `/${route}/namespaces`;

if (isParentKiosk(this.props.kiosk)) {
kioskContextMenuAction(returnUrl);
} else {
history.push(returnUrl);
}

return;
}

const selector = this.props.isPF
? this.props.summaryData!.summaryTarget.getId()
: `node[id = "${this.props.summaryData!.summaryTarget.data(NodeAttr.id)}"]`;
this.props.setNode(undefined);
history.push(`/${route}/namespaces?focusSelector=${encodeURI(selector)}`);

const returnUrl = `/${route}/namespaces?focusSelector=${encodeURI(selector)}`;

if (isParentKiosk(this.props.kiosk)) {
kioskContextMenuAction(returnUrl);
} else {
history.push(returnUrl);
}
};
}

const mapStateToProps = (state: KialiAppState) => ({
activeNamespaces: activeNamespacesSelector(state),
edgeLabels: edgeLabelsSelector(state),
graphType: graphTypeSelector(state),
kiosk: state.globalState.kiosk,
node: state.graph.node,
rankBy: state.graph.toolbarState.rankBy,
replayActive: replayActiveSelector(state),
Expand Down
Loading

0 comments on commit 3353fdb

Please sign in to comment.