diff --git a/cypress/e2e/po/detail/fleet/fleet.cattle.io.application.po.ts b/cypress/e2e/po/detail/fleet/fleet.cattle.io.application.po.ts index 8291bdeeed..bc63ff2314 100644 --- a/cypress/e2e/po/detail/fleet/fleet.cattle.io.application.po.ts +++ b/cypress/e2e/po/detail/fleet/fleet.cattle.io.application.po.ts @@ -34,6 +34,6 @@ export default class FleetApplicationDetailsPo extends PagePo { } graph() { - return this.self().find('[data-testid="gitrepo_graph"]'); + return this.self().find('[data-testid="resource-graph"]'); } } diff --git a/cypress/e2e/po/pages/fleet/fleet.cattle.io.gitrepo.po.ts b/cypress/e2e/po/pages/fleet/fleet.cattle.io.gitrepo.po.ts index a88004ea47..19f1a0e53e 100644 --- a/cypress/e2e/po/pages/fleet/fleet.cattle.io.gitrepo.po.ts +++ b/cypress/e2e/po/pages/fleet/fleet.cattle.io.gitrepo.po.ts @@ -145,6 +145,6 @@ export class FleetGitRepoDetailsPo extends BaseDetailPagePo { } graph() { - return this.self().find('[data-testid="gitrepo_graph"]'); + return this.self().find('[data-testid="resource-graph"]'); } } diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml index efbc889f46..a408651420 100644 --- a/shell/assets/translations/en-us.yaml +++ b/shell/assets/translations/en-us.yaml @@ -153,6 +153,11 @@ generic: opensInNewTab: Opens in a new tab +graph: + noPermissions: You do not have permission to Graph view + loading: Loading chart data... + rendering: Rendering chart... + locale: menu: Locale selector menu en-us: English @@ -2791,7 +2796,9 @@ fleet: title: Release label: Name placeholder: placeholder - registryOption: Choose a Rancher Registry + registry: + option: Choose a Rancher Registry + error: The {registry} has errors, please try to update the registry in Rancher repository. values: title: Values selectLabel: Values @@ -2806,6 +2813,7 @@ fleet: diff: Compare Changes values: selectLabel: YAML + loading: Loading from chart valuesFiles: selectLabel: Files ariaLabel: Enter path for value File @@ -2860,8 +2868,6 @@ fleet: other {Matches {matched, number} of {total, number} existing clusters, including "{sample}"} } fdc: - loadingChart: Loading chart data... - renderingChart: Rendering chart... id: ID type: Type state: State diff --git a/shell/assets/translations/zh-hans.yaml b/shell/assets/translations/zh-hans.yaml index 5aae1593c8..4e11faf82f 100644 --- a/shell/assets/translations/zh-hans.yaml +++ b/shell/assets/translations/zh-hans.yaml @@ -112,6 +112,10 @@ generic: other {匹配 {total, number} 中的 {matched, number} 个，包括 "{sample}"} } +graph: + loading: 正在加载 Chart 数据... + rendering: 正在渲染 Chart... + locale: en-us: English zh-hans: 简体中文 @@ -2221,8 +2225,6 @@ fleet: other {现有{total, number}个集群，与其中的{matched, number}个匹配，包括"{sample}"} } fdc: - loadingChart: 正在加载 Chart 数据... - renderingChart: 正在渲染 Chart... id: ID type: 类型 state: 状态 diff --git a/shell/components/fleet/ForceDirectedTreeChart/index.vue b/shell/components/ForceDirectedTreeChart.vue similarity index 90% rename from shell/components/fleet/ForceDirectedTreeChart/index.vue rename to shell/components/ForceDirectedTreeChart.vue index 1ddada685d..5de26af92e 100644 --- a/shell/components/fleet/ForceDirectedTreeChart/index.vue +++ b/shell/components/ForceDirectedTreeChart.vue @@ -2,7 +2,6 @@ import * as d3 from 'd3'; import { STATES } from '@shell/plugins/dashboard-store/resource-class'; import { BadgeState } from '@components/BadgeState'; -import { getChartIcon } from './chartIcons.js'; export default { name: 'ForceDirectedTreeChart', @@ -17,8 +16,24 @@ export default { required: true } }, + + async fetch() { + this.canViewChart = await this.fdcConfig.checkSchemaPermissions(this.$store); + + if (this.canViewChart) { + // set watcher for the chart data + this.dataWatcher = this.$watch(this.fdcConfig.watcherProp, (newValue) => { + this.watcherFunction(newValue); + }, { + deep: true, + immediate: true + }); + } + }, + data() { return { + canViewChart: null, dataWatcher: undefined, parsedInfo: undefined, root: undefined, @@ -37,7 +52,7 @@ export default { }, methods: { watcherFunction(newValue) { - if (newValue.length) { + if (newValue?.length) { if (!this.isChartFirstRendered) { this.parsedInfo = this.fdcConfig.parseData(this.data); @@ -158,16 +173,11 @@ export default { .attr('r', this.setNodeRadius); nodeEnter.append('circle') - .attr('r', (d) => { - return this.setNodeRadius(d) - 5; - }) + .attr('r', (d) => this.setNodeRadius(d) - 5) .attr('class', 'node-hover-layer'); - nodeEnter.append('svg').html((d) => { - const icon = this.fdcConfig.fetchNodeIcon(d); - - return getChartIcon(icon); - }) + nodeEnter.append('svg') + .html((d) => this.fdcConfig.fetchNodeIcon(d)) .attr('x', this.nodeImagePosition) .attr('y', this.nodeImagePosition) .attr('height', this.nodeImageSize) @@ -177,9 +187,7 @@ export default { this.simulation.nodes(this.allNodesData); this.simulation.force('link', d3.forceLink() - .id((d) => { - return d.id; - }) + .id((d) => d.id) .distance(100) .links(this.allLinks) ); @@ -188,10 +196,10 @@ export default { const lowerCaseStatus = d.data?.state ? d.data.state.toLowerCase() : 'unkown_status'; const defaultClassArray = ['node']; - if (STATES[lowerCaseStatus] && STATES[lowerCaseStatus].color) { - defaultClassArray.push(`node-${ STATES[lowerCaseStatus].color }`); - } else { + if (d?.data?.muteStatus) { defaultClassArray.push(`node-default-fill`); + } else if (STATES[lowerCaseStatus] && STATES[lowerCaseStatus].color) { + defaultClassArray.push(`node-${ STATES[lowerCaseStatus].color }`); } // node active (clicked) @@ -334,14 +342,6 @@ export default { this.svg = d3.select('#tree').append('svg') .attr('viewBox', `0 0 ${ this.fdcConfig.chartWidth } ${ this.fdcConfig.chartHeight }`) .attr('preserveAspectRatio', 'none'); - - // set watcher for the chart data - this.dataWatcher = this.$watch(this.fdcConfig.watcherProp, function(newValue) { - this.watcherFunction(newValue); - }, { - deep: true, - immediate: true - }); }, unmounted() { this.dataWatcher(); @@ -353,20 +353,26 @@ export default {
-

- {{ t('fleet.fdc.loadingChart') }} +

+ {{ t('graph.noPermissions') }}

-

- {{ t('fleet.fdc.renderingChart') }} +

+ {{ t('graph.loading') }}

-