Add volumes, working but needs improvement

Author: mms-gianni

client/src/components/apps/new.vue

@@ -366,6 +366,96 @@
         </v-col>
       </v-row>
 
+      <v-divider class="ma-5"></v-divider>
+      <!-- EXTRAVOLUMES -->
+
+      <!--
+#  - name: "test-volume"
+#    emptyDir: false
+#    storageClass: "standard"
+#    size: "1Gi"
+#    accessModes:
+#      - "ReadWriteMany"
+#    mountPath: "/test-volume"
+      -->
+      <h4 class="text-uppercase">Volumes</h4>
+      <div v-for="volume in extraVolumes" v-bind:key="volume.id">
+        <v-row>
+          <v-col
+            cols="12"
+            md="3"
+          >
+            <v-text-field
+              v-model="volume.name"
+              label="name"
+              :readonly="app!='new'"
+            ></v-text-field>
+          </v-col>
+          <v-col
+            cols="12"
+            md="2"
+          >
+            <v-text-field
+              v-model="volume.size"
+              label="size"
+            ></v-text-field>
+          </v-col>
+          <v-col
+            cols="12"
+            md="1"
+          >
+            <v-btn
+            elevation="2"
+            icon
+            small
+            @click="removeVolumeLine(volume.name)"
+            >
+                <v-icon dark >
+                    mdi-minus
+                </v-icon>
+            </v-btn>
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col
+            cols="12"
+            md="3"
+          >
+            <v-text-field
+              v-model="volume.storageClass"
+              label="Storage Class"
+            ></v-text-field>
+          </v-col>
+          <v-col
+            cols="12"
+            md="3"
+          >
+            <v-text-field
+              v-model="volume.mountPath"
+              label="Mount Path"
+            ></v-text-field>
+          </v-col>
+        </v-row>
+      </div>
+
+      <v-row>
+        <v-col
+          cols="12"
+        >
+          <v-btn
+          elevation="2"
+          icon
+          small
+          @click="addVolumeLine()"
+          >
+              <v-icon dark >
+                  mdi-plus
+              </v-icon>
+          </v-btn>
+        </v-col>
+      </v-row>
+
       <v-divider class="ma-5"></v-divider>
       <!-- CRONJOBS -->
       <h4 class="text-uppercase">Cronjobs</h4>
@@ -615,6 +705,18 @@ export default {
         },
         */
       ],
+      extraVolumes: [
+        /*
+        {
+          name: 'example-volume',
+          emptyDir: false,
+          storageClass: 'standard',
+          size: '1Gi',
+          accessMode: ['ReadWriteOnce']
+          mountPath: '/example/path',
+        },
+        */
+      ],
       addons: [
         /*
         {
@@ -786,6 +888,7 @@ export default {
             this.autodeploy = response.data.spec.autodeploy;
             this.domain = response.data.spec.domain;
             this.envvars = response.data.spec.envVars;
+            this.extraVolumes = response.data.spec.extraVolumes;
             this.containerPort = response.data.spec.image.containerPort;
             this.podsize = response.data.spec.podsize;
             this.autoscale = response.data.spec.autoscale;
@@ -838,6 +941,7 @@ export default {
               targetMemoryUtilizationPercentage : 80,
             },
           },
+          extraVolumes: this.extraVolumes,
           cronjobs: this.cronjobFormat(this.cronjobs),
           addons: this.addons,
 
@@ -899,6 +1003,7 @@ export default {
               targetMemoryUtilizationPercentage : 80,
             },
           },
+          extraVolumes: this.extraVolumes,
           cronjobs: this.cronjobFormat(this.cronjobs),
           addons: this.addons,
         })
@@ -924,6 +1029,25 @@ export default {
           }
         }
       },
+      addVolumeLine() {
+        this.extraVolumes.push({
+          name: 'example-volume',
+          emptyDir: false,
+          storageClass: 'standard',
+          size: '1Gi',
+          accessModes: [
+            'ReadWriteOnce',
+          ],
+          mountPath: '/example/path',
+        });
+      },
+      removeVolumeLine(index) {
+        for (let i = 0; i < this.extraVolumes.length; i++) {
+          if (this.extraVolumes[i].name === index) {
+            this.extraVolumes.splice(i, 1);
+          }
+        }
+      },
       addCronjobLine() {
         this.cronjobs.push({
           name: 'hello world',

src/kubero.ts

@@ -497,6 +497,7 @@ export class Kubero {
                     podsize: this.config.podSizeList[0], //TODO select from podsizelist
                     autoscale: false,
                     envVars: [], //TODO use custom env vars,
+                    extraVolumes: [], //TODO Not sure how to handlle extra Volumes on PR Apps
                     image: {
                         containerPort: 8080, //TODO use custom containerport
                         repository: pipeline.dockerimage, // FIXME: Maybe needs a lookup into buildpack

src/modules/application.ts

@@ -1,4 +1,4 @@
-import { IApp, IKubectlMetadata, IKubectlApp, IGithubRepository, ICronjob, IPodSize} from '../types';
+import { IApp, IKubectlMetadata, IKubectlApp, IGithubRepository, ICronjob, IPodSize, IExtraVolume} from '../types';
 import { IAddon } from './addons';
 
 export class KubectlApp implements IKubectlApp{
@@ -34,6 +34,7 @@ export class App implements IApp{
     public autoscale: boolean
     //public envVars: {[key: string]: string} = {}
     public envVars: {}[] = []
+    public extraVolumes: IExtraVolume[] = []
     public cronjobs: ICronjob[] = []
     public addons: IAddon[] = []
 
@@ -156,6 +157,8 @@ export class App implements IApp{
 
         this.envVars =  app.envVars
 
+        this.extraVolumes =  app.extraVolumes
+
         this.cronjobs = app.cronjobs
 
         this.addons = app.addons

src/routes/apps.ts

@@ -184,6 +184,7 @@ function createApp(req: Request,) : IApp {
         podsize: req.body.podsize,
         autoscale: req.body.autoscale,
         envVars: req.body.envvars,
+        extraVolumes: req.body.extraVolumes,
         image: {
             containerPort: req.body.image.containerport,
             repository: req.body.image.repository,

src/routes/pipelines.ts

@@ -201,6 +201,7 @@ Router.put('/pipelines/:pipeline/:phase/:app', authMiddleware, async function (r
         domain: req.body.domain,
         podsize: req.body.podsize,
         autoscale: req.body.autoscale,
+        extraVolumes: req.body.extraVolumes,
         envVars: req.body.envvars,
         image: {
             containerPort: req.body.image.containerport,

src/types.ts

@@ -78,6 +78,7 @@ export interface IApp {
         }
     }
 
+    extraVolumes: IExtraVolume[],
     cronjobs: ICronjob[]
     addons: IAddon[]
 /*
@@ -123,6 +124,15 @@ export interface IApp {
 */
 }
 
+export interface IExtraVolume {
+    name: string,
+    mountPath: string,
+    emptyDir: boolean,
+    size: string,
+    storageClass: string,
+    accessModes: string[],
+}
+
 export interface ICronjob {
     name: string,
     schedule: string,

tsconfig.json

@@ -26,11 +26,11 @@
 
     /* Modules */
     "module": "commonjs",                                /* Specify what module code is generated. */
-    "rootDir": "./src/",                                  /* Specify the root folder within your source files. */
+    //"rootDir": "./src/",                                  /* Specify the root folder within your source files. */
     // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
-    // "rootDirs": ["./src/", "./client/src/"],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    "rootDirs": ["./src/", "./client/src/"],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like `./node_modules/@types`. */
     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */