From df9c7ad6846615697d940a400e65045ea7157e9a Mon Sep 17 00:00:00 2001 From: Richard Cox Date: Tue, 22 Oct 2024 15:51:15 +0100 Subject: [PATCH 1/2] Fleet Improvements - Performance Fix - go back to using git repo status cluster ready / desired stats instead of costly clusterResourceStatus (churn can call this a LOT) - Improve load time of fleet cluster detail page - Bug Fix - Using targetClustersReady and targetClusters doesn't seem to work in some cases, revert back to previous - General Fixes - Fix weird fleet cluster list column alignment --- shell/components/fleet/FleetClusters.vue | 3 --- shell/detail/fleet.cattle.io.cluster.vue | 20 +++++++++++--------- shell/detail/fleet.cattle.io.gitrepo.vue | 2 +- shell/models/fleet.cattle.io.gitrepo.js | 8 -------- shell/pages/c/_cluster/fleet/index.vue | 11 ++++++++--- 5 files changed, 20 insertions(+), 24 deletions(-) diff --git a/shell/components/fleet/FleetClusters.vue b/shell/components/fleet/FleetClusters.vue index 1da09e198b1..00d7d3097b8 100644 --- a/shell/components/fleet/FleetClusters.vue +++ b/shell/components/fleet/FleetClusters.vue @@ -42,7 +42,6 @@ export default { value: 'status.display.readyBundles', sort: 'status.summary.ready', search: false, - align: 'center', }, { name: 'reposReady', @@ -50,7 +49,6 @@ export default { value: 'status.readyGitRepos', sort: 'status.summary.ready', search: false, - align: 'center', }, FLEET_SUMMARY, { @@ -62,7 +60,6 @@ export default { formatter: 'LiveDate', formatterOpts: { addSuffix: true }, width: 120, - align: 'right' }, AGE, ]; diff --git a/shell/detail/fleet.cattle.io.cluster.vue b/shell/detail/fleet.cattle.io.cluster.vue index dc420d30f22..46693240622 100644 --- a/shell/detail/fleet.cattle.io.cluster.vue +++ b/shell/detail/fleet.cattle.io.cluster.vue @@ -6,6 +6,7 @@ import ResourceTabs from '@shell/components/form/ResourceTabs'; import Tab from '@shell/components/Tabbed/Tab'; import { MANAGEMENT, FLEET } from '@shell/config/types'; import { FLEET as FLEET_LABELS } from '@shell/config/labels-annotations'; +import { allHash } from 'utils/promise'; export default { name: 'FleetDetailCluster', @@ -29,17 +30,18 @@ export default { async fetch() { const clusterId = this.value?.metadata?.labels[FLEET_LABELS.CLUSTER_NAME]; - - this.rancherCluster = await this.$store.dispatch('management/find', { - type: MANAGEMENT.CLUSTER, - id: clusterId + const hash = await allHash({ + rancherCluster: this.$store.dispatch('management/find', { + type: MANAGEMENT.CLUSTER, + id: clusterId + }), + repos: this.$store.dispatch('management/findAll', { type: FLEET.GIT_REPO }), + workspaces: this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE }), + bundleDeployments: this.$store.dispatch('management/findAll', { type: FLEET.BUNDLE_DEPLOYMENT }) }); - this.allRepos = await this.$store.dispatch('management/findAll', { type: FLEET.GIT_REPO }); - - await this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE }); - - await this.$store.dispatch('management/findAll', { type: FLEET.BUNDLE_DEPLOYMENT }); + this.rancherCluster = hash.rancherCluster; + this.allRepos = hash.repos; }, data() { diff --git a/shell/detail/fleet.cattle.io.gitrepo.vue b/shell/detail/fleet.cattle.io.gitrepo.vue index 5df4f5321f5..f3c03611ecf 100644 --- a/shell/detail/fleet.cattle.io.gitrepo.vue +++ b/shell/detail/fleet.cattle.io.gitrepo.vue @@ -42,7 +42,7 @@ export default { }, computed: { gitRepoHasClusters() { - return this.value?.clusterResourceStatus?.length; + return this.value.status.desiredReadyClusters; }, clusterSchema() { return this.$store.getters['management/schemaFor'](FLEET.CLUSTER); diff --git a/shell/models/fleet.cattle.io.gitrepo.js b/shell/models/fleet.cattle.io.gitrepo.js index 3bd5f098799..0d90463650c 100644 --- a/shell/models/fleet.cattle.io.gitrepo.js +++ b/shell/models/fleet.cattle.io.gitrepo.js @@ -315,14 +315,6 @@ export default class GitRepo extends SteveModel { return 0; } - get targetClustersReady() { - if (this.targetClusters && this.targetClusters.length) { - return this.targetClusters.filter((cluster) => cluster.state === 'active'); - } - - return 0; - } - get bundleDeployments() { const bds = this.$getters['all'](FLEET.BUNDLE_DEPLOYMENT); diff --git a/shell/pages/c/_cluster/fleet/index.vue b/shell/pages/c/_cluster/fleet/index.vue index 0b9d9c866e5..d6919f8866a 100644 --- a/shell/pages/c/_cluster/fleet/index.vue +++ b/shell/pages/c/_cluster/fleet/index.vue @@ -175,7 +175,12 @@ export default { } if (area === 'clusters') { - group = row.targetClusters; + if (row.clusterInfo?.ready === row.clusterInfo?.total && row.clusterInfo?.ready) { + return { + badgeClass: STATES[STATES_ENUM.ACTIVE].color, + icon: STATES[STATES_ENUM.ACTIVE].compoundIcon + }; + } } else if (area === 'bundles') { group = row.bundles; } else if (area === 'resources') { @@ -223,7 +228,7 @@ export default { } if (area === 'clusters') { - group = row.targetClusters; + group = ''; } else if (area === 'bundles') { group = row.bundles; } else if (area === 'resources') { @@ -262,7 +267,7 @@ export default { } if (area === 'clusters') { - value = `${ row.targetClustersReady?.length || '0' }/${ row.targetClusters?.length || '?' }`; + return `${ row.clusterInfo.ready }/${ row.clusterInfo.total }`; } else if (area === 'bundles') { value = `${ row.bundlesReady?.length || '0' }/${ row.bundles?.length || '?' }`; } else if (area === 'resources') { From 965833d12d1fa27bdb1f074f038542bdfea77718 Mon Sep 17 00:00:00 2001 From: Richard Cox Date: Mon, 28 Oct 2024 16:19:56 +0000 Subject: [PATCH 2/2] Update following review - avoid 0 showing as `?` - e.g. `0 || ?` --- shell/models/fleet.cattle.io.gitrepo.js | 9 ++++----- shell/pages/c/_cluster/fleet/index.vue | 5 +++-- shell/utils/string.js | 9 +++++++++ 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/shell/models/fleet.cattle.io.gitrepo.js b/shell/models/fleet.cattle.io.gitrepo.js index 0d90463650c..9d89c3ccd8e 100644 --- a/shell/models/fleet.cattle.io.gitrepo.js +++ b/shell/models/fleet.cattle.io.gitrepo.js @@ -307,12 +307,11 @@ export default class GitRepo extends SteveModel { bundle.namespacedName.startsWith(`${ this.namespace }:${ this.name }`)); } + /** + * Bundles with state of active + */ get bundlesReady() { - if (this.bundles && this.bundles.length) { - return this.bundles.filter((bundle) => bundle.state === 'active'); - } - - return 0; + return this.bundles?.filter((bundle) => bundle.state === 'active'); } get bundleDeployments() { diff --git a/shell/pages/c/_cluster/fleet/index.vue b/shell/pages/c/_cluster/fleet/index.vue index d6919f8866a..7281b7efa6f 100644 --- a/shell/pages/c/_cluster/fleet/index.vue +++ b/shell/pages/c/_cluster/fleet/index.vue @@ -12,6 +12,7 @@ import { WORKSPACE_ANNOTATION } from '@shell/config/labels-annotations'; import { filterBy } from '@shell/utils/array'; import FleetNoWorkspaces from '@shell/components/fleet/FleetNoWorkspaces.vue'; import { NAME } from '@shell/config/product/fleet'; +import { xOfy } from '@shell/utils/string'; export default { name: 'FleetDashboard', @@ -269,9 +270,9 @@ export default { if (area === 'clusters') { return `${ row.clusterInfo.ready }/${ row.clusterInfo.total }`; } else if (area === 'bundles') { - value = `${ row.bundlesReady?.length || '0' }/${ row.bundles?.length || '?' }`; + value = xOfy(row.bundlesReady?.length, row.bundles?.length); } else if (area === 'resources') { - value = `${ row.status?.resourceCounts?.ready || '0' }/${ row.status?.resourceCounts?.desiredReady || '?' }`; + value = xOfy(row.status?.resourceCounts?.ready, row.status?.resourceCounts?.desiredReady); } return value; diff --git a/shell/utils/string.js b/shell/utils/string.js index 804912fa61a..898ec790693 100644 --- a/shell/utils/string.js +++ b/shell/utils/string.js @@ -321,3 +321,12 @@ export function sanitizeValue(v) { export function sanitizeIP(v) { return (v || '').replace(/[^a-z0-9.:_-]/ig, ''); } + +/** + * Return the string ` / ` + * + * Each param should be a number, otherwise `?` is used + */ +export function xOfy(x, y) { + return `${ typeof x === 'number' ? x : '?' }/${ typeof y === 'number' ? y : '?' }`; +}