@rancher/shell 3.0.12-rc.2 → 3.0.12-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.12-rc.2",
+  "version": "3.0.12-rc.3",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancher/dashboard",
   "license": "Apache-2.0",
@@ -20,25 +20,20 @@
     "dev": "./node_modules/.bin/vue-cli-service dev",
     "build": "./node_modules/.bin/vue-cli-service build",
     "analyze": "./node_modules/.bin/vue-cli-service build --report",
-    "start": "./node_modules/.bin/vue-cli-service start",
-    "cy:run": "cypress run",
-    "cy:open": "cypress open",
-    "e2e:pre": "NODE_ENV=dev yarn build",
-    "e2e:run": "NODE_ENV=dev START_SERVER_AND_TEST_INSECURE=1 start-server-and-test start  https://localhost:8005/ cy:run",
-    "e2e:dev": "start-server-and-test dev https://localhost:8005 cy:open"
+    "start": "./node_modules/.bin/vue-cli-service start"
   },
   "dependencies": {
-    "@aws-sdk/client-ec2": "3.863.0",
-    "@aws-sdk/client-eks": "3.879.0",
-    "@aws-sdk/client-iam": "3.863.0",
-    "@aws-sdk/client-kms": "3.863.0",
+    "@aws-sdk/client-ec2": "3.1041.0",
+    "@aws-sdk/client-eks": "3.1041.0",
+    "@aws-sdk/client-iam": "3.1041.0",
+    "@aws-sdk/client-kms": "3.1041.0",
     "@babel/plugin-proposal-optional-chaining": "7.21.0",
     "@babel/plugin-proposal-private-methods": "7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "7.14.5",
     "@babel/preset-typescript": "7.16.7",
     "@novnc/novnc": "1.2.0",
     "@popperjs/core": "2.11.8",
-    "@rancher/icons": "2.0.55",
+    "@rancher/icons": "2.0.60",
     "@smithy/fetch-http-handler": "5.1.1",
     "@types/is-url": "1.2.30",
     "@types/node": "25.3.3",
@@ -52,10 +47,9 @@
     "@vue/vue3-jest": "27.0.0",
     "add": "2.0.6",
     "ansi_up": "5.0.0",
-    "axios": "1.15.0",
+    "axios": "1.15.2",
     "axios-retry": "3.1.9",
     "babel-eslint": "10.1.0",
-    "babel-plugin-module-resolver": "5.0.2",
     "babel-preset-vue": "2.0.2",
     "cache-loader": "4.1.0",
     "chart.js": "4.5.1",
@@ -63,28 +57,24 @@
     "codemirror": ">=5.64.0 <6",
     "codemirror-editor-vue3": "2.8.0",
     "color": "5.0.3",
-    "cookie": "0.7.0",
     "cookie-universal": "2.2.2",
     "core-js": "3.48.0",
     "cron-validator": "1.4.0",
     "cronstrue": "3.9.0",
-    "cross-env": "7.0.3",
     "css-loader": "6.7.3",
     "csv-loader": "3.0.3",
     "custom-event-polyfill": "^1.0.7",
-    "cypress": "11.1.0",
     "d3": "7.3.0",
-    "d3-selection": "3.0.0",
     "dayjs": "1.11.18",
+    "diff": "9.0.0",
     "diff2html": "3.4.24",
-    "dompurify": "3.2.5",
+    "dompurify": "3.3.2",
     "element-matches": "^0.1.2",
     "entities": "4.5.0",
     "eslint": "7.32.0",
     "eslint-config-standard": "16.0.3",
     "eslint-import-resolver-node": "0.3.9",
     "eslint-module-utils": "2.6.1",
-    "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-jest": "24.4.0",
     "eslint-plugin-n": "15.2.0",
@@ -103,10 +93,8 @@
     "jest-serializer-vue": "2.0.2",
     "jexl": "2.3.0",
     "jquery": "3.5.1",
-    "js-cookie": "3.0.5",
     "js-yaml": "4.1.1",
     "js-yaml-loader": "1.2.2",
-    "jsdiff": "1.1.1",
     "jsonpath-plus": "10.3.0",
     "jsrsasign": "11.1.1",
     "jszip": "3.10.1",
@@ -120,21 +108,14 @@
     "sass": "1.97.3",
     "sass-loader": "12.6.0",
     "serve-static": "1.14.1",
-    "set-cookie-parser": "2.4.6",
-    "shell-quote": "1.7.3",
-    "sinon": "8.1.1",
-    "start-server-and-test": "2.0.10",
     "style-loader": "1.2.1",
-    "ts-node": "8.10.2",
     "typescript": "5.6.3",
     "ufo": "0.7.11",
     "unfetch": "4.2.0",
-    "url-parse": "1.5.10",
     "vee-validate": "^4.15.1",
     "vue": "3.5.29",
     "vue-router": "4.6.4",
     "vue-select": "4.0.0-beta.6",
-    "vue-server-renderer": "2.7.16",
     "vue3-resize": "0.2.0",
     "vue3-virtual-scroll-list": "0.2.1",
     "vuedraggable": "4.1.0",
@@ -142,6 +123,7 @@
     "webpack-bundle-analyzer": "4.10.2",
     "webpack-virtual-modules": "0.6.2",
     "worker-loader": "3.0.8",
+    "xmlbuilder2": "4.0.1",
     "xterm": "5.2.1",
     "xterm-addon-canvas": "0.5.0",
     "xterm-addon-fit": "0.8.0",

package/pages/__tests__/readme.test.ts

@@ -0,0 +1,49 @@
+import Readme from '@shell/pages/readme.vue';
+
+describe('page: Readme', () => {
+  describe('computed', () => {
+    it('showAppReadme defaults to false', () => {
+      const thisContext = { $route: { query: {} } };
+
+      const result = (Readme.computed!.showAppReadme as () => boolean).call(thisContext);
+
+      expect(result).toBe(false);
+    });
+
+    it('hideReadmeFirstTitle defaults to false', () => {
+      const thisContext = { $route: { query: {} } };
+
+      const result = (Readme.computed!.hideReadmeFirstTitle as () => boolean).call(thisContext);
+
+      expect(result).toBe(false);
+    });
+
+    it('parses showAppReadme and hideReadmeFirstTitle from query', () => {
+      const thisContext = {
+        $route: {
+          query: {
+            showAppReadme:        'true',
+            hideReadmeFirstTitle: 'true',
+          }
+        }
+      };
+
+      const showAppReadme = (Readme.computed!.showAppReadme as () => boolean).call(thisContext);
+      const hideReadmeFirstTitle = (Readme.computed!.hideReadmeFirstTitle as () => boolean).call(thisContext);
+
+      expect(showAppReadme).toBe(true);
+      expect(hideReadmeFirstTitle).toBe(true);
+    });
+  });
+
+  describe('fetch', () => {
+    it('calls fetchChart', async() => {
+      const fetchChart = jest.fn();
+      const thisContext = { fetchChart };
+
+      await (Readme.fetch as () => Promise<void>).call(thisContext);
+
+      expect(fetchChart).toHaveBeenCalledWith();
+    });
+  });
+});

package/pages/auth/setup.vue

@@ -17,8 +17,7 @@ import BrandImage from '@shell/components/BrandImage';
 import { waitFor } from '@shell/utils/async';
 import { Banner } from '@components/Banner';
 import FormValidation from '@shell/mixins/form-validation';
-import isUrl from 'is-url';
-import { isLocalhost } from '@shell/utils/validators/setting';
+import { isLocalhost, isValidUrl } from '@shell/utils/validators/setting';
 import Loading from '@shell/components/Loading';
 import { getBrandMeta } from '@shell/utils/brand';
 
@@ -171,7 +170,7 @@ export default {
         }
       }
 
