@rancher/shell 0.1.4 → 0.1.21

package/pages/support/index.vue

@@ -1,17 +1,13 @@
 <script>
-import { options } from '@shell/config/footer';
 import BannerGraphic from '@shell/components/BannerGraphic';
-import AsyncButton from '@shell/components/AsyncButton';
 import IndentedPanel from '@shell/components/IndentedPanel';
-import { Card } from '@components/Card';
 import CommunityLinks from '@shell/components/CommunityLinks';
 import { CATALOG, MANAGEMENT } from '@shell/config/types';
-import { getVendor, setBrand } from '@shell/config/private-label';
+import { getVendor } from '@shell/config/private-label';
 import { SETTING } from '@shell/config/settings';
 import { findBy } from '@shell/utils/array';
 import { addParam } from '@shell/utils/url';
-
-const KEY_REGEX = /^[0-9a-fA-F]{16}$/;
+import { isRancherPrime } from '@shell/config/version';
 
 export default {
   layout: 'home',
@@ -19,8 +15,6 @@ export default {
   components: {
     BannerGraphic,
     IndentedPanel,
-    AsyncButton,
-    Card,
     CommunityLinks
   },
 
@@ -50,7 +44,6 @@ export default {
     if ( this.$store.getters['management/canList'](CATALOG.APP) ) {
       this.apps = await this.$store.dispatch('management/findAll', { type: CATALOG.APP });
     }
-    this.supportSetting = await fetchOrCreateSetting('has-support', 'false');
     this.brandSetting = await fetchOrCreateSetting(SETTING.BRAND, '');
     this.serverUrlSetting = await fetchOrCreateSetting(SETTING.SERVER_URL, '');
     this.uiIssuesSetting = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.ISSUES });
@@ -61,7 +54,6 @@ export default {
       apps:                 [],
       vendor:               getVendor(),
       supportKey:           '',
-      supportSetting:       null,
       brandSetting:         null,
       uiIssuesSetting:      null,
       serverSetting:        null,
@@ -79,6 +71,10 @@ export default {
       return findBy(this.apps, 'metadata.name', 'rancher-csp-adapter' );
     },
 
+    hasSupport() {
+      return this.hasAWSSupport || isRancherPrime();
+    },
+
     hasAWSSupport() {
       return !!this.cspAdapter;
     },
@@ -101,74 +97,15 @@ export default {
       return `${ this.serverUrl }/v1/generateSUSERancherSupportConfig`;
     },
 
-    hasSupport() {
-      // NB: This is temporary until API implemented
-      return false;
-    },
-
-    options() {
-      if (!this.uiIssuesSetting?.value) {
-        return;
-      }
-
-      // Load defaults for suppoet page
-      return options(true, this.uiIssuesSetting?.value);
-    },
-
     title() {
       return this.hasSupport ? 'support.suse.title' : 'support.community.title';
     },
 
-    validSupportKey() {
-      return !!this.supportKey.match(KEY_REGEX);
-    },
-
     sccLink() {
       return this.hasAWSSupport ? addParam('https://scc.suse.com', 'from_marketplace', '1') : 'https://scc.suse.com';
     }
   },
 
-  methods: {
-    async addSubscription(done) {
-      try {
-        this.supportSetting.value = 'true';
-        this.brandSetting.value = 'suse';
-        await Promise.all([this.supportSetting.save(), this.brandSetting.save()]);
-        setBrand('suse');
-        done(true);
-        this.$modal.hide('toggle-support');
-      } catch {
-        done(false);
-      }
-    },
-
-    async removeSubscription(done) {
-      try {
-        this.supportSetting.value = 'false';
-        this.brandSetting.value = '';
-        await Promise.all([this.supportSetting.save(), this.brandSetting.save()]);
-        setBrand('');
-        done(true);
-        this.$modal.hide('toggle-support');
-      } catch {
-        done(false);
-      }
-    },
-
-    showDialog(isAdd) {
-      this.isRemoveDialog = isAdd;
-      this.supportKey = '';
-      this.$modal.show('toggle-support');
-    },
-
-    dialogOpened() {
-      const input = this.$refs.subscriptionIDInput;
-
-      if (input) {
-        input.focus();
-      }
-    },
-  }
 };
 </script>
 <template>
