From 8e5d774afdabb3888654bb28e3b69cb98f4def2c Mon Sep 17 00:00:00 2001 From: Jeffrey Phillips Date: Mon, 12 Feb 2024 07:55:40 -0500 Subject: [PATCH 1/2] fix(topology): fix to layout nodes correctly on first load --- .../TopologyViewWorkloadComponent.test.tsx | 1 + .../TopologyViewWorkloadComponent.tsx | 31 ++++++++++++------- 2 files changed, 20 insertions(+), 12 deletions(-) diff --git a/plugins/topology/src/components/Topology/TopologyViewWorkloadComponent.test.tsx b/plugins/topology/src/components/Topology/TopologyViewWorkloadComponent.test.tsx index 9cc828eac5..04518e94b8 100644 --- a/plugins/topology/src/components/Topology/TopologyViewWorkloadComponent.test.tsx +++ b/plugins/topology/src/components/Topology/TopologyViewWorkloadComponent.test.tsx @@ -24,6 +24,7 @@ jest.mock('@patternfly/react-topology', () => ({ useEventListener: () => {}, action: () => {}, createTopologyControlButtons: () => {}, + observer: (a: React.FC) => a, VisualizationSurface: () =>
VisualizationSurface
, TopologyView: () =>
TopologyView
, })); diff --git a/plugins/topology/src/components/Topology/TopologyViewWorkloadComponent.tsx b/plugins/topology/src/components/Topology/TopologyViewWorkloadComponent.tsx index 2aecaa701f..d782bef181 100644 --- a/plugins/topology/src/components/Topology/TopologyViewWorkloadComponent.tsx +++ b/plugins/topology/src/components/Topology/TopologyViewWorkloadComponent.tsx @@ -4,6 +4,7 @@ import { InfoCard, Progress } from '@backstage/core-components'; import { BaseNode, + observer, SELECTION_EVENT, SelectionEventListener, TopologyView, @@ -36,6 +37,9 @@ const TopologyViewWorkloadComponent = ({ const { loaded, dataModel } = useWorkloadsWatcher(); const { clusters, selectedClusterErrors, responseError } = React.useContext(K8sResourcesContext); + const graphDimensions = controller.hasGraph() + ? controller.getGraph().getDimensions() + : undefined; const [ sideBar, sideBarOpen, @@ -51,18 +55,21 @@ const TopologyViewWorkloadComponent = ({ ]; React.useEffect(() => { - if (loaded && dataModel) { - const model = { - graph: { - id: 'g1', - type: 'graph', - layout, - }, - ...dataModel, - }; - controller.fromModel(model, true); + const model = { + graph: { + id: 'g1', + type: 'graph', + layout, + }, + }; + controller.fromModel(model); + }, [controller]); + + React.useEffect(() => { + if (graphDimensions && loaded && dataModel) { + controller.fromModel(dataModel, true); } - }, [layout, loaded, dataModel, controller]); + }, [graphDimensions, layout, loaded, dataModel, controller]); React.useEffect(() => { if (dataModel) { @@ -131,4 +138,4 @@ const TopologyViewWorkloadComponent = ({ ); }; -export default TopologyViewWorkloadComponent; +export default observer(TopologyViewWorkloadComponent); From e750005e9c91707dc68028fc7ea5f8cafa922e6c Mon Sep 17 00:00:00 2001 From: Jaivardhan Kumar Date: Mon, 12 Feb 2024 20:51:34 +0530 Subject: [PATCH 2/2] fix(topology): fixes test with mocks (#2) --- .../TopologyViewWorkloadComponent.test.tsx | 13 +++- .../Topology/TopologyWorkloadView.test.tsx | 4 + yarn.lock | 77 +++++++++++++++++++ 3 files changed, 90 insertions(+), 4 deletions(-) diff --git a/plugins/topology/src/components/Topology/TopologyViewWorkloadComponent.test.tsx b/plugins/topology/src/components/Topology/TopologyViewWorkloadComponent.test.tsx index 04518e94b8..a294c13c18 100644 --- a/plugins/topology/src/components/Topology/TopologyViewWorkloadComponent.test.tsx +++ b/plugins/topology/src/components/Topology/TopologyViewWorkloadComponent.test.tsx @@ -14,12 +14,17 @@ const mockUseWorkloadsWatcher = useWorkloadsWatcher as jest.Mock; jest.mock('@patternfly/react-topology', () => ({ useVisualizationController: () => ({ - getVisualization: () => ({ - getGraph: () => ({ - getElements: () => [], - }), + getGraph: () => ({ + getElements: () => [], + getDimensions: () => { + return { + width: 100, + height: 100, + }; + }, }), fromModel: () => {}, + hasGraph: () => true, }), useEventListener: () => {}, action: () => {}, diff --git a/plugins/topology/src/components/Topology/TopologyWorkloadView.test.tsx b/plugins/topology/src/components/Topology/TopologyWorkloadView.test.tsx index 502b0877b6..0d939baeca 100644 --- a/plugins/topology/src/components/Topology/TopologyWorkloadView.test.tsx +++ b/plugins/topology/src/components/Topology/TopologyWorkloadView.test.tsx @@ -14,6 +14,10 @@ jest.mock('@patternfly/react-topology', () => ({ })), })); +jest.mock('./TopologyViewWorkloadComponent', () => ({ + TopologyViewWorkloadComponent: () =>
TopologyViewWorkloadComponent
, +})); + jest.mock('../Graph/TopologyComponentFactory', () => ({ TopologyComponentFactory: () =>
TopologyComponentFactory
, })); diff --git a/yarn.lock b/yarn.lock index a0c8230476..20bf0328b5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3110,6 +3110,13 @@ dependencies: regenerator-runtime "^0.14.0" +"@babel/runtime@^7.23.9": + version "7.23.9" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7" + integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/template@^7.22.15", "@babel/template@^7.22.5": version "7.22.15" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38" @@ -8198,6 +8205,13 @@ dependencies: "@babel/runtime" "^7.23.6" +"@mui/icons-material@^5.15.8": + version "5.15.10" + resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.15.10.tgz#24f65945f8f02499e4da0213d6a12ac714305679" + integrity sha512-9cF8oUHZKo9oQ7EQ3pxPELaZuZVmphskU4OI6NiJNDVN7zcuvrEsuWjYo1Zh4fLiC39Nrvm30h/B51rcUjvSGA== + dependencies: + "@babel/runtime" "^7.23.9" + "@mui/material@^5.12.2": version "5.14.14" resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.14.tgz#e47f3992b609002cd57a71f70e829dc2d286028c" @@ -12200,6 +12214,18 @@ telejson "^7.2.0" tiny-invariant "^1.3.1" +"@storybook/channels@7.6.14": + version "7.6.14" + resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-7.6.14.tgz#32c3854208bd54d04ba816867bf442c9216f9997" + integrity sha512-tyrnnXTh7Ca6HbtzYtZGZmbUkC+eYPdot41+YDERMxXCnejd18BnsH/pyGW66GwgY079Q7uhdDFyM63ynZrt/A== + dependencies: + "@storybook/client-logger" "7.6.14" + "@storybook/core-events" "7.6.14" + "@storybook/global" "^5.0.0" + qs "^6.10.0" + telejson "^7.2.0" + tiny-invariant "^1.3.1" + "@storybook/cli@7.5.3": version "7.5.3" resolved "https://registry.yarnpkg.com/@storybook/cli/-/cli-7.5.3.tgz#127ae3bcad169bf8c3eb3e1e6c9d587ad5f57e81" @@ -12254,6 +12280,13 @@ dependencies: "@storybook/global" "^5.0.0" +"@storybook/client-logger@7.6.14": + version "7.6.14" + resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-7.6.14.tgz#98dfb0092ed77d61d2e159a4504f375f1dfb7deb" + integrity sha512-rHa2hLU+80BN5E58Shf1g09YS6QEEOk5hwMuJ4WJfAypMDYPjnIsOYUboHClkCA9TDCH/iVhyRSPy83NWN2MZg== + dependencies: + "@storybook/global" "^5.0.0" + "@storybook/codemod@7.5.3": version "7.5.3" resolved "https://registry.yarnpkg.com/@storybook/codemod/-/codemod-7.5.3.tgz#8a294b8d12f304a2a9db902848977147394d451c" @@ -12334,6 +12367,13 @@ dependencies: ts-dedent "^2.0.0" +"@storybook/core-events@7.6.14": + version "7.6.14" + resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-7.6.14.tgz#4ba595ea6df1bd760e8ed5c9ec8a39a722e09339" + integrity sha512-zuSMjOgju7WLFL+okTXVvOKKNzwqVGRVp5UhXeSikT4aXuVdpfepCfikkjntn12G1ybL7mfFCsBU2DV1lwwp6Q== + dependencies: + ts-dedent "^2.0.0" + "@storybook/core-server@7.5.3": version "7.5.3" resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-7.5.3.tgz#23ea0757d6ffc0e9acc269b58efd7f75f5d781f6" @@ -12429,6 +12469,13 @@ dependencies: type-fest "^2.19.0" +"@storybook/csf@^0.1.2": + version "0.1.2" + resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.1.2.tgz#8e7452f0097507f5841b5ade3f5da1525bc9afb2" + integrity sha512-ePrvE/pS1vsKR9Xr+o+YwdqNgHUyXvg+1Xjx0h9LrVx7Zq4zNe06pd63F5EvzTbCbJsHj7GHr9tkiaqm7U8WRA== + dependencies: + type-fest "^2.19.0" + "@storybook/docs-mdx@^0.1.0": version "0.1.0" resolved "https://registry.yarnpkg.com/@storybook/docs-mdx/-/docs-mdx-0.1.0.tgz#33ba0e39d1461caf048b57db354b2cc410705316" @@ -12545,6 +12592,26 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" +"@storybook/preview-api@^7.5.3": + version "7.6.14" + resolved "https://registry.yarnpkg.com/@storybook/preview-api/-/preview-api-7.6.14.tgz#50d2794e269c5182f285aaf3a07d50a2e1cf6a54" + integrity sha512-CnUEkTUK3ei3vw4Ypa9EOxEO9lCKc3HvVHxXu4z6Caoe/hRUc10Q6Nj1A7brqok1QLZ304qc715XdYFMahDhyA== + dependencies: + "@storybook/channels" "7.6.14" + "@storybook/client-logger" "7.6.14" + "@storybook/core-events" "7.6.14" + "@storybook/csf" "^0.1.2" + "@storybook/global" "^5.0.0" + "@storybook/types" "7.6.14" + "@types/qs" "^6.9.5" + dequal "^2.0.2" + lodash "^4.17.21" + memoizerific "^1.11.3" + qs "^6.10.0" + synchronous-promise "^2.0.15" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + "@storybook/preview@7.5.3": version "7.5.3" resolved "https://registry.yarnpkg.com/@storybook/preview/-/preview-7.5.3.tgz#9abe434ea9fb280a7d2141b72be2958f7eb9cc5b" @@ -12657,6 +12724,16 @@ "@types/express" "^4.7.0" file-system-cache "2.3.0" +"@storybook/types@7.6.14": + version "7.6.14" + resolved "https://registry.yarnpkg.com/@storybook/types/-/types-7.6.14.tgz#3cb9bcbc3142000cbe0808f3c8772376835dee9f" + integrity sha512-sJ3qn45M2XLXlOi+wkhXK5xsXbSVzi8YGrusux//DttI3s8wCP3BQSnEgZkBiEktloxPferINHT1er8/9UK7Xw== + dependencies: + "@storybook/channels" "7.6.14" + "@types/babel__core" "^7.0.0" + "@types/express" "^4.7.0" + file-system-cache "2.3.0" + "@sucrase/webpack-loader@^2.0.0": version "2.0.0" resolved "https://registry.yarnpkg.com/@sucrase/webpack-loader/-/webpack-loader-2.0.0.tgz#b8a70b8d3df3eeb570e6a3315e1a9c6b723e4a37"