-      if (!isUrl(this.serverUrl) || this.fvGetPathErrors(['serverUrl']).length > 0) {
+      if (!isValidUrl(this.serverUrl) || this.fvGetPathErrors(['serverUrl']).length > 0) {
         return false;
       }
 

package/pages/c/_cluster/apps/charts/__tests__/chart.test.ts

@@ -1,5 +1,8 @@
 import Chart from '@shell/pages/c/_cluster/apps/charts/chart.vue';
 import { APP_UPGRADE_STATUS } from '@shell/store/catalog';
+import {
+  CHART, REPO, REPO_TYPE, VERSION, DEPRECATED
+} from '@shell/config/query-params';
 
 jest.mock('clipboard-polyfill', () => ({ writeText: () => {} }));
 
@@ -321,4 +324,77 @@ describe('page: Chart Detail', () => {
       expect(result[2].label).toBe('monitoring/app-three');
     });
   });
+
+  describe('methods: openReadme', () => {
+    it('opens standalone readme URL with chart context and without theme query', () => {
+      const openSpy = jest.spyOn(window, 'open').mockImplementation(() => null);
+      const resolve = jest.fn(() => ({ href: '/c/local/readme?x=y' }));
+      const thisContext = {
+        $router: { resolve },
+        $route:  { params: { cluster: 'local' } },
+        query:   {
+          repoType:    'cluster',
+          repoName:    'rancher-charts',
+          chartName:   'test-chart',
+          versionName: '',
+          deprecated:  'false',
+        },
+        targetVersion: '1.2.3'
+      };
+
+      (Chart.methods!.openReadme as () => void).call(thisContext);
+
+      expect(resolve).toHaveBeenCalledWith({
+        name:   'readme',
+        params: { cluster: 'local' },
+        query:  {
+          [REPO_TYPE]:          'cluster',
+          [REPO]:               'rancher-charts',
+          [CHART]:              'test-chart',
+          [VERSION]:            '1.2.3',
+          [DEPRECATED]:         'false',
+          showAppReadme:        'false',
+          hideReadmeFirstTitle: 'false',
+        }
+      });
+      expect(openSpy).toHaveBeenCalledWith('/c/local/readme?x=y', '_blank');
+      openSpy.mockRestore();
+    });
+  });
+
+  describe('methods: installNewInstance', () => {
+    it('should navigate to install page with correct query parameters', () => {
+      const mockRouterPush = jest.fn();
+      const thisContext = {
+        $router: { push: mockRouterPush },
+        $route:  { params: { cluster: 'local' } },
+        $store:  { getters: { productId: 'explorer' } },
+        query:   {
+          repoType:    'cluster',
+          repoName:    'rancher-charts',
+          chartName:   'my-chart',
+          versionName: '1.2.3',
+          deprecated:  'false'
+        }
+      };
+
+      (Chart.methods!.installNewInstance as () => void).call(thisContext);
+
+      expect(mockRouterPush).toHaveBeenCalledWith({
+        name:   'c-cluster-apps-charts-install',
+        params: {
+          cluster: 'local',
+          product: 'explorer',
+        },
+        query: {
+          'repo-type':    'cluster',
+          repo:           'rancher-charts',
+          chart:          'my-chart',
+          version:        '1.2.3',
+          deprecated:     'false',
+          'new-instance': null
+        }
+      });
+    });
+  });
 });

