Merge pull request #665 from codyrancher/opa

Making a number of OPA fixes

assets/translations/en-us.yaml

@@ -417,3 +417,9 @@ resourceYaml:
   buttons:
     continue: Continue Editing
     diff: Show Diff
+    
+resourceList:
+  head:
+    create: Create
+    createFromYaml: Create from YAML
+

components/ResourceDetail/index.vue

@@ -285,6 +285,7 @@ export default {
         :yaml="yaml"
         :offer-preview="offerPreview"
         :done-route="doneRoute"
+        :done-override="model.doneOverride"
       />
     </template>
     <template v-else>

components/ResourceList/Masthead.vue

@@ -0,0 +1,70 @@
+<script>
+import Favorite from '@/components/nav/Favorite';
+import BreadCrumbs from '@/components/BreadCrumbs';
+
+export default {
+  components: { BreadCrumbs, Favorite },
+  props:      {
+    resource: {
+      type:     String,
+      required: true
+    },
+    typeDisplay: {
+      type:    String,
+      default: ''
+    },
+    isCreatable: {
+      type:    Boolean,
+      default: false
+    },
+    isYamlCreatable: {
+      type:    Boolean,
+      default: false,
+    },
+    createLocation: {
+      type:    Object,
+      default: null
+    },
+    yamlCreateLocation: {
+      type:    Object,
+      default: null
+    }
+  },
+
+  computed: {},
+  methods:  {}
+};
+</script>
+
+<template>
+  <header>
+    <BreadCrumbs class="breadcrumbs" :route="$route" />
+
+    <h1>
+      {{ typeDisplay }} <Favorite :resource="resource" />
+    </h1>
+    <div class="actions">
+      <nuxt-link
+        v-if="isYamlCreatable"
+        :to="yamlCreateLocation"
+        tag="button"
+        type="button"
+        class="btn bg-primary mr-10"
+      >
+        {{ t('resourceList.head.createFromYaml') }}
+      </nuxt-link>
+      <nuxt-link
+        v-if="isCreatable"
+        :to="createLocation"
+        tag="button"
+        type="button"
+        class="btn bg-primary"
+      >
+        {{ t('resourceList.head.create') }}
+      </nuxt-link>
+    </div>
+  </header>
+</template>
+
+<style lang='scss'>
+</style>

components/form/NamespaceList.vue

@@ -80,7 +80,13 @@ export default {
 </template>
 
 <style lang="scss">
-.namespace-list .fixed input {
+.namespace-list {
+  .fixed input {
     height: initial;
+  }
+
+  tr:not(:last-of-type) td {
+    padding-bottom: 10px;
+  }
 }
 </style>

config/type-config.js

@@ -43,8 +43,8 @@ export default function(store) {
     NODE,
     'workload',
     'gatekeeper',
-    'gatekeeper-constraints',
-    'gatekeeper-templates',
+    'gatekeeper-constraint',
+    'gatekeeper-template',
   ]);
 
   mapTypeToComponentName(/^constraints.gatekeeper.sh.*$/, 'gatekeeper-constraint');
@@ -245,7 +245,7 @@ export default function(store) {
   virtualType({
     label:      'Constraint',
     namespaced: false,
-    name:       'gatekeeper-constraints',
+    name:       'gatekeeper-constraint',
     group:      'Cluster::OPA Gatekeeper',
     route:      { name: 'c-cluster-gatekeeper-constraints' },
     ifHaveType: GATEKEEPER_CONSTRAINT_TEMPLATE
@@ -254,7 +254,7 @@ export default function(store) {
   virtualType({
     label:      'Template',
     namespaced: false,
-    name:       'gatekeeper-templates',
+    name:       'gatekeeper-template',
     group:      'Cluster::OPA Gatekeeper',
     route:      { name: 'c-cluster-gatekeeper-templates' },
     ifHaveType: GATEKEEPER_CONSTRAINT_TEMPLATE

models/gatekeeper-constraint.js

@@ -0,0 +1,7 @@
+export default {
+  doneOverride() {
+    return () => {
+      this.currentRouter().replace({ name: 'c-cluster-gatekeeper-constraints' });
+    };
+  }
+};

models/templates.gatekeeper.sh.constrainttemplate.js

@@ -15,5 +15,11 @@ export default {
     return constraints.length > 0
       ? `There are still constaints using this template. You cannot delete this template while it's in use.`
       : null;
+  },
+
+  doneOverride() {
+    return () => {
+      this.currentRouter().replace({ name: 'c-cluster-gatekeeper-templates' });
+    };
   }
 };

pages/c/_cluster/_resource/index.vue

@@ -1,14 +1,12 @@
 <script>
 import ResourceTable from '@/components/ResourceTable';
-import Favorite from '@/components/nav/Favorite';
 import { AS_YAML, _FLAGGED } from '@/config/query-params';
-import BreadCrumbs from '@/components/BreadCrumbs';
+import Masthead from '@/components/ResourceList/Masthead';
 
 export default {
   components: {
     ResourceTable,
-    Favorite,
-    BreadCrumbs
+    Masthead
   },
 
   data() {
@@ -118,33 +116,15 @@ export default {
 
 <template>
   <div>
-    <header>
-      <BreadCrumbs class="breadcrumbs" :route="route" />
+    <Masthead
+      :resource="resource"
+      :type-display="typeDisplay"
+      :is-yaml-creatable="schema && isCreatable"
+      :is-creatable="hasEditComponent && isCreatable"
+      :yaml-create-location="{path: yamlRoute}"
+      :create-location="{path: formRoute}"
+    />
 
-      <h1>
-        {{ typeDisplay }} <Favorite :resource="resource" />
-      </h1>
-      <div class="actions">
-        <nuxt-link
-          v-if="schema && isCreatable"
-          :to="yamlRoute"
-          tag="button"
-          type="button"
-          class="btn bg-primary mr-10"
-        >
-          Create from YAML
-        </nuxt-link>
-        <nuxt-link
-          v-if="hasEditComponent && isCreatable"
-          :to="formRoute"
-          tag="button"
-          type="button"
-          class="btn bg-primary"
-        >
-          Create
-        </nuxt-link>
-      </div>
-    </header>
     <div v-if="hasListComponent">
       <component
         :is="listComponent"

pages/c/_cluster/gatekeeper/constraints/create.vue

@@ -47,7 +47,7 @@ export default {
             namespaceSelector:  { matchExpressions: [] }
           }
         },
-        metadata: { name: null, annotations: { [DESCRIPTION]: null } }
+        metadata: { name: '', annotations: { [DESCRIPTION]: '' } }
       },
     };
   },
@@ -69,12 +69,6 @@ export default {
     yamlUpdater.call(this, this.localValue);
   },
   methods: {
-    navigateToEditAsYaml() {
-      this.$router.push({ query: { ...this.$route.query, [AS_YAML]: _FLAGGED } });
-    },
-    navigateToEditAsForm() {
-      this.$router.applyQuery({ [AS_YAML]: undefined });
-    },
     done() {
       this.$router.replace({
         name:   'c-cluster-gatekeeper-constraints',
@@ -89,20 +83,12 @@ export default {
   <div>
     <header>
       <h1>Constraint</h1>
-      <div class="actions">
-        <button v-if="editAsYaml" class="btn bg-primary" @click="navigateToEditAsForm">
-          Edit as form
-        </button>
-        <button v-else class="btn bg-primary" @click="navigateToEditAsYaml">
-          Edit as YAML
-        </button>
-      </div>
     </header>
     <div
       v-if="editAsYaml"
     >
       <NameNsDescription
-        :value="value"
+        :value="localValue"
         :mode="mode"
         :namespaced="false"
         :extra-columns="['template']"

pages/c/_cluster/gatekeeper/constraints/index.vue

@@ -3,13 +3,25 @@ import { AGE, NAME, STATE } from '@/config/table-headers';
 import SortableTable from '@/components/SortableTable';
 import { DESCRIPTION } from '@/config/labels-annotations';
 import { findAllConstraints } from '@/utils/gatekeeper/util';
+import Masthead from '@/components/ResourceList/Masthead';
+import { AS_YAML, _FLAGGED } from '@/config/query-params';
 
 export default {
-  components: { SortableTable },
+  components: { Masthead, SortableTable },
   data(ctx) {
-    const createUrl = this.$router.resolve({ name: 'c-cluster-gatekeeper-constraints-create', params: this.$route.params }).href;
+    const createLocation = {
+      name:   'c-cluster-gatekeeper-constraints-create',
+      params: this.$route.params,
+    };
+
+    const yamlCreateLocation = {
+      ...createLocation,
+      query: { [AS_YAML]: _FLAGGED }
+    };
 
     return {
+      createLocation,
+      yamlCreateLocation,
       headers: [
         STATE,
         NAME,
@@ -30,7 +42,6 @@ export default {
       ],
       templates:   [],
       constraints: [],
-      createUrl
     };
   },
 
@@ -51,21 +62,21 @@ export default {
 
 <template>
   <div class="gatekeeper-constraints">
-    <header>
-      <h1>Constraints</h1>
-    </header>
+    <Masthead
+      resource="gatekeeper-constraint"
+      :type-display="'Constraint'"
+      :is-yaml-creatable="true"
+      :is-creatable="true"
+      :yaml-create-location="yamlCreateLocation"
+      :create-location="createLocation"
+    />
+
     <SortableTable
       :headers="headers"
       :rows="constraints"
       key-field="id"
       group-by="kind"
-    >
-      <template v-slot:header-end>
-        <nuxt-link :to="createUrl" append tag="button" type="button" class="create btn bg-primary">
-          Create
-        </nuxt-link>
-      </template>
-    </SortableTable>
+    />
   </div>
 </template>
 

pages/c/_cluster/gatekeeper/templates/index.vue

@@ -2,17 +2,30 @@
 import { GATEKEEPER_CONSTRAINT_TEMPLATE } from '@/config/types';
 import { AGE, NAME, STATE } from '@/config/table-headers';
 import SortableTable from '@/components/SortableTable';
+import Masthead from '@/components/ResourceList/Masthead';
+import { AS_YAML, _FLAGGED } from '@/config/query-params';
 
 export default {
-  components: { SortableTable },
+  components: { Masthead, SortableTable },
   data(ctx) {
     const params = {
       ...this.$route.params,
       resource: GATEKEEPER_CONSTRAINT_TEMPLATE
     };
-    const createUrl = this.$router.resolve({ name: 'c-cluster-resource-create', params }).href;
+
+    const createLocation = {
+      name:   'c-cluster-resource-create',
+      params,
+    };
+
+    const yamlCreateLocation = {
+      ...createLocation,
+      query: { [AS_YAML]: _FLAGGED }
+    };
 
     return {
+      createLocation,
+      yamlCreateLocation,
       headers: [
         STATE,
         NAME,
@@ -25,23 +38,11 @@ export default {
         AGE,
       ],
       templates:   [],
-      constraints: [],
-      createUrl
     };
   },
 
   async asyncData({ store }) {
-    const templates = await store.dispatch('cluster/findAll', { type: GATEKEEPER_CONSTRAINT_TEMPLATE });
-    const constraints = (await Promise.all(templates.map((template) => {
-      const type = `constraints.gatekeeper.sh.${ template.id }`;
-
-      return store.dispatch('cluster/findAll', { type });
-    }))).flat();
-
-    return {
-      templates,
-      constraints,
-    };
+    return { templates: await store.dispatch('cluster/findAll', { type: GATEKEEPER_CONSTRAINT_TEMPLATE }) };
   },
 
 };
@@ -49,22 +50,21 @@ export default {
 
 <template>
   <div class="gatekeeper-templates">
-    <header>
-      <h1>Templates</h1>
-    </header>
+    <Masthead
+      resource="gatekeeper-template"
+      :type-display="'Template'"
+      :is-yaml-creatable="true"
+      :is-creatable="false"
+      :yaml-create-location="yamlCreateLocation"
+      :create-location="createLocation"
+    />
     <SortableTable
       :headers="headers"
       :rows="templates"
       :search="true"
       key-field="id"
       group-by="kind"
-    >
-      <template v-slot:header-end>
-        <nuxt-link :to="createUrl" append tag="button" type="button" class="create btn bg-primary">
-          Create
-        </nuxt-link>
-      </template>
-    </SortableTable>
+    />
   </div>
 </template>
 

plugins/steve/normalize.js

@@ -61,6 +61,10 @@ export function cleanForNew(obj) {
     dropKeys(m.labels);
   }
 
+  if ( obj?.spec?.crd?.spec?.names?.kind ) {
+    obj.spec.crd.spec.names.kind = '';
+  }
+
   return obj;
 }
 

plugins/steve/resource-instance.js

@@ -677,6 +677,20 @@ export default {
     };
   },
 
+  goToClone() {
+    return (moreQuery = {}) => {
+      const location = this.detailLocation;
+
+      location.query = {
+        ...location.query,
+        [MODE]: _CLONE,
+        ...moreQuery
+      };
+
+      this.currentRouter().push(location);
+    };
+  },
+
   goToEdit() {
     return (moreQuery = {}) => {
       const location = this.detailLocation;

plugins/steve/resource-proxy.js

@@ -36,7 +36,8 @@ export function proxyFor(ctx, obj, isClone = false) {
     }
   }
 
-  const model = lookup(obj.type, obj?.metadata?.name) || ResourceInstance;
+  const mappedType = ctx.rootGetters['type-map/componentFor'](obj.type);
+  const model = lookup(mappedType, obj?.metadata?.name) || ResourceInstance;
 
   const proxy = new Proxy(obj, {
     get(target, name) {