@rancher/shell 0.3.4 → 0.3.6

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

@@ -1,7 +1,7 @@
 <script>
 
 import SortableTable from '@shell/components/SortableTable';
-import { REASON } from '@shell/config/table-headers';
+import { MESSAGE, NAME, OBJECT, REASON } from '@shell/config/table-headers';
 import { EVENT } from '@shell/config/types';
 import { fetchClusterResources } from './explorer-utils';
 
@@ -21,14 +21,9 @@ export default {
 
     const eventHeaders = [
       reason,
-      {
-        name:          'resource',
-        label:         'Resource',
-        labelKey:      'clusterIndexPage.sections.events.resource.label',
-        value:         'displayInvolvedObject',
-        sort:          ['involvedObject.kind', 'involvedObject.name'],
-        canBeVariable: true,
-      },
+      OBJECT,
+      MESSAGE,
+      NAME,
       {
         name:        'date',
         label:       'Date',
@@ -61,14 +56,5 @@ export default {
     :paging="true"
     :rows-per-page="10"
     default-sort-by="date"
-  >
-    <template #cell:resource="{row, value}">
-      <n-link :to="row.detailLocation">
-        {{ value }}
-      </n-link>
-      <div v-if="row.message">
-        {{ row.displayMessage }}
-      </div>
-    </template>
-  </SortableTable>
+  />
 </template>

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

@@ -82,27 +82,29 @@ export default {
   fetch() {
     fetchClusterResources(this.$store, NODE);
 
-    setPromiseResult(
-      allDashboardsExist(this.$store, this.currentCluster.id, [CLUSTER_METRICS_DETAIL_URL, CLUSTER_METRICS_SUMMARY_URL]),
-      this,
-      'showClusterMetrics',
-      `Determine cluster metrics`
-    );
-    setPromiseResult(
-      allDashboardsExist(this.$store, this.currentCluster.id, [K8S_METRICS_DETAIL_URL, K8S_METRICS_SUMMARY_URL]),
-      this,
-      'showK8sMetrics',
-      `Determine k8s metrics`
-    );
-    setPromiseResult(
-      allDashboardsExist(this.$store, this.currentCluster.id, [ETCD_METRICS_DETAIL_URL, ETCD_METRICS_SUMMARY_URL]),
-      this,
-      'showEtcdMetrics',
-      `Determine etcd metrics`
-    );
-
-    if (this.currentCluster.isLocal) {
-      this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE });
+    if (this.currentCluster) {
+      setPromiseResult(
+        allDashboardsExist(this.$store, this.currentCluster.id, [CLUSTER_METRICS_DETAIL_URL, CLUSTER_METRICS_SUMMARY_URL]),
+        this,
+        'showClusterMetrics',
+        `Determine cluster metrics`
+      );
+      setPromiseResult(
+        allDashboardsExist(this.$store, this.currentCluster.id, [K8S_METRICS_DETAIL_URL, K8S_METRICS_SUMMARY_URL]),
+        this,
+        'showK8sMetrics',
+        `Determine k8s metrics`
+      );
+      setPromiseResult(
+        allDashboardsExist(this.$store, this.currentCluster.id, [ETCD_METRICS_DETAIL_URL, ETCD_METRICS_SUMMARY_URL]),
+        this,
+        'showEtcdMetrics',
+        `Determine etcd metrics`
+      );
+
+      if (this.currentCluster.isLocal) {
+        this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE });
+      }
     }
   },
 
@@ -184,7 +186,7 @@ export default {
     displayProvider() {
       const other = 'other';
 
-      let provider = this.currentCluster.status.provider || other;
+      let provider = this.currentCluster?.status?.provider || other;
 
       if (provider === 'rke.windows') {
         provider = 'rkeWindows';
@@ -444,11 +446,11 @@ export default {
       </div>
       <div>
         <label>{{ t('glance.version') }}: </label>
+        <span>{{ currentCluster.kubernetesVersionBase }}</span>
         <span
           v-if="currentCluster.kubernetesVersionExtension"
-          style="font-size: 0.5em"
+          style="font-size: 0.75em"
         >{{ currentCluster.kubernetesVersionExtension }}</span>
-        <span>{{ currentCluster.kubernetesVersionBase }}</span>
       </div>
       <div>
         <label>{{ t('glance.created') }}: </label>
@@ -602,6 +604,8 @@ export default {
     </div>
     <Tabbed
       v-if="hasMetricsTabs"
+      default-tab="cluster-metrics"
+      :use-hash="false"
       class="mt-30"
     >
       <Tab
@@ -705,7 +709,7 @@ export default {
 }
 
 .etcd-metrics ::v-deep .external-link {
-  top: -102px;
+  top: -107px;
 }
 
 .cluster-tools-tip {

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

@@ -416,7 +416,7 @@ export default {
 <template>
   <Loading v-if="$fetchState.pending" />
   <div v-else-if="options.length">
-    <h1 v-html="t('catalog.tools.header')" />
+    <h1 v-clean-html="t('catalog.tools.header')" />
     <TypeDescription
       v-if="!legacyEnabled"
       resource="chart"
@@ -466,8 +466,8 @@ export default {
         </div>
         <div class="description">
           <div
+            v-clean-html="opt.chart.chartDescription"
             class="description-content"
-            v-html="opt.chart.chartDescription"
           />
         </div>
         <div
@@ -483,16 +483,16 @@ export default {
         <div class="action">
           <template v-if="opt.blocked">
             <button
+              v-clean-html="t('catalog.tools.action.install')"
               disabled="true"
               class="btn btn-sm role-primary"
-              v-html="t('catalog.tools.action.install')"
             />
           </template>
           <template v-else-if="opt.app && opt.chart.legacy">
             <button
+              v-clean-html="t('catalog.tools.action.manage')"
               class="btn btn-sm role-secondary"
               @click="openV1Tool(opt.chart.legacyPage)"
-              v-html="t('catalog.tools.action.manage')"
             />
           </template>
           <template v-else-if="opt.app && opt.upgradeAvailable && !opt.chart.legacy">
@@ -503,9 +503,9 @@ export default {
               <i class="icon icon-delete icon-lg" />
             </button>
             <button
+              v-clean-html="t('catalog.tools.action.upgrade')"
               class="btn btn-sm role-secondary"
               @click="edit(opt.app, opt.app.upgradeAvailable)"
-              v-html="t('catalog.tools.action.upgrade')"
             />
           </template>
           <template v-else-if="opt.app">
@@ -516,23 +516,23 @@ export default {
               <i class="icon icon-delete icon-lg" />
             </button>
             <button
+              v-clean-html="t('catalog.tools.action.edit')"
               class="btn btn-sm role-secondary"
               @click="edit(opt.app)"
-              v-html="t('catalog.tools.action.edit')"
             />
           </template>
           <template v-else-if="opt.chart.legacy">
             <button
+              v-clean-html="t('catalog.tools.action.install')"
               class="btn btn-sm role-primary"
               @click="openV1Tool(opt.chart.legacyPage)"
-              v-html="t('catalog.tools.action.install')"
             />
           </template>
           <template v-else>
             <button
+              v-clean-html="t('catalog.tools.action.install')"
               class="btn btn-sm role-primary"
               @click="install(opt.chart)"
-              v-html="t('catalog.tools.action.install')"
             />
           </template>
         </div>

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

@@ -3,11 +3,15 @@ import { mapState } from 'vuex';
 import { FLEET } from '@shell/config/types';
 import { WORKSPACE } from '@shell/store/prefs';
 import { STATES_ENUM, STATES, getStateLabel } from '@shell/plugins/dashboard-store/resource-class';
-import { allHash } from '@shell/utils/promise';
 import Loading from '@shell/components/Loading';
 import CollapsibleCard from '@shell/components/CollapsibleCard.vue';
 import ResourceTable from '@shell/components/ResourceTable';
 import CompoundStatusBadge from '@shell/components/CompoundStatusBadge';
+import { checkPermissions, checkSchemasForFindAllHash } from '@shell/utils/auth';
+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';
 
 export default {
   name:       'ListGitRepo',
@@ -15,27 +19,38 @@ export default {
     Loading,
     ResourceTable,
     CollapsibleCard,
-    CompoundStatusBadge
+    CompoundStatusBadge,
+    FleetNoWorkspaces
   },
 
   async fetch() {
-    const hash = await allHash({
-      allBundles:      this.$store.dispatch('management/findAll', { type: FLEET.BUNDLE }),
-      gitRepos:        this.$store.dispatch('management/findAll', { type: FLEET.GIT_REPO }),
-      fleetWorkspaces: this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE }),
-    });
+    const hash = await checkSchemasForFindAllHash({
+      fleetWorkspaces: {
+        inStoreType:     'management',
+        type:            FLEET.WORKSPACE,
+        schemaValidator: (schema) => {
+          return !!schema?.links?.collection;
+        }
+      },
+      allBundles: {
+        inStoreType: 'management',
+        type:        FLEET.BUNDLE,
+      },
+      gitRepos: {
+        inStoreType: 'management',
+        type:        FLEET.GIT_REPO,
+      }
+    }, this.$store);
 
-    this.allBundles = hash.allBundles;
     this.gitRepos = hash.gitRepos;
-    this.fleetWorkspaces = hash.fleetWorkspaces;
+    this.fleetWorkspacesData = hash.fleetWorkspaces || [];
 
-    // init cards collapse flags
-    const workspaces = this.fleetWorkspaces.filter(ws => ws.repos.length);
+    try {
+      const permissions = await checkPermissions({ workspaces: { type: FLEET.WORKSPACE }, gitRepos: { type: FLEET.GIT_REPO, schemaValidator: schema => schema.resourceMethods.includes('PUT') } }, this.$store.getters);
 
-    if (workspaces.length) {
-      workspaces.forEach((ws) => {
-        this.$set(this.isCollapsed, ws.id, false);
-      });
+      this.permissions = permissions;
+    } catch (e) {
+      console.error(e); // eslint-disable-line no-console
     }
   },
 
@@ -71,24 +86,49 @@ export default {
           sort:     'status.resourceCounts.ready',
         }
       ],
-      schema:          {},
-      allBundles:      null,
-      gitRepos:        null,
-      fleetWorkspaces: null,
-      isCollapsed:     {},
-      getStartedLink:  {
+      schema:              {},
+      allBundles:          [],
+      gitRepos:            [],
+      fleetWorkspacesData: [],
+      isCollapsed:         {},
+      permissions:         {},
+      getStartedLink:      {
         name:   'c-cluster-product-resource-create',
         params: {
-          product:  'fleet',
+          product:  NAME,
           resource: FLEET.GIT_REPO
         },
       }
     };
   },
   computed: {
-    ...mapState(['workspace']),
+    ...mapState(['workspace', 'allNamespaces']),
+    fleetWorkspaces() {
+      if (this.fleetWorkspacesData?.length) {
+        return this.fleetWorkspacesData;
+      }
+
+      // When user doesn't have access to the workspaces fall back to namespaces
+
+      return this.allNamespaces.filter((item) => {
+        return item.metadata.annotations[WORKSPACE_ANNOTATION] === WORKSPACE;
+      }).map(( obj ) => {
+        const repos = filterBy(this.gitRepos, 'metadata.namespace', obj.id);
+
+        return {
+          ...obj,
+          counts: {
+            clusters:      '-',
+            clusterGroups: '-',
+            gitRepos:      repos.length
+          },
+          repos,
+          nameDisplay: obj.id
+        };
+      });
+    },
     workspacesData() {
-      return this.fleetWorkspaces.filter(ws => ws.repos.length);
+      return this.fleetWorkspaces.filter(ws => ws.repos && ws.repos.length);
     },
     emptyWorkspaces() {
       return this.fleetWorkspaces.filter(ws => !ws.repos || !ws.repos.length);
@@ -105,7 +145,7 @@ export default {
       this.$router.push({
         name:   'c-cluster-product-resource',
         params: {
-          product:  'fleet',
+          product:  NAME,
           resource: FLEET.GIT_REPO
         },
       });
@@ -247,6 +287,14 @@ export default {
       });
     }
   },
+
+  watch: {
+    fleetWorkspaces(value) {
+      value?.filter(ws => ws.repos?.length).forEach((ws) => {
+        this.$set(this.isCollapsed, ws.id, false);
+      });
+    }
+  }
 };
 </script>
 
@@ -254,6 +302,10 @@ export default {
   <div class="fleet-dashboard">
     <Loading v-if="$fetchState.pending" />
     <!-- no git repos -->
+    <FleetNoWorkspaces
+      v-else-if="!fleetWorkspacesData.length"
+      :can-view="permissions.workspaces"
+    />
     <div
       v-else-if="!gitRepos.length"
       class="fleet-empty-dashboard"
@@ -270,15 +322,17 @@ export default {
           {{ t('fleet.dashboard.learnMore') }} <i class="icon icon-external-link" />
         </a>
       </p>
-      <h3 class="mb-30">
-        {{ t('fleet.dashboard.noRepo', null, true) }}
-      </h3>
-      <n-link
-        :to="getStartedLink"
-        class="btn role-secondary"
-      >
-        {{ t('fleet.dashboard.getStarted') }}
-      </n-link>
+      <template v-if="permissions.gitRepos">
+        <h3 class="mb-30">
+          {{ t('fleet.dashboard.noRepo', null, true) }}
+        </h3>
+        <n-link
+          :to="getStartedLink"
+          class="btn role-secondary"
+        >
+          {{ t('fleet.dashboard.getStarted') }}
+        </n-link>
+      </template>
     </div>
     <!-- fleet dashboard with repos -->
     <div
@@ -354,7 +408,9 @@ export default {
             v-on="$listeners"
           >
             <template #cell:clustersReady="{row}">
+              <span v-if="ws.type === 'namespace'"> - </span>
               <CompoundStatusBadge
+                v-else
                 :tooltip-text="getTooltipInfo('clusters', row)"
                 :badge-class="getStatusInfo('clusters', row).badgeClass"
                 :icon="getStatusInfo('clusters', row).icon"
@@ -362,7 +418,9 @@ export default {
               />
             </template>
             <template #cell:bundlesReady="{row}">
+              <span v-if="ws.type === 'namespace'"> - </span>
               <CompoundStatusBadge
+                v-else
                 :tooltip-text="getTooltipInfo('bundles', row)"
                 :badge-class="getStatusInfo('bundles', row).badgeClass"
                 :icon="getStatusInfo('bundles', row).icon"
@@ -389,6 +447,9 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+.fleet-dashboard {
+  min-height: 100vh;
+}
 .fleet-empty-dashboard {
   flex: 1;
   display: flex;

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

@@ -27,7 +27,7 @@ export default {
             }
           }
         },
-        count: constraint.violations.length
+        count: constraint.totalViolations
       }));
   },
   data(ctx) {

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

@@ -72,7 +72,7 @@ export default {
 <template>
   <div>
     <h1>Overview</h1>
-    <h4 v-html="t('istio.poweredBy', {}, true)" />
+    <h4 v-clean-html="t('istio.poweredBy', {}, true)" />
     <div class="links">
       <div
         :class="{'disabled':!kialiUrl}"
@@ -99,7 +99,7 @@ export default {
             </a>
             <hr>
             <div class="description">
-              <span v-html="t('istio.links.kiali.description', {link: monitoringUrl}, true)" />
+              <span v-clean-html="t('istio.links.kiali.description', {link: monitoringUrl}, true)" />
             </div>
           </div>
         </span>
@@ -107,7 +107,7 @@ export default {
           v-if="!kialiUrl"
           class="disabled-msg"
         >
-          <span v-html="t('istio.links.disabled', {app: 'Kiali'})" />
+          <span v-clean-html="t('istio.links.disabled', {app: 'Kiali'})" />
         </div>
       </div>
       <div
@@ -135,7 +135,7 @@ export default {
             </a>
             <hr>
             <div class="description">
-              <span v-html="t('istio.links.jaeger.description', true)" />
+              <span v-clean-html="t('istio.links.jaeger.description', true)" />
             </div>
           </div>
         </span>
@@ -143,7 +143,7 @@ export default {
           v-if="!jaegerUrl"
           class="disabled-msg"
         >
-          <span v-html="t('istio.links.disabled', {app: 'Jaeger'})" />
+          <span v-clean-html="t('istio.links.disabled', {app: 'Jaeger'})" />
         </div>
       </div>
     </div>

package/pages/c/_cluster/manager/cloudCredential/index.vue

@@ -89,7 +89,7 @@ export default {
       <template #cell:apikey="{row}">
         <span
           v-if="row.publicData"
-          v-html="row.publicData"
+          v-clean-html="row.publicData"
         />
         <span
           v-else

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

@@ -214,3 +214,10 @@ export default {
     </div>
   </section>
 </template>
+
+<style lang="scss" scoped>
+  .create-resource-container .subtype-banner {
+    min-height: 80px;
+    padding: 10px;
+  }
+</style>

package/pages/c/_cluster/uiplugins/InstallDialog.vue

@@ -36,7 +36,7 @@ export default {
 
   computed: {
     showVersionSelector() {
-      return this.plugin?.versions.length > 1;
+      return this.versionOptions?.length > 1;
     },
 
     versionOptions() {
@@ -44,8 +44,8 @@ export default {
         return [];
       }
 
-      // Don't allow update/rollback to curent version
-      const versions = this.plugin.versions.filter((v) => {
+      // Don't allow update/rollback to current version
+      const versions = this.plugin?.installableVersions?.filter((v) => {
         if (this.currentVersion) {
           return v.version !== this.currentVersion;
         }
@@ -78,12 +78,12 @@ export default {
         this.currentVersion = plugin.displayVersion;
 
         // Update to latest version, so take the first version
-        if (plugin.versions.length > 0) {
-          this.version = plugin.versions[0].version;
+        if (plugin.installableVersions?.length > 0) {
+          this.version = plugin.installableVersions?.[0]?.version;
         }
       } else if (mode === 'rollback') {
         // Find the newest version once we remove the current version
-        const versionNames = plugin.versions.filter(v => v.version !== plugin.displayVersion);
+        const versionNames = plugin.installableVersions.filter(v => v.version !== plugin.displayVersion);
 
         this.currentVersion = plugin.displayVersion;
 
@@ -93,10 +93,10 @@ export default {
       }
 
       // Make sure we have the version available
-      const versionChart = plugin.versions?.find(v => v.version === this.version);
+      const versionChart = plugin.installableVersions?.find(v => v.version === this.version);
 
       if (!versionChart) {
-        this.version = plugin.versions[0].version;
+        this.version = plugin.installableVersions?.[0]?.version;
       }
 
       this.busy = false;

package/pages/c/_cluster/uiplugins/PluginInfoPanel.vue

@@ -63,17 +63,19 @@ export default {
     },
 
     async loadPluginVersionInfo(version) {
-      this.versionError = false;
-      this.versionInfo = undefined;
-
       const versionName = version || this.info.displayVersion;
 
-      this.infoVersion = versionName;
+      const isVersionNotCompatibleWithUi = this.info.versions?.find(v => v.version === versionName && !v.isCompatibleWithUi);
 
-      if (!this.info.chart) {
+      if (!this.info.chart || isVersionNotCompatibleWithUi) {
         return;
       }
 
+      this.infoVersion = versionName;
+
+      this.versionError = false;
+      this.versionInfo = undefined;
+
       try {
         this.versionInfo = await this.$store.dispatch('catalog/getVersionInfo', {
           repoType:  this.info.chart.repoType,
@@ -204,8 +206,9 @@ export default {
             :key="v.version"
           >
             <a
+              v-tooltip="v.requiredUiVersion ? t('plugins.info.requiresVersion', { version: v.requiredUiVersion }) : ''"
               class="version-link"
-              :class="{'version-active': v.version === infoVersion}"
+              :class="{'version-active': v.version === infoVersion, 'disabled': !v.isCompatibleWithUi}"
               @click="loadPluginVersionInfo(v.version)"
             >
               {{ v.version }}
@@ -337,6 +340,7 @@ export default {
 
       .plugin-versions {
         display: flex;
+        flex-wrap: wrap;
       }
 
       .plugin-description {
@@ -349,13 +353,22 @@ export default {
         padding: 2px 8px;
         border-radius: 5px;
         user-select: none;
-        margin-right: 5px;
+        margin: 0 5px 5px 0;
+        display: block;
 
         &.version-active {
           color: var(--link-text);
           background: var(--link);
         }
 
+        &.disabled {
+          cursor: not-allowed;
+          color: var(--disabled-text) !important;
+          background-color: var(--disabled-bg) !important;
+          border-color: var(--disabled-bg) !important;
+          text-decoration: none !important;
+        }
+
         &.version-builtin {
           display: inline-block;
         }