@rancher/shell 0.3.4 → 0.3.6

package/list/node.vue

@@ -12,7 +12,6 @@ import {
   MANAGEMENT, METRIC, NODE, NORMAN, POD
 } from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';
-import { get } from '@shell/utils/object';
 import { GROUP_RESOURCES, mapPref } from '@shell/store/prefs';
 import { COLUMN_BREAKPOINTS } from '@shell/components/SortableTable/index.vue';
 import ResourceFetch from '@shell/mixins/resource-fetch';
@@ -84,8 +83,17 @@ export default {
     hasWindowsNodes() {
       return (this.rows || []).some(node => node.status.nodeInfo.operatingSystem === 'windows');
     },
+
     tableGroup: mapPref(GROUP_RESOURCES),
 
+    parsedRows() {
+      this.rows.forEach((row) => {
+        row.displayTaintsAndLabels = (row.spec.taints && row.spec.taints.length) || !!row.customLabelCount;
+      });
+
+      return this.rows;
+    },
+
     headers() {
       const headers = [
         STATE,
@@ -119,7 +127,6 @@ export default {
 
       return headers;
     },
-
   },
 
   methods: {
@@ -136,8 +143,9 @@ export default {
       }
     },
 
-    get,
-
+    toggleLabels(row) {
+      this.$set(row, 'displayLabels', !row.displayLabels);
+    },
   }
 
 };
