@rancher/shell 0.1.2 → 0.1.4

package/components/ActionMenu.vue

@@ -155,10 +155,10 @@ export default {
         // If the action menu state is controlled with Vuex,
         // use the target element and the target event
         // to position the menu.
-        this.style = fitOnScreen(menu, event || elem, {
+        this.style = fitOnScreen(menu, elem || event, {
           overlapX:  true,
-          fudgeX:    elem ? 4 : 0,
-          fudgeY:    elem ? 4 : 0,
+          fudgeX:    elem ? -2 : 0,
+          fudgeY:    elem ? 20 : 0,
           positionX: (elem ? AUTO : CENTER),
           positionY: AUTO,
         });

package/components/AsyncButton.vue

@@ -95,7 +95,13 @@ export default Vue.extend({
     currentPhase: {
       type:    String,
       default: ASYNC_BUTTON_STATES.ACTION,
-    }
+    },
+
+    manual: {
+      type:    Boolean,
+      default: false,
+    },
+
   },
 
   data(): { phase: string, timer?: NodeJS.Timeout} {
@@ -190,6 +196,12 @@ export default Vue.extend({
     }
   },
 
+  beforeDestroy() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
+  },
+
   methods: {
     clicked($event: MouseEvent) {
       if ($event) {
@@ -205,7 +217,10 @@ export default Vue.extend({
         clearTimeout(this.timer);
       }
 
-      this.phase = ASYNC_BUTTON_STATES.WAITING;
+      // If manual property is set, don't automatically change the button on click
+      if (!this.manual) {
+        this.phase = ASYNC_BUTTON_STATES.WAITING;
+      }
 
       const cb: AsyncButtonCallback = (success) => {
         this.done(success);

package/components/ButtonDropdown.vue

@@ -194,6 +194,10 @@ export default {
     @search:focus="onFocus"
     @input="$emit('click-action', $event)"
   >
+    <template slot="no-options">
+      <slot name="no-options"></slot>
+    </template>
+
     <template #selected-option="option">
       <button
         tabindex="-1"

package/components/Carousel.vue

@@ -0,0 +1,291 @@
+<script>
+import { get } from '@shell/utils/object';
+import { BadgeState } from '@components/BadgeState';
+
+export default {
+  components: { BadgeState },
+  name:       'Carousel',
+  props:      {
+    sliders: {
+      type:     Array,
+      required: true,
+    },
+    keyField: {
+      type:    String,
+      default: 'key',
+    },
+    asLink: {
+      type:    Boolean,
+      default: false,
+    },
+    linkField: {
+      type:    String,
+      default: 'link'
+    },
+    targetField: {
+      type:    String,
+      default: 'target',
+    },
+    rel: {
+      type:    String,
+      default: 'noopener noreferrer nofollow'
+    },
+  },
+  data() {
+    return {
+      slider:          this.sliders,
+      activeItemId:    0,
+      autoScroll:      true
+    };
+  },
+
+  computed: {
+
+    trackStyle() {
+      const sliderItem = this.activeItemId * 100 / this.slider.length;
+      const width = 60 * this.slider.length;
+
+      return `transform: translateX(-${ sliderItem }%); width: ${ width }%`;
+    },
+  },
+
+  methods: {
+    get,
+
+    select(slide, i) {
+      this.$emit('clicked', slide, i);
+    },
+
+    scrollSlide(i) {
+      this.autoScroll = false;
+      this.activeItemId = i;
+      setTimeout(() => {
+        this.slidePosition();
+      }, 400);
+    },
+
+    nextPrev(item) {
+      this.autoScroll = false;
+      if (item === 'next' && this.activeItemId < this.slider.length - 1) {
+        this.activeItemId++;
+      }
+
+      if (item === 'prev' && this.activeItemId > 0) {
+        this.activeItemId--;
+      }
+
+      this.slidePosition();
+    },
+
+    timer() {
+      setInterval(this.autoScrollSlide, 2000);
+    },
+    autoScrollSlide() {
+      if (this.activeItemId < this.slider.length && this.autoScroll ) {
+        this.activeItemId++;
+      }
+
+      if (this.activeItemId > this.slider.length - 1) {
+        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%';
+      }
+    }
+  },
+
+  mounted() {
+    this.timer();
+  }
+};
+
+</script>
+
+<template>
+  <div class="slider">
+    <div id="slide-track" ref="slider" :style="trackStyle" class="slide-track">
+      <div
+        :is="asLink ? 'a' : 'div'"
+        v-for="(slide, i) in sliders"
+        :id="`slide` + i"
+        ref="slide"
+        :key="get(slide, keyField)"
+        class="slide"
+        :href="asLink ? get(slide, linkField) : null"
+        :target="get(slide, targetField)"
+        :rel="rel"
+        @click="select(slide, i)"
+      >
+        <div class="slide-content">
+          <div class="slide-img">
+            <img :src="slide.icon ? slide.icon : `/_nuxt/shell/assets/images/generic-catalog.svg`" />
+          </div>
+          <div class="slide-content-right">
+            <BadgeState :label="slide.repoName" color="slider-badge mb-20" />
+            <h1>{{ slide.chartNameDisplay }}</h1>
+            <p>{{ slide.chartDescription }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="controls">
+      <div
+        v-for="(slide, i) in slider"
+        :key="i"
+        class="control-item"
+        :class="{'active': activeItemId === i}"
+        @click="scrollSlide(i, slider.length)"
+      ></div>
+    </div>
+    <div ref="prev" class="prev" :class="[activeItemId === 0 ? 'disabled' : 'prev']" @click="nextPrev('prev')">
+      <i class="icon icon-chevron-left icon-4x"></i>
+    </div>
+    <div ref="next" class="next" :class="[activeItemId === slider.length - 1 ? 'disabled' : 'next']" @click="nextPrev('next')">
+      <i class="icon icon-chevron-right icon-4x"></i>
+    </div>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+ .slider {
+  margin: auto;
+  position: relative;
+  width: 100%;
+  place-items: center;
+  overflow: hidden;
+  margin-bottom: 30px;
+  min-width: 700px;
+
+  &:hover {
+    .prev,
+    .next {
+      display: block;
+    }
+  }
+}
+
+.slide-track {
+  display: flex;
+  animation: scrolls 10s ;
+  position: relative;
+  transition: 1s ease-in-out;
+}
+
+.slider-badge {
+  background: var(--app-partner-accent);
+  color: var(--body-bg);
+}
+.slide {
+  min-height: 210px;
+  width: 60%;
+  max-width: 60%;
+  margin: 0 10px;
+  position: relative;
+  border: 1px solid var(--tabbed-border);
+  border-radius: var(--border-radius);
+  left: 7%;
+  cursor: pointer;
+
+  &:last-child {
+    left: -93%;
+  }
+
+  .slide-header {
+    background: var(--default);
+    width: 100%;
+    padding: 10px 15px;
+  }
+  .slide-content {
+    display: flex;
+    padding: 30px;
+
+    .slide-img {
+      width: 150px;
+      background: var(--card-badge-text);
+      border-radius: calc(2 * var(--border-radius));
+
+      img {
+        width: 100%;
+      }
+    }
+
+    .slide-content-right {
+      border-left: 1px solid var(--tabbed-border);
+      margin-left: 30px;
+      padding-left: 30px;
+
+      span {
+        margin: 0;
+      }
+    }
+
+  }
+}
+
+.slider::before,
+.slider::after {
+  background: linear-gradient(to right, var(--slider-light-bg) 0%, var(--slider-light-bg-right) 100%);
+  content: "";
+  height: 100%;
+  position: absolute;
+  width: 15%;
+  z-index: z-index('overContent');
+}
+
+.slider::before {
+  left: 0;
+  top: 0;
+}
+.slider::after{
+  right: -1px;
+  top: 0;
+  transform: rotate(180deg);
+}
+
+.controls {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+
+  .control-item {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--scrollbar-thumb);
+    margin: 5px;
+    cursor: pointer;
+
+    &.active {
+      background:var(--body-text);
+    }
+  }
+}
+.prev,
+.next {
+  position: absolute;
+  z-index: 20;
+  top: 90px;
+  display: none;
+  cursor: pointer;
+
+  &.disabled .icon {
+    color: var(--disabled-bg);
+    cursor: not-allowed;
+  }
+}
+
+.next {
+  right: 0;
+}
+
+</style>

package/components/CodeMirror.vue

@@ -46,14 +46,12 @@ export default {
   },
 
   created() {
-    if ( process.client ) {
-      if (window.__codeMirrorLoader) {
-        window.__codeMirrorLoader().then(() => {
-          this.loaded = true;
-        });
-      } else {
-        console.error('Code mirror loader not available'); // eslint-disable-line no-console
-      }
+    if (window.__codeMirrorLoader) {
+      window.__codeMirrorLoader().then(() => {
+        this.loaded = true;
+      });
+    } else {
+      console.error('Code mirror loader not available'); // eslint-disable-line no-console
     }
   },
 

package/components/CommunityLinks.vue

@@ -7,6 +7,8 @@ import { SETTING } from '@shell/config/settings';
 import { mapGetters } from 'vuex';
 
 export default {
+  name: 'CommunityLinks',
+
   components: { SimpleBox },
 
   props: {
@@ -21,12 +23,27 @@ export default {
   mixins: [Closeable],
 
   async fetch() {
-    this.uiIssuesSetting = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.ISSUES });
-    this.communitySetting = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.COMMUNITY_LINKS });
+    // If user already have custom links and uiIssueSetting Doc URL set
+    // This should already be in the uiCustomLinks
+    try {
+      this.uiCustomLinks = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.UI_CUSTOM_LINKS });
+    } catch (err) {
+
+    }
+
+    // Fallback:
+    // NB: this.uiIssueSetting is deprecated now.
+    if (!this.uiCustomLinks) {
+      try {
+        this.uiIssuesSetting = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.ISSUES });
+      } catch (err) {
+
+      }
+    }
   },
 
   data() {
-    return { uiIssuesSetting: null, communitySetting: null };
+    return { uiCustomLinks: null, uiIssuesSetting: null };
   },
 
   computed: {
@@ -35,25 +52,42 @@ export default {
       'selectedLocaleLabel'
     ]),
 
+    hasOptions() {
+      return !!Object.keys(this.options).length || !!Object.keys(this.$slots).length;
+    },
+
     options() {
+      // Link options are provided
       if (Object.keys(this.linkOptions).length > 0) {
         return this.linkOptions;
       }
 
-      if (this.communitySetting?.value === 'false') {
-        return options(this.uiIssuesSetting?.value, true);
+      // Custom links set from settings
+      if (!!this.uiCustomLinks?.value) {
+        try {
+          const customLinks = JSON.parse(this.uiCustomLinks.value);
+
+          if (Array.isArray(customLinks)) {
+            return customLinks.reduce((prev, curr) => {
+              prev[curr.key] = curr.value;
+
+              return prev;
+            }, {});
+          }
+        } catch (e) {
+          console.error('Could not parse custom links setting', e); // eslint-disable-line no-console
+        }
       }
 
-      return options(this.uiIssuesSetting?.value);
+      // Fallback
+      return options(false, this.uiIssuesSetting?.value);
     },
-
-    title() {
-      const hasCustomizedFileIssueLink = this.uiIssuesSetting?.value;
-
-      return hasCustomizedFileIssueLink ? 'landing.support' : 'landing.community.title';
-    }
   },
   methods: {
+    getLabel(label) {
+      return this.$store.getters['i18n/withFallback'](`customLinks.defaults.${ label }`, null, label);
+    },
+
     show() {
       this.$modal.show('wechat-modal');
     },
@@ -65,12 +99,20 @@ export default {
 </script>
 
 <template>
-  <div>
-    <SimpleBox :title="t(title)" :pref="pref" :pref-key="prefKey">
+  <div v-if="hasOptions">
+    <SimpleBox :pref="pref" :pref-key="prefKey">
+      <template #title>
+        <h2>
+          {{ t('customLinks.displayTitle') }}
+        </h2>
+      </template>
       <div v-for="(value, name) in options" :key="name" class="support-link">
-        <a v-t="name" :href="value" target="_blank" rel="noopener noreferrer nofollow" />
+        <n-link v-if="value.startsWith('/') " :to="value">
+          {{ getLabel(name) }}
+        </n-link>
+        <a v-else :href="value" rel="noopener noreferrer nofollow" target="_blank"> {{ getLabel(name) }} </a>
       </div>
-
+      <slot />
       <div v-if="selectedLocaleLabel === t('locale.zh-hans')" class="support-link">
         <a class="link" @click="show">
           {{ t('footer.wechat.title') }}
@@ -97,8 +139,17 @@ export default {
 </template>
 
 <style lang='scss' scoped>
-  .support-link:not(:first-child) {
-    margin-top: 15px;
+  h2 {
+    display: flex;
+    align-items: center;
+
+    i {
+      font-size: 12px;
+      margin-left: 5px;
+    }
+  }
+  .support-link:not(:last-child) {
+    margin-bottom: 15px;
   }
 
   .wechat-modal {
@@ -117,7 +168,7 @@ export default {
   }
 
   .qr-img {
-    background-image: url('~shell/assets/images/wechat-qr-code.jpg');
+    background-image: url('../assets/images/wechat-qr-code.jpg');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center center;

package/components/ContainerResourceLimit.vue

@@ -47,6 +47,20 @@ export default {
     };
   },
 
+  watch: {
+    value() {
+      const {
+        limitsCpu, limitsMemory, requestsCpu, requestsMemory, limitsGpu
+      } = this.value;
+
+      this.limitsCpu = limitsCpu;
+      this.limitsMemory = limitsMemory;
+      this.requestsCpu = requestsCpu;
+      this.requestsMemory = requestsMemory;
+      this.limitsGpu = limitsGpu;
+    }
+  },
+
   computed: {
     detailTopColumns() {
       return [

package/components/CruResource.vue

@@ -2,7 +2,7 @@
 import isEmpty from 'lodash/isEmpty';
 import { createYaml } from '@shell/utils/create-yaml';
 import { clone, get } from '@shell/utils/object';
-import { SCHEMA } from '@shell/config/types';
+import { SCHEMA, NAMESPACE } from '@shell/config/types';
 import ResourceYaml from '@shell/components/ResourceYaml';
 import { Banner } from '@components/Banner';
 import AsyncButton from '@shell/components/AsyncButton';
@@ -329,10 +329,18 @@ export default {
 
     async createNamespaceIfNeeded() {
       const inStore = this.$store.getters['currentStore'](this.resource);
+      const newNamespaceName = get(this.resource, this.namespaceKey);
+      let namespaceAlreadyExists = false;
 
-      if (this.createNamespace) {
+      try {
+        // This is in a try-catch block because the call to fetch
+        // a namespace throws an error if the namespace is not found.
+        namespaceAlreadyExists = !!(await this.$store.dispatch(`${ inStore }/find`, { type: NAMESPACE, id: newNamespaceName }));
+      } catch {}
+
+      if (this.createNamespace && !namespaceAlreadyExists) {
         try {
-          const newNamespace = await this.$store.dispatch(`${ inStore }/createNamespace`, { name: get(this.resource, this.namespaceKey) }, { root: true });
+          const newNamespace = await this.$store.dispatch(`${ inStore }/createNamespace`, { name: newNamespaceName }, { root: true });
 
           newNamespace.applyDefaults();
           await newNamespace.save();

package/components/Dialog.vue

@@ -0,0 +1,102 @@
+<script>
+import AsyncButton from '@shell/components/AsyncButton';
+
+export default {
+  components: { AsyncButton },
+
+  props: {
+    name: {
+      type:     String,
+      required: true,
+    },
+
+    title: {
+      type:     String,
+      required: true,
+    },
+
+    mode: {
+      type:    String,
+      default: '',
+    }
+  },
+
+  data() {
+    return { closed: false };
+  },
+
+  methods: {
+    beforeOpen() {
+      this.closed = false;
+    },
+
+    ok(btnCb) {
+      const callback = (ok) => {
+        btnCb(ok);
+        if (ok) {
+          this.closeDialog(true);
+        }
+      };
+
+      this.$emit('okay', callback);
+    },
+
+    closeDialog(result) {
+      if (!this.closed) {
+        this.$modal.hide(this.name);
+        this.$emit('closed', result);
+        this.closed = true;
+      }
+    },
+  }
+};
+</script>
+
+<template>
+  <modal
+    :name="name"
+    height="auto"
+    :scrollable="true"
+    @closed="closeDialog(false)"
+    @before-open="beforeOpen"
+  >
+    <div class="modal-dialog">
+      <h4>
+        {{ title }}
+      </h4>
+      <slot></slot>
+      <div class="dialog-buttons mt-20">
+        <slot name="buttons"></slot>
+        <div v-if="!$slots.buttons">
+          <button class="btn role-secondary" @click="closeDialog(false)">
+            {{ t('generic.cancel') }}
+          </button>
+          <button v-if="!mode" class="btn role-primary ml-10" @click="closeDialog(true)">
+            {{ t('generic.ok') }}
+          </button>
+          <AsyncButton v-else :mode="mode" class="ml-10" @click="ok" />
+        </div>
+      </div>
+    </div>
+  </modal>
+</template>
+
+<style lang="scss" scoped>
+  .modal-dialog {
+    padding: 10px;
+
+    h4 {
+      font-weight: bold;
+    }
+
+    .dialog-buttons {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 10px;
+
+      > *:not(:last-child) {
+        margin-right: 10px;
+      }
+    }
+  }
+</style>