Merge pull request #656 from westlywright/feature.service.detail.page

Add service detail page

assets/translations/en-us.yaml

@@ -7,11 +7,13 @@ buttons:
   remove: Remove
 
 generic:
+  cancel: Cancel
   close: Close
   comingSoon: Coming Soon
   created: Created
   customize: Customize
   na: "n/a"
+  type: Type
   unknown: Unknown
 
 suffix:
@@ -410,3 +412,8 @@ serviceTypes:
   headless: Headless
   loadbalancer: Load Balancer
   nodeport: Node Port
+
+resourceYaml:
+  buttons:
+    continue: Continue Editing
+    diff: Show Diff

components/ResourceDetail/Masthead.vue

@@ -37,7 +37,7 @@ export default {
       default: false
     },
 
-    hasDetail: {
+    hasDetailOrEdit: {
       type:    Boolean,
       default: false
     }
@@ -128,7 +128,7 @@ export default {
     </div>
     <div v-if="mode==='view'" class="actions">
       <!-- //TODO remove check for custom detail component once there is a generic detail -->
-      <div v-if="hasDetail">
+      <div v-if="hasDetailOrEdit">
         <ButtonGroup :labels-are-translations="true" :value="asYaml" :options="[{label: 'resourceDetail.masthead.overview', value: false},{label:'resourceDetail.masthead.yaml', value: true }]" @input="toggleYaml" />
       </div>
       <button ref="actions" aria-haspopup="true" type="button" class="btn btn-sm role-multi-action actions" @click="showActions">

components/ResourceDetail/index.vue

@@ -67,7 +67,9 @@ export async function defaultAsyncData(ctx, resource) {
 
   const hasCustomDetail = store.getters['type-map/hasCustomDetail'](resource);
   const hasCustomEdit = store.getters['type-map/hasCustomEdit'](resource);
-  const asYamlInit = (route.query[AS_YAML] === _FLAGGED) || (realMode === _VIEW && !hasCustomDetail) || (realMode !== _VIEW && !hasCustomEdit);
+  const asYamlInit = (route.query[AS_YAML] === _FLAGGED) ||
+   (realMode === _VIEW && !hasCustomDetail && !hasCustomEdit) ||
+    (realMode !== _VIEW && !hasCustomEdit);
   const schema = store.getters['cluster/schemaFor'](resource);
   const schemas = store.getters['cluster/all'](SCHEMA);
 
@@ -187,11 +189,14 @@ export default {
 
   data() {
     // asYamlInit is taken from route query and passed as prop from _id page; asYaml is saved in local data to be manipulated by Masthead
-    const asYaml = this.asYamlInit;
+    const {
+      asYamlInit: asYaml,
+      value: currentValue,
+    } = this;
 
     return {
       asYaml,
-      currentValue:            this.value,
+      currentValue,
       detailComponent:         this.$store.getters['type-map/importDetail'](this.resource),
       editComponent:           this.$store.getters['type-map/importEdit'](this.resource),
     };
@@ -230,7 +235,7 @@ export default {
     showComponent() {
       if ( this.isView && this.hasCustomDetail ) {
         return this.detailComponent;
-      } else if ( !this.isView && this.hasCustomEdit ) {
+      } else if ( this.hasCustomEdit ) {
         return this.editComponent;
       }
 
@@ -265,7 +270,7 @@ export default {
       :done-route="doneRoute"
       :real-mode="realMode"
       :as-yaml.sync="asYaml"
-      :has-detail="hasCustomDetail"
+      :has-detail-or-edit="(hasCustomDetail || hasCustomEdit)"
     />
     <template v-if="asYaml">
       <div v-if="!isView">

components/ResourceYaml.vue

@@ -256,13 +256,29 @@ export default {
       @onReady="onReady"
       @onChanges="onChanges"
     />
-    <Footer v-if="!isView" :mode="mode" :errors="errors" @save="save" @done="done">
-      <template #middle>
-        <button v-if="showPreview" type="button" class="btn role-secondary" @click="unpreview">
-          Continue Editing
+    <Footer
+      :mode="mode"
+      :errors="errors"
+      @save="save"
+      @done="done"
+    >
+      <template v-if="!isView" #middle>
+        <button
+          v-if="showPreview"
+          type="button"
+          class="btn role-secondary"
+          @click="unpreview"
+        >
+          <t k="resourceYaml.buttons.continue" />
         </button>
-        <button v-else-if="offerPreview" :disabled="yaml === currentYaml" type="button" class="btn role-secondary" @click="preview">
-          Show Diff
+        <button
+          v-else-if="offerPreview"
+          :disabled="yaml === currentYaml"
+          type="button"
+          class="btn role-secondary"
+          @click="preview"
+        >
+          <t k="resourceYaml.buttons.diff" />
         </button>
       </template>
     </Footer>

components/form/Footer.vue

@@ -51,7 +51,7 @@ export default {
       <slot name="left" />
       <slot name="cancel">
         <button type="button" class="btn role-secondary" @click="done">
-          Cancel
+          <t k="generic.cancel" />
         </button>
       </slot>
       <slot name="middle" />

edit/service.vue

@@ -1,12 +1,13 @@
 <script>
 import { find } from 'lodash';
-import { ucFirst } from '@/utils/string';
-import CreateEditView from '@/mixins/create-edit-view';
 import ArrayList from '@/components/form/ArrayList';
+import CreateEditView from '@/mixins/create-edit-view';
+import DetailTop from '@/components/DetailTop';
 import Footer from '@/components/form/Footer';
 import KeyValue from '@/components/form/KeyValue';
 import LabeledInput from '@/components/form/LabeledInput';
 import LabeledSelect from '@/components/form/LabeledSelect';
+import LiveDate from '@/components/formatter/LiveDate';
 import NameNsDescription from '@/components/form/NameNsDescription';
 import RadioGroup from '@/components/form/RadioGroup';
 import ResourceTabs from '@/components/form/ResourceTabs';
@@ -14,6 +15,7 @@ import ServicePorts from '@/components/form/ServicePorts';
 import Tab from '@/components/Tabbed/Tab';
 import UnitInput from '@/components/form/UnitInput';
 import { DEFAULT_SERVICE_TYPES } from '@/config/types';
+import { ucFirst } from '@/utils/string';
 
 const SESSION_AFFINITY_ACTION_VALUES = {
   NONE:      'None',
@@ -28,12 +30,17 @@ const SESSION_AFFINITY_ACTION_LABELS = {
 const SESSION_STICKY_TIME_DEFAULT = 10800;
 
 export default {
+  // Props are found in CreateEditView
+  // props: {},
+
   components: {
     ArrayList,
+    DetailTop,
     Footer,
     KeyValue,
     LabeledInput,
     LabeledSelect,
+    LiveDate,
     NameNsDescription,
     RadioGroup,
     ResourceTabs,
@@ -70,6 +77,20 @@ export default {
     extraColumns() {
       return ['type-col'];
     },
+
+    detailTopColumns() {
+      return [
+        {
+          title:   this.$store.getters['i18n/t']('generic.type'),
+          content: this.value?.spec.type,
+          name:    'type',
+        },
+        {
+          title: this.$store.getters['i18n/t']('generic.created'),
+          name:  'created'
+        },
+      ];
+    },
   },
 
   watch: {
@@ -107,14 +128,23 @@ export default {
 
       return false;
     }
-  }
+  },
 };
 </script>
 
 <template>
   <div>
+    <DetailTop v-if="isView" :columns="detailTopColumns">
+      <template v-slot:created>
+        <LiveDate
+          :value="value.metadata.creationTimestamp"
+          :add-suffix="true"
+        />
+      </template>
+    </DetailTop>
     <form>
       <NameNsDescription
+        v-if="!isView"
         :value="value"
         :namespaced="false"
         :mode="mode"
@@ -154,7 +184,6 @@ export default {
               v-model.number="value.spec.externalName"
               type="text"
               :placeholder="t('servicesPage.externalName.placeholder')"
-              @input="e=>$set(value.spec, 'externalName', e)"
             />
           </div>
         </div>
@@ -210,6 +239,7 @@ export default {
               <div class="col span-6">
                 <LabeledInput
                   v-model="value.spec.clusterIP"
+                  :mode="mode"
                   :label="t('servicesPage.ips.input.label')"
                   :placeholder="t('servicesPage.ips.input.placeholder')"
                   @input="e=>$set(value.spec, 'clusterIP', e)"
@@ -217,7 +247,7 @@ export default {
               </div>
             </div>
             <div class="row">
-              <div class="col span-6">
+              <div class="col span-6 pl-10">
                 <ArrayList
                   key="clusterExternalIpAddresses"
                   v-model="value.spec.externalIPs"
@@ -270,6 +300,7 @@ export default {
       </ResourceTabs>
 
       <Footer
+        v-if="!isView"
         :mode="mode"
         :errors="errors"
         @save="save"