@rancher/shell 0.3.5 → 0.3.6

package/components/Carousel.vue

@@ -47,11 +47,19 @@ export default {
   computed: {
     ...mapGetters(['clusterId']),
     trackStyle() {
-      const sliderItem = this.activeItemId * 100 / this.slider.length;
-      const width = 60 * this.slider.length;
+      let sliderItem = ( this.activeItemId + 1) * 100 / (this.slider.length + 2);
+      const width = 60 * (this.slider.length + 2);
+
+      if (this.slider.length === 1) {
+        sliderItem = 0;
+      }
 
       return `transform: translateX(-${ sliderItem }%); width: ${ width }%`;
     },
+
+    test() {
+      return 'test';
+    }
   },
 
   methods: {
@@ -64,26 +72,35 @@ export default {
     scrollSlide(i) {
       this.autoScroll = false;
       this.activeItemId = i;
-      setTimeout(() => {
-        this.slidePosition();
-      }, 400);
     },
 
-    nextPrev(item) {
+    nextPrev(direction) {
       this.autoScroll = false;
-      if (item === 'next' && this.activeItemId < this.slider.length - 1) {
-        this.activeItemId++;
-      }
+      const slideTrack = document.getElementById('slide-track');
 
-      if (item === 'prev' && this.activeItemId > 0) {
-        this.activeItemId--;
-      }
+      slideTrack.style.transition = `transform 450ms ease-in-out`;
+
+      direction !== 'prev' ? (this.activeItemId++) : (this.activeItemId--);
 
-      this.slidePosition();
+      slideTrack.addEventListener('transitionend', this.slideTransition);
+    },
+
+    slideTransition() {
+      const slideTrack = document.getElementById('slide-track');
+      const slidesArray = this.slider.length + 2;
+
+      if (this.activeItemId === -1) {
+        slideTrack.style.transition = 'none';
+        this.activeItemId = this.slider.length - 1;
+      }
+      if (this.activeItemId === slidesArray - 2) {
+        slideTrack.style.transition = 'none';
+        this.activeItemId = 0;
+      }
     },
 
     autoScrollSlide() {
-      if (this.activeItemId < this.slider.length && this.autoScroll ) {
+      if (this.activeItemId < (this.slider.length + 1) && this.autoScroll ) {
         this.activeItemId++;
       }
 
@@ -91,18 +108,7 @@ export default {
         this.autoScroll = false;
         this.activeItemId = 0;
       }
-      this.slidePosition();
     },
-
-    slidePosition() {
-      if (this.activeItemId <= 1) {
-        this.$refs.slide[this.slider.length - 1].style.left = '-93%';
-        this.$refs.slide[0].style.left = '7%';
-      } else {
-        this.$refs.slide[this.slider.length - 1].style.left = '7%';
-        this.$refs.slide[0].style.left = '107%';
-      }
-    }
   },
 
   beforeDestroy() {
@@ -112,14 +118,30 @@ export default {
   },
 
   mounted() {
+    const slideTrack = document.getElementById('slide-track');
+
+    if (this.slider.length === 1) {
+      // singleSlide.style = 'width: 100%; max-width: 100%';
+      slideTrack.style = 'transform:translateX(0%); width:100%; left:0';
+    } else {
+      const node = document.getElementById('slide0');
+      const clone = node.cloneNode(true);
+
+      const nodeLast = document.getElementById(`slide${ this.slider.length - 1 }`);
+      const cloneLast = nodeLast.cloneNode(true);
+
+      slideTrack.appendChild(clone);
+      slideTrack.insertBefore(cloneLast, slideTrack.children[0]);
+    }
+
     const lastSeenCluster = sessionStorage.getItem(carouselSeenStorageKey);
 
     if (lastSeenCluster !== this.clusterId) {
       // Session storage lasts until tab/window closed (retained on refresh)
       sessionStorage.setItem(carouselSeenStorageKey, this.clusterId);
-
-      this.autoScrollSlideInterval = setInterval(this.autoScrollSlide, 5000);
     }
+
+    this.autoScrollSlideInterval = setInterval(this.autoScrollSlide, 5000);
   },
 
 };
@@ -127,7 +149,10 @@ export default {
 </script>
 
 <template>
-  <div class="slider">
+  <div
+    class="slider"
+    :class="{'disable': sliders.length === 1}"
+  >
     <div
       id="slide-track"
       ref="slider"
@@ -141,6 +166,7 @@ export default {
         ref="slide"
         :key="get(slide, keyField)"
         class="slide"
+        :class="{'singleSlide': sliders.length === 1}"
         :href="asLink ? get(slide, linkField) : null"
         :target="get(slide, targetField)"
         :rel="rel"
@@ -155,13 +181,16 @@ export default {
               :label="slide.repoName"
               color="slider-badge mb-20"
             />
-            <h1>{{ slide.chartNameDisplay }}</h1>
+            <h1>{{ slide.chartNameDisplay }} {{ i + 1 }}</h1>
             <p>{{ slide.chartDescription }}</p>
           </div>
         </div>
       </div>
     </div>
-    <div class="controls">
+    <div
+      class="controls"
+      :class="{'disable': sliders.length === 1}"
+    >
       <div
         v-for="(slide, i) in slider"
         :key="i"
@@ -173,7 +202,7 @@ export default {
     <div
       ref="prev"
       class="prev"
-      :class="[activeItemId === 0 ? 'disabled' : 'prev']"
+      :class="{'disable': sliders.length === 1}"
       @click="nextPrev('prev')"
     >
       <i class="icon icon-chevron-left icon-4x" />
@@ -181,7 +210,7 @@ export default {
     <div
       ref="next"
       class="next"
-      :class="[activeItemId === slider.length - 1 ? 'disabled' : 'next']"
+      :class="{'disable': sliders.length === 1}"
       @click="nextPrev('next')"
     >
       <i class="icon icon-chevron-right icon-4x" />
@@ -197,7 +226,19 @@ export default {
   place-items: center;
   overflow: hidden;
   margin-bottom: 30px;
-  min-width: 700px;
+  // min-width: 700px;
+
+  &.disable::before,
+  &.disable::after {
+    display: none;
+  }
+
+  &.disable:hover {
+    .prev,
+    .next {
+      display: none;
+    }
+  }
 
   &:hover {
     .prev,
@@ -212,6 +253,7 @@ export default {
   animation: scrolls 10s ;
   position: relative;
   transition: 1s ease-in-out;
+  left: 21%;
 }
 
 .slider-badge {
@@ -226,13 +268,12 @@ export default {
   position: relative;
   border: 1px solid var(--tabbed-border);
   border-radius: var(--border-radius);
-  left: 7%;
   cursor: pointer;
 
-  &:last-child {
-    left: -93%;
+  &.singleSlide {
+    width: 100%;
+    max-width: 100%;
   }
-
   .slide-header {
     background: var(--default);
     width: 100%;
@@ -278,6 +319,9 @@ export default {
 .slider::before {
   left: 0;
   top: 0;
+  &.disable {
+    display: none;
+  }
 }
 .slider::after{
   right: -1px;
@@ -291,6 +335,10 @@ export default {
   justify-content: center;
   margin-top: 10px;
 
+  &.disable {
+    display: none;
+  }
+
   .control-item {
     width: 10px;
     height: 10px;

package/components/EtcdInfoBanner.vue

@@ -3,15 +3,19 @@ import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
 import { mapGetters } from 'vuex';
 import { hasLeader, leaderChanges, failedProposals } from '@shell/utils/grafana';
+import { CATALOG } from '@shell/config/types';
 
 export default {
   components: { Banner, Loading },
   async fetch() {
-    const leader = await hasLeader(this.$store.dispatch, this.currentCluster.id);
+    const inStore = this.$store.getters['currentProduct'].inStore;
+    const res = await this.$store.dispatch(`${ inStore }/find`, { type: CATALOG.APP, id: 'cattle-monitoring-system/rancher-monitoring' });
+    const monitoringVersion = res?.currentVersion;
+    const leader = await hasLeader(monitoringVersion, this.$store.dispatch, this.currentCluster.id);
 
     this.hasLeader = leader ? this.t('generic.yes') : this.t('generic.no');
-    this.leaderChanges = await leaderChanges(this.$store.dispatch, this.currentCluster.id);
-    this.failedProposals = await failedProposals(this.$store.dispatch, this.currentCluster.id);
+    this.leaderChanges = await leaderChanges(monitoringVersion, this.$store.dispatch, this.currentCluster.id);
+    this.failedProposals = await failedProposals(monitoringVersion, this.$store.dispatch, this.currentCluster.id);
   },
   data() {
     return {

package/components/ExplorerMembers.vue

@@ -114,7 +114,6 @@ export default {
           labelKey: 'tableHeaders.role',
           value:    'roleTemplate.nameDisplay'
         },
-        { ...AGE, value: 'createdTS' }
       ],
       loadingProjectBindings: true,
       loadingClusterBindings: true
@@ -185,7 +184,25 @@ export default {
         };
       });
 
-      return [...fakeRows, ...this.filteredProjectRoleTemplateBindings];
+      // We need to group each of the TemplateRoleBindings by the user + project
+      const userRoles = [...fakeRows, ...this.filteredProjectRoleTemplateBindings].reduce((rows, curr) => {
+        const { userId, roleTemplate, projectId } = curr;
+
+        const userKey = userId + projectId;
+
+        if (!rows[userKey] && userId ) {
+          rows[userKey] = curr;
+          rows[userKey].allRoles = [];
+        }
+
+        if (roleTemplate && userId) {
+          rows[userKey].allRoles.push(curr.roleTemplate);
+        }
+
+        return rows;
+      }, {});
+
+      return Object.values(userRoles);
     },
     canManageMembers() {
       return canViewClusterPermissionsEditor(this.$store);
@@ -223,6 +240,26 @@ export default {
         modalSticky: true
       });
     },
+
+    getProjectRoleBinding(row, role) {
+      // Each row is a combination of user and project
+      // So find the specfic roleBindingTemplate corresponding to the specific role + project
+      return this.projectRoleTemplateBindings.find(r => r.roleTemplateId === role.id && r.userId === row.userId);
+    },
+
+    async removeRole(row, role, event) {
+      const resource = this.getProjectRoleBinding(row, role);
+
+      await resource.promptRemove();
+    },
+
+    viewRoleInAPI(row, role) {
+      const resource = this.getProjectRoleBinding(row, role);
+
+      if (resource?.canViewInApi) {
+        resource.viewInApi();
+      }
+    },
     slotName(project) {
       return `main-row:${ project.id }`;
     },
@@ -249,7 +286,7 @@ export default {
     <Tabbed>
       <Tab
         name="cluster-membership"
-        label="Cluster Membership"
+        :label="t('members.clusterMemebership')"
       >
         <div
           v-if="canEditClusterMembers"
@@ -266,7 +303,8 @@ export default {
           :schema="schema"
           :headers="headers"
           :rows="filteredClusterRoleTemplateBindings"
-          :groupable="false"
+          :groupable="true"
+          :show-grouping="true"
           :namespaced="false"
           :loading="$fetchState.pending || !currentCluster || loadingClusterBindings"
           sub-search="subSearch"
@@ -276,13 +314,15 @@ export default {
       <Tab
         v-if="canManageProjectMembers"
         name="project-membership"
-        label="Project Membership"
+        :label="t('members.projectMembership')"
       >
         <SortableTable
           group-by="projectId"
           :loading="$fetchState.pending || !currentCluster || loadingProjectBindings"
           :rows="rowsWithFakeProjects"
           :headers="projectRoleTemplateColumns"
+          :table-actions="false"
+          :row-actions="false"
         >
           <template #group-by="group">
             <div class="group-bar">
@@ -307,6 +347,31 @@ export default {
               </div>
             </div>
           </template>
+          <template
+            #cell:role="{row}"
+          >
+            <span
+              v-for="(role, j) in row.allRoles"
+              :key="j"
+
+              ref="value"
+              :data-testid="`role-value-${j}`"
+              class="role"
+            >
+              <span
+                class="role-value"
+                :class="{'text-link-enabled' : row.canViewInApi}"
+                @click="viewRoleInAPI(row, role)"
+              >
+                {{ role.nameDisplay }}
+              </span>
+              <i
+                class="icon icon-close"
+                :data-testid="`role-values-close-${j}`"
+                @click="removeRole(row, role, $event)"
+              />
+            </span>
+          </template>
           <template
             v-for="project in projectsWithoutRoles"
             v-slot:[slotName(project)]
@@ -330,6 +395,36 @@ export default {
 </template>
 
 <style lang='scss' scoped>
+
+.role {
+  align-items: center;
+    background-color: rgba(0, 0, 0, 0.05);
+    border: 1px solid var(--header-border);
+    border-radius: 5px;
+    color: var(--tag-text);
+    line-height: 20px;
+    padding: 2px 5px;
+    white-space: nowrap;
+    display: inline-flex;
+    margin-right: 3px;
+}
+
+.role-value {
+  &.text-link-enabled {
+    cursor: pointer;
+    &:hover {
+      color: var(--primary);
+    }
+  }
+  + .icon-close {
+    margin-left: 3px;
+    cursor: pointer;
+    &:hover {
+      color: var(--primary);
+    }
+  }
+}
+
 .project-members {
   & ::v-deep .group-bar{
     display: flex;

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';
@@ -236,6 +236,9 @@ export default {
 
     notInProjectKey() {
       return this.$store.getters['i18n/t']('resourceTable.groupLabel.notInAProject');
+    },
+    showCreateNsButton() {
+      return this.groupPreference !== 'namespace';
     }
   },
   methods: {
@@ -284,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;
 
@@ -343,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"

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: {
@@ -131,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 = {};

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),