@rancher/shell 1.2.0 → 2.0.0

package/edit/service.vue

@@ -26,6 +26,7 @@ import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import { allHash } from '@shell/utils/promise';
 import { isHarvesterSatisfiesVersion } from '@shell/utils/cluster';
 import { Port } from '@shell/utils/validators/formRules';
+import { _CLONE } from '@shell/config/query-params';
 
 const SESSION_AFFINITY_ACTION_VALUES = {
   NONE:     'None',
@@ -75,6 +76,17 @@ export default {
       }
     }
 
+    // Set clusterIP to an empty string, if it exists and the value is not None when clone a service
+    // Remove clusterIPs if it exists when clone a service
+    if (this.realMode === _CLONE) {
+      if (this.value?.spec?.clusterIP && this.value?.spec?.clusterIP !== 'None') {
+        this.value.spec.clusterIP = '';
+      }
+      if (this.value?.spec?.clusterIPs) {
+        this.$delete(this.value.spec, 'clusterIPs');
+      }
+    }
+
     const matchingPods = {
       matched: 0,
       matches: [],
@@ -242,6 +254,7 @@ export default {
   methods: {
     updateMatchingPods: throttle(function() {
       const { value: { spec: { selector = { } } } } = this;
+      // See https://github.com/rancher/dashboard/issues/10417, all pods bad, need to replace local selector somehow
       const allInNamespace = this.allPods.filter((pod) => pod.metadata.namespace === this.value?.metadata?.namespace);
 
       if (isEmpty(selector)) {

package/edit/serviceaccount.vue

@@ -9,6 +9,7 @@ import { Checkbox } from '@components/Form/Checkbox';
 import { SECRET } from '@shell/config/types';
 import { TYPES as SECRET_TYPES } from '@shell/models/secret';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { FilterArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 export default {
   name: 'ServiceAccount',
@@ -36,21 +37,61 @@ export default {
   },
 
   async fetch() {
-    this.allSecrets = await this.$store.dispatch(`cluster/findAll`, { type: SECRET });
+    this.filterByApi = this.$store.getters[`cluster/paginationEnabled`](SECRET);
+
+    if (this.filterByApi) {
+      this.filteredSecrets = await this.filterSecretsByApi();
+    } else {
+      this.allSecrets = await this.$store.dispatch('cluster/findAll', { type: SECRET });
+    }
   },
 
   mixins: [CreateEditView],
+
   data() {
     this.$set(this.value, 'automountServiceAccountToken', this.value.automountServiceAccountToken || false);
 
-    return { allSecrets: [] };
+    return {
+      allSecrets:      [],
+      filteredSecrets: null,
+      secretTypes:     [SECRET_TYPES.DOCKER, SECRET_TYPES.DOCKER_JSON]
+    };
+  },
+
+  watch: {
+    async 'value.metadata.namespace'() {
+      if (this.filterByApi) {
+        this.filteredSecrets = await this.filterSecretsByApi();
+      }
+    }
+  },
+
+  methods: {
+    filterSecretsByApi() {
+      const findPageArgs = { // Of type ActionFindPageArgs
+        namespaced: this.value.metadata.namespace,
+        pagination: new FilterArgs({
+          filters: PaginationParamFilter.createMultipleFields(this.secretTypes.map((t) => ({
+            field:  'metadata.fields.1',
+            value:  t,
+            equals: true
+          })))
+        }),
+      };
+
+      return this.$store.dispatch(`cluster/findPage`, { type: SECRET, opt: findPageArgs });
+    },
   },
 
   computed: {
     namespacedSecrets() {
+      if (this.filterByApi) {
+        return this.filteredSecrets;
+      }
+
       const namespace = this.value?.metadata?.namespace;
 
-      return this.allSecrets.filter((secret) => secret.metadata.namespace === namespace && (secret._type === SECRET_TYPES.DOCKER || secret._type === SECRET_TYPES.DOCKER_JSON));
+      return this.allSecrets.filter((secret) => secret.metadata.namespace === namespace && this.secretTypes.includes(secret._type));
     },
 
     imagePullSecrets: {
@@ -123,7 +164,8 @@ export default {
 
             <LabeledSelect
               v-model="imagePullSecrets"
-              :label="t('workload.container.imagePullSecrets')"
+              label-key="workload.container.imagePullSecrets.label"
+              :tooltip="t('workload.container.imagePullSecrets.tooltip')"
               :multiple="true"
               :options="namespacedSecrets"
               :mode="mode"

package/edit/token.vue

@@ -199,6 +199,7 @@ export default {
         <RadioGroup
           v-model="form.expiryType"
           :options="expiryOptions"
+          data-testid="expiry__options"
           class="mr-20"
           name="expiryGroup"
         />

package/edit/workload/Upgrading.vue

@@ -40,12 +40,13 @@ export default {
   data() {
     const {
       strategy:strategyObj = {},
+      updateStrategy: updateStrategyObj = {},
       minReadySeconds = 0,
       progressDeadlineSeconds = 600,
       revisionHistoryLimit = 10,
       podManagementPolicy = 'OrderedReady'
     } = this.value;
-    const strategy = strategyObj.type || 'RollingUpdate';
+    const strategy = strategyObj.type || updateStrategyObj.type || 'RollingUpdate';
     let maxSurge = '25';
     let maxUnavailable = '25';
     let surgeUnits = '%';
@@ -97,7 +98,7 @@ export default {
       case WORKLOAD_TYPES.DAEMON_SET:
       case WORKLOAD_TYPES.STATEFUL_SET:
         return {
-          options: ['RollingUpdate', 'Delete'],
+          options: ['RollingUpdate', 'OnDelete'],
           labels:  [this.t('workload.upgrading.strategies.labels.rollingUpdate'), this.t('workload.upgrading.strategies.labels.delete')]
         };
       default:

package/edit/workload/__tests__/Job.test.ts

@@ -2,7 +2,6 @@ import { mount } from '@vue/test-utils';
 import Job from '@shell/edit/workload/Job.vue';
 import { _EDIT } from '@shell/config/query-params';
 import { WORKLOAD_TYPES } from '@shell/config/types';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('component: Job', () => {
   describe('given CronJob types', () => {
@@ -11,8 +10,7 @@ describe('component: Job', () => {
       'failed',
     ])('should emit an update on %p input', (field) => {
       const wrapper = mount(Job, {
-        directives: { cleanHtmlDirective },
-        propsData:  {
+        propsData: {
           mode: _EDIT,
           type: WORKLOAD_TYPES.CRON_JOB
         }

package/edit/workload/__tests__/Upgrading.test.ts

@@ -22,7 +22,7 @@ describe('component: Upgrading', () => {
     input.setValue(newValue);
     input.trigger('blur');
 
-    expect(wrapper.props('value')[key]).toBe(newValue);
+    expect(wrapper.props('value')?.[key]).toBe(newValue);
   });
 
   // TODO: #6179: Integrate test with component fix, as the scope is not to check the value of the input
@@ -39,7 +39,7 @@ describe('component: Upgrading', () => {
     input.setValue(newValue);
     input.trigger('blur');
 
-    expect(wrapper.props('value').strategy.rollingUpdate[key]).toBe(expectation);
+    expect(wrapper.props('value')?.strategy.rollingUpdate[key]).toBe(expectation);
   });
 
   it.each([

package/edit/workload/index.vue

@@ -235,7 +235,7 @@ export default {
                   <div class="col span-6">
                     <LabeledSelect
                       v-model="imagePullSecrets"
-                      :label="t('workload.container.imagePullSecrets')"
+                      :label="t('workload.container.imagePullSecrets.label')"
                       :multiple="true"
                       :taggable="true"
                       :options="imagePullNamespacedSecrets"
@@ -243,6 +243,7 @@ export default {
                       option-label="metadata.name"
                       :reduce="service=>service.metadata.name"
                       :create-option="createOption"
+                      :tooltip="t('workload.container.imagePullSecrets.tooltip')"
                     />
                   </div>
                 </div>

package/edit/workload/mixins/workload.js

@@ -251,6 +251,9 @@ export default {
     }
 
     this.selectContainer(container);
+    if (this.realMode === _CLONE && this.value.type === WORKLOAD_TYPES.JOB) {
+      this.cleanUpClonedJobData();
+    }
 
     return {
       secondaryResourceData:      this.secondaryResourceDataConfig(),
@@ -523,7 +526,7 @@ export default {
         const type = workloadTypes[prop];
         const subtype = {
           id:          type,
-          description: `workload.typeDescriptions.'${ type }'`,
+          description: `workload.typeDescriptions.'${ type }'`, // i18n-uses workload.typeDescriptions.*
           label:       this.nameDisplayFor(type),
           bannerAbbrv: this.initialDisplayFor(type),
         };
@@ -707,7 +710,7 @@ export default {
       return Promise.all([
         ...toSave.map((svc) => svc.save()),
         ...toRemove.map((svc) => {
-          const ui = svc?.metadata?.annotations[UI_MANAGED];
+          const ui = svc?.metadata?.annotations?.[UI_MANAGED];
 
           if (ui) {
             svc.remove();
@@ -1022,5 +1025,35 @@ export default {
 
       //
     },
+
+    cleanUpClonedJobData() {
+      const annotations = this.value?.metadata?.annotations;
+
+      if (annotations) {
+        this.$delete(annotations, 'batch.kubernetes.io/job-tracking');
+      }
+      const labels = this.value?.metadata?.labels;
+
+      if (labels) {
+        this.$delete(labels, 'batch.kubernetes.io/controller-uid');
+        this.$delete(labels, 'batch.kubernetes.io/job-name');
+        this.$delete(labels, 'controller-uid');
+        this.$delete(labels, 'job-name');
+      }
+
+      const matchLabels = this.value?.spec?.selector?.matchLabels;
+
+      if (matchLabels) {
+        this.$delete(matchLabels, 'batch.kubernetes.io/controller-uid');
+      }
+      const templateLabels = this.value?.spec?.template?.metadata?.labels;
+
+      if (templateLabels) {
+        this.$delete(templateLabels, 'batch.kubernetes.io/controller-uid');
+        this.$delete(templateLabels, 'batch.kubernetes.io/job-name');
+        this.$delete(templateLabels, 'controller-uid');
+        this.$delete(templateLabels, 'job-name');
+      }
+    }
   },
 };

package/edit/workload/storage/emptyDir.vue

@@ -30,10 +30,10 @@ export default {
   data() {
     return {
       mediumOpts: [{
-        label: 'workload.storage.emptyDir.medium.default',
+        label: 'workload.storage.emptyDir.medium.default', // i18n-uses workload.storage.emptyDir.medium.default
         value: ''
       }, {
-        label: 'workload.storage.emptyDir.medium.memory',
+        label: 'workload.storage.emptyDir.medium.memory', // i18n-uses workload.storage.emptyDir.medium.memory
         value: 'Memory'
       }]
     };

package/initialize/App.vue

@@ -0,0 +1,75 @@
+<script>
+import NuxtError from '@shell/components/templates/error.vue';
+import NuxtLoading from '@shell/components/nav/GlobalLoading.vue';
+
+import '@shell/assets/styles/app.scss';
+
+export default {
+  data: () => ({
+    isOnline: true,
+
+    showErrorPage: false,
+  }),
+
+  created() {
+    // add to window so we can listen when ready
+    window.$globalApp = this;
+    Object.defineProperty(window, '$nuxt', {
+      get() {
+        const isHarvester = this.$globalApp?.$store.getters['currentCluster']?.isHarvester;
+
+        if (!isHarvester) {
+          console.warn('window.$nuxt is deprecated. It would be best to stop using globalState all together. For an alternative you can use window.$globalApp.'); // eslint-disable-line no-console
+        }
+
+        return window.$globalApp;
+      }
+    });
+
+    this.refreshOnlineStatus();
+    // Setup the listeners
+    window.addEventListener('online', this.refreshOnlineStatus);
+    window.addEventListener('offline', this.refreshOnlineStatus);
+
+    // Add $nuxt.context
+    this.context = this.$options.context;
+  },
+
+  mounted() {
+    this.$loading = this.$refs.loading;
+  },
+
+  computed: {
+    isOffline() {
+      return !this.isOnline;
+    },
+  },
+
+  methods: {
+    refreshOnlineStatus() {
+      if (typeof window.navigator.onLine === 'undefined') {
+        // If the browser doesn't support connection status reports
+        // assume that we are online because most apps' only react
+        // when they now that the connection has been interrupted
+        this.isOnline = true;
+      } else {
+        this.isOnline = window.navigator.onLine;
+      }
+    },
+  },
+
+  components: { NuxtLoading, NuxtError }
+};
+</script>
+<template>
+  <div id="__nuxt">
+    <NuxtLoading ref="loading" />
+    <div
+      id="__layout"
+      :key="showErrorPage"
+    >
+      <NuxtError v-if="showErrorPage" />
+      <router-view v-else />
+    </div>
+  </div>
+</template>

package/initialize/app-extended.js

@@ -0,0 +1,128 @@
+// Taken from @nuxt/vue-app/template/index.js
+// This file was generated during Nuxt migration
+import AppView from '@shell/initialize/App';
+import { setContext, getRouteData } from '@shell/initialize/entry-helpers';
+import { extendRouter } from '@shell/config/router';
+import { extendStore } from '@shell/config/store';
+import { UPGRADED, _FLAGGED, _UNFLAG } from '@shell/config/query-params';
+import { installInjectedPlugins } from '@shell/initialize/install-plugins.js';
+import { normalizeURL } from 'ufo';
+
+/**
+ * Imported from vue-router
+ * @param {*} base
+ * @param {*} mode
+ * @returns
+ */
+export const getLocation = (base, mode) => {
+  if (mode === 'hash') {
+    return window.location.hash.replace(/^#\//, '');
+  }
+
+  base = decodeURI(base).slice(0, -1); // consideration is base is normalized with trailing slash
+  let path = decodeURI(window.location.pathname);
+
+  if (base && path.startsWith(base)) {
+    path = path.slice(base.length);
+  }
+
+  const fullPath = (path || '/') + window.location.search + window.location.hash;
+
+  return normalizeURL(fullPath);
+};
+
+/**
+ * Bundle Vue app component and configuration to be executed on entry
+ * @param {*} vueApp Vue instance
+ * @returns
+ */
+async function extendApp(vueApp) {
+  const config = { rancherEnv: process.env.rancherEnv, dashboardVersion: process.env.version };
+  const store = extendStore();
+  const router = extendRouter(config, { store });
+
+  // Add this.$router into store actions/mutations
+  store.$router = router;
+
+  // Create Root instance
+
+  // here we inject the router and store to all child components,
+  // making them available everywhere as `this.$router` and `this.$store`.
+  const appPartials = {
+    store,
+    router,
+    ...AppView
+  };
+
+  // Make app available into store via this.app
+  store.app = appPartials;
+
+  const next = (location) => appPartials.router.push(location);
+  // Resolve route
+
+  const path = getLocation(router.options.base, router.options.mode);
+  const route = router.resolve(path).route;
+
+  // Set context to app.context
+  await setContext(appPartials, {
+    store,
+    route,
+    next,
+    payload: undefined,
+    req:     undefined,
+    res:     undefined
+  });
+
+  await installInjectedPlugins(appPartials, vueApp);
+
+  // Wait for async component to be resolved first
+  await new Promise((resolve, reject) => {
+    // Ignore 404s rather than blindly replacing URL in browser
+    const { route } = router.resolve(appPartials.context.route.fullPath);
+
+    if (!route.matched.length) {
+      return resolve();
+    }
+
+    router.replace(appPartials.context.route.fullPath, resolve, (err) => {
+      // https://github.com/vuejs/vue-router/blob/v3.4.3/src/util/errors.js
+      if (!err._isRouter) {
+        return reject(err);
+      }
+      if (err.type !== 2 /* NavigationFailureType.redirected */) {
+        return resolve();
+      }
+
+      // navigated to a different route in router guard
+      const unregister = router.afterEach(async(to, from) => {
+        appPartials.context.route = await getRouteData(to);
+        appPartials.context.params = to.params || {};
+        appPartials.context.query = to.query || {};
+        unregister();
+        resolve();
+      });
+    });
+
+    router.afterEach((to) => {
+      const upgraded = to.query[UPGRADED] === _FLAGGED;
+
+      if ( upgraded ) {
+        router.applyQuery({ [UPGRADED]: _UNFLAG });
+
+        store.dispatch('growl/success', {
+          title:   store.getters['i18n/t']('serverUpgrade.title'),
+          message: store.getters['i18n/t']('serverUpgrade.message'),
+          timeout: 0,
+        });
+      }
+    });
+  });
+
+  return {
+    store,
+    app: appPartials,
+    router
+  };
+}
+
+export { extendApp };