@rancher/shell 0.3.4 → 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/ChartPsp.vue

@@ -0,0 +1,76 @@
+<script>
+import { Checkbox } from '@components/Form/Checkbox';
+import { mapGetters } from 'vuex';
+
+export default {
+  components: { Checkbox },
+  props:      {
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+    mode: {
+      type:    String,
+      default: 'edit'
+    },
+
+    /**
+     * Optional title section prior checkbox
+     */
+    title: {
+      type:    String,
+      default: null
+    },
+
+    /**
+     * Cluster information
+     */
+    cluster: {
+      type:    Object,
+      default: null
+    }
+  },
+  created() {
+    if (!this.value.global.cattle) {
+      this.$set(this.value.global, 'cattle', { psp: { enabled: false } });
+    }
+    if (!this.value.global.cattle.psp) {
+      this.$set(this.value.global.cattle, 'psp', { enabled: false });
+    }
+  },
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    /**
+     * Display checkbox only if contains PSP or K8S version is less than 1.25
+     */
+    hasCheckbox() {
+      const clusterVersion = this.cluster?.kubernetesVersion || '';
+      const version = clusterVersion.match(/\d+/g);
+      const isRequiredVersion = version?.length ? +version[0] === 1 && +version[1] < 25 : false;
+
+      return isRequiredVersion;
+    }
+  }
+};
+</script>
+
+<template>
+  <div
+    v-if="hasCheckbox"
+    class="mt-10 mb-10"
+  >
+    <h3 v-if="title">
+      {{ title }}
+    </h3>
+
+    <Checkbox
+      v-model="value.global.cattle.psp.enabled"
+      data-testid="psp-checkbox"
+      :mode="mode"
+      :label="t('catalog.chart.enablePSP')"
+    />
+  </div>
+</template>

package/components/CruResource.vue

@@ -358,6 +358,10 @@ export default {
       const newNamespaceName = get(this.resource, this.namespaceKey);
       let namespaceAlreadyExists = false;
 
+      if (!this.createNamespace) {
+        return;
+      }
+
       try {
         // This is in a try-catch block because the call to fetch
         // a namespace throws an error if the namespace is not found.
@@ -461,7 +465,7 @@ export default {
                     <h5>
                       <span
                         v-if="$store.getters['i18n/exists'](subtype.label)"
-                        v-html="t(subtype.label)"
+                        v-clean-html="t(subtype.label)"
                       />
                       <span v-else>{{ subtype.label }}</span>
                     </h5>
@@ -480,7 +484,7 @@ export default {
                   >
                     <span
                       v-if="$store.getters['i18n/exists'](subtype.description)"
-                      v-html="t(subtype.description, {}, true)"
+                      v-clean-html="t(subtype.description, {}, true)"
                     />
                     <span v-else>{{ subtype.description }}</span>
                   </div>

package/components/DashboardMetrics.vue

@@ -47,25 +47,26 @@ export default {
 </script>
 
 <template>
-  <div
-    class="dashboard-metrics"
-    :class="!hasSummaryAndDetail && 'external-link-pull-left'"
+  <div
+    class="dashboard-metrics"
+    :class="!hasSummaryAndDetail && 'external-link-pull-left'"
   >
     <div class="graph-options mb-10">
-      <DashboardOptions
-        v-model="graphOptions"
-        :has-summary-and-detail="hasSummaryAndDetail"
+      <DashboardOptions
+        v-model="graphOptions"
+        :has-summary-and-detail="hasSummaryAndDetail"
       />
     </div>
     <div class="info">
       <slot />
     </div>
-    <div
-      class="graphs"
-      :style="{height: graphHeight}"
+    <div
+      class="graphs"
+      :style="{height: graphHeight}"
     >
       <GrafanaDashboard
         v-if="graphOptions.type === 'detail'"
+        key="'detail'"
         class="col span-12 detail"
         :background-color="graphBackgroundColor"
         :theme="theme"
@@ -76,6 +77,7 @@ export default {
       />
       <GrafanaDashboard
         v-else
+        key="'summary'"
         class="col span-12 summary"
         :background-color="graphBackgroundColor"
         :theme="theme"
@@ -108,7 +110,7 @@ export default {
     .external-link {
       position: absolute;
       left: 10px;
-      top: -45px;
+      top: -47px;
     }
   }
 }

package/components/DetailText.vue

@@ -169,8 +169,8 @@ export default {
 
     <span
       v-else
+      v-clean-html="bodyHtml"
       :class="{'conceal': concealed, 'monospace': monospace && !isBinary}"
-      v-html="bodyHtml"
     />
 
     <template v-if="!isBinary && !jsonStr && isLong && !expanded">

package/components/DisableAuthProviderModal.vue

@@ -49,7 +49,7 @@ export default {
       </h4>
       <div slot="body">
         <div class="mb-10">
-          <p v-html="t('promptRemove.attemptingToRemoveAuthConfig', null, true)" />
+          <p v-clean-html="t('promptRemove.attemptingToRemoveAuthConfig', null, true)" />
         </div>
       </div>
       <template #actions>

package/components/EmberPage.vue

@@ -522,8 +522,8 @@ export default {
     />
     <div
       v-if="inline && !loaded"
+      v-clean-html="t('generic.loading', {}, true)"
       class="inline-loading"
-      v-html="t('generic.loading', {}, true)"
     />
     <div
       v-if="error"

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 {
@@ -26,10 +30,10 @@ export default {
 
 <template>
   <Loading v-if="$fetchState.pending" />
-  <Banner
-    v-else
-    class="banner"
-    color="info"
+  <Banner
+    v-else
+    class="banner"
+    color="info"
   >
     <div class="datum">
       <label>{{ t('etcdInfoBanner.hasLeader') }}</label> {{ hasLeader }}
@@ -51,6 +55,7 @@ export default {
 
         .datum {
             text-align: center;
+            margin-right: 5px;
         }
 
         & ::v-deep label {

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">
@@ -291,8 +331,8 @@ export default {
                 class="group-tab"
               >
                 <div
+                  v-clean-html="getProjectLabel(group)"
                   class="project-name"
-                  v-html="getProjectLabel(group)"
                 />
               </div>
               <div class="right">
@@ -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;