Fleet clustergroup creaet

assets/translations/en-us.yaml

@@ -1444,3 +1444,8 @@ typeLabel:
       one { Endpoint }
       other { Endpoints }
     }
+  fleet.cattle.io.clustergroup: |-
+    {count, plural,
+      one { Cluster Group }
+      other {Cluster Groups }
+    }

components/ResourceYaml.vue

@@ -123,10 +123,6 @@ export default {
         cm.foldLinesMatching(/^status:\s*$/);
       }
 
-      // regardless of edit or create we should probably fold all the comments so they dont get out of hand.
-      cm.getMode().fold = 'yamlcomments';
-      cm.execCommand('foldAll');
-
       try {
         const parsed = jsyaml.safeLoad(this.currentYaml);
         const annotations = Object.keys(parsed?.metadata?.annotations || {});
@@ -152,7 +148,14 @@ export default {
         }
       } catch (e) {}
 
-      cm.foldLinesMatching(/^\s+managedFields:\s*$/);
+      cm.foldLinesMatching(/managedFields/);
+
+      // regardless of edit or create we should probably fold all the comments so they dont get out of hand.
+      const saved = cm.getMode().fold;
+
+      cm.getMode().fold = 'yamlcomments';
+      cm.execCommand('foldAll');
+      cm.getMode().fold = saved;
     },
 
     onChanges(cm, changes) {

components/form/MatchExpressions.vue

@@ -5,6 +5,7 @@ import LabeledSelect from '@/components/form/LabeledSelect';
 import { sortBy } from '@/utils/sort';
 import ArrayList from '@/components/form/ArrayList';
 import { mapGetters } from 'vuex';
+import { removeObject } from '@/utils/array';
 
 export default {
   components: {
@@ -63,34 +64,6 @@ export default {
   data() {
     const t = this.$store.getters['i18n/t'];
 
-    const tableHeaders = [
-      {
-        name:  'key',
-        label: t('workload.scheduling.affinity.matchExpressions.key'),
-        value: 'key'
-      },
-      {
-        name:  'operator',
-        label: t('workload.scheduling.affinity.matchExpressions.operator'),
-        value: 'operator',
-        width: '20%'
-      },
-      {
-        name:  'value',
-        label: t('workload.scheduling.affinity.matchExpressions.value'),
-        value: 'values'
-      },
-    ];
-
-    if (this.showRemove) {
-      tableHeaders.push({
-        name:          'remove',
-        label:         '',
-        value:         '',
-        width:         50
-      });
-    }
-
     const podOptions = [
       { label: t('workload.scheduling.affinity.matchExpressions.exists'), value: 'Exists' },
       { label: t('workload.scheduling.affinity.matchExpressions.doesNotExist'), value: 'DoesNotExist' },
@@ -111,18 +84,22 @@ export default {
 
     rules = rules.map((rule) => {
       if (rule.values && typeof rule.values !== 'string') {
-        rule.values = rule.values.join(',');
+        rule.values = rule.values.join(', ');
       }
 
       return rule;
     });
 
     if (!rules.length && this.initialEmptyRow) {
-      rules.push({ values: '' });
+      rules.push({
+        key: '', operator: 'In', values: ''
+      });
     }
 
     return {
-      ops, rules, custom: [], tableHeaders
+      ops,
+      rules,
+      custom: []
     };
   },
 
@@ -160,35 +137,32 @@ export default {
 
   methods: {
     removeRule(row) {
-      const idx = this.rules.indexOf(row);
-
-      this.rules.splice(idx, 1);
+      removeObject(this.rules, row);
       this.update();
     },
 
     addRule() {
-      this.rules.push({ values: '' });
+      this.rules.push({
+        key:      '',
+        operator: 'In',
+        values:   ''
+      });
     },
 
     update() {
       this.$nextTick(() => {
-        const out = [
-          ...this.rules.map((rule) => {
-            const matchExpression = { key: rule.key };
+        const out = this.rules.map((rule) => {
+          const matchExpression = { key: rule.key, operator: rule.operator };
+          const val = (rule.values || '').trim();
 
-            if (rule.operator) {
-              matchExpression.operator = rule.operator;
-            }
-            if (rule.values) {
-              if ((rule.operator === 'In' || rule.operator === 'NotIn')) {
-                matchExpression.values = (rule.values || []).split(',');
-              } else {
-                matchExpression.values = [rule.values];
-              }
-            }
+          if ( !val ) {
+            return;
+          }
 
-            return matchExpression;
-          })];
+          matchExpression.values = val.split(/\s*,\s*/).filter(x => !!x);
+
+          return matchExpression;
+        }).filter(x => !!x);
 
         this.$emit('input', out);
       });
@@ -265,13 +239,15 @@ export default {
           v-model="row.operator"
           class="inline"
           :options="ops"
+          label="label"
+          :reduce="opt=>opt.value"
           :mode="mode"
           @input="update"
         />
       </div>
 
       <div v-if="row.operator==='Exists' || row.operator==='DoesNotExist'" class="no-value">
-        <label>n/a</label>
+        <label class="text-muted">&hellip;</label>
       </div>
       <div v-else>
         <div v-if="isView">
@@ -279,7 +255,7 @@ export default {
         </div>
         <input v-else v-model="row.values" :mode="mode" :disabled="row.operator==='Exists' || row.operator==='DoesNotExist'" />
       </div>
-      <div>
+      <div class="text-right">
         <button
           v-if="!isView"
           type="button"
@@ -329,7 +305,7 @@ export default {
 
   .match-expression-row, .match-expression-header {
   display: grid;
-  grid-template-columns: 27% 27% 27% auto;
+  grid-template-columns: 1fr 200px 1fr 100px;
   grid-gap: $column-gutter;
   align-items: center;
   &:not(.view){

edit/fleet.cattle.io.clustergroup.vue

@@ -0,0 +1,57 @@
+<script>
+import CreateEditView from '@/mixins/create-edit-view';
+import Footer from '@/components/form/Footer';
+import NameNsDescription from '@/components/form/NameNsDescription';
+import Labels from '@/components/form/Labels';
+import MatchExpressions from '@/components/form/MatchExpressions';
+import { set } from '@/utils/object';
+
+export default {
+  name: 'CruClusterGroup',
+
+  components: {
+    Footer,
+    NameNsDescription,
+    MatchExpressions,
+    Labels,
+  },
+
+  mixins: [CreateEditView],
+
+  data() {
+    return { isGit: !!this.value.spec.gitRepo };
+  },
+
+  methods: { set },
+
+};
+</script>
+
+<template>
+  <form>
+    <NameNsDescription v-model="value" :mode="mode" :namespaced="isNamespaced" />
+
+    <hr class="mt-20 mb-20" />
+
+    <h2>Select clusters which match the labels</h2>
+    <MatchExpressions
+      :initial-empty-row="!isView"
+      :mode="mode"
+      type=""
+      :value="value.spec.selector.matchExpressions"
+      :show-remove="false"
+      @input="e=>set(value.spec.selector, 'matchExpressions', e)"
+    />
+
+    <hr class="mt-20" />
+
+    <Labels
+      default-section-class="mt-20"
+      :value="value"
+      :mode="mode"
+      :display-side-by-side="false"
+    />
+
+    <Footer :mode="mode" :errors="errors" @save="save" @done="done" />
+  </form>
+</template>

models/fleet.cattle.io.clustergroup.js

@@ -0,0 +1,12 @@
+export default {
+  applyDefaults() {
+    return () => {
+      const spec = this.spec || {};
+
+      this.spec = spec;
+
+      spec.selector = spec.selector || {};
+      spec.selector.matchExpressions = spec.selector.matchExpressions || [];
+    };
+  },
+};

plugins/steve/resource-instance.js

@@ -48,7 +48,10 @@ const STRING_LIKE_TYPES = [
 ];
 const DNS_LIKE_TYPES = ['dnsLabel', 'dnsLabelRestricted', 'hostname'];
 
-const REMAP_STATE = { disabled: 'inactive' };
+const REMAP_STATE = {
+  disabled:   'inactive',
+  notapplied: 'Not Applied',
+};
 
 const DEFAULT_COLOR = 'warning';
 const DEFAULT_ICON = 'x';
@@ -86,6 +89,7 @@ const STATES = {
   initializing:       { color: 'warning', icon: 'error' },
   locked:             { color: 'warning', icon: 'adjust' },
   migrating:          { color: 'info', icon: 'info' },
+  notapplied:         { color: 'warning', icon: 'tag' },
   paused:             { color: 'info', icon: 'info' },
   pending:            { color: 'info', icon: 'tag' },
   provisioning:       { color: 'info', icon: 'dot' },
@@ -366,6 +370,8 @@ export default {
 
   _stateDisplay() {
     return (state) => {
+      // @TODO use translations
+
       if ( REMAP_STATE[state] ) {
         return REMAP_STATE[state];
       }