@@ -177,10 +114,18 @@ export default {
 
     <IndentedPanel>
       <div class="content mt-20">
-        <div class="promo">
+        <div class="promo col main-panel">
           <div class="box mb-20 box-primary">
             <h2>{{ t('support.suse.access.title') }}</h2>
-            <div>
+            <div v-if="!hasSupport" class="external support-links mt-20">
+              <div class="support-link">
+                <a class="support-link" href="https://rancher.com/support-maintenance-terms" target="_blank" rel="noopener noreferrer nofollow">{{ t('support.community.learnMore') }}</a>
+              </div>
+              <div class="support-link">
+                <a class="support-link" href="https://rancher.com/pricing" target="_blank" rel="noopener noreferrer nofollow">{{ t('support.community.pricing') }}</a>
+              </div>
+            </div>
+            <div v-else>
               <p class="pb-10">
                 {{ hasAWSSupport ? t("support.suse.access.aws.text") : t("support.suse.access.text") }}
               </p>
@@ -198,74 +143,28 @@ export default {
               <div>{{ t(`${key}.text`) }}</div>
             </div>
           </div>
-
-          <div v-if="!hasSupport" class="register row">
-            <div>
-              {{ t('support.subscription.haveSupport') }}
-            </div>
-            <button class="ml-5 btn role-secondary btn-sm" type="button" @click="showDialog(false)">
-              {{ t('support.subscription.addSubscription') }}
-            </button>
-          </div>
-          <div v-if="hasSupport && !hasAWSSupport" class="register row">
-            <a class="remove-link" @click="showDialog(true)">
-              {{ t('support.subscription.removeSubscription') }}
-            </a>
-          </div>
-        </div>
-        <div class="community">
-          <CommunityLinks :link-options="options">
-            <div v-if="!hasSupport" class="external support-links" :class="{ 'mt-15': !!options}">
-              <div class="support-link">
-                <a class="support-link" href="https://rancher.com/support-maintenance-terms" target="_blank" rel="noopener noreferrer nofollow">{{ t('support.community.learnMore') }}</a>
-              </div>
-              <div class="support-link">
-                <a class="support-link" href="https://rancher.com/pricing" target="_blank" rel="noopener noreferrer nofollow">{{ t('support.community.pricing') }}</a>
-              </div>
-            </div>
-          </CommunityLinks>
         </div>
+        <CommunityLinks :is-support-page="true" class="community col side-panel span-3" />
       </div>
     </IndentedPanel>
-    <modal
-      name="toggle-support"
-      height="auto"
-      :width="340"
-      @opened="dialogOpened"
-    >
-      <Card :show-highlight-border="false" class="toggle-support">
-        <template #title>
-          {{ isRemoveDialog? t('support.subscription.removeTitle') : t('support.subscription.addTitle') }}
-        </template>
-        <template #body>
-          <div v-if="isRemoveDialog" class="mt-20">
-            {{ t('support.subscription.removeBody') }}
-          </div>
-          <div v-else class="mt-20">
-            <p class="pb-10">
-              {{ t('support.subscription.addLabel') }}
-            </p>
-            <input ref="subscriptionIDInput" v-model="supportKey" />
-          </div>
-        </template>
-        <template #actions>
-          <button type="button" class="btn role-secondary" @click="$modal.hide('toggle-support')">
-            {{ t('generic.cancel') }}
-          </button>
-          <AsyncButton v-if="!isRemoveDialog" :disabled="!validSupportKey" class="pull-right" @click="addSubscription" />
-          <AsyncButton v-else :action-label="t('generic.remove')" class="pull-right" @click="removeSubscription" />
-        </template>
-      </Card>
-    </modal>
   </div>
 </template>
 <style lang="scss" scoped>
 .content {
-  display: grid;
-  grid-column-gap: 20px;
-  grid-row-gap: 20px;
-  grid-template-columns: 70% 30%;
-}
+
+    display: flex;
+    align-items: stretch;
+    .col {
+      margin: 0
+    }
+    .main-panel {
+      flex: auto;
+    }
+
+    .side-panel {
+      margin-left: 1.75%;
+    }
+  }
 
 .toggle-support {
     height: 100%;
@@ -280,16 +179,6 @@ export default {
     }
 }
 
-.community {
-  border-left: 1px solid var(--border);
-  padding-left: 20px;
-  > h2 {
-    font-size: 18px;
-    font-weight: 300;
-    margin-bottom: 20px;
-  }
-}
-
 .support-link:not(:first-child) {
   margin: 15px 0 0 0;
 }

package/plugins/dashboard-store/actions.js

@@ -5,6 +5,7 @@ import { SPOOFED_API_PREFIX, SPOOFED_PREFIX } from '@shell/store/type-map';
 import { createYaml } from '@shell/utils/create-yaml';
 import { classify } from '@shell/plugins/dashboard-store/classify';
 import { normalizeType } from './normalize';
+import garbageCollect from '@shell/utils/gc/gc';
 
 export const _ALL = 'all';
 export const _MERGE = 'merge';
@@ -316,6 +317,8 @@ export default {
       dispatch('resource-fetch/updateManualRefreshIsLoading', false, { root: true });
     }
 
+    garbageCollect.gcUpdateLastAccessed(ctx, type);
+
     return all;
   },
 
