@rancher/shell 0.1.0 → 0.1.1

package/machine-config/azure.vue

@@ -2,12 +2,12 @@
 import Loading from '@shell/components/Loading';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { stringify, exceptionToErrorsArray } from '@shell/utils/error';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import merge from 'lodash/merge';
 import isEmpty from 'lodash/isEmpty';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import LabeledInput from '@shell/components/form/LabeledInput';
-import Checkbox from '@shell/components/form/Checkbox';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
 import ArrayList from '@shell/components/form/ArrayList';
 import { randomStr } from '@shell/utils/string';
 import { addParam, addParams } from '@shell/utils/url';

package/machine-config/digitalocean.vue

@@ -3,11 +3,11 @@ import Loading from '@shell/components/Loading';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import ArrayList from '@shell/components/form/ArrayList';
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import { NORMAN } from '@shell/config/types';
 import { stringify, exceptionToErrorsArray } from '@shell/utils/error';
 import { _CREATE } from '@shell/config/query-params';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 
 export default {
   components: {

package/machine-config/generic.vue

@@ -1,6 +1,6 @@
 <script>
 import Loading from '@shell/components/Loading';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { exceptionToErrorsArray, stringify } from '@shell/utils/error';
 import Questions from '@shell/components/Questions';

package/machine-config/harvester.vue

@@ -1,20 +1,23 @@
 <script>
 import isEmpty from 'lodash/isEmpty';
+import NodeAffinity from '@shell/components/form/NodeAffinity';
+// import PodAffinity from '@shell/components/form/PodAffinity';
 import Loading from '@shell/components/Loading';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import UnitInput from '@shell/components/form/UnitInput';
 import YamlEditor from '@shell/components/YamlEditor';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 
 import { get } from '@shell/utils/object';
 import { mapGetters } from 'vuex';
 import {
-  HCI, NAMESPACE, MANAGEMENT, CONFIG_MAP, NORMAN
+  HCI, NAMESPACE, MANAGEMENT, CONFIG_MAP, NORMAN, NODE
 } from '@shell/config/types';
 import { base64Decode, base64Encode } from '@shell/utils/crypto';
 import { allHashSettled } from '@shell/utils/promise';
+import { podAffinity as podAffinityValidator } from '@shell/utils/validators/pod-affinity';
 import { stringify, exceptionToErrorsArray } from '@shell/utils/error';
 import { HCI as HCI_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { isReady } from '@shell/models/harvester/harvesterhci.io.virtualmachineimage';
@@ -23,7 +26,7 @@ export default {
   name: 'ConfigComponentHarvester',
 
   components: {
-    Loading, LabeledSelect, LabeledInput, UnitInput, Banner, YamlEditor
+    Loading, LabeledSelect, LabeledInput, UnitInput, Banner, YamlEditor, NodeAffinity
   },
 
   mixins: [CreateEditView],
@@ -43,6 +46,16 @@ export default {
       type:    Boolean,
       default: false
     },
+
+    poolIndex: {
+      type:     Number,
+      required: true,
+    },
+
+    machinePools: {
+      type:    Array,
+      default: () => []
+    },
   },
 
   async fetch() {
@@ -60,7 +73,7 @@ export default {
 
       if (clusterId && isImportCluster) {
         const res = await allHashSettled({
-          namespaces:   this.$store.dispatch('cluster/request', { url: `${ url }/${ NAMESPACE }s` }),
+          namespaces:   this.$store.dispatch('harvester/findAll', { type: NAMESPACE, opt: { url: `${ url }/${ NAMESPACE }s` } }),
           images:       this.$store.dispatch('cluster/request', { url: `${ url }/${ HCI.IMAGE }s` }),
           configMaps:   this.$store.dispatch('cluster/request', { url: `${ url }/${ CONFIG_MAP }s` }),
           networks:     this.$store.dispatch('cluster/request', { url: `${ url }/k8s.cni.cncf.io.network-attachment-definitions` }),
@@ -107,7 +120,6 @@ export default {
         this.userDataOptions = userDataOptions;
         this.networkDataOptions = networkDataOptions;
         this.images = res.images.value?.data;
-
         this.networkOptions = (res.networks.value?.data || []).map( (O) => {
           let value;
           let label;
@@ -127,19 +139,26 @@ export default {
           };
         });
 
-        (res.namespaces.value?.data || []).forEach(async(namespace) => {
-          const proxyNamespace = await this.$store.dispatch('cluster/create', namespace);
-
-          if (!proxyNamespace.isSystem) {
+        (res.namespaces.value || []).forEach((namespace) => {
+          if (!namespace.isSystem) {
             const value = namespace.metadata.name;
             const label = namespace.metadata.name;
 
+            this.namespaces.push(namespace);
             this.namespaceOptions.push({
               label,
               value
             });
           }
         });
+
+        try {
+          const { data: nodes } = await this.$store.dispatch('cluster/request', { url: `${ url }/${ NODE }s` });
+
+          this.allNodeObjects = nodes;
+        } catch (err) {
+          this.allNodeObjects = [];
+        }
       }
 
       if (isEmpty(this.value.cpuCount)) {
@@ -159,9 +178,14 @@ export default {
   },
 
   data() {
+    let vmAffinity = { affinity: {} };
     let userData = '';
     let networkData = '';
 
+    if (this.value.vmAffinity) {
+      vmAffinity = { affinity: JSON.parse(base64Decode(this.value.vmAffinity)) };
+    }
+
     if (this.value.userData) {
       userData = base64Decode(this.value.userData);
     }
@@ -173,13 +197,16 @@ export default {
     return {
       credential:         null,
       isImportCluster:    false,
+      vmAffinity,
       userData,
       networkData,
       images:             [],
+      namespaces:         [],
       namespaceOptions:   [],
       networkOptions:     [],
       userDataOptions:    [],
       networkDataOptions: [],
+      allNodeObjects:     [],
       cpuCount:           ''
     };
   },
@@ -191,18 +218,27 @@ export default {
       return this.disabled || !!(this.isEdit && this.value.id);
     },
 
-    imageOptions() {
-      return (this.images || []).filter( (O) => {
-        return !O.spec.url.endsWith('.iso') && isReady.call(O);
-      }).map( (O) => {
-        const value = O.id;
-        const label = `${ O.spec.displayName } (${ value })`;
-
-        return {
-          label,
-          value
-        };
-      });
+    imageOptions: {
+      get() {
+        return (this.images || []).filter( (O) => {
+          return !O.spec.url.endsWith('.iso') && isReady.call(O);
+        }).sort((a, b) => a.metadata.creationTimestamp > b.metadata.creationTimestamp ? -1 : 1).map( (O) => {
+          const value = O.id;
+          const label = `${ O.spec.displayName } (${ value })`;
+
+          return {
+            label,
+            value
+          };
+        });
+      },
+      set(neu) {
+        this.images = neu;
+      }
+    },
+
+    namespaceDisabled() {
+      return this.disabledEdit || this.poolIndex > 0;
     },
   },
 
@@ -211,10 +247,13 @@ export default {
       if (!this.isEdit) {
         this.imageOptions = [];
         this.networkOptions = [];
+        this.namespaces = [];
         this.namespaceOptions = [];
+        this.vmAffinity = { affinity: {} };
         this.value.imageName = '';
         this.value.networkName = '';
         this.value.vmNamespace = '';
+        this.value.vmAffinity = '';
       }
 
       this.$fetch();
@@ -229,6 +268,17 @@ export default {
       this.$refs.userDataYamlEditor.refresh();
       this.value.userData = base64Encode(neu);
     },
+
+    machinePools: {
+      handler(pools) {
+        const vmNamespace = pools[0].config.vmNamespace;
+
+        if (this.poolIndex > 0 && this.value.vmNamespace !== vmNamespace) {
+          this.value.vmNamespace = vmNamespace;
+        }
+      },
+      deep: true,
+    }
   },
 
   methods: {
@@ -279,6 +329,8 @@ export default {
         errors.push(message);
       }
 
+      podAffinityValidator(this.vmAffinity.affinity, this.$store.getters, errors);
+
       return { errors };
     },
 
@@ -307,6 +359,30 @@ export default {
       } catch (e) {
         this.errors = exceptionToErrorsArray(e);
       }
+    },
+
+    updateScheduling(neu) {
+      const { affinity } = neu;
+
+      if (!affinity.nodeAffinity && !affinity.podAffinity && !affinity.podAntiAffinity) {
+        this.value.vmAffinity = '';
+        this.vmAffinity = { affinity: {} };
+
+        return;
+      }
+
+      this.value.vmAffinity = base64Encode(JSON.stringify(affinity));
+      this.vmAffinity = neu;
+    },
+
+    updateNodeScheduling(nodeAffinity) {
+      if (!this.vmAffinity.affinity) {
+        Object.assign(this.vmAffinity, { affinity: { nodeAffinity } });
+      } else {
+        Object.assign(this.vmAffinity.affinity, { nodeAffinity });
+      }
+
+      this.updateScheduling(this.vmAffinity);
     }
   },
 };
@@ -369,7 +445,7 @@ export default {
             :options="namespaceOptions"
             :searchable="true"
             :required="true"
-            :disabled="disabledEdit"
+            :disabled="namespaceDisabled"
             label-key="cluster.credential.harvester.namespace"
             :placeholder="t('cluster.harvester.machinePool.namespace.placeholder')"
           />
@@ -380,7 +456,7 @@ export default {
             label-key="cluster.credential.harvester.namespace"
             :required="true"
             :mode="mode"
-            :disabled="disabledEdit"
+            :disabled="namespaceDisabled"
             :placeholder="t('cluster.harvester.machinePool.namespace.placeholder')"
           />
         </div>
@@ -393,6 +469,7 @@ export default {
             :mode="mode"
             :options="imageOptions"
             :required="true"
+            :searchable="true"
             :disabled="disabledEdit"
             label-key="cluster.credential.harvester.image"
             :placeholder="t('cluster.harvester.machinePool.image.placeholder')"
@@ -452,7 +529,29 @@ export default {
       </div>
 
       <portal :to="'advanced-'+uuid">
-        <h3>{{ t("cluster.credential.harvester.userData.title") }}</h3>
+        <h3 class="mt-20">
+          {{ t("workload.container.titles.nodeScheduling") }}
+        </h3>
+        <NodeAffinity
+          :mode="mode"
+          :value="vmAffinity.affinity.nodeAffinity"
+          @input="updateNodeScheduling"
+        />
+
+        <!-- <h3 class="mt-20">
+          {{ t("workload.container.titles.podScheduling") }}
+        </h3>
+        <PodAffinity
+          :mode="mode"
+          :value="vmAffinity"
+          :nodes="allNodeObjects"
+          :namespaces="namespaces"
+          @update="updateScheduling"
+        /> -->
+
+        <h3 class="mt-20">
+          {{ t("cluster.credential.harvester.userData.title") }}
+        </h3>
         <div>
           <LabeledSelect
             v-if="isImportCluster && isCreate"

package/machine-config/linode.vue

@@ -4,9 +4,9 @@ import { exceptionToErrorsArray, stringify } from '@shell/utils/error';
 import { _CREATE } from '@shell/config/query-params';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import Loading from '@shell/components/Loading';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 
 export default {
   components: {

package/machine-config/vmwarevsphere.vue

@@ -2,14 +2,14 @@
 import Loading from '@shell/components/Loading';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-// import Checkbox from '@shell/components/form/Checkbox';
+// import { Checkbox } from '@components/Form/Checkbox';
 import { exceptionToErrorsArray, stringify } from '@shell/utils/error';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import UnitInput from '@shell/components/form/UnitInput';
-import Card from '@shell/components/Card';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { Card } from '@components/Card';
+import { RadioGroup } from '@components/Form/Radio';
 import KeyValue from '@shell/components/form/KeyValue';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import ArrayListSelect from '@shell/components/form/ArrayListSelect';
 import YamlEditor from '@shell/components/YamlEditor';
 import { get, set } from '@shell/utils/object';

package/middleware/authenticated.js

@@ -4,15 +4,17 @@ import {
   SETUP, TIMED_OUT, UPGRADED, _FLAGGED, _UNFLAG
 } from '@shell/config/query-params';
 import { SETTING } from '@shell/config/settings';
-import { MANAGEMENT, NORMAN } from '@shell/config/types';
+import { MANAGEMENT, NORMAN, DEFAULT_WORKSPACE } from '@shell/config/types';
 import { _ALL_IF_AUTHED } from '@shell/plugins/dashboard-store/actions';
 import { applyProducts } from '@shell/store/type-map';
 import { findBy } from '@shell/utils/array';
 import { ClusterNotFoundError } from '@shell/utils/error';
 import { get } from '@shell/utils/object';
-import { AFTER_LOGIN_ROUTE } from '@shell/store/prefs';
+import { AFTER_LOGIN_ROUTE, WORKSPACE } from '@shell/store/prefs';
 import { NAME as VIRTUAL } from '@shell/config/product/harvester';
 import { BACK_TO } from '@shell/config/local-storage';
+import { setFavIcon, haveSetFavIcon } from '@shell/utils/favicon';
+import { NAME as FLEET_NAME } from '@shell/config/product/fleet.js';
 
 const getPackageFromRoute = (route) => {
   if (!route?.meta) {
@@ -26,7 +28,7 @@ const getPackageFromRoute = (route) => {
 
 let beforeEachSetup = false;
 
-function setProduct(store, to) {
+function getProduct(to) {
   let product = to.params?.product;
 
   if ( !product ) {
@@ -37,6 +39,12 @@ function setProduct(store, to) {
     }
   }
 
+  return product;
+}
+
+function setProduct(store, to) {
+  let product = getProduct(to);
+
   if ( !product ) {
     product = EXPLORER;
   }
@@ -106,6 +114,11 @@ export default async function({
       }
     });
 
+    // Set the favicon - use custom one from store if set
+    if (!haveSetFavIcon()) {
+      setFavIcon(store);
+    }
+
     const res = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.FIRST_LOGIN);
     const plSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.PL);
 
@@ -176,7 +189,9 @@ export default async function({
   }
 
   if ( store.getters['auth/enabled'] !== false && !store.getters['auth/loggedIn'] ) {
+    // `await` so we have one successfully request whilst possibly logged in (ensures fromHeader is populated from `x-api-cattle-auth`)
     await store.dispatch('auth/getUser');
+
     const v3User = store.getters['auth/v3User'] || {};
 
     if (v3User?.mustChangePassword) {
@@ -239,6 +254,7 @@ export default async function({
     beforeEachSetup = true;
 
     store.app.router.beforeEach((to, from, next) => {
+      // NOTE - This beforeEach runs AFTER this middleware. So anything in this middleware that requires it must set it manually
       setProduct(store, to);
       next();
     });
@@ -260,10 +276,10 @@ export default async function({
     let clusterId = get(route, 'params.cluster');
 
     const pkg = getPackageFromRoute(route);
-    const product = route?.params?.product;
+    const product = getProduct(route);
 
     const oldPkg = getPackageFromRoute(from);
-    const oldProduct = from?.params?.product;
+    const oldProduct = getProduct(from);
 
     // Leave an old pkg where we weren't before?
     const oldPkgPlugin = oldPkg ? Object.values($plugin.getPlugins()).find(p => p.name === oldPkg) : null;
@@ -286,7 +302,7 @@ export default async function({
     // Entering a new package where we weren't before?
     const newPkgPlugin = pkg ? Object.values($plugin.getPlugins()).find(p => p.name === pkg) : null;
 
-    // Note - We can't block on oldPkg !== newPkg because on a fresh load the `from` route equals the to `route`
+    // Note - We can't block on oldPkg !== newPkg because on a fresh load the `from` route equals the `to` route
     if (pkg && (oldPkg !== pkg || from.fullPath === route.fullPath)) {
       // Execute mandatory store actions
       await Promise.all(always);
@@ -300,7 +316,19 @@ export default async function({
       });
     }
 
+    // Ensure that the activeNamespaceCache is updated given the change of context either from or to a place where it uses workspaces
+    // When fleet moves to it's own package this should be moved to pkg onEnter/onLeave
+    if ((oldProduct === FLEET_NAME || product === FLEET_NAME) && oldProduct !== product) {
+      // See note above for store.app.router.beforeEach, need to setProduct manually, for the moment do this in a targeted way
+      setProduct(store, route);
+      store.commit('updateWorkspace', {
+        value:   store.getters['prefs/get'](WORKSPACE) || DEFAULT_WORKSPACE,
+        getters: store.getters
+      });
+    }
+
     if (product === VIRTUAL || route.name === `c-cluster-${ VIRTUAL }` || route.name?.startsWith(`c-cluster-${ VIRTUAL }-`)) {
+      setProduct(store, route);
       const res = [
         ...always,
         store.dispatch('loadVirtual', {
@@ -319,6 +347,7 @@ export default async function({
           id:     clusterId,
           oldPkg: oldPkgPlugin,
           newPkg: newPkgPlugin,
+          product,
           oldProduct,
         })]);
 
@@ -355,6 +384,7 @@ export default async function({
 }
 
 async function findMe(store) {
+  // First thing we do in loadManagement is fetch principals anyway.... so don't ?me=true here
   const principals = await store.dispatch('rancher/findAll', {
     type: NORMAN.PRINCIPAL,
     opt:  {

package/middleware/unauthenticated.js

@@ -0,0 +1,22 @@
+import { setFavIcon, haveSetFavIcon } from '@shell/utils/favicon';
+import { MANAGEMENT } from '@shell/config/types';
+import { _ALL_IF_AUTHED } from '@shell/plugins/dashboard-store/actions';
+
+export default async function({ store }) {
+  if (haveSetFavIcon()) {
+    return;
+  }
+
+  try {
+    // Load settings, which will either be just the public ones if not logged in, or all if you are
+    await store.dispatch('management/findAll', {
+      type: MANAGEMENT.SETTING,
+      opt:  {
+        load: _ALL_IF_AUTHED, url: `/v1/${ MANAGEMENT.SETTING }`, redirectUnauthorized: false
+      }
+    });
+
+    // Set the favicon - use custom one from store if set
+    setFavIcon(store);
+  } catch (e) {}
+}

package/mixins/brand.js

@@ -1,4 +1,4 @@
-import { MANAGEMENT } from '@shell/config/types';
+import { CATALOG, MANAGEMENT } from '@shell/config/types';
 import { getVendor } from '@shell/config/private-label';
 import { SETTING } from '@shell/config/settings';
 import { findBy } from '@shell/utils/array';
@@ -6,14 +6,23 @@ import { createCssVars } from '@shell/utils/color';
 
 export default {
   async fetch() {
-    this.globalSettings = await this.$store.getters['management/all'](MANAGEMENT.SETTING);
+    // For the login page, the schemas won't be loaded - we don't need the apps in this case
+    try {
+      if (this.$store.getters['management/canList'](CATALOG.APP)) {
+        this.apps = await this.$store.dispatch('management/findAll', { type: CATALOG.APP });
+      }
+    } catch (e) {}
   },
 
   data() {
-    return { globalSettings: [], brandCookie: null };
+    return { apps: [] };
   },
 
   computed: {
+    globalSettings() {
+      return this.$store.getters['management/all'](MANAGEMENT.SETTING);
+    },
+
     brand() {
       const setting = findBy(this.globalSettings, 'id', SETTING.BRAND);
 
@@ -33,7 +42,18 @@ export default {
     },
 
     theme() {
+      const setting = findBy(this.globalSettings, 'id', SETTING.THEME);
+
+      // This handles cases where the settings update after the page loads (like on log out)
+      if (setting?.value) {
+        return setting?.value;
+      }
+
       return this.$store.getters['prefs/theme'];
+    },
+
+    cspAdapter() {
+      return findBy(this.apps, 'metadata.name', 'rancher-csp-adapter' );
     }
   },
 
@@ -60,6 +80,33 @@ export default {
         this.setCustomColor(this.linkColor, 'link');
       }
     },
+
+    cspAdapter(neu) {
+      if (neu && !this.brand) {
+        const brandSetting = findBy(this.globalSettings, 'id', SETTING.BRAND);
+
+        if (brandSetting) {
+          brandSetting.value = 'suse';
+          brandSetting.save();
+        } else {
+          const schema = this.$store.getters['management/schemaFor'](MANAGEMENT.SETTING);
+          const url = schema?.linkFor('collection');
+
+          if (url) {
+            this.$store.dispatch('management/create', {
+              type: MANAGEMENT.SETTING, metadata: { name: SETTING.BRAND }, value: 'suse', default: ''
+            }).then(setting => setting.save());
+          }
+        }
+      } else if (!neu) {
+        const brandSetting = findBy(this.globalSettings, 'id', SETTING.BRAND);
+
+        if (brandSetting) {
+          brandSetting.value = '';
+          brandSetting.save();
+        }
+      }
+    }
   },
   methods: {
     setCustomColor(color, name = 'primary') {

package/mixins/browser-tab-visibility.js

@@ -0,0 +1,37 @@
+import { NORMAN } from '@shell/config/types';
+import { mapGetters } from 'vuex';
+
+export default {
+  computed: { ...mapGetters(['isSingleProduct']) },
+  methods:  {
+    setTabVisibilityListener(isAdd) {
+      const method = isAdd ? 'addEventListener' : 'removeEventListener';
+
+      document[method]('visibilitychange', this.visibilityChange, true);
+    },
+
+    async visibilityChange() {
+      if (!document.hidden) {
+        await this.$store.dispatch('rancher/findAll', {
+          type: NORMAN.USER,
+          opt:  {
+            url:    '/v3/users',
+            filter: { me: true },
+            force:  true
+          }
+        });
+      }
+    },
+  },
+
+  mounted() {
+    if ((!this.isSingleProduct || this.isSingleProduct?.enableSessionCheck) && this.$config.rancherEnv !== 'desktop') {
+      this.setTabVisibilityListener(true);
+    }
+  },
+  beforeDestroy() {
+    if ((!this.isSingleProduct || this.isSingleProduct?.enableSessionCheck) && this.$config.rancherEnv !== 'desktop') {
+      this.setTabVisibilityListener(false);
+    }
+  },
+};