Service Networking and HealthCheck

.dockerignore

@@ -1,7 +1,7 @@
 .nuxt
+.nuxt-prod
 .env
 .nuxt
 .nyc_output
 coverage
-dist
 node_modules

components/Tabbed/index.vue

@@ -56,13 +56,11 @@ export default {
     select(name, event) {
       const selected = this.find(name);
 
-      if ( !selected ) {
+      if ( !selected || selected.disabled) {
         return;
       }
 
-      if ( event && selected.disabled ) {
-        event.preventDefault();
-      }
+      window.location.hash = `#${ name }`;
 
       for ( const tab of this.tabs ) {
         tab.active = (tab.name === selected.name);
@@ -88,7 +86,7 @@ export default {
           :aria-controls="'#' + tab.name"
           :aria-selected="tab.active"
           role="tab"
-          @click="select(tab.name, $event)"
+          @click.prevent="select(tab.name, $event)"
         >
           {{ tab.label }}
         </a>

components/cru/rio.cattle.io.v1.service/Command.vue

@@ -1,13 +1,12 @@
 <script>
 import LabeledInput from '@/components/form/LabeledInput';
-import LabeledSelect from '@/components/form/LabeledSelect';
 import ShellInput from '@/components/form/ShellInput';
 import UnitInput from '@/components/form/UnitInput';
 import KeyValue from '@/components/form/KeyValue';
 
 export default {
   components: {
-    LabeledSelect, LabeledInput, ShellInput, UnitInput, KeyValue
+    LabeledInput, ShellInput, UnitInput, KeyValue
   },
 
   props:      {
@@ -19,6 +18,10 @@ export default {
       type:     String,
       required: true,
     },
+    namespace: {
+      type:     String,
+      required: true,
+    },
     configMaps: {
       type:     Array,
       required: true,
@@ -54,12 +57,26 @@ export default {
       });
     },
 
-    changedSecret(row) {
-      debugger;
-    },
+    changedRef(row, val, which) {
+      delete row.configMapRef;
+      delete row.secretRef;
+      delete row.configMapName;
+      delete row.secretName;
+
+      row[`${ which }Ref`] = val;
+
+      let name = null;
+      let key = null;
+
+      if ( val && val.includes('/') ) {
+        const parts = val.split('/', 2);
+
+        name = parts[0];
+        key = parts[1];
+      }
 
-    changedConfigMap(row) {
-      debugger;
+      row[`${ which }Name`] = name;
+      row.key = key;
     },
   },
 };
@@ -71,6 +88,7 @@ export default {
         <UnitInput
           v-model="spec.memory"
           :increment="1024"
+          :input-exponent="2"
           label="Memory Reservation"
           placeholder="Default: None"
         />
@@ -146,38 +164,24 @@ export default {
     >
       <template #value="{row, isView}">
         <span v-if="typeof row.secretName !== 'undefined'">
-          <LabeledSelect
-            v-model="row.secretRef"
-            :mode="mode"
-            :options="secrets"
-            label="Secret"
-            @input="changedSecret(row)"
-          >
-            <template #options="{options}">
-              <optgroup v-for="grp in options" :key="grp.group" :label="grp.group">
-                <option v-for="opt in grp.items" :key="opt.value" :value="opt.value">
-                  {{ opt.label }}
-                </option>
-              </optgroup>
-            </template>
-          </LabeledSelect>
+          <select v-model="row.secretRef" @input="changedRef(row, $event.target.value, 'secret')">
+            <option disabled value="">Select a Secret Key...</option>
+            <optgroup v-for="grp in secrets" :key="grp.group" :label="grp.group">
+              <option v-for="opt in grp.items" :key="opt.value" :value="opt.value">
+                {{ opt.label }}
+              </option>
+            </optgroup>
+          </select>
         </span>
         <span v-else-if="typeof row.configMapName !== 'undefined'">
-          <LabeledSelect
-            v-model="row.configMapRef"
-            :mode="mode"
-            :options="configMaps"
-            label="Config Map"
-            @input="changedConfigMap(row)"
-          >
-            <template #options="{options}">
-              <optgroup v-for="grp in options" :key="grp.group" :label="grp.group">
-                <option v-for="opt in grp.items" :key="opt.value" :value="opt.value">
-                  {{ opt.label }}
-                </option>
-              </optgroup>
-            </template>
-          </LabeledSelect>
+          <select v-model="row.configMapRef" @input="changedRef(row, $event.target.value, 'configMap')">
+            <option disabled value="">Select a Config Map Key...</option>
+            <optgroup v-for="grp in configMaps" :key="grp.group" :label="grp.group">
+              <option v-for="opt in grp.items" :key="opt.value" :value="opt.value">
+                {{ opt.label }}
+              </option>
+            </optgroup>
+          </select>
         </span>
       </template>
       <template #moreAdd="{rows}">

components/cru/rio.cattle.io.v1.service/HealthCheck.vue

@@ -1,12 +1,40 @@
+<script>
+import Probe from '@/components/cru/rio.cattle.io.v1.service/Probe';
+
+export default {
+  components: { Probe },
+  props:      {
+    spec: {
+      type:     Object,
+      required: true,
+    },
+    mode: {
+      type:     String,
+      required: true,
+    },
+  },
+};
+</script>
+
 <template>
-  <div>
-    <h2>Health Check</h2>
-    <p>--health-cmd</p>
-    <p>--health-url</p>
-    <p>--health-interval</p>
-    <p>--health-failure-threshold, --health-success-threshold</p>
-    <p>--health-header</p>
-    <p>--health-timeout</p>
-    <p>--health-initial-delay</p>
+  <div class="row">
+    <div class="col span-6">
+      <Probe
+        v-model="spec.readinessProbe"
+        :mode="mode"
+        :for-liveness="false"
+        label="Readiness Check"
+        description="Containers will be removed from service endpoints when this check is failing.  Recommended."
+      />
+    </div>
+    <div class="col span-6">
+      <Probe
+        v-model="spec.livenessProbe"
+        :mode="mode"
+        :for-liveness="true"
+        label="Liveness Check"
+        description="Containers will be restarted when this check is failing.  Not recommended for most uses."
+      />
+    </div>
   </div>
 </template>