@@ -371,6 +374,8 @@ export default {
       });
     }
 
+    garbageCollect.gcUpdateLastAccessed(ctx, type);
+
     return getters.matching( type, selector, namespace );
   },
 
@@ -426,6 +431,8 @@ export default {
 
     out = getters.byId(type, id);
 
+    garbageCollect.gcUpdateLastAccessed(ctx, type);
+
     return out;
   },
 
@@ -490,6 +497,10 @@ export default {
     return classify(ctx, data);
   },
 
+  createMany(ctx, data) {
+    return data.map(d => classify(ctx, d));
+  },
+
   createPopulated(ctx, userData) {
     const data = ctx.getters['defaultFor'](userData.type);
 
@@ -587,5 +598,13 @@ export default {
 
   incrementLoadCounter({ commit }, resource) {
     commit('incrementLoadCounter', resource);
+  },
+
+  garbageCollect(ctx, ignoreTypes) {
+    return garbageCollect.garbageCollect(ctx, ignoreTypes);
+  },
+
+  gcResetStore({ state }) {
+    garbageCollect.gcResetStore(state);
   }
 };

package/plugins/dashboard-store/getters.js

@@ -9,10 +9,11 @@ import Resource from '@shell/plugins/dashboard-store/resource-class';
 import mutations from './mutations';
 import { keyFieldFor, normalizeType } from './normalize';
 import { lookup } from './model-loader';
+import garbageCollect from '@shell/utils/gc/gc';
 
 export default {
 
-  all: (state, getters) => (type) => {
+  all: (state, getters, rootState) => (type) => {
     type = getters.normalizeType(type);
 
     if ( !getters.typeRegistered(type) ) {
@@ -22,10 +23,14 @@ export default {
       mutations.registerType(state, type);
     }
 
+    garbageCollect.gcUpdateLastAccessed({
+      state, getters, rootState
+    }, type);
+
     return state.types[type].list;
   },
 
-  matching: (state, getters) => (type, selector, namespace) => {
+  matching: (state, getters, rootState) => (type, selector, namespace) => {
     let all = getters['all'](type);
 
     // Filter first by namespace if one is provided, since this is efficient
@@ -33,16 +38,24 @@ export default {
       all = all.filter(obj => obj.namespace === namespace);
     }
 
+    garbageCollect.gcUpdateLastAccessed({
+      state, getters, rootState
+    }, type);
+
     return all.filter((obj) => {
       return matches(obj, selector);
     });
   },
 
-  byId: (state, getters) => (type, id) => {
+  byId: (state, getters, rootState) => (type, id) => {
     type = getters.normalizeType(type);
     const entry = state.types[type];
 
     if ( entry ) {
+      garbageCollect.gcUpdateLastAccessed({
+        state, getters, rootState
+      }, type);
+
       return entry.map.get(id);
     }
   },
@@ -300,5 +313,9 @@ export default {
     }
 
     return 0;
+  },
+
+  gcIgnoreTypes: () => {
+    return {};
   }
 };

package/plugins/dashboard-store/mutations.js

@@ -3,18 +3,19 @@ import { addObject, addObjects, clear, removeObject } from '@shell/utils/array';
 import { SCHEMA } from '@shell/config/types';
 import { normalizeType } from '@shell/plugins/dashboard-store/normalize';
 import { classify } from '@shell/plugins/dashboard-store/classify';
+import garbageCollect from '@shell/utils/gc/gc';
 
 function registerType(state, type) {
   let cache = state.types[type];
 
   if ( !cache ) {
     cache = {
-      list:         [],
-      haveAll:      false,
-      haveSelector: {},
-      revision:     0, // The highest known resourceVersion from the server for this type
-      generation:   0, // Updated every time something is loaded for this type
-      loadCounter:  0, // Used to cancel incremental loads if the page changes during load
+      list:             [],
+      haveAll:          false,
+      haveSelector:     {},
+      revision:         0, // The highest known resourceVersion from the server for this type
+      generation:       0, // Updated every time something is loaded for this type
+      loadCounter:      0, // Used to cancel incremental loads if the page changes during load
     };
 
     // Not enumerable so they don't get sent back to the client for SSR
@@ -120,6 +121,8 @@ export function forgetType(state, type) {
     cache.map.clear();
     delete state.types[type];
 
+    garbageCollect.gcResetType(state, type);
+
     return true;
   }
 }
@@ -131,6 +134,8 @@ export function resetStore(state, commit) {
   for ( const type of Object.keys(state.types) ) {
     commit(`${ state.config.namespace }/forgetType`, type);
   }
+
+  garbageCollect.gcResetStore(state);
 }
 
 export function remove(state, obj, getters) {
@@ -308,5 +313,6 @@ export default {
     if (typeData) {
       typeData.loadCounter++;
     }
-  }
+  },
+
 };

package/plugins/plugin.js

@@ -1,10 +1,10 @@
 // This plugin loads any UI Plugins at app load time
 import { allHashSettled } from '@shell/utils/promise';
-import { shouldLoadPlugin, UI_PLUGIN_BASE_URL } from '@shell/config/uiplugins';
+import { shouldNotLoadPlugin, UI_PLUGIN_BASE_URL } from '@shell/config/uiplugins';
 
 const META_NAME_PREFIX = 'app-autoload-';
 
-export default async(context) => {
+export default async function(context) {
   // UI Plugins declared in the HTML head
   const meta = context.app?.head?.meta || [];
   const hash = {};
@@ -28,27 +28,28 @@ export default async(context) => {
   }
 
   if (loadPlugins) {
-    const { store, $plugin } = context;
+    // TODO: Get rancher version using the new API (can't use setting as we have not loading the store)
+    const rancherVersion = undefined;
 
     // Fetch list of installed plugins from endpoint
     try {
-      const res = await store.dispatch('management/request', {
-        url:     `${ UI_PLUGIN_BASE_URL }/index.json`,
-        headers: { accept: 'application/json' }
+      const res = await context.store.dispatch('management/request', {
+        url:                  `${ UI_PLUGIN_BASE_URL }/index.json`,
+        method:               'GET',
+        headers:              { accept: 'application/json' },
+        redirectUnauthorized: false,
       });
 
       if (res) {
         const entries = res.entries || res.Entries || {};
 
         Object.values(entries).forEach((plugin) => {
-          if (shouldLoadPlugin(plugin)) {
-            let url;
+          const shouldNotLoad = shouldNotLoadPlugin(plugin, rancherVersion); // Error key string or false
 
-            if (plugin?.metadata?.['direct'] === 'true') {
-              url = plugin.endpoint;
-            }
-
-            hash[plugin.name] = $plugin.loadAsyncByNameAndVersion(plugin.name, plugin.version, url);
+          if (!shouldNotLoad) {
+            hash[plugin.name] = context.$plugin.loadPluginAsync(plugin);
+          } else {
+            context.store.dispatch('uiplugins/setError', { name: plugin.name, error: shouldNotLoad });
           }
         });
       }
@@ -67,8 +68,10 @@ export default async(context) => {
         console.error(`Failed to load plugin: ${ name }`); // eslint-disable-line no-console
 
         // Record error in the uiplugins store, so that we can show this to the user
-        context.store.dispatch('uiplugins/setError', { name, error: true });
+        context.store.dispatch('uiplugins/setError', { name, error: 'plugins.error.load' });
       }
     });
   }
-};
+
+  return true;
+}

package/plugins/steve/getters.js

@@ -1,6 +1,7 @@
 import { isArray } from '@shell/utils/array';
 import { BY_TYPE } from '@shell/plugins/dashboard-store/classify';
 import { lookup } from '@shell/plugins/dashboard-store/model-loader';
+import { NAMESPACE, SCHEMA, COUNT, UI } from '@shell/config/types';
 
 import SteveModel from './steve-class';
 import HybridModel, { cleanHybridResources } from './hybrid-class';
@@ -12,6 +13,13 @@ export const STEVE_MODEL_TYPES = {
   BY_TYPE: 'byType'
 };
 
+const GC_IGNORE_TYPES = {
+  [COUNT]:       true,
+  [NAMESPACE]:   true,
+  [SCHEMA]:      true,
+  [UI.NAV_LINK]: true,
+};
+
 export default {
   urlOptions: () => (url, opt) => {
     opt = opt || {};
@@ -110,4 +118,8 @@ export default {
     return map?.list || [];
   },
 
+  gcIgnoreTypes: () => {
+    return GC_IGNORE_TYPES;
+  }
+
 };

package/plugins/version.js

@@ -0,0 +1,21 @@
+/**
+ * Fetch version metadata from backend /rancherversion API and store it
+ *
+ * This metadata does not change for an installation of Rancher
+ */
+
+import { setVersionData } from '@shell/config/version';
+
+export default async function({ store }) {
+  try {
+    const response = await store.dispatch('rancher/request', {
+      url:                  '/rancherversion',
+      method:               'get',
+      redirectUnauthorized: false
+    });
+
+    setVersionData(response);
+  } catch (e) {
+    console.warn('Failed to fetch Rancher version metadata', e); // eslint-disable-line no-console
+  }
+}

package/rancher-components/Form/TextArea/TextAreaAutoGrow.vue

@@ -1,16 +1,15 @@
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { VueConstructor } from 'vue';
 import debounce from 'lodash/debounce';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 
-declare module 'vue/types/vue' {
-  /* eslint-disable no-unused-vars */
-  interface Vue {
-    queueResize(): void;
-  }
+interface TextAreaResize {
+  queueResize(): void;
 }
 
-export default Vue.extend({
+export default (
+  Vue as VueConstructor<Vue & TextAreaResize>
+).extend({
   inheritAttrs: false,
 
   props: {

package/rancher-components/components/BadgeState/BadgeState.spec.ts

@@ -0,0 +1,12 @@
+import { shallowMount } from '@vue/test-utils';
+import { BadgeState } from './index';
+
+describe('BadgeState.vue', () => {
+  it('renders props.msg when passed', () => {
+    const label = 'Hello, World!';
+
+    const wrapper = shallowMount(BadgeState, { propsData: { label } });
+
+    expect(wrapper.find('span').text()).toMatch(label);
+  });
+});

package/rancher-components/components/BadgeState/BadgeState.vue

@@ -0,0 +1,107 @@
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+
+interface Badge {
+  stateBackground: string;
+  stateDisplay: string;
+}
+
+/**
+ * Badge state component.
+ * <p>Represents a badge whose label and color is either taken from the value property or
+ * from the label and color properties. The state property takes precedence.</p>
+ */
+export default Vue.extend({
+  props: {
+    /**
+     * A value having the properties `stateBackground` and `stateDisplay`
+     */
+    value: {
+      type:    Object as PropType<Badge>,
+      default: null
+    },
+
+    /**
+     * Badge color. `stateBackground` of the value property takes precedence if supplied
+     */
+    color: {
+      type:    String,
+      default: null
+    },
+
+    /**
+     * Optional icon to be shown before the label
+     */
+    icon: {
+      type:    String,
+      default: null
+    },
+
+    /**
+     * Label to display in the badge. `stateDisplay` of the value property takes precedence if supplied
+     */
+    label: {
+      type:    String,
+      default: null
+    }
+  },
+
+  computed: {
+    bg(): string | null {
+      return this.value?.stateBackground || this.color;
+    },
+
+    msg(): string | null {
+      return this.value?.stateDisplay || this.label;
+    }
+  }
+});
+</script>
+
+<template>
+  <span :class="{'badge-state': true, [bg]: true}">
+    <i v-if="icon" class="icon" :class="{[icon]: true, 'mr-5': !!msg}" />{{ msg }}
+  </span>
+</template>
+
+<style lang="scss" scoped>
+  .badge-state {
+    align-items: center;
+    display: inline-flex;
+    padding: 2px 10px;
+    border: 1px solid transparent;
+    border-radius: 20px;
+
+    &.bg-info {
+      border-color: var(--primary);
+    }
+
+    &.bg-error {
+      border-color: var(--error);
+    }
+
+    &.bg-warning {
+      border-color: var(--warning);
+    }
+
+    // Successful states are de-emphasized by using [text-]color instead of background-color
+    &.bg-success {
+      color: var(--success);
+      background: transparent;
+      border-color: var(--success);
+    }
+  }
+</style>
+<style lang="scss">
+  // TODO: #6005
+  // Investigate why this is here.. I don't think that styles for sortable table should belong here
+  .sortable-table TD .badge-state {
+    @include clip;
+    display: inline-block;
+    max-width: 100%;
+    position: relative;
+    max-width: 110px;
+    font-size: .85em;
+    vertical-align: middle;
+  }
+</style>