@@ -154,7 +162,7 @@ export default {
       v-bind="$attrs"
       :schema="schema"
       :headers="headers"
-      :rows="rows"
+      :rows="parsedRows"
       :sub-rows="true"
       :loading="loading"
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
@@ -164,22 +172,54 @@ export default {
       <template #sub-row="{fullColspan, row, onRowMouseEnter, onRowMouseLeave}">
         <tr
           class="taints sub-row"
-          :class="{'empty-taints': !row.spec.taints || !row.spec.taints.length}"
+          :class="{'empty-taints': ! row.displayTaintsAndLabels}"
           @mouseenter="onRowMouseEnter"
           @mouseleave="onRowMouseLeave"
         >
-          <template v-if="row.spec.taints && row.spec.taints.length">
+          <template v-if="row.displayTaintsAndLabels">
             <td>&nbsp;</td>
             <td>&nbsp;</td>
             <td :colspan="fullColspan-2">
-              {{ t('node.list.nodeTaint') }}:
-              <Tag
-                v-for="taint in row.spec.taints"
-                :key="taint.key + taint.value + taint.effect"
-                class="mr-5"
-              >
-                {{ taint.key }}={{ taint.value }}:{{ taint.effect }}
-              </Tag>
+              <span v-if="row.spec.taints && row.spec.taints.length">
+                {{ t('node.list.nodeTaint') }}:
+                <Tag
+                  v-for="taint in row.spec.taints"
+                  :key="taint.key + taint.value + taint.effect"
+                  class="mr-5 mt-2"
+                >
+                  {{ taint.key }}={{ taint.value }}:{{ taint.effect }}
+                </Tag>
+              </span>
+              <span
+                v-if="!!row.customLabelCount"
+                class="mt-5"
+              > {{ t('node.list.nodeLabels') }}:
+                <span
+                  v-for="(label, i) in row.customLabels"
+                  :key="i"
+                  class="mt-5 labels"
+                >
+                  <Tag
+                    v-if="i < 7"
+                    class="mr-2 label"
+                  >
+                    {{ label }}
+                  </Tag>
+                  <Tag
+                    v-else-if="i > 6 && row.displayLabels"
+                    class="mr-2 label"
+                  >
+                    {{ label }}
+                  </Tag>
+                </span>
+                <a
+                  v-if="row.customLabelCount > 7"
+                  href="#"
+                  @click.prevent="toggleLabels(row)"
+                >
+                  {{ t(`node.list.${row.displayLabels? 'hideLabels' : 'showLabels'}`) }}
+                </a>
+              </span>
             </td>
           </template>
           <td
@@ -195,11 +235,24 @@ export default {
 </template>
 
 <style lang='scss' scoped>
+
+.labels {
+    display: inline;
+    flex-wrap: wrap;
+
+    .label {
+      display: inline-block;
+      margin-top: 2px;
+    }
+
+}
 .taints {
   td {
     padding-top:0;
     .tag {
-      margin-right: 5px
+      margin-right: 5px;
+      display: inline-block;
+      margin-top: 2px;
     }
   }
   &.empty-taints {

package/list/provisioning.cattle.io.cluster.vue

@@ -9,10 +9,11 @@ import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/u
 import { mapFeature, HARVESTER as HARVESTER_FEATURE } from '@shell/store/features';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
 import ResourceFetch from '@shell/mixins/resource-fetch';
+import { BadgeState } from '@components/BadgeState';
 
 export default {
   components: {
-    Banner, ResourceTable, Masthead
+    Banner, ResourceTable, Masthead, BadgeState
   },
   mixins: [ResourceFetch],
   props:  {
@@ -187,6 +188,34 @@ export default {
       :data-testid="'cluster-list'"
       :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
     >
+      <!-- Why are state column and subrow overwritten here? -->
+      <!-- for rke1 clusters, where they try to use the mgmt cluster stateObj instead of prov cluster stateObj,  -->
+      <!-- updates were getting lost. This isn't performant as normal columns, but the list shouldn't grow -->
+      <!-- big enough for the performance to matter -->
+      <template #cell:state="{row}">
+        <BadgeState
+          :color="row.stateBackground"
+          :label="row.stateDisplay"
+        />
+      </template>
+      <template #sub-row="{fullColspan, row, keyField, componentTestid, i, onRowMouseEnter, onRowMouseLeave}">
+        <tr
+          v-if="row.stateDescription"
+          :key="row[keyField] + '-description'"
+          :data-testid="componentTestid + '-' + i + '-row-description'"
+          class="state-description sub-row"
+          @mouseenter="onRowMouseEnter"
+          @mouseleave="onRowMouseLeave"
+        >
+          <td>&nbsp;</td>
+          <td
+            :colspan="fullColspan - 1"
+            :class="{ 'text-error' : row.stateObj.error }"
+          >
+            {{ row.stateDescription }}
+          </td>
+        </tr>
+      </template>
       <template #cell:summary="{row}">
         <span v-if="!row.stateParts.length">{{ row.nodes.length }}</span>
       </template>

package/list/rbac.authorization.k8s.io.clusterrolebinding.vue

@@ -0,0 +1,48 @@
+<script>
+import ResourceTable from '@shell/components/ResourceTable';
+
+export default {
+  name:       'ListNamespace',
+  components: { ResourceTable },
+  props:      {
+    resource: {
+      type:     String,
+      required: true,
+    },
+    schema: {
+      type:     Object,
+      required: true,
+    },
+    rows: {
+      type:     Array,
+      required: true,
+    },
+    loading: {
+      type:     Boolean,
+      required: false,
+    },
+    useQueryParamsForSimpleFiltering: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  $loadingResources() {
+    return { loadIndeterminate: true };
+  },
+};
+</script>
+
+<template>
+  <div>
+    <ResourceTable
+      v-bind="$attrs"
+      :rows="rows"
+      :groupable="false"
+      :schema="schema"
+      :loading="loading"
+      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+      v-on="$listeners"
+    />
+  </div>
+</template>

package/list/workload.vue

@@ -1,6 +1,8 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import { WORKLOAD_TYPES, SCHEMA, NODE, POD } from '@shell/config/types';
+import {
+  WORKLOAD_TYPES, SCHEMA, NODE, POD, LIST_WORKLOAD_TYPES
+} from '@shell/config/types';
 import ResourceFetch from '@shell/mixins/resource-fetch';
 
 const schema = {
@@ -16,7 +18,7 @@ const schema = {
 const $loadingResources = ($route, $store) => {
   const allowedResources = [];
 
-  Object.values(WORKLOAD_TYPES).forEach((type) => {
+  Object.values(LIST_WORKLOAD_TYPES).forEach((type) => {
     // You may not have RBAC to see some of the types
     if ($store.getters['cluster/schemaFor'](type) ) {
       allowedResources.push(type);
@@ -134,8 +136,8 @@ export default {
       } else {
         const type = this.$route.params.resource;
 
-        if (type === WORKLOAD_TYPES.JOB) {
-          // Ignore job (we're fetching this anyway, plus they contain their own state)
+        if (type === WORKLOAD_TYPES.JOB || type === POD) {
+          // Ignore job and pods (we're fetching this anyway, plus they contain their own state)
           return;
         }
 

package/machine-config/azure.vue

@@ -1,6 +1,7 @@
 <script>
 import Loading from '@shell/components/Loading';
 import CreateEditView from '@shell/mixins/create-edit-view';
+import FormValidation from '@shell/mixins/form-validation';
 import { stringify, exceptionToErrorsArray } from '@shell/utils/error';
 import { Banner } from '@components/Banner';
 import merge from 'lodash/merge';
@@ -13,7 +14,7 @@ import { randomStr } from '@shell/utils/string';
 import { addParam, addParams } from '@shell/utils/url';
 import KeyValue from '@shell/components/form/KeyValue';
 import { RadioGroup } from '@components/Form/Radio';
-import { _CREATE } from '@shell/config/query-params';
+import { _CREATE, _EDIT } from '@shell/config/query-params';
 
 export const azureEnvironments = [
   { value: 'AzurePublicCloud' },
@@ -105,7 +106,7 @@ export default {
     RadioGroup
   },
 
-  mixins: [CreateEditView],
+  mixins: [CreateEditView, FormValidation],
 
   props: {
     credentialId: {
@@ -162,6 +163,17 @@ export default {
 
       if (this.mode === _CREATE) {
         this.value.location = DEFAULT_REGION;
+
+      // when you edit an Azure cluster and add a new machine pool (edit)
+      // the location field doesn't come populated which causes the vmSizes request
+      // to return 200 but with a null response (also a bunch of other fields are undefined...)
+      // so let's prefill them with the defaults
+      } else if (this.mode === _EDIT && !this.value?.location) {
+        for (const key in this.defaultConfig) {
+          if (this.value[key] === undefined) {
+            this.$set(this.value, key, this.defaultConfig[key]);
+          }
+        }
       }
 
       this.vmSizes = await this.$store.dispatch('management/request', {
@@ -171,30 +183,29 @@ export default {
         }),
         method: 'GET',
       });
+
+      // set correct option for useAvailabilitySet (will consider correct state for UI form based on availabilitySet)
+      if (this.mode === _CREATE) {
+        this.useAvailabilitySet = true;
+      } else {
+        this.useAvailabilitySet = !!this.value.availabilitySet;
+      }
     } catch (e) {
       this.errors = exceptionToErrorsArray(e);
     }
   },
 
   data() {
-    let useAvailabilitySet = false;
-
-    if (this.mode === _CREATE) {
-      useAvailabilitySet = true;
-    } else {
-      useAvailabilitySet = !!this.value.availabilitySet;
-    }
-
     return {
       azureEnvironments,
       defaultConfig,
       storageTypes,
-      credential:      null,
-      locationOptions: [],
-      loading:         false,
-      useAvailabilitySet,
-      vmSizes:         [],
-      valueCopy:       this.value
+      credential:         null,
+      locationOptions:    [],
+      loading:            false,
+      useAvailabilitySet: false,
+      vmSizes:            [],
+      valueCopy:          this.value,
     };
   },
 
@@ -202,6 +213,12 @@ export default {
     credentialId() {
       this.$fetch();
     },
+
+    'value.availabilityZone'(neu) {
+      if (neu && (!this.value.managedDisks || !this.value.enablePublicIpStandardSku || !this.value.staticPublicIp)) {
+        this.$emit('expandAdvanced');
+      }
+    }
   },
 
   computed: {
@@ -368,7 +385,7 @@ export default {
       }
 
       return [];
-    }
+    },
   },
 
   created() {
@@ -610,7 +627,7 @@ export default {
 
     <portal :to="'advanced-' + uuid">
       <div v-if="useAvailabilitySet">
-        <h2>Availability Set Configuration</h2>
+        <h2>{{ t('cluster.machineConfig.azure.sections.availabilitySetConfiguration') }}</h2>
         <div class="row mt-20">
           <div class="col span-6">
             <LabeledInput
@@ -633,7 +650,7 @@ export default {
         </div>
       </div>
       <hr class="mt-20 mb-20">
-      <h2>Purchase Plan</h2>
+      <h2>{{ t('cluster.machineConfig.azure.sections.purchasePlan') }}</h2>
       <div class="row mt-20">
         <div class="col span-6">
           <LabeledInput
@@ -645,9 +662,9 @@ export default {
           />
         </div>
       </div>
-      <hr class="mt-20 mb-20">
-      <h2>Network</h2>
-      <div class="row mt-20">
+      <hr class="mt-20">
+      <h2>{{ t('cluster.machineConfig.azure.sections.network') }}</h2>
+      <div class="row mt-20 mb-20">
         <div class="col span-6">
           <LabeledInput
             v-model="value.subnet"
@@ -666,18 +683,20 @@ export default {
         </div>
       </div>
       <div class="row mt-20">
-        <Checkbox
-          v-model="value.acceleratedNetworking"
-          :disabled="(!value.acceleratedNetworking && !selectedVmSizeSupportsAN)"
-          :mode="mode"
-          :label="t('cluster.machineConfig.azure.acceleratedNetworking.label')"
-        />
+        <div class="col span-6">
+          <Checkbox
+            v-model="value.acceleratedNetworking"
+            :disabled="(!value.acceleratedNetworking && !selectedVmSizeSupportsAN)"
+            :mode="mode"
+            :label="t('cluster.machineConfig.azure.acceleratedNetworking.label')"
+          />
+          <Banner
+            v-if="!selectedVmSizeSupportsAN && value.acceleratedNetworking"
+            color="error"
+            :label="t('cluster.machineConfig.azure.size.selectedSizeAcceleratedNetworkingWarning')"
+          />
+        </div>
       </div>
-      <Banner
-        v-if="!selectedVmSizeSupportsAN && value.acceleratedNetworking"
-        color="error"
-        :label="t('cluster.machineConfig.azure.size.selectedSizeAcceleratedNetworkingWarning')"
-      />
       <div class="row mt-20">
         <div class="col span-6">
           <LabeledInput
@@ -688,7 +707,7 @@ export default {
             :disabled="disabled"
           />
         </div>
-        <div class="col span-6">
+        <div class="col span-6 inline-banner-container">
           <h3><t k="cluster.machineConfig.azure.publicIpOptions.header" /></h3>
           <Checkbox
             v-model="value.noPublicIp"
@@ -700,6 +719,31 @@ export default {
             :mode="mode"
             :label="t('cluster.machineConfig.azure.publicIpOptions.staticPublicIp.label')"
           />
+          <Checkbox
+            v-model="value.enablePublicIpStandardSku"
+            :mode="mode"
+            :label="t('cluster.machineConfig.azure.publicIpOptions.standardSKU.label')"
+          />
+          <div
+            v-if="value.availabilityZone && (!value.staticPublicIp || !value.enablePublicIpStandardSku)"
+            class="inline-error-banner"
+          >
+            <Banner
+              v-if="!value.staticPublicIp && !value.enablePublicIpStandardSku"
+              color="error"
+              :label="t('cluster.machineConfig.azure.availabilityZone.publicIpAndSKUWarning')"
+            />
+            <Banner
+              v-else-if="!value.staticPublicIp"
+              color="error"
+              :label="t('cluster.machineConfig.azure.availabilityZone.publicIpWarning')"
+            />
+            <Banner
+              v-else
+              color="error"
+              :label="t('cluster.machineConfig.azure.availabilityZone.standardSKUWarning')"
+            />
+          </div>
         </div>
       </div>
       <div class="row mt-20">
@@ -741,8 +785,8 @@ export default {
         </div>
       </div>
       <hr class="mt-20 mb-20">
-      <h2>Disks</h2>
-      <div class="row mt-20">
+      <h2>{{ t('cluster.machineConfig.azure.sections.disks') }}</h2>
+      <div class="row mt-20 mb-20">
         <div class="col span-6">
           <LabeledSelect
             v-model="value.storageType"
@@ -761,16 +805,21 @@ export default {
             :label="t('cluster.machineConfig.azure.storageType.warning')"
           />
         </div>
-        <div class="col span-6">
+        <div class="col span-6 inline-banner-container">
           <Checkbox
             v-model="value.managedDisks"
             :mode="mode"
             :label="t('cluster.machineConfig.azure.managedDisks.label')"
             :disabled="disabled"
           />
+          <Banner
+            v-if="value.availabilityZone && !value.managedDisks"
+            color="error"
+            :label="t('cluster.machineConfig.azure.availabilityZone.managedDisksWarning')"
+          />
         </div>
       </div>
-      <div class="row mt-20">
+      <div class="row">
         <div class="col span-6">
           <LabeledInput
             v-model="value.diskSize"
@@ -821,3 +870,13 @@ export default {
     </portal>
   </div>
 </template>
+
+<style scoped>
+.inline-banner-container{
+  position: relative;
+}
+.inline-error-banner {
+  position: absolute;
+  width:100%
+}
+</style>

package/middleware/authenticated.js

@@ -28,6 +28,30 @@ const getPackageFromRoute = (route) => {
 
 let beforeEachSetup = false;
 
+function findMeta(route, key) {
+  if (route?.meta) {
+    const meta = Array.isArray(route.meta) ? route.meta : [route.meta];
+
+    for (let i = 0; i < meta.length; i++) {
+      if (meta[i][key]) {
+        return meta[i][key];
+      }
+    }
+  }
+
+  return undefined;
+}
+
+export function getClusterFromRoute(to) {
+  let cluster = to.params?.cluster;
+
+  if (!cluster) {
+    cluster = findMeta(to, 'cluster');
+  }
+
+  return cluster;
+}
+
 export function getProductFromRoute(to) {
   let product = to.params?.product;
 
@@ -39,6 +63,11 @@ export function getProductFromRoute(to) {
     }
   }
 
+  // If still no product, see if the route indicates the product via route metadata
+  if (!product) {
+    product = findMeta(to, 'product');
+  }
+
   return product;
 }
 
@@ -279,6 +308,11 @@ export default async function({
   try {
     let clusterId = get(route, 'params.cluster');
 
+    // Route can provide cluster ID via metadata
+    if (!clusterId && route) {
+      clusterId = getClusterFromRoute(route);
+    }
+
     const pkg = getPackageFromRoute(route);
     const product = getProductFromRoute(route);