package/pages/c/_cluster/apps/charts/chart.vue

@@ -14,7 +14,7 @@ import { isMissingDate } from '@shell/utils/time';
 import { escapeHtml } from '@shell/utils/string';
 import { mapGetters } from 'vuex';
 import { APP_UPGRADE_STATUS, compatibleVersionsFor } from '@shell/store/catalog';
-import { compareChartVersions } from '@shell/utils/chart';
+import { compareChartVersions, getStandaloneReadmeUrl } from '@shell/utils/chart';
 import AppChartCardSubHeader from '@shell/pages/c/_cluster/apps/charts/AppChartCardSubHeader';
 import AppChartCardFooter from '@shell/pages/c/_cluster/apps/charts/AppChartCardFooter';
 import day from 'dayjs';
@@ -306,6 +306,7 @@ export default {
           [REPO_TYPE]:        this.query.repoType,
           [REPO]:             this.query.repoName,
           [CHART]:            this.query.chartName,
+          [VERSION]:          this.query.versionName,
           [DEPRECATED]:       this.query.deprecated,
           [NEW_APP_INSTANCE]: _FLAGGED,
         }
@@ -364,6 +365,20 @@ export default {
           [VERSION]: version,
         }
       };
+    },
+    openReadme() {
+      const url = getStandaloneReadmeUrl(this.$router, {
+        cluster:              this.$route.params.cluster,
+        repoType:             this.query.repoType,
+        repoName:             this.query.repoName,
+        chartName:            this.query.chartName,
+        versionName:          this.query.versionName || this.targetVersion,
+        deprecated:           this.query.deprecated,
+        showAppReadme:        false,
+        hideReadmeFirstTitle: false,
+      });
+
+      window.open(url, '_blank');
     }
   },
 };
