@rancher/shell 0.3.4 → 0.3.6

package/components/ExplorerProjectsNamespaces.vue

@@ -4,7 +4,7 @@ import ResourceTable from '@shell/components/ResourceTable';
 import { STATE, AGE, NAME } from '@shell/config/table-headers';
 import { uniq } from '@shell/utils/array';
 import { MANAGEMENT, NAMESPACE, VIRTUAL_TYPES } from '@shell/config/types';
-import { PROJECT_ID } from '@shell/config/query-params';
+import { PROJECT_ID, FLAT_VIEW } from '@shell/config/query-params';
 import Masthead from '@shell/components/ResourceList/Masthead';
 import { mapPref, GROUP_RESOURCES, ALL_NAMESPACES } from '@shell/store/prefs';
 import MoveModal from '@shell/components/MoveModal';
@@ -112,6 +112,10 @@ export default {
       // is updated if a new project is created or removed.
       const projectsInAllClusters = this.$store.getters['management/all'](MANAGEMENT.PROJECT);
 
+      if (this.currentProduct?.customNamespaceFilter && this.currentProduct?.inStore && this.$store.getters[`${ this.currentProduct.inStore }/filterProject`]) {
+        return this.$store.getters[`${ this.currentProduct.inStore }/filterProject`];
+      }
+
       const clustersInProjects = projectsInAllClusters.filter(project => project.spec.clusterName === clusterId);
 
       return clustersInProjects;
@@ -232,6 +236,9 @@ export default {
 
     notInProjectKey() {
       return this.$store.getters['i18n/t']('resourceTable.groupLabel.notInAProject');
+    },
+    showCreateNsButton() {
+      return this.groupPreference !== 'namespace';
     }
   },
   methods: {
@@ -280,6 +287,21 @@ export default {
 
       return location;
     },
+
+    createNamespaceLocationFlatList() {
+      const location = this.createNamespaceLocationOverride ? { ...this.createNamespaceLocationOverride } : {
+        name:   'c-cluster-product-resource-create',
+        params: {
+          product:  this.$store.getters['currentProduct']?.name,
+          resource: NAMESPACE
+        },
+      };
+
+      location.query = { [FLAT_VIEW]: true };
+
+      return location;
+    },
+
     showProjectAction(event, group) {
       const project = group.rows[0].project;
 
@@ -339,7 +361,19 @@ export default {
       :show-incremental-loading-indicator="showIncrementalLoadingIndicator"
       :load-resources="loadResources"
       :load-indeterminate="loadIndeterminate"
-    />
+    >
+      <template
+        v-if="showCreateNsButton"
+        slot="extraActions"
+      >
+        <n-link
+          :to="createNamespaceLocationFlatList()"
+          class="btn role-primary mr-10"
+        >
+          {{ t('projectNamespaces.createNamespace') }}
+        </n-link>
+      </template>
+    </Masthead>
     <ResourceTable
       ref="table"
       class="table"
@@ -364,8 +398,8 @@ export default {
             class="group-tab"
           >
             <div
+              v-clean-html="projectLabel(group.group)"
               class="project-name"
-              v-html="projectLabel(group.group)"
             />
             <div
               v-if="projectDescription(group.group)"
@@ -411,6 +445,11 @@ export default {
           <span v-else>
             {{ row.name }}
           </span>
+          <i
+            v-if="row.injectionEnabled"
+            v-tooltip="t('projectNamespaces.isIstioInjectionEnabled')"
+            class="icon icon-istio ml-5"
+          />
           <i
             v-if="row.hasSystemLabels"
             v-tooltip="getPsaTooltip(row)"
@@ -483,6 +522,10 @@ export default {
     .namespace-name {
       display: flex;
       align-items: center;
+
+      .icon-istio {
+        color: var(--primary);
+      }
     }
   }
 }

package/components/FileDiff.vue

@@ -1,7 +1,6 @@
 <script>
 import { Diff2Html } from 'diff2html';
 import { createPatch } from 'diff';
-import $ from 'jquery';
 
 export default {
   props: {
@@ -74,21 +73,21 @@ export default {
         return;
       }
 
-      const container = $(this.$refs.root);
+      const container = this.$refs.root;
 
-      if ( !container || !container.length ) {
+      if ( !container ) {
         return;
       }
 
-      const offset = container.offset();
+      const offset = container.getBoundingClientRect();
 
       if ( !offset ) {
         return;
       }
 
-      const desired = $(window).innerHeight() - offset.top - this.footerSpace;
+      const desired = window.innerHeight - offset.top - this.footerSpace;
 
-      container.css('height', `${ Math.max(0, desired) }px`);
+      container.style.height = `${ Math.max(0, desired) }px`;
     },
   },
 };
@@ -99,8 +98,8 @@ export default {
     <resize-observer @notify="fit" />
     <div
       ref="root"
+      v-clean-html="html"
       class="root"
-      v-html="html"
     />
   </div>
 </template>

package/components/GrafanaDashboard.vue

@@ -2,6 +2,7 @@
 import Loading from '@shell/components/Loading';
 import { Banner } from '@components/Banner';
 import { computeDashboardUrl } from '@shell/utils/grafana';
+import { CATALOG } from '@shell/config/types';
 
 export default {
   components: { Banner, Loading },
@@ -31,9 +32,15 @@ export default {
       default: 'dark'
     }
   },
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const res = await this.$store.dispatch(`${ inStore }/find`, { type: CATALOG.APP, id: 'cattle-monitoring-system/rancher-monitoring' });
+
+    this.monitoringVersion = res?.currentVersion;
+  },
   data() {
     return {
-      loading: false, error: false, interval: null, initialUrl: this.computeUrl(), errorTimer: null
+      loading: false, error: false, interval: null, initialUrl: this.computeUrl(), errorTimer: null, monitoringVersion: null
     };
   },
   computed: {
@@ -54,14 +61,11 @@ export default {
     }
   },
   watch: {
-    currentUrl() {
+    currentUrl(neu) {
+      // Should consider changing `this.graphWindow?.angular` to something like `!loaded && !error`
+      // https://github.com/rancher/dashboard/pull/5802
       if (this.graphHistory && this.graphWindow?.angular) {
-        const angularElement = this.graphWindow.angular.element(this.graphDocument.querySelector('.grafana-app'));
-        const injector = angularElement.injector();
-
-        this.graphHistory.pushState({}, '', this.currentUrl);
-        injector.get('$route').updateParams(this.computeParams());
-        injector.get('$route').reload();
+        this.graphWindow.location.replace(neu);
       }
     },
 
@@ -134,7 +138,7 @@ export default {
       const clusterId = this.$store.getters['currentCluster'].id;
       const params = this.computeParams();
 
-      return computeDashboardUrl(embedUrl, clusterId, params);
+      return computeDashboardUrl(this.monitoringVersion, embedUrl, clusterId, params);
     },
     computeParams() {
       const params = {};
@@ -222,15 +226,15 @@ export default {
 
 <template>
   <div class="grafana-graph">
-    <Banner
-      v-if="error"
-      color="error"
-      style="z-index: 1000"
+    <Banner
+      v-if="error"
+      color="error"
+      style="z-index: 1000"
     >
       <div class="text-center">
-        {{ t('grafanaDashboard.failedToLoad') }} <a
-          href="#"
-          @click="reload"
+        {{ t('grafanaDashboard.failedToLoad') }} <a
+          href="#"
+          @click="reload"
         >{{ t('grafanaDashboard.reload') }}</a>
       </div>
     </Banner>
@@ -245,14 +249,14 @@ export default {
     <div v-if="loading">
       <Loading />
     </div>
-    <div
-      v-if="!loading && !error"
-      class="external-link"
+    <div
+      v-if="!loading && !error"
+      class="external-link"
     >
-      <a
-        :href="grafanaUrl"
-        target="_blank"
-        rel="noopener noreferrer nofollow"
+      <a
+        :href="grafanaUrl"
+        target="_blank"
+        rel="noopener noreferrer nofollow"
       >{{ t('grafanaDashboard.grafana') }} <i class="icon icon-external-link" /></a>
     </div>
   </div>

package/components/LazyImage.vue

@@ -1,6 +1,4 @@
 <script>
-import $ from 'jquery';
-
 export default {
   props: {
     initialSrc: {
@@ -32,31 +30,31 @@ export default {
   },
 
   beforeDestroy() {
-    const $img = $(this.$refs.img);
+    const img = this.$refs.img;
 
-    if ( $img?.length ) {
-      $img.off('error', this.boundError);
+    if (img) {
+      img.removeEventListener('error', this.boundError);
     }
   },
 
   methods: {
     // Ensure we load the image when the source changes
     loadImage() {
-      const $img = $(this.$refs.img);
+      const img = this.$refs.img;
 
-      if ( this.src ) {
-        $img.attr('src', this.src);
+      if (this.src) {
+        img.setAttribute('src', this.src);
         this.boundError = this.onError.bind(this);
 
-        $img.on('error', this.boundError);
+        img.addEventListener('error', this.boundError);
       }
     },
 
     onError() {
-      const $img = $(this.$refs.img);
+      const img = this.$refs.img;
 
-      if ( $img?.length ) {
-        $img.attr('src', this.errorSrc);
+      if (img) {
+        img.setAttribute('src', this.errorSrc);
       }
     }
   }

package/components/LogItem.vue

@@ -36,8 +36,8 @@ export default {
   <div class="line">
     <span class="time">{{ format(source.time) }}</span>
     <span
+      v-clean-html="source.msg"
       class="msg"
-      v-html="source.msg"
     />
   </div>
 </template>

package/components/Markdown.vue

@@ -77,8 +77,8 @@ export default {
 <template>
   <div
     v-if="loaded"
+    v-clean-html="sanitized"
     class="markdown"
-    v-html="sanitized"
   />
   <Loading v-else />
 </template>

package/components/PromptRemove.vue

@@ -343,7 +343,7 @@ export default {
         <div class="mb-10">
           <template v-if="!hasCustomRemove">
             {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-              v-html="resourceNames(names, plusMore, t)"
+              v-clean-html="resourceNames(names, plusMore, t)"
             />
           </template>
 
@@ -367,7 +367,7 @@ export default {
               class="mt-10"
             >
               <span
-                v-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) }, true)"
+                v-clean-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) }, true)"
               />
             </div>
           </template>

package/components/PromptRestore.vue

@@ -218,8 +218,8 @@ export default {
     >
       <h4
         slot="title"
+        v-clean-html="t('promptRestore.title', null, true)"
         class="text-default-text"
-        v-html="t('promptRestore.title', null, true)"
       />
 
       <div

package/components/ResourceDetail/Masthead.vue

@@ -429,6 +429,15 @@ export default {
               class="masthead-state"
               :value="value"
             />
+            <span
+              v-if="!isCreate && value.injectionEnabled"
+              class="masthead-istio"
+            >
+              <i
+                v-tooltip="t('projectNamespaces.isIstioInjectionEnabled')"
+                class="icon icon-sm icon-istio"
+              />
+            </span>
           </h1>
         </div>
         <div
@@ -568,6 +577,13 @@ export default {
     top: -2px;
   }
 
+  .masthead-istio {
+    .icon {
+      vertical-align: middle;
+      color: var(--primary);
+    }
+  }
+
   .left-right-split {
     display: grid;
     align-items: center;

package/components/ResourceDetail/index.vue

@@ -13,6 +13,7 @@ import DetailTop from '@shell/components/DetailTop';
 import { clone, diff } from '@shell/utils/object';
 import IconMessage from '@shell/components/IconMessage';
 import ForceDirectedTreeChart from '@shell/components/fleet/ForceDirectedTreeChart';
+import { checkSchemasForFindAllHash } from '@shell/utils/auth';
 
 function modeFor(route) {
   if ( route.query?.mode === _IMPORT ) {
@@ -159,9 +160,24 @@ export default {
       }
     } else {
       if ( as === _GRAPH ) {
-        await store.dispatch('management/findAll', { type: FLEET.CLUSTER });
-        await store.dispatch('management/findAll', { type: FLEET.BUNDLE });
-        await store.dispatch('management/findAll', { type: FLEET.BUNDLE_DEPLOYMENT });
+        const graphSchema = await checkSchemasForFindAllHash({
+          cluster: {
+            inStoreType: 'management',
+            type:        FLEET.CLUSTER
+          },
+          bundle: {
+            inStoreType: 'management',
+            type:        FLEET.BUNDLE
+          },
+
+          bundleDeployment: {
+            inStoreType: 'management',
+            type:        FLEET.BUNDLE_DEPLOYMENT
+          }
+
+        }, this.$store);
+
+        this.canViewChart = graphSchema.cluster && graphSchema.bundle && graphSchema.bundleDeployment;
       }
 
       let fqid = id;
@@ -249,6 +265,7 @@ export default {
       value:           null,
       model:           null,
       notFound:        null,
+      canViewChart:    true,
     };
   },
 
@@ -385,7 +402,7 @@ export default {
     </Masthead>
 
     <ForceDirectedTreeChart
-      v-if="isGraph"
+      v-if="isGraph && canViewChart"
       :data="chartData"
       :fdc-config="getGraphConfig"
     />

package/components/ResourceList/index.vue

@@ -177,8 +177,8 @@ export default {
   >
     <template #message>
       <span
+        v-clean-html="t('resourceList.nsFiltering', { resource: $store.getters['type-map/labelFor'](schema, 2) || customTypeDisplay }, true)"
         class="filter"
-        v-html="t('resourceList.nsFiltering', { resource: $store.getters['type-map/labelFor'](schema, 2) || customTypeDisplay }, true)"
       />
     </template>
   </IconMessage>

package/components/ResourceTable.vue

@@ -30,6 +30,9 @@ export const defaultTableSortGenerationFn = (schema, $store) => {
   if ( nsFilterKey ) {
     return `${ sortKey }/${ nsFilterKey }`;
   }
+
+  // covers case where we have no current cluster's ns cache
+  return sortKey;
 };
 
 export default {
@@ -462,8 +465,8 @@ export default {
 
     <template #group-by="{group: thisGroup}">
       <div
+        v-clean-html="thisGroup.ref"
         class="group-tab"
-        v-html="thisGroup.ref"
       />
     </template>
 

package/components/SingleClusterInfo.vue

@@ -118,11 +118,11 @@ export default {
         class="glance-item"
       >
         <label>{{ t('glance.version') }}: </label>
+        <span>{{ clusterDetail.kubernetesVersionBase }}</span>
         <span
           v-if="clusterDetail.kubernetesVersionExtension"
-          style="font-size: 0.5em"
+          style="font-size: 0.75em"
         >{{ clusterDetail.kubernetesVersionExtension }}</span>
-        <span>{{ clusterDetail.kubernetesVersionBase }}</span>
       </div>
       <div class="glance-item">
         <label>{{ t('glance.created') }}: </label>

package/components/SortableTable/THead.vue

@@ -242,7 +242,7 @@ export default {
             v-if="col.sort"
             v-tooltip="tooltip(col)"
           >
-            <span v-html="labelFor(col)" />
+            <span v-clean-html="labelFor(col)" />
             <i
               v-show="hasAdvancedFiltering && !col.isFilter"
               v-tooltip="t('sortableTable.tableHeader.noFilter')"

package/components/SortableTable/index.vue

@@ -7,7 +7,6 @@ import { removeObject } from '@shell/utils/array';
 import { Checkbox } from '@components/Form/Checkbox';
 import AsyncButton, { ASYNC_BUTTON_STATES } from '@shell/components/AsyncButton';
 import ActionDropdown from '@shell/components/ActionDropdown';
-import $ from 'jquery';
 import throttle from 'lodash/throttle';
 import debounce from 'lodash/debounce';
 import THead from './THead';
@@ -19,6 +18,8 @@ import grouping from './grouping';
 import actions from './actions';
 import AdvancedFiltering from './advanced-filtering';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { getParent } from '@shell/utils/dom';
+
 // Uncomment for table performance debugging
 // import tableDebug from './debug';
 
@@ -340,10 +341,10 @@ export default {
     }, 200);
 
     // Add scroll listener to the main element
-    const $main = $('main');
+    const $main = document.querySelector('main');
 
     this._onScroll = this.onScroll.bind(this);
-    $main.on('scroll', this._onScroll);
+    $main?.addEventListener('scroll', this._onScroll);
   },
 
   beforeDestroy() {
@@ -354,9 +355,9 @@ export default {
     clearTimeout(this._delayedColumnsTimer);
     clearTimeout(this.manualRefreshTimer);
 
-    const $main = $('main');
+    const $main = document.querySelector('main');
 
-    $main.off('scroll', this._onScroll);
+    $main?.removeEventListener('scroll', this._onScroll);
   },
 
   watch: {
@@ -817,13 +818,12 @@ export default {
     },
 
     nearestCheckbox() {
-      const $cur = $(document.activeElement).closest('tr.main-row').find('.checkbox-custom');
-
-      return $cur[0];
+      return document.activeElement.closest('tr.main-row')?.querySelector('.checkbox-custom');
     },
 
     focusAdjacent(next = true) {
-      const all = $('.checkbox-custom', this.$el).toArray();
+      const all = Array.from(this.$el.querySelectorAll('.checkbox-custom'));
+
       const cur = this.nearestCheckbox();
       let idx = -1;
 
@@ -837,10 +837,14 @@ export default {
 
       if ( idx < 1 ) { // Don't go up to the check all button
         idx = 1;
+
+        return null;
       }
 
       if ( idx >= all.length ) {
         idx = all.length - 1;
+
+        return null;
       }
 
       if ( all[idx] ) {
@@ -852,14 +856,22 @@ export default {
 
     focusNext: throttle(function(event, more = false) {
       const elem = this.focusAdjacent(true);
-      const row = $(elem).parents('tr');
+      const row = getParent(elem, 'tr');
+
+      if (row?.classList.contains('row-selected')) {
+        return;
+      }
 
       this.keySelectRow(row, more);
     }, 50),
 
     focusPrevious: throttle(function(event, more = false) {
       const elem = this.focusAdjacent(false);
-      const row = $(elem).parents('tr');
+      const row = getParent(elem, 'tr');
+
+      if (row?.classList.contains('row-selected')) {
+        return;
+      }
 
       this.keySelectRow(row, more);
     }, 50),
@@ -926,7 +938,7 @@ export default {
                   v-if="act.icon"
                   :class="act.icon"
                 />
-                <span v-html="act.label" />
+                <span v-clean-html="act.label" />
               </button>
               <ActionDropdown
                 :class="bulkActionsDropdownClass"
@@ -964,7 +976,7 @@ export default {
                         v-if="act.icon"
                         :class="act.icon"
                       />
-                      <span v-html="act.label" />
+                      <span v-clean-html="act.label" />
                     </li>
                   </ul>
                 </template>
@@ -1325,6 +1337,9 @@ export default {
             :full-colspan="fullColspan"
             :row="row.row"
             :sub-matches="subMatches"
+            :keyField="keyField"
+            :componentTestid="componentTestid"
+            :i="i"
             :onRowMouseEnter="onRowMouseEnter"
             :onRowMouseLeave="onRowMouseLeave"
           >