@rancher/shell 0.2.5 → 0.3.1

package/edit/monitoring.coreos.com.alertmanagerconfig/receiverConfig.vue

@@ -12,6 +12,7 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import jsyaml from 'js-yaml';
 import ButtonDropdown from '@shell/components/ButtonDropdown';
 import { _CREATE, _VIEW } from '@shell/config/query-params';
+import FormValidation from '@shell/mixins/form-validation';
 
 export const RECEIVERS_TYPES = [
   {
@@ -45,11 +46,11 @@ export const RECEIVERS_TYPES = [
     logo:  require(`@shell/assets/images/vendor/email.svg`)
   },
   {
-    name:         'webhook',
-    label:        'monitoringReceiver.webhook.label',
-    title:        'monitoringReceiver.webhook.title',
-    key:          'webhookConfigs',
-    logo:         require(`@shell/assets/images/vendor/webhook.svg`),
+    name:  'webhook',
+    label: 'monitoringReceiver.webhook.label',
+    title: 'monitoringReceiver.webhook.title',
+    key:   'webhookConfigs',
+    logo:  require(`@shell/assets/images/vendor/webhook.svg`),
   },
   {
     name:  'custom',
@@ -77,14 +78,14 @@ export default {
   props: {
 
     value: {
-      type:     Object,
-      default:  () => {
+      type:    Object,
+      default: () => {
         return {};
       }
     },
     mode: {
-      type:     String,
-      default:  ''
+      type:    String,
+      default: ''
     },
     alertmanagerConfigResource: {
       type:     Object,
@@ -96,11 +97,11 @@ export default {
     },
     saveOverride: {
       type:     Function,
-      required:  true
+      required: true
     },
   },
 
-  mixins: [CreateEditView],
+  mixins: [CreateEditView, FormValidation],
 
   data(props) {
     const currentReceiver = {};
@@ -144,14 +145,18 @@ export default {
     }
 
     return {
-      create:               _CREATE,
+      create:         _CREATE,
       EDITOR_MODES,
       expectedFields,
-      fileFound:            false,
-      receiverTypes:        RECEIVERS_TYPES,
+      fileFound:      false,
+      receiverTypes:  RECEIVERS_TYPES,
       suffixYaml,
-      view:                 _VIEW,
-      yamlError:            '',
+      view:           _VIEW,
+      yamlError:      '',
+      fvFormRuleSets: [
+        { path: 'name', rules: ['required'] }
+      ],
+      fvReportedValidationPaths: ['value']
     };
   },
 
@@ -235,6 +240,14 @@ export default {
     createAddOptions(receiverType) {
       return receiverType.addOptions.map();
     },
+
+    setError(err) {
+      if (!err) {
+        this.errors = [];
+      } else {
+        this.errors = [err];
+      }
+    }
   }
 };
 </script>
@@ -249,8 +262,9 @@ export default {
     :can-yaml="true"
     :errors="errors"
     :cancel-event="true"
+    :validation-passed="fvFormIsValid"
     @error="e=>errors = e"
-    @finish="saveOverride()"
+    @finish="saveOverride"
     @cancel="redirectAfterCancel"
   >
     <div class="row mb-10">
@@ -259,7 +273,9 @@ export default {
           v-model="value.name"
           :is-disabled="receiverNameDisabled"
           :label="t('generic.name')"
+          :required="true"
           :mode="mode"
+          :rules="fvGetAndReportPathRules('name')"
         />
       </div>
     </div>

package/edit/monitoring.coreos.com.alertmanagerconfig/tls.vue

@@ -8,7 +8,7 @@ export default {
   components: {
     Banner, LabeledInput, SimpleSecretSelector
   },
-  props:      {
+  props: {
     mode: {
       type:     String,
       required: true,

package/edit/monitoring.coreos.com.alertmanagerconfig/types/email.vue

@@ -9,7 +9,7 @@ export default {
   components: {
     Checkbox, LabeledInput, SimpleSecretSelector, TLS
   },
-  props:      {
+  props: {
     mode: {
       type:     String,
       required: true,
@@ -19,17 +19,17 @@ export default {
       required: true
     },
     namespace: {
-      type:     String,
-      default:  ''
+      type:    String,
+      default: ''
     }
   },
   data() {
     this.$set(this.value, 'sendResolved', this.value.sendResolved || false);
-    this.$set(this.value, 'requireTls', this.value.requireTls || false);
+    this.$set(this.value, 'requireTLS', this.value.requireTLS || false);
 
     return {
       view:                          _VIEW,
-      initialAuthPasswordSecretName:  this.value?.authPassword?.name ? this.value.authPassword.name : '',
+      initialAuthPasswordSecretName: this.value?.authPassword?.name ? this.value.authPassword.name : '',
       initialAuthPasswordSecretKey:  this.value.authPassword?.key ? this.value.authPassword.key : '',
       none:                          '__[[NONE]]__',
     };
@@ -123,7 +123,7 @@ export default {
       </div>
       <div class="col span-6">
         <Checkbox
-          v-model="value.requireTls"
+          v-model="value.requireTLS"
           :mode="mode"
           class="mt-20"
           label="Use TLS"

package/edit/monitoring.coreos.com.alertmanagerconfig/types/opsgenie.vue

@@ -45,7 +45,7 @@ export default {
   components: {
     ArrayList, Checkbox, InputWithSelect, LabeledInput, Select, SimpleSecretSelector
   },
-  props:      {
+  props: {
     mode: {
       type:     String,
       required: true,
@@ -55,8 +55,8 @@ export default {
       required: true
     },
     namespace: {
-      type:     String,
-      default:  ''
+      type:    String,
+      default: ''
     }
   },
   data() {
@@ -83,8 +83,8 @@ export default {
       responders,
       TARGETS,
       TYPES,
-      view:                          _VIEW,
-      initialApiKeySecretName:  this.value?.apiKey?.name ? this.value.apiKey.name : '',
+      view:                    _VIEW,
+      initialApiKeySecretName: this.value?.apiKey?.name ? this.value.apiKey.name : '',
       initialApiKeySecretKey:  this.value?.apiKey?.key ? this.value.apiKey.key : '',
       none:                    '__[[NONE]]__',
     };

package/edit/monitoring.coreos.com.alertmanagerconfig/types/pagerduty.vue

@@ -9,7 +9,7 @@ export default {
   components: {
     Checkbox, LabeledInput, LabeledSelect, SimpleSecretSelector
   },
-  props:      {
+  props: {
     mode: {
       type:     String,
       required: true,
@@ -19,8 +19,8 @@ export default {
       required: true
     },
     namespace: {
-      type:     String,
-      default:  ''
+      type:    String,
+      default: ''
     }
   },
   data() {

package/edit/monitoring.coreos.com.alertmanagerconfig/types/slack.vue

@@ -9,7 +9,7 @@ export default {
   components: {
     Banner, Checkbox, LabeledInput, SimpleSecretSelector
   },
-  props:      {
+  props: {
     mode: {
       type:     String,
       required: true,
@@ -19,8 +19,8 @@ export default {
       required: true,
     },
     namespace: {
-      type:     String,
-      default:  ''
+      type:    String,
+      default: ''
     }
   },
   data() {

package/edit/monitoring.coreos.com.alertmanagerconfig/types/webhook.vue

@@ -27,7 +27,7 @@ export default {
     SimpleSecretSelector,
     TLS,
   },
-  props:      {
+  props: {
     mode: {
       type:     String,
       required: true,
@@ -37,8 +37,8 @@ export default {
       required: true
     },
     namespace: {
-      type:     String,
-      default:  ''
+      type:    String,
+      default: ''
     }
   },
   data(props) {
@@ -50,7 +50,7 @@ export default {
     return {
       showNamespaceBanner:  isDriverUrl && this.mode !== _VIEW,
       view:                 _VIEW,
-      initialUrlSecretName:  this.value?.urlSecret?.name ? this.value.urlSecret.name : '',
+      initialUrlSecretName: this.value?.urlSecret?.name ? this.value.urlSecret.name : '',
       initialUrlSecretKey:  this.value?.urlSecret?.key ? this.value.urlSecret.key : '',
       webhookOptons:        [
         {

package/edit/monitoring.coreos.com.prometheusrule/GroupRules.vue

@@ -1,6 +1,5 @@
 <script>
 import has from 'lodash/has';
-
 import { Banner } from '@components/Banner';
 import { removeAt } from '@shell/utils/array';
 import { _VIEW } from '@shell/config/query-params';
@@ -34,8 +33,9 @@ export default {
       expr:   '',
       for:    '0s',
       labels: {
-        severity:  'none',
-        namespace: 'default'
+        severity:   'none',
+        namespace:  'default',
+        cluster_id: this.$store.getters['clusterId']
       },
     };
 
@@ -91,7 +91,15 @@ export default {
 
       switch (ruleType) {
       case 'record':
-        value.push({ record: '', expr: '' });
+        value.push({
+          record: '',
+          expr:   '',
+          labels: {
+            severity:   'none',
+            namespace:  'default',
+            cluster_id: this.$store.getters['clusterId']
+          },
+        });
         break;
       case 'alert':
         value.push(this.defaultAlert);
@@ -145,7 +153,7 @@ export default {
             class="btn role-link close btn-sm"
             @click="removeRule(props.i)"
           >
-            <i class="icon icon-2x icon-x" />
+            <i class="icon icon-x" />
           </button>
           <span v-else />
         </template>
@@ -194,7 +202,7 @@ export default {
             class="btn role-link close btn-sm"
             @click="removeRule(props.i)"
           >
-            <i class="icon icon-2x icon-x" />
+            <i class="icon icon-x" />
           </button>
           <span v-else />
         </template>

package/edit/monitoring.coreos.com.receiver/auth.vue

@@ -28,8 +28,8 @@ export default {
 
     const authOptions = [
       {
-        value:   'none',
-        label:   this.t('monitoringReceiver.auth.none.label')
+        value: 'none',
+        label: this.t('monitoringReceiver.auth.none.label')
       },
       {
         value:   'basic_auth',

package/edit/monitoring.coreos.com.receiver/index.vue

@@ -71,7 +71,7 @@ export default {
       suffixYaml,
       EDITOR_MODES,
       yamlError:            '',
-      doneLocationOverride:      {
+      doneLocationOverride: {
         name:   'c-cluster-monitoring-route-receiver',
         params: { cluster: this.$store.getters['clusterId'] },
         query:  { resource: MONITORING.SPOOFED.RECEIVER }

package/edit/monitoring.coreos.com.receiver/types/email.vue

@@ -15,7 +15,7 @@ export default {
   components: {
     Checkbox, LabeledInput, TLS
   },
-  props:      {
+  props: {
     mode: {
       type:     String,
       required: true,

package/edit/monitoring.coreos.com.receiver/types/opsgenie.vue

@@ -52,7 +52,7 @@ export default {
   components: {
     ArrayList, Checkbox, InputWithSelect, LabeledInput, Select
   },
-  props:      {
+  props: {
     mode: {
       type:     String,
       required: true,

package/edit/monitoring.coreos.com.receiver/types/pagerduty.vue

@@ -15,7 +15,7 @@ export default {
   components: {
     Checkbox, LabeledInput, LabeledSelect
   },
-  props:      {
+  props: {
     mode: {
       type:     String,
       required: true,

package/edit/monitoring.coreos.com.receiver/types/webhook.vue

@@ -19,7 +19,7 @@ export default {
   components: {
     Auth, Banner, Checkbox, LabeledInput, TLS
   },
-  props:      {
+  props: {
     mode: {
       type:     String,
       required: true,

package/edit/monitoring.coreos.com.route.vue

@@ -53,7 +53,7 @@ export default {
 
     return {
       receiverOptions:      [],
-      doneLocationOverride:      {
+      doneLocationOverride: {
         name:   'c-cluster-monitoring-route-receiver',
         params: { cluster: this.$store.getters['clusterId'] },
         query:  { resource: MONITORING.SPOOFED.ROUTE }

package/edit/namespace.vue

@@ -6,16 +6,17 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { MANAGEMENT } from '@shell/config/types';
 import { CONTAINER_DEFAULT_RESOURCE_LIMIT, PROJECT } from '@shell/config/labels-annotations';
 import ContainerResourceLimit from '@shell/components/ContainerResourceLimit';
+import PodSecurityAdmission from '@shell/components/PodSecurityAdmission';
 import Tabbed from '@shell/components/Tabbed';
 import Tab from '@shell/components/Tabbed/Tab';
 import CruResource from '@shell/components/CruResource';
-import Labels from '@shell/components/form/Labels';
 import { PROJECT_ID, _VIEW } from '@shell/config/query-params';
 import MoveModal from '@shell/components/MoveModal';
 import ResourceQuota from '@shell/components/form/ResourceQuota/Namespace';
 import Loading from '@shell/components/Loading';
 import { HARVESTER_TYPES, RANCHER_TYPES } from '@shell/components/form/ResourceQuota/shared';
-import { HARVESTER_NAME as HARVESTER } from '@shell/config/product/harvester-manager';
+import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
+import Labels from '@shell/components/form/Labels';
 
 export default {
   components: {
@@ -25,6 +26,7 @@ export default {
     Labels,
     Loading,
     NameNsDescription,
+    PodSecurityAdmission,
     ResourceQuota,
     Tab,
     Tabbed,
@@ -101,7 +103,8 @@ export default {
 
     showContainerResourceLimit() {
       return !this.isSingleHarvester;
-    }
+    },
+
   },
 
   watch: {
@@ -222,7 +225,6 @@ export default {
         />
       </Tab>
       <Tab
-        v-if="!isView"
         name="labels-and-annotations"
         label-key="generic.labelsAndAnnotations"
         :weight="-1"
@@ -234,6 +236,18 @@ export default {
           :display-side-by-side="false"
         />
       </Tab>
+      <Tab
+        name="pod-security-admission"
+        label-key="podSecurityAdmission.name"
+        :label="t('podSecurityAdmission.name')"
+      >
+        <PodSecurityAdmission
+          :labels="value.labels"
+          :mode="mode"
+          labels-prefix="pod-security.kubernetes.io/"
+          @updateLabels="value.setLabels($event)"
+        />
+      </Tab>
     </Tabbed>
     <MoveModal v-if="projects" />
   </CruResource>

package/edit/networking.istio.io.destinationrule/LoadBalancer.vue

@@ -20,7 +20,7 @@ export default {
 
     // destinationrule.spec.trafficPolicy.loadBalancer
     value: {
-      type:     Object,
+      type:    Object,
       default: () => {}
     }
   },

package/edit/networking.k8s.io.ingress/Certificate.vue

@@ -102,6 +102,7 @@ export default {
         :value="hosts"
         :add-label="t('ingress.certificates.addHost')"
         :rules="rules.host"
+        :initial-empty-row="true"
         @input="onHostsInput"
       />
     </div>

package/edit/networking.k8s.io.ingress/Certificates.vue

@@ -9,7 +9,7 @@ export default {
   components: {
     ArrayListGrouped, Certificate, SortableTable
   },
-  props:      {
+  props: {
     value: {
       type:    Object,
       default: () => {
@@ -32,8 +32,8 @@ export default {
   data() {
     return {
       defaultAddValue: {
-        secretName:  null,
-        hosts:       ['']
+        secretName: null,
+        hosts:      ['']
       }
     };
   },

package/edit/networking.k8s.io.ingress/DefaultBackend.vue

@@ -9,14 +9,14 @@ export default {
   components: {
     LabeledInput, LabeledSelect, Banner
   },
-  props:      {
+  props: {
     value: {
       type:    Object,
       default: () => {
         return {};
       }
     },
-    serviceTargets:  {
+    serviceTargets: {
       type:    Array,
       default: () => []
     },

package/edit/networking.k8s.io.ingress/IngressClass.vue

@@ -12,7 +12,7 @@ export default {
         return {};
       }
     },
-    ingressClasses:  {
+    ingressClasses: {
       type:    Array,
       default: () => []
     },
@@ -37,12 +37,13 @@ export default {
   },
   methods: {
     update(e) {
-      this.ingressClassName = e && typeof e === 'object' ? e.value : e;
-
-      if (this.ingressClassName) {
-        set(this.value, 'spec.ingressClassName', this.ingressClassName);
-      } else {
+      if (!e || e.label === this.t('generic.none')) {
         remove(this.value, 'spec.ingressClassName');
+        this.ingressClassName = '';
+      } else {
+        // when a user manually types an ingress class name, the event emitted has a 'label' but no 'value'
+        this.ingressClassName = e.value ? e.value : e.label;
+        set(this.value, 'spec.ingressClassName', this.ingressClassName);
       }
     }
   }
@@ -53,11 +54,12 @@ export default {
     <LabeledSelect
       v-model="ingressClassName"
       :taggable="true"
+      :searchable="true"
       :mode="mode"
       :label="t('ingress.ingressClass.label')"
       :options="ingressClassOptions"
       option-label="label"
-      @input="update"
+      @selecting="update"
     />
   </div>
 </template>

package/edit/networking.k8s.io.ingress/Rule.vue

@@ -22,7 +22,7 @@ export default {
     },
     rules: {
       default: () => ({
-        requestHost:   [],
+        requestHost: [],
         path:        [],
         port:        [],
         target:      []

package/edit/networking.k8s.io.ingress/RulePath.vue

@@ -9,14 +9,14 @@ export default {
   components: {
     InputWithSelect, LabeledInput, Select
   },
-  props:      {
+  props: {
     value: {
       type:    Object,
       default: () => {
         return {};
       }
     },
-    serviceTargets:  {
+    serviceTargets: {
       type:    Array,
       default: () => []
     },
@@ -26,9 +26,9 @@ export default {
     },
     rules: {
       default: () => ({
-        path:        [],
-        port:        [],
-        target:      []
+        path:   [],
+        port:   [],
+        target: []
       }),
       type: Object,
     }
@@ -66,7 +66,11 @@ export default {
       return isValueAnOption ? null : 'warning';
     },
     serviceTargetTooltip() {
-      return this.serviceTargetStatus === 'warning' ? this.t('ingress.rules.target.doesntExist') : null;
+      if (this.serviceTargetStatus === 'warning' ) {
+        return this.t('ingress.rules.target.doesntExist');
+      }
+
+      return this.t('ingress.rules.target.tooltip');
     },
   },
   created() {
@@ -178,17 +182,19 @@ export default {
   </div>
 </template>
 <style lang="scss" scoped>
+$row-height: 40px;
+
 .labeled-input ::v-deep, ::v-deep .labeled-input {
   padding: 0 !important;
   height: 100%;
   input.no-label {
-    height: calc($input-height - 2px);
+    height: calc($row-height - 2px);
     padding: 10px;
   }
 }
 .rule-path ::v-deep {
-  .col {
-    height: $input-height;
+  .col, INPUT {
+    height: $row-height;
   }
 
   .unlabeled-select {
@@ -202,7 +208,7 @@ export default {
   }
 
   &, .input-container {
-    height: $input-height;
+    height: $row-height;
   }
 
   .input-container .in-input.unlabeled-select {
@@ -210,7 +216,7 @@ export default {
   }
 
   button {
-    line-height: 40px;
+    line-height: $row-height;
   }
 
   .v-select INPUT {