cleanup

mms-gianni · mms-gianni · commit a788900ec963 · 2022-07-06T23:17:53.000+02:00
diff --git a/client/src/components/apps/logs.vue b/client/src/components/apps/logs.vue
@@ -1,8 +1,8 @@
 <template>
     <v-container style="height: 80%">
-
         <v-row class="justify-space-between">
             <v-col cols="6" sm="6" md="6" lg="6" xl="6">
+                <a :href="`/#/pipeline/${pipeline}/apps`"><v-icon small>mdi-arrow-left-circle</v-icon>{{ this.pipeline }}</a>
                 <h1>Logs for {{ this.app }}</h1>
                 <p></p>
             </v-col>
@@ -101,6 +101,8 @@ export default {
 </script>
 
 <style lang="scss">
+
+a:link { text-decoration: none;}
 .console {
     height: 100%;
     max-height: 1000px;
diff --git a/client/src/components/apps/new.vue b/client/src/components/apps/new.vue
@@ -3,9 +3,12 @@
     <v-container>
       <v-row>
         <v-col cols="12" sm="12" md="12" lg="12" xl="12">
-            <h2>
+            <h2 v-if="app=='new'">
                 Create a new App in {{ this.pipeline }}
             </h2>
+            <h2 v-if="app!='new'">
+                Edit {{ this.app }} in {{ this.pipeline }}
+            </h2>
             <p class="text-justify">
                 in phase {{ this.phase }}
             </p>
diff --git a/client/src/components/breadcrumbs.vue b/client/src/components/breadcrumbs.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <v-breadcrumbs :items="items">
+      <template v-slot:divider>
+        <v-icon>mdi-forward</v-icon>
+      </template>
+    </v-breadcrumbs>
+
+    <v-breadcrumbs :items="items">
+      <template v-slot:divider>
+        <v-icon>mdi-chevron-right</v-icon>
+      </template>
+    </v-breadcrumbs>
+  </div>
+</template>
+
+
+<script>
+  export default {
+    data: () => ({
+      items: [
+        {
+          text: 'Dashboard',
+          disabled: false,
+          href: 'breadcrumbs_dashboard',
+        },
+        {
+          text: 'Link 1',
+          disabled: false,
+          href: 'breadcrumbs_link_1',
+        },
+        {
+          text: 'Link 2',
+          disabled: true,
+          href: 'breadcrumbs_link_2',
+        },
+      ],
+    }),
+  }
+</script>
diff --git a/client/src/components/pipelines/appcard.vue b/client/src/components/pipelines/appcard.vue
@@ -59,7 +59,7 @@
             v-if="this.domain"
             color="deep-purple lighten-2"
             text
-            :href="'https:/'+domain" target="_blank"
+            :href="'//'+domain" target="_blank"
         >
             <v-icon
                 >mdi-open-in-new
diff --git a/client/src/components/pipelines/new.vue b/client/src/components/pipelines/new.vue
@@ -25,6 +25,102 @@
           ></v-text-field>
         </v-col>
       </v-row>
+      <v-row>
+
+
+        <v-col
+          cols="12"
+          md="6"
+        >
+        <v-tabs icons-and-text v-model="repotab" color="#8560A9">
+            <v-tab href="#tab-github">Github <v-icon>mdi-github</v-icon> </v-tab>
+            <v-tab href="#tab-gitlab">Gitlab <v-icon>mdi-gitlab</v-icon></v-tab>
+            <v-tab href="#tab-bitbucket" disabled>Bitbucket <v-icon>mdi-bitbucket</v-icon></v-tab>
+        </v-tabs>
+
+        <v-tabs-items v-model="repotab">
+          <v-tab-item
+            key="1"
+            value="tab-github"
+          >
+
+            <v-card flat>
+              <v-card-text>
+                <v-text-field
+                  v-model="gitrepo"
+                  :rules="repositoryRules"
+                  :counter="60"
+                  label="Repository"
+                  :disabled="gitrepo_connected"
+                  required
+                ></v-text-field>
+                <v-container
+                  v-if="!gitrepo_connected"
+                >
+                  <v-btn
+                      color="primary"
+                      elevation="2"
+                      @click="connectGithub()"
+                      >Connect</v-btn>
+                </v-container>
+                <v-container
+                  v-if="gitrepo_connected"
+                >
+                  <v-alert class="alert"
+                    type="success"
+                    elevation="6"
+                    transition="scale-transition"
+                  >Webhook created
+                  </v-alert>
+                  <v-alert class="alert"
+                    type="success"
+                    elevation="6"
+                    transition="scale-transition"
+                  >Deploy keys added
+                  </v-alert>
+                </v-container>
+              </v-card-text>
+            </v-card>
+
+          </v-tab-item>
+        </v-tabs-items>
+
+
+
+
+        <v-tabs-items v-model="repotab">
+          <v-tab-item
+            key="2"
+            value="tab-gitlab"
+          >
+            <v-card flat>
+              <v-card-text>
+                <v-text-field
+                  v-model="gitrepo"
+                  :rules="repositoryRules"
+                  :counter="60"
+                  label="Repository"
+                  :disabled="gitrepo_connected"
+                  required
+                ></v-text-field>
+                
+                  <v-alert class="alert"
+                    type="warning"
+                    elevation="6"
+                    transition="scale-transition"
+                  >Not implemented yet
+                  </v-alert>
+              </v-card-text>
+            </v-card>
+          </v-tab-item>
+        </v-tabs-items>
+    
+      
+      
+        </v-col>
+      </v-row>
+
+<!--
       <v-row>
         <v-col
           cols="12"
@@ -77,6 +173,7 @@
               </v-alert>
         </v-col>
       </v-row>
+-->
       <v-row v-for="phase in phases" :key="phase.name">
         <v-col
           cols="12"
@@ -121,6 +218,7 @@
 import axios from "axios";
 export default {
     data: () => ({
+      repotab: null,
       valid: false,
       pipelineName: '',
       reviewapps: true,
@@ -227,4 +325,7 @@ export default {
 .alert i.v-icon.v-icon {
   color: white !important;
 } 
+//.v-card {
+//  height: 100px;
+//}
 </style>
diff --git a/client/src/plugins/vuetify.js b/client/src/plugins/vuetify.js
@@ -1,7 +1,28 @@
 import Vue from 'vue';
 import Vuetify from 'vuetify/lib/framework';
+//import colors from 'vuetify/es5/util/colors'
 
 Vue.use(Vuetify);
 
 export default new Vuetify({
 });
+/*
+export default new Vuetify({
+    theme: {
+      dark: true,
+      themes: {
+        light: {
+          primary: colors.purple,
+          secondary: colors.grey.darken1,
+          accent: colors.shades.black,
+          error: colors.red.accent3,
+          background: colors.indigo.lighten5, 
+        },
+        dark: {
+          primary: colors.blue.lighten3,
+          background: colors.indigo.base,
+        },
+      },
+    },
+});
+*/
diff --git a/src/keroku.ts b/src/keroku.ts
@@ -1,6 +1,6 @@
 import debug from 'debug';
 import { Server } from "socket.io";
-import { IApp, IPipeline, IKubectlAppList, IKubectlPipelineList, IPodSize, IKuberoConfig} from './types';
+import { IApp, IPipeline, IKubectlAppList, IKubectlPipelineList, IKubectlApp, IPodSize, IKuberoConfig} from './types';
 import { App } from './modules/application';
 import { GithubApi } from './github/api';
 import { IAddon, IAddonMinimal } from './modules/addons';
@@ -68,18 +68,23 @@ export class Keroku {
     public getContexts() {
         return this.kubectl.getContexts()
     }
+    public getPipelineStateList() {
+        return this.pipelineStateList;
+    }
 
-    public getContext(pipelineName: string, phaseName: string): string | undefined {
+    public getContext(pipelineName: string, phaseName: string): string {
+        let context: string = 'missing-'+pipelineName+'-'+phaseName;
         for (const pipeline of this.pipelineStateList) {
             if (pipeline.name == pipelineName) {
                 for (const phase of pipeline.phases) {
                     if (phase.name == phaseName) {
                         //this.kubectl.setCurrentContext(phase.context);
-                        return phase.context;
+                        context = phase.context;
                     }
                 }
             }
         }
+        return context
     }
 
     public async setContext(pipelineName: string, phaseName: string): Promise<boolean> {
@@ -168,7 +173,7 @@ export class Keroku {
 
     // create a new app in a specified pipeline and phase
     public async newApp(app: App) {
-        debug.debug('create App: '+app.name+' in '+ app.pipeline+' phase: '+app.phase);
+        debug.log('create App: '+app.name+' in '+ app.pipeline+' phase: '+app.phase);
         const contextName = this.getContext(app.pipeline, app.phase);
         if (contextName) {
             await this.kubectl.createApp(app, contextName);
@@ -181,7 +186,7 @@ export class Keroku {
     }
 
     // update an app in a pipeline and phase
-    public async updateApp(app: App, envvars: { name: string; value: string; }[], resourceVersion: string) { //TODO remove env vars
+    public async updateApp(app: App, resourceVersion: string) {
         debug.debug('update App: '+app.name+' in '+ app.pipeline+' phase: '+app.phase);
         await this.setContext(app.pipeline, app.phase);
         
@@ -229,45 +234,32 @@ export class Keroku {
     }
 
     // list all apps in a pipeline
-    public async listApps(pipelineName: string) {
+    public async getPipelineWithApps(pipelineName: string) {
         debug.debug('listApps in '+pipelineName);
         await this.kubectl.setCurrentContext(process.env.KUBERO_CONTEXT || 'default');
-        let kpipeline = await this.kubectl.getPipeline(pipelineName);
-
+        const kpipeline = await this.kubectl.getPipeline(pipelineName);
         let pipeline = kpipeline.spec
-        //await pipeline.phases.forEach(async (phase, key) => { // does not work, wait for all iterations to finish
-        await Promise.all(pipeline.phases.map(async (phase, key) => {
-
-            console.log(phase.name)
-            const namespace = pipeline.name+'-'+phase.name;
-            let apps = await this.kubectl.getAppsList(namespace, phase.context);
-            
-            pipeline.phases[key].apps = [];
-            for (const app of apps.items) {
-                pipeline.phases[key].apps.push(app.spec);
-            }
-            
-        }));
-/*
-        if (pipeline.reviewapps) {
-
-            let review = {
-                "enabled": true,
-                "name": "review",
-                "context": "", // Importand TODO: get the context from the pipeline
-                "apps": Array()
-            }
 
-            let apps = await this.kubectl.getAppsList(pipelineName+"-review");
-            for (const app of apps.items) {
-                review.apps.push(app.spec);
+        if (pipeline) {
+            for (const phase of pipeline.phases) {
+                if (phase.enabled == true) {
+
+                    const contextName = this.getContext(pipelineName, phase.name);
+                    if (contextName) {
+                        const namespace = pipelineName+'-'+phase.name;
+                        let apps = await this.kubectl.getAppsList(namespace, contextName);
+                        
+                        let appslist = new Array();
+                        for (const app of apps.items) {
+                            appslist.push(app.spec);
+                        }
+                        // @ts-expect-error ts(2532) FIXME: Object is possibly 'undefined'.
+                        pipeline.phases.find(p => p.name == phase.name).apps = appslist;
+                        
+                    }
+                }
             }
-
-            pipeline.phases.unshift(review);
-
         }
-*/
-
         return pipeline;
     }
 
diff --git a/src/modules/application.ts b/src/modules/application.ts
@@ -17,7 +17,7 @@ export class KubectlApp implements IKubectlApp{
                 manager: 'kubero',
             }
         }
-        this.spec = {} as IApp; // TODO: create a real object to keep it tyope safe
+        this.spec = {} as IApp; 
     }
 }
 
diff --git a/src/routes.ts b/src/routes.ts
@@ -6,7 +6,10 @@ import { IAddonMinimal } from './modules/addons';
 export const Router = express.Router();
 
 Router.get('/config', async function (req: Request, res: Response) {
-    res.send("config");
+    let debug: any = {};
+    debug['pipelineState'] = req.app.locals.keroku.getPipelineStateList();
+    debug['appStateList'] = await req.app.locals.keroku.getAppStateList();
+    res.send(debug);
 });
 
 Router.post('/pipelines', async function (req: Request, res: Response) {
@@ -118,7 +121,7 @@ Router.put('/pipelines/:pipeline/:phase/:app', async function (req: Request, res
 
     let app = new App(appconfig);
     
-    req.app.locals.keroku.updateApp(app, req.body.envvars, req.body.resourceVersion);
+    req.app.locals.keroku.updateApp(app, req.body.resourceVersion);
 
     res.send("updated");
 });
@@ -131,7 +134,7 @@ Router.get('/pipelines/:pipeline/:phase/:app', async function (req: Request, res
 
 // get all apps in a pipeline
 Router.get('/pipelines/:pipeline/apps', async function (req: Request, res: Response) {
-    let apps = await req.app.locals.keroku.listApps(req.params.pipeline);
+    let apps = await req.app.locals.keroku.getPipelineWithApps(req.params.pipeline);
     res.send(apps);
 });
 

Original file line number	Diff line number	Diff line change
`@@ -59,7 +59,7 @@`
`59`	`59`	`v-if="this.domain"`
`60`	`60`	`color="deep-purple lighten-2"`
`61`	`61`	`text`
`62`		`- :href="'https:/'+domain" target="_blank"`
	`62`	`+ :href="'//'+domain" target="_blank"`
`63`	`63`	`>`
`64`	`64`	`<v-icon`
`65`	`65`	`>mdi-open-in-new`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ export class KubectlApp implements IKubectlApp{`
`17`	`17`	`manager: 'kubero',`
`18`	`18`	`}`
`19`	`19`	`}`
`20`		`- this.spec = {} as IApp; // TODO: create a real object to keep it tyope safe`
	`20`	`+ this.spec = {} as IApp;`
`21`	`21`	`}`
`22`	`22`	`}`
`23`	`23`