@@ -535,13 +550,27 @@ export default {
     </div>
 
     <div class="chart-body">
-      <ChartReadme
+      <div
         v-if="hasReadme"
-        :version-info="versionInfo"
-        :show-app-readme="false"
-        :hide-readme-first-title="false"
-        class="chart-body__readme"
-      />
+        class="readme-wrapper"
+      >
+        <RcButton
+          v-clean-tooltip="t('catalog.chart.viewReadmeSeparately.tooltip')"
+          class="open-readme-button"
+          secondary
+          rightIcon="external-link"
+          @click="openReadme()"
+        >
+          {{ t('catalog.chart.viewReadmeSeparately.label') }}
+          <span class="sr-only">{{ t('generic.opensInNewTab') }}</span>
+        </RcButton>
+        <ChartReadme
+          :version-info="versionInfo"
+          :show-app-readme="false"
+          :hide-readme-first-title="false"
+          class="chart-body__readme"
+        />
+      </div>
       <div
         v-else
         class="chart-body__readme"
@@ -806,7 +835,7 @@ export default {
       display: flex;
       align-items: flex-start;
       flex-shrink: 0;
-      gap: 8px;
+      gap: 16px;
 
       .installed-apps-selector {
         width: 340px;
@@ -827,6 +856,29 @@ export default {
 
   .chart-body {
     display: flex;
+    .readme-wrapper {
+      position: relative;
+      flex: 1;
+
+      .open-readme-button {
+        display: flex;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 100ms ease-in;
+        position: absolute;
+        top: 12px;
+        right: 24px;
+      }
+
+      &:hover,
+      &:focus-within {
+        .open-readme-button {
+          opacity: 1;
+          pointer-events: auto;
+        }
+      }
+    }
+
     &__readme {
       flex: 1;
       min-width: 400px;

package/pages/c/_cluster/apps/charts/install.vue

@@ -41,7 +41,7 @@ import {
 import { ignoreVariables } from './install.helpers';
 import { findBy, insertAt } from '@shell/utils/array';
 import { saferDump } from '@shell/utils/create-yaml';
-import { LINUX, WINDOWS } from '@shell/store/catalog';
+import { WINDOWS, isRancherRepo, getPermittedOSs } from '@shell/store/catalog';
 import { SETTING } from '@shell/config/settings';
 import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret.vue';
 import { generateRandomAlphaString } from '@shell/utils/string';
@@ -766,14 +766,17 @@ export default {
     },
 
     windowsIncompatible() {
-      if (this.chart?.windowsIncompatible) {
-        return this.t('catalog.charts.windowsIncompatible');
-      }
       if (this.versionInfo) {
-        const incompatibleVersion = !(this.versionInfo?.chart?.annotations?.[CATALOG_ANNOTATIONS.PERMITTED_OS] || LINUX).includes('windows');
+        const isRancher = isRancherRepo(this.repo, this.chart);
+        const permittedSystems = getPermittedOSs(this.versionInfo?.chart?.annotations, isRancher);
+        const incompatibleVersion = permittedSystems.length > 0 && !permittedSystems.includes('windows');
+
+        if (incompatibleVersion) {
+          if (!this.chart?.windowsIncompatible) {
+            return this.t('catalog.charts.versionWindowsIncompatible');
+          }
 
-        if (incompatibleVersion && !this.chart.windowsIncompatible) {
-          return this.t('catalog.charts.versionWindowsIncompatible');
+          return this.t('catalog.charts.windowsIncompatible');
         }
       }
 

package/pages/c/_cluster/explorer/__tests__/index.test.ts

@@ -1,12 +1,11 @@
-import { clone } from '@shell/utils/object';
+import { mergeWithReplace } from '@shell/utils/object';
 import Dashboard from '@shell/pages/c/_cluster/explorer/index.vue';
 import { shallowMount } from '@vue/test-utils';
 import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
-import { NODE_ARCHITECTURE } from '@shell/config/labels-annotations';
 import { WORKLOAD_TYPES } from '@shell/config/types';
 
 describe('page: cluster dashboard', () => {
-  const mountOptions = {
+  const createMountOptions = () => ({
     global: {
       stubs: {
         'router-link': true,
@@ -17,12 +16,11 @@ describe('page: cluster dashboard', () => {
           dispatch: jest.fn(),
           getters:  {
             currentCluster: {
-              id:                         'cluster',
-              metadata:                   { creationTimestamp: Date.now() },
-              status:                     { provider: 'foo' },
-              kubernetesVersionBase:      '0.0.0',
-              kubernetesVersionExtension: 'k3s',
+              id:       'cluster',
+              metadata: { creationTimestamp: Date.now() },
+              status:   { provider: 'foo' },
             },
+            'management/byId':   jest.fn(),
             'cluster/inError':   () => false,
             'cluster/schemaFor': jest.fn(),
             'cluster/canList':   jest.fn(),
@@ -36,7 +34,7 @@ describe('page: cluster dashboard', () => {
         }
       },
     }
-  };
+  });
 
   describe.each([
     'etcd',
@@ -49,7 +47,7 @@ describe('page: cluster dashboard', () => {
       [STATES_ENUM.HEALTHY, 'icon-checkmark', `${ componentId }foo`, [{ status: 'True' }]],
       [STATES_ENUM.UNHEALTHY, 'icon-warning', `${ componentId }foo`, [{ status: 'False' }]],
     ])('should show %p status', (status, iconClass, name, conditions) => {
-      const options = clone(mountOptions);
+      const options = createMountOptions();
 
       options.global.mocks.$store.getters.currentCluster.status = {
         provider:          'provider',
@@ -100,7 +98,7 @@ describe('page: cluster dashboard', () => {
     ]]
   ])('%p cluster - %p agent health box :', (_, agentId, isLocal, agentResources, statuses) => {
     it.each(statuses)('should NOT show %p status due to missing canList permissions', (status, iconClass, isLoaded, disconnected, error, conditions, readyReplicas, unavailableReplicas) => {
-      const options = clone(mountOptions);
+      const options = createMountOptions();
 
       options.global.mocks.$store.getters.currentCluster.isLocal = isLocal;
 
@@ -168,7 +166,7 @@ describe('page: cluster dashboard', () => {
     it.each(statuses)('should show %p status', async(status, iconClass, clickable, isLoaded, disconnected, error, conditions, readyReplicas, unavailableReplicas) => {
       let agentRoute = null;
 
-      const options = clone(mountOptions);
+      const options = createMountOptions();
 
       options.global.mocks.$store.getters.currentCluster.isLocal = isLocal;
 
@@ -221,7 +219,7 @@ describe('page: cluster dashboard', () => {
   });
 
   it('local cluster - cattle agent health box - should be hidden', () => {
-    const options = clone(mountOptions);
+    const options = createMountOptions();
 
     options.global.mocks.$store.getters.currentCluster.isLocal = true;
 
@@ -241,18 +239,18 @@ describe('page: cluster dashboard', () => {
 
   describe('cluster details', () => {
     it.each([
-      ['clusterProvider', 'other', []],
-      ['kubernetesVersion', 'glance.version', []],
-      ['created', 'glance.created', []],
-      ['architecture', 'mixed', [{ labels: { [NODE_ARCHITECTURE]: 'amd64' } }, { labels: { [NODE_ARCHITECTURE]: 'intel' } }]],
-      ['architecture', 'mixed', [{ labels: { [NODE_ARCHITECTURE]: 'amd64' } }, { labels: { } }]],
-      ['architecture', 'amd64', [{ labels: { [NODE_ARCHITECTURE]: 'amd64' } }]],
-      ['architecture', 'unknown', [{ labels: { } }]],
-      ['architecture', 'glance.architecture', [{ metadata: { state: { transitioning: true } } }]],
-    ])('should show %p label %p', (label, text, nodes) => {
-      const options = clone(mountOptions);
-
-      options.global.mocks.$store.getters['cluster/all'] = () => nodes;
+      ['clusterProvider', 'abc', { provisionerDisplay: 'abc' }],
+      ['kubernetesVersion', 'glance.version', null],
+      ['created', 'glance.created', null],
+      ['architecture', 'mixed', { architecture: { label: 'mixed' } }],
+      ['architecture', 'amd64', { architecture: { label: 'amd64' } }],
+      ['architecture', 'glance.architecture', { architecture: { label: null } }],
+    ])('should show %p label %p', (label, text, mgmtCluster) => {
+      const options = createMountOptions();
+
+      const currentCluster = options.global.mocks.$store.getters['currentCluster'];
+
+      options.global.mocks.$store.getters['currentCluster'] = mgmtCluster ? mergeWithReplace(currentCluster, mgmtCluster) : currentCluster; // eslint-disable-line jest/no-if
 
       const wrapper = shallowMount(Dashboard, options);
 

package/pages/c/_cluster/explorer/index.vue

@@ -17,7 +17,6 @@ import {
   CATALOG,
   SECRET
 } from '@shell/config/types';
-import { NODE_ARCHITECTURE } from '@shell/config/labels-annotations';
 import { setPromiseResult } from '@shell/utils/promise';
 import AlertTable from '@shell/components/AlertTable';
 import { Banner } from '@components/Banner';
@@ -220,51 +219,11 @@ export default {
     },
 
     displayProvider() {
-      const other = 'other';
-
-      let provider = this.currentCluster?.status?.provider || this.currentCluster?.status?.driver.toLowerCase() || other;
-
-      if (provider === 'rke.windows') {
-        provider = 'rkeWindows';
-      }
-
-      if (!this.$store.getters['i18n/exists'](`cluster.provider.${ provider }`)) {
-        provider = 'other';
-      }
-
-      return this.t(`cluster.provider.${ provider }`);
-    },
-
-    nodesArchitecture() {
-      const obj = {};
-
-      this.nodes?.forEach((node) => {
-        if (!node.metadata?.state?.transitioning) {
-          const architecture = node.labels?.[NODE_ARCHITECTURE];
-
-          const key = architecture || this.t('cluster.architecture.label.unknown');
-
-          obj[key] = (obj[key] || 0) + 1;
-        }
-      });
-
-      return obj;
+      return this.currentCluster?.provisionerDisplay;
     },
 
     architecture() {
-      const keys = Object.keys(this.nodesArchitecture);
-
-      switch (keys.length) {
-      case 0:
-        return { label: this.t('generic.provisioning') };
-      case 1:
-        return { label: keys[0] };
-      default:
-        return {
-          label:   this.t('cluster.architecture.label.mixed'),
-          tooltip: keys.reduce((acc, k) => `${ acc }${ k }: ${ this.nodesArchitecture[k] }<br>`, '')
-        };
-      }
+      return this.currentCluster?.architecture;
     },
 
     isHarvesterCluster() {
@@ -395,6 +354,7 @@ export default {
 
     metricAggregations() {
       const metrics = this.nodeMetrics.filter((nodeMetrics) => {
+        // This should use cluster/byId getter
         const node = this.nodes.find((nd) => nd.id === nodeMetrics.id);
 
         return node;
@@ -464,9 +424,6 @@ export default {
         }
       };
     },
-    hasNodes() {
-      return this.nodes?.length > 0;
-    },
     kubernetesVersion() {
       const base = this.currentCluster?.kubernetesVersionBase || '';
       const extension = this.currentCluster?.kubernetesVersionExtension || '';
@@ -584,8 +541,7 @@ export default {
 
     async goToHarvesterCluster() {
       try {
-        const provClusters = await this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
-        const provCluster = provClusters.find((p) => p.mgmt.id === this.currentCluster.id);
+        const provCluster = await this.$store.dispatch('management/find', { type: CAPI.RANCHER_CLUSTER, id: this.currentCluster.provClusterId });
 
         await provCluster.goToHarvesterCluster();
       } catch {
@@ -653,7 +609,7 @@ export default {
         <span>{{ kubernetesVersion }}</span>
       </div>
       <div
-        v-if="hasNodes"
+        v-if="architecture"
         data-testid="architecture__label"
       >
         <label>{{ t('glance.architecture') }}: </label>