Update doc and deployment env var

monodot · Oct 25, 2020 · b16ef2e · b16ef2e
1 parent 5c05672
commit b16ef2e
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,10 @@
 
 A simple webapp for building Kubernetes resource definitions using a form.
 
+Developed using VueJS and TailwindCSS. Built mostly as a side-project for learning, but pull requests are welcome!
+
+**Currently (25/10):** researching how to populate the forms dynamically from JSON, so that more dynamic and complex Kubernetes objects can be created.
+
 You can find this running at: https://tomd.xyz/tools/kubernetes-manifest-builder/
 
 ## Project setup

diff --git a/src/App.vue b/src/App.vue
@@ -14,6 +14,25 @@
     <Deployment/>
     <Service/>
 
+    <hr/>
+
+    <h2 class="text-4xl font-bold text-gray-800 py-4">How to use this tool</h2>
+
+    <div class="text-lg">
+      <p class="py-4">
+        Use this Kubernetes Manifest Builder to generate fresh, delicious, syntactically-valid YAML or JSON 🍞, which you can apply to your Kubernetes cluster.
+      </p>
+
+      <p class="py-4">How does it work?</p>
+      <ol class="list-decimal">
+        <li>Use this web UI to enter the details of your new Kubernetes object.</li>
+        <li>Copy the YAML to your favourite text editor and save to a file.</li>
+        <li>Apply the YAML to your cluster using <code>kubectl apply -f ...</code> or <code>oc apply -f ..</code>🌠</li>
+        <li>Take the rest of the day off.</li>
+      </ol>
+
+      <p class="py-4"><strong class="font-bold">Kubernetes Manifest Generator</strong> by Tom D. The <a href="https://github.com/monodot/k8s-manifest-builder" class="text-blue-700">source code</a> is licensed under GNU GPLv3. Made with 💙 in London.</p>
+    </div>
   </div>
 </template>
 

diff --git a/src/components/Deployment.vue b/src/components/Deployment.vue
@@ -23,6 +23,21 @@
         <input v-model="deployment.spec.template.spec.containers[0].image"
                 class="appearance-none bg-gray-200 w-full py-2 px-4 block rounded text-gray-800 focus:outline-none focus:shadow-outline">
       </div>
+      <div>
+        <label>Environment variable name:</label>
+        <input v-model="deployment.spec.template.spec.containers[0].env[0].name"
+                class="appearance-none bg-gray-200 w-full py-2 px-4 block rounded text-gray-800 focus:outline-none focus:shadow-outline">
+      </div>
+      <div>
+        <label>Environment variable source ConfigMap name:</label>
+        <input v-model="deployment.spec.template.spec.containers[0].env[0].valueFrom.configMapKeyRef.name"
+                class="appearance-none bg-gray-200 w-full py-2 px-4 block rounded text-gray-800 focus:outline-none focus:shadow-outline">
+      </div>
+      <div>
+        <label>Environment variable source ConfigMap key:</label>
+        <input v-model="deployment.spec.template.spec.containers[0].env[0].valueFrom.configMapKeyRef.key"
+                class="appearance-none bg-gray-200 w-full py-2 px-4 block rounded text-gray-800 focus:outline-none focus:shadow-outline">
+      </div>
       <div>
         <label>Container port:</label>
         <input v-model="deployment.spec.template.spec.containers[0].ports[0].containerPort"
@@ -72,6 +87,15 @@ export default {
               containers: [{
                 name: "container",
                 image: "hello-world",
+                env: [{
+                  name: "GREETING",
+                  valueFrom: {
+                    configMapKeyRef: {
+                      name: "my-configmap",
+                      key: "database.password"
+                    }
+                  }
+                }],
                 ports: [{
                   containerPort: 80
                 }]