workload action menu

components/ResourceYaml.vue

@@ -1,4 +1,5 @@
 <script>
+import { WORKLOAD } from '../config/types';
 import CodeMirror from './CodeMirror';
 import FileDiff from './FileDiff';
 import AsyncButton from './AsyncButton';
@@ -71,6 +72,8 @@ export default {
 
     if ( this.forCreate ) {
       mode = _CREATE;
+    } else if (!this.canEdit) {
+      mode = _VIEW;
     } else {
       mode = this.$route.query.mode || _VIEW;
     }
@@ -131,7 +134,7 @@ export default {
     },
 
     canEdit() {
-      return this.obj.hasLink('update');
+      return this.obj.hasLink('update') && !Object.values(WORKLOAD).includes(this.obj.type);
     },
 
     canDelete() {

components/form/NameNsDescription.vue

@@ -167,11 +167,13 @@ export default {
   },
 
   mounted() {
-    const valueRef = get(this.$refs, 'nameNS.$refs.text.$refs.value');
+    this.$nextTick(() => {
+      const valueRef = get(this.$refs, 'nameNS.$refs.text.$refs.value');
 
-    if (valueRef) {
-      valueRef.focus();
-    }
+      if (valueRef) {
+        valueRef.focus();
+      }
+    });
   },
 
   methods: {

config/type-config.js

@@ -1,5 +1,5 @@
 import {
-  CONFIG_MAP, GATEKEEPER_CONSTRAINT_TEMPLATE, NAMESPACE, NODE, SECRET, RIO, RBAC, INGRESS
+  CONFIG_MAP, GATEKEEPER_CONSTRAINT_TEMPLATE, NAMESPACE, NODE, SECRET, RIO, RBAC, INGRESS, WORKLOAD
 } from '@/config/types';
 
 import {
@@ -50,6 +50,10 @@ export default function(store) {
 
   mapTypeToComponentName(/^constraints.gatekeeper.sh.*$/, 'gatekeeper-constraint');
 
+  for (const key in WORKLOAD) {
+    mapTypeToComponentName(WORKLOAD[key], 'workload');
+  }
+
   ignoreType('events.k8s.io.event'); // Events type moved into core
   ignoreType('extensions.ingress'); // Moved into networking
 

models/apps.daemonset.js

@@ -0,0 +1,3 @@
+import Workload from './workload';
+
+export default Workload;

models/apps.deployment.js

@@ -0,0 +1,3 @@
+import Workload from './workload';
+
+export default Workload;

models/apps.replicaset.js

@@ -0,0 +1,3 @@
+import Workload from './workload';
+
+export default Workload;

models/apps.statefulset.js

@@ -0,0 +1,3 @@
+import Workload from './workload';
+
+export default Workload;

models/batch.cronjob.js

@@ -0,0 +1,3 @@
+import Workload from './workload';
+
+export default Workload;

models/batch.job.js

@@ -0,0 +1,3 @@
+import Workload from './workload';
+
+export default Workload;

models/replicationcontroller.js

@@ -0,0 +1,3 @@
+import Workload from './workload';
+
+export default Workload;

models/workload.js

@@ -0,0 +1,22 @@
+export default {
+  // remove clone as yaml/edit as yaml until API supported
+  _availableActions() {
+    let out = this._standardActions;
+
+    const toFilter = ['cloneYaml'];
+
+    out = out.filter((action) => {
+      if (!toFilter.includes(action.action)) {
+        return action;
+      }
+    }).map((action) => {
+      if (action.action === 'viewEditYaml') {
+        action.label = 'View as YAML';
+      }
+
+      return action;
+    });
+
+    return out;
+  }
+};

pages/c/_cluster/workloads/_namespace/_id.vue

@@ -3,9 +3,22 @@ import Workload from '@/detail/workload';
 import ResourceYaml from '@/components/ResourceYaml';
 import { createYaml } from '@/utils/create-yaml';
 import { WORKLOAD, SCHEMA } from '@/config/types';
+import {
+  MODE,
+  EDIT_YAML, _VIEW
+} from '@/config/query-params';
 
 export default {
   components: { Workload, ResourceYaml },
+
+  watchQuery: [MODE, EDIT_YAML],
+
+  computed:   {
+    isView() {
+      return this.mode === _VIEW;
+    }
+  },
+
   async asyncData(ctx) {
     const { id, namespace } = ctx.params;
     const { mode = 'view', type = WORKLOAD.DEPLOYMENT } = ctx.query;
@@ -30,12 +43,27 @@ export default {
     return {
       obj, value, type, mode, asYaml, yaml
     };
+  },
+
+  methods: {
+    showActions() {
+      this.$store.commit('action-menu/show', {
+        resources: this.obj,
+        elem:      this.$refs.actions,
+      });
+    },
   }
 };
 </script>
 
 <template>
-  <div>
+  <ResourceYaml
+    v-if="asYaml"
+    :obj="obj"
+    :value="yaml"
+    :done-route="doneRoute"
+  />
+  <div v-else>
     <header>
       <h1 v-trim-whitespace class="mb-20">
         <span v-if="mode === 'edit'">Edit Workload:&nbsp;</span>
@@ -49,16 +77,20 @@ export default {
           Workload:&nbsp;
         </nuxt-link>{{ obj.id }}
       </h1>
-      <!-- <div v-if="isView" class="actions">
-        <button aria-haspopup="true" aria-expanded="false" rearia-haspopup="true" aria-expanded="false" f="actions" type="button" class="btn btn-sm role-multi-action actions" @click="showActions">
+      <div v-if="isView" class="actions">
+        <button
+          ref="actions"
+          aria-haspopup="true"
+          aria-expanded="false"
+          type="button"
+          class="btn btn-sm role-multi-action actions"
+          @click="showActions"
+        >
           <i class="icon icon-actions" />
         </button>
-      </div> -->
+      </div>
     </header>
-    <ResourceYaml v-if="asYaml" :obj="obj" :value="yaml" :done-route="doneRoute" :for-create="true" />
-
     <Workload
-      v-else
       :value="obj"
       done-route="c-cluster-workloads"
       :done-params="{}"

pages/c/_cluster/workloads/index.vue

@@ -1,5 +1,5 @@
 <script>
-import { STATE, AGE, NAME } from '@/config/table-headers';
+import { STATE, AGE, NAMESPACE_NAME } from '@/config/table-headers';
 import ResourceTable from '@/components/ResourceTable';
 import { WORKLOAD, SCHEMA } from '@/config/types';
 
@@ -22,7 +22,7 @@ export default {
     headers() {
       return [
         STATE,
-        NAME,
+        NAMESPACE_NAME,
         {
           name:      'endpoints',
           label:     'Endpoints',

plugins/steve/actions.js

@@ -2,7 +2,7 @@ import https from 'https';
 import { cloneDeep } from 'lodash';
 import { normalizeType } from './normalize';
 import { proxyFor, SELF } from './resource-proxy';
-import { SCHEMA } from '@/config/types';
+import { SCHEMA, WORKLOAD } from '@/config/types';
 
 export default {
   request({ dispatch }, opt) {
@@ -97,7 +97,6 @@ export default {
     const { getters, commit, dispatch } = ctx;
 
     opt = opt || {};
-
     console.log('Find All', type);
     type = getters.normalizeType(type);
 

plugins/steve/resource-instance.js

@@ -585,10 +585,10 @@ export default {
     const schema = this.$getters['schemaFor'](this.type);
     const query = {};
 
-    let route = `c-cluster-resource${ schema.attributes.namespaced ? '-namespace' : '' }-id`;
+    let route = `c-cluster-resource${ schema?.attributes?.namespaced ? '-namespace' : '' }-id`;
 
     if (Object.values(WORKLOAD).includes(this.type)) {
-      route = `c-cluster-workloads${ schema.attributes.namespaced ? '-namespace' : '' }-id`;
+      route = `c-cluster-workloads-namespace-id`;
       query.type = this.type;
     }
 

store/type-map.js

@@ -656,6 +656,7 @@ export const getters = {
   hasCustomEdit(state, getters) {
     return (rawType) => {
       const type = getters.componentFor(rawType);
+
       const cache = state.cache.edit;
 
       if ( cache[type] !== undefined ) {