@rancher/shell 0.1.0 → 0.1.1

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

@@ -1,7 +1,7 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
-import Checkbox from '@shell/components/form/Checkbox';
-import Banner from '@shell/components/Banner';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
+import { Banner } from '@components/Banner';
 import SimpleSecretSelector from '@shell/components/form/SimpleSecretSelector';
 import { _CREATE, _VIEW } from '@shell/config/query-params';
 
@@ -38,7 +38,8 @@ export default {
     return {
       view:              _VIEW,
       initialSecretKey:  this.value?.apiURL?.key ? this.value.apiURL.key : '',
-      initialSecretName: this.value.apiURL?.name ? this.value.apiURL.name : ''
+      initialSecretName: this.value.apiURL?.name ? this.value.apiURL.name : '',
+      none:              '__[[NONE]]__',
     };
   },
 
@@ -47,10 +48,14 @@ export default {
       const existingKey = this.value.apiURL?.key || '';
 
       if (this.value.apiURL) {
-        this.value.apiURL = {
-          key: existingKey,
-          name
-        };
+        if (name === this.none) {
+          delete this.value.apiURL;
+        } else {
+          this.value.apiURL = {
+            key: existingKey,
+            name,
+          };
+        }
       } else {
         this.value['apiURL'] = {
           key: '',

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

@@ -1,9 +1,9 @@
 <script>
 
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import Checkbox from '@shell/components/form/Checkbox';
-import Banner from '@shell/components/Banner';
+import { Checkbox } from '@components/Form/Checkbox';
+import { Banner } from '@components/Banner';
 import SimpleSecretSelector from '@shell/components/form/SimpleSecretSelector';
 import { _VIEW } from '@shell/config/query-params';
 import TLS from '../tls';
@@ -11,6 +11,11 @@ import Auth from '../auth';
 
 export const MS_TEAMS_URL = 'http://rancher-alerting-drivers-prom2teams.cattle-monitoring-system.svc:8089/v2/connector';
 export const ALIBABA_CLOUD_SMS_URL = 'http://rancher-alerting-drivers-sachet.cattle-monitoring-system.svc:9876/alert';
+export const WEBHOOK_TYPES = {
+  ALIBABA_CLOUD_SMS: 'alibaba-cloud-sms',
+  GENERIC:           'generic',
+  MS_TEAMS:          'ms-teams'
+};
 
 export default {
   components: {
@@ -50,24 +55,34 @@ export default {
       webhookOptons:        [
         {
           label: this.t('monitoringReceiver.webhook.add.generic'),
-          value: 'generic'
+          value: WEBHOOK_TYPES.GENERIC
         },
         {
           label: this.t('monitoringReceiver.webhook.add.msTeams'),
-          value: 'ms-teams'
+          value: WEBHOOK_TYPES.MS_TEAMS
         },
         {
           label: this.t('monitoringReceiver.webhook.add.alibabaCloudSms'),
-          value: 'alibaba-cloud-sms'
+          value: WEBHOOK_TYPES.ALIBABA_CLOUD_SMS
         }
       ],
       msTeamsUrl:          MS_TEAMS_URL,
       alibabaCloudSmsUrl:  ALIBABA_CLOUD_SMS_URL,
-      selectedWebhookType: 'generic',
+      selectedWebhookType: this.getTypeFromUrl(this.value.url),
       none:                '__[[NONE]]__',
     };
   },
   methods: {
+    getTypeFromUrl(url) {
+      switch (url) {
+      case MS_TEAMS_URL:
+        return WEBHOOK_TYPES.MS_TEAMS;
+      case ALIBABA_CLOUD_SMS_URL:
+        return WEBHOOK_TYPES.ALIBABA_CLOUD_SMS;
+      default:
+        return WEBHOOK_TYPES.GENERIC;
+      }
+    },
     updateUrlSecretName(name) {
       const existingKey = this.value.urlSecret?.key || '';
 
@@ -106,12 +121,15 @@ export default {
       switch (event) {
       case ('ms-teams'):
         this.value.url = this.msTeamsUrl;
+        this.selectedWebhookType = WEBHOOK_TYPES.MS_TEAMS;
         break;
       case ('alibaba-cloud-sms'):
         this.value.url = this.alibabaCloudSmsUrl;
+        this.selectedWebhookType = WEBHOOK_TYPES.ALIBABA_CLOUD_SMS;
         break;
       default:
         this.value.url = '';
+        this.selectedWebhookType = WEBHOOK_TYPES.GENERIC;
       }
     },
     updateWebhookUrl(val) {

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

@@ -4,10 +4,10 @@ import has from 'lodash/has';
 import isEmpty from 'lodash/isEmpty';
 import pickBy from 'lodash/pickBy';
 
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import CodeMirror from '@shell/components/CodeMirror';
 import KeyValue from '@shell/components/form/KeyValue';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import UnitInput from '@shell/components/form/UnitInput';
 import { _VIEW } from '@shell/config/query-params';

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

@@ -1,7 +1,7 @@
 <script>
 import has from 'lodash/has';
 
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import { removeAt } from '@shell/utils/array';
 import { _VIEW } from '@shell/config/query-params';
 import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
@@ -28,6 +28,24 @@ export default {
     },
   },
 
+  data(props) {
+    const defaultAlert = {
+      alert:  '',
+      expr:   '',
+      for:    '0s',
+      labels: {
+        severity:  'none',
+        namespace: 'default'
+      },
+    };
+
+    if (!this.value.rules) {
+      this.value['rules'] = [defaultAlert];
+    }
+
+    return { defaultAlert };
+  },
+
   computed: {
     recordingRules() {
       const { value: rules } = this;
@@ -76,12 +94,7 @@ export default {
         value.push({ record: '', expr: '' });
         break;
       case 'alert':
-        value.push({
-          alert:  '',
-          expr:   '',
-          for:    '0s',
-          labels: { severity: 'none' },
-        });
+        value.push(this.defaultAlert);
         break;
       default:
         break;

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

@@ -2,7 +2,7 @@
 import debounce from 'lodash/debounce';
 
 import CodeMirror from '@shell/components/CodeMirror';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import KeyValue from '@shell/components/form/KeyValue';
 import { _VIEW } from '@shell/config/query-params';
 

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

@@ -1,16 +1,15 @@
 <script>
 import CreateEditView from '@shell/mixins/create-edit-view';
-
+import FormValidation from '@shell/mixins/form-validation';
 import { removeAt } from '@shell/utils/array';
-
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import CruResource from '@shell/components/CruResource';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import Tab from '@shell/components/Tabbed/Tab';
 import Tabbed from '@shell/components/Tabbed';
 import UnitInput from '@shell/components/form/UnitInput';
-import { _CREATE } from '@shell/config/query-params';
+import { _CREATE, _VIEW } from '@shell/config/query-params';
 import isString from 'lodash/isString';
 import isEmpty from 'lodash/isEmpty';
 import GroupRules from './GroupRules';
@@ -28,7 +27,7 @@ export default {
     UnitInput,
   },
 
-  mixins: [CreateEditView],
+  mixins: [CreateEditView, FormValidation],
 
   props: {
     value: {
@@ -42,10 +41,21 @@ export default {
     },
   },
 
+  data() {
+    return { fvFormRuleSets: [{ path: 'metadata.name', rules: ['dnsLabel'] }] };
+  },
+
   computed: {
     filteredGroups() {
       return this.value?.spec?.groups || [];
     },
+    errorMessages() {
+      if (this.mode === _VIEW && (this.value?.metadata?.name || '').includes('.')) {
+        return [this.t('validation.prometheusRule.noEdit')];
+      }
+
+      return this.fvUnreportedValidationErrors;
+    }
   },
 
   mounted() {
@@ -111,10 +121,10 @@ export default {
 <template>
   <CruResource
     :done-route="doneRoute"
-    :errors="errors"
+    :errors="errorMessages"
     :mode="mode"
     :resource="value"
-    :validation-passed="true"
+    :validation-passed="fvFormIsValid"
     @error="(e) => (errors = e)"
     @finish="save"
   >
@@ -124,6 +134,7 @@ export default {
           v-if="!isView"
           :value="value"
           :mode="mode"
+          :rules="{ name: fvGetAndReportPathRules('metadata.name'), namespace: [], description: [] }"
           @change="name = value.metadata.name"
         />
       </div>

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

@@ -7,7 +7,7 @@
  * AlertmanagerConfig resource, which has a different API. The new forms are
  * located in @shell/edit/monitoring.coreos.com.alertmanagerconfig/types.
  */
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import isEmpty from 'lodash/isEmpty';
 

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

@@ -10,9 +10,9 @@
 import { MONITORING } from '@shell/config/types';
 import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 import Loading from '@shell/components/Loading';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import CruResource from '@shell/components/CruResource';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import Tabbed from '@shell/components/Tabbed';
 import Tab from '@shell/components/Tabbed/Tab';
 import YamlEditor, { EDITOR_MODES } from '@shell/components/YamlEditor';

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

@@ -7,8 +7,8 @@
  * AlertmanagerConfig resource, which has a different API. The new forms are
  * located in @shell/edit/monitoring.coreos.com.alertmanagerconfig/types.
  */
-import LabeledInput from '@shell/components/form/LabeledInput';
-import Banner from '@shell/components/Banner';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Banner } from '@components/Banner';
 
 export default {
   components: { Banner, LabeledInput },

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

@@ -7,8 +7,8 @@
  * AlertmanagerConfig resource, which has a different API. The new forms are
  * located in @shell/edit/monitoring.coreos.com.alertmanagerconfig/types.
  */
-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 TLS from '../tls';
 
 export default {

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

@@ -8,9 +8,9 @@
  * located in @shell/edit/monitoring.coreos.com.alertmanagerconfig/types.
  */
 import ArrayList from '@shell/components/form/ArrayList';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import Select from '@shell/components/form/Select';
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import InputWithSelect from '@shell/components/form/InputWithSelect';
 import { _VIEW } from '@shell/config/query-params';
 

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

@@ -7,9 +7,9 @@
  * AlertmanagerConfig resource, which has a different API. The new forms are
  * located in @shell/edit/monitoring.coreos.com.alertmanagerconfig/types.
  */
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 
 export default {
   components: {

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

@@ -7,8 +7,8 @@
  * AlertmanagerConfig resource, which has a different API. The new forms are
  * located in @shell/edit/monitoring.coreos.com.alertmanagerconfig/types.
  */
-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 { _CREATE } from '@shell/config/query-params';
 
 export default {

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

@@ -1,5 +1,5 @@
 <script>
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import { _VIEW } from '@shell/config/query-params';
 
 export default {

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

@@ -7,9 +7,9 @@
  * AlertmanagerConfig resource, which has a different API. The new forms are
  * located in @shell/edit/monitoring.coreos.com.alertmanagerconfig/types.
  */
-import LabeledInput from '@shell/components/form/LabeledInput';
-import Checkbox from '@shell/components/form/Checkbox';
-import Banner from '@shell/components/Banner';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
+import { Banner } from '@components/Banner';
 import { _VIEW } from '@shell/config/query-params';
 import { ALIBABA_CLOUD_SMS_URL, MS_TEAMS_URL } from '@shell/edit/monitoring.coreos.com.receiver/types/webhook.add.vue';
 import TLS from '../tls';

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

@@ -10,13 +10,13 @@
 import CruResource from '@shell/components/CruResource';
 import ArrayList from '@shell/components/form/ArrayList';
 import KeyValue from '@shell/components/form/KeyValue';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import Tabbed from '@shell/components/Tabbed';
 import Tab from '@shell/components/Tabbed/Tab';
 import { MONITORING } from '@shell/config/types';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import { createDefaultRouteName } from '@shell/utils/alertmanagerconfig';
 import Loading from '@shell/components/Loading';
 

package/edit/namespace.vue

@@ -65,13 +65,6 @@ export default {
     isHarvester() {
       return this.$store.getters['currentProduct'].inStore === HARVESTER;
     },
-    extraColumns() {
-      if ( this.$store.getters['isRancher'] && !this.isSingleProduct) {
-        return ['project-col'];
-      }
-
-      return [];
-    },
 
     projectOpts() {
       const clusterId = this.$store.getters['currentCluster'].id;
@@ -166,7 +159,6 @@ export default {
       :value="value"
       :namespaced="false"
       :mode="mode"
-      :extra-columns="extraColumns"
     >
       <template v-if="!isSingleProduct" #project-col>
         <LabeledSelect v-model="projectName" :label="t('namespace.project.label')" :options="projectOpts" />

package/edit/network.harvesterhci.io.clusternetwork/vlan.vue

@@ -1,7 +1,7 @@
 <script>
 import Vue from 'vue';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { RadioGroup } from '@components/Form/Radio';
 import Tip from '@shell/components/Tip';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { allHash } from '@shell/utils/promise';

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

@@ -1,7 +1,7 @@
 <script>
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import LabeledInput from '@shell/components/form/LabeledInput';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
 import { get } from '@shell/utils/object';
 
 export default {

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

@@ -2,7 +2,7 @@
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import Tab from '@shell/components/Tabbed/Tab';
 import Tabbed from '@shell/components/Tabbed';
 import KeyValue from '@shell/components/form/KeyValue';

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

@@ -17,6 +17,10 @@ export default {
       type:    Array,
       default: () => [],
     },
+    rules: {
+      default: () => ({ host: [] }),
+      type:    Object,
+    }
   },
   data() {
     const defaultCert = {
@@ -91,7 +95,7 @@ export default {
       />
     </div>
     <div class="col span-6">
-      <ArrayList :value="hosts" :add-label="t('ingress.certificates.addHost')" @input="onHostsInput" />
+      <ArrayList :value="hosts" :add-label="t('ingress.certificates.addHost')" :rules="rules.host" @input="onHostsInput" />
     </div>
   </div>
 </template>

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

@@ -23,6 +23,10 @@ export default {
     certificates: {
       type:    Array,
       default: () => []
+    },
+    rules: {
+      default: () => ({ host: [] }),
+      type:    Object,
     }
   },
   data() {
@@ -94,6 +98,7 @@ export default {
           class="mb-20"
           :mode="mode"
           :certs="certificates"
+          :rules="rules"
         />
       </template>
     </ArrayListGrouped>

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

@@ -1,8 +1,8 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import { get, set } from '@shell/utils/object';
 
 export default {
@@ -23,6 +23,13 @@ export default {
     mode: {
       type:    String,
       default: _EDIT
+    },
+    rules: {
+      default: () => ({
+        name: [],
+        port: []
+      }),
+      type: Object,
     }
   },
   data() {
@@ -71,6 +78,11 @@ export default {
       this.$emit('input', this.value);
     }
   },
+  watch: {
+    serviceName() { // fixes an issue wherein selecting a target service visually clears out the port but the previous value remains
+      this.update();
+    }
+  }
 };
 </script>
 <template>
@@ -87,6 +99,7 @@ export default {
           option-label="label"
           :status="serviceTargetStatus"
           :tooltip="serviceTargetTooltip"
+          :rules="rules.name"
           @input="update(); servicePort = ''"
         />
       </div>
@@ -97,6 +110,7 @@ export default {
           :mode="mode"
           :label="t('ingress.defaultBackend.port.label')"
           :placeholder="t('ingress.defaultBackend.port.placeholder')"
+          :rules="rules.port"
           @input="update"
         />
         <LabeledSelect
@@ -106,6 +120,7 @@ export default {
           :options="portOptions"
           :label="t('ingress.defaultBackend.port.label')"
           :placeholder="t('ingress.defaultBackend.port.placeholder')"
+          :rules="rules.port"
           @input="update"
         />
       </div>

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

@@ -0,0 +1,63 @@
+<script>
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { _EDIT } from '@shell/config/query-params';
+import { get, set, remove } from '@shell/utils/object';
+
+export default {
+  components: { LabeledSelect },
+  props:      {
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+    ingressClasses:  {
+      type:    Array,
+      default: () => []
+    },
+    mode: {
+      type:    String,
+      default: _EDIT
+    }
+  },
+  data() {
+    return { ingressClassName: get(this.value, 'spec.ingressClassName') };
+  },
+  computed: {
+    ingressClassOptions() {
+      return [
+        {
+          label: this.t('generic.none'),
+          value: '',
+        },
+        ...this.ingressClasses
+      ];
+    }
+  },
+  methods: {
+    update(e) {
+      this.ingressClassName = e && typeof e === 'object' ? e.value : e;
+
+      if (this.ingressClassName) {
+        set(this.value, 'spec.ingressClassName', this.ingressClassName);
+      } else {
+        remove(this.value, 'spec.ingressClassName');
+      }
+    }
+  }
+};
+</script>
+<template>
+  <div class="col span-4">
+    <LabeledSelect
+      v-model="ingressClassName"
+      :taggable="true"
+      :mode="mode"
+      :label="t('ingress.ingressClass.label')"
+      :options="ingressClassOptions"
+      option-label="label"
+      @input="update"
+    />
+  </div>
+</template>