some refactoring

Author: mms-gianni

.env.template

@@ -1,11 +1,13 @@
 PORT=3000
 # git deployment key's
-GIT_DEPLOYMENTKEY_PUBLIC=deployment.key
-GIT_DEPLOYMENTKEY_PRIVATE=deployment.key
+GIT_DEPLOYMENTKEY_PUBLIC=
+GIT_DEPLOYMENTKEY_PRIVATE_B64=
 
 # Github webhook configuration
 GITHUB_WEBHOOK_URL=https://
 GITHUB_WEBHOOK_SECRET=mysecret
 
-KUBECONFIG_PATH=$(pwd)/kubeconfig
+KUBECONFIG_PATH=./kubeconfig
 KUBERO_CONFIG_PATH=./config.yaml
+KUBERO_CONTEXT=kind-kubero
+KUBERO_NAMESPACE=keroku

.gitignore

@@ -7,4 +7,6 @@ node_modules
 notes.txt
 kubeconfig
 
-example-*.json
+example-*.json
+
+*.log

client/src/App.vue

@@ -37,7 +37,7 @@
             <router-view></router-view>
         </v-main>
 
-        <Appfooter :swarmversion="status.swarmversion" :kubeversion="status.kubeVersion.gitVersion" />
+        <!--<Appfooter :swarmversion="status.swarmversion" :kubeversion="status.kubeVersion.gitVersion" />-->
     </v-app>
 </template>
 
@@ -50,13 +50,15 @@
 
 <script>
 //import axios from "axios";
-import Appfooter from "./components/appfooter.vue";
+//import Appfooter from "./components/appfooter.vue";
 
 export default {
     name: "App",
+    /*
     components: {
         Appfooter
     },
+    */
     mounted() {
         /*
         axios

client/src/components/apps/logs.vue

@@ -9,7 +9,7 @@
         </v-row>
         <v-row style="height: 100%">
             <v-col cols="12" sm="12" md="10">
-                <div class="console">
+                <div class="console" id="console">
                     <div v-for="line in loglines" :key="line.id">{{ new Date(line.time).toISOString()}}[{{ line.podID }}/{{ line.container.replace('kuberoapp-', '') }}] {{ line.log }}</div>
                 </div>
             </v-col>
@@ -24,7 +24,14 @@ export default {
     sockets: {
         log: function(data) {
             console.log(data);
+            this.loglines.unshift(data)
+/*
+    NOT Need
+    display: flex;
+    flex-direction: column-reverse;
+
             this.loglines.push(data);
+*/
         },
     },
     mounted() {
@@ -96,10 +103,14 @@ export default {
 <style lang="scss">
 .console {
     height: 100%;
-    overflow-y: scroll;
+    max-height: 1000px;
+    overflow-x: scroll;
     background-color: #333;
     color: #c0c0c0;
     padding: 5px;
     font: 0.85rem Inconsolata, monospace;
+
+    display: flex;
+    flex-direction: column-reverse;
 }
 </style>

client/src/components/pipelines/appcard.vue

@@ -1,11 +1,20 @@
 <template>
 <v-card
+    :loading="loadingState"
     class="mt-5"
     outlined
     elevation="2"
     color="#fafafa"
     >
 
+    <template slot="progress">
+      <v-progress-linear
+        color="primary"
+        height="2"
+        indeterminate
+      ></v-progress-linear>
+    </template>
+
     <v-card-title><a :href="'/#/pipeline/'+pipeline+'/'+phase+'/'+app">{{ this.app }}</a></v-card-title>
 
     <v-card-text>
@@ -31,6 +40,7 @@
             v-if="this.domain"
             color="deep-purple lighten-2"
             text
+            @click="restartApp()"
         >
             <v-icon
                 >mdi-reload-alert
@@ -60,6 +70,7 @@
 </template>
 
 <script>
+import axios from "axios";
 export default {
     props: {
       pipeline: {
@@ -103,8 +114,23 @@ export default {
         type: Boolean,
         default: false
       }
+    },
+    data: () => ({
+      loadingState: false,
+    }),
+    methods: {
+        restartApp() {
+            axios.get(`/api/pipelines/${this.pipeline}/${this.phase}/${this.app}/restart`)
+            .then(response => {
+                console.log(response);
+                this.loadingState = true;
+            })
+            .catch(error => {
+                console.log(error);
+            });
+        }
     }
-    }
+}
 </script>
 
 <style>

client/src/components/pipelines/new.vue

@@ -3,9 +3,9 @@
     <v-container>
       <v-row>
         <v-col cols="12" sm="12" md="12" lg="12" xl="12">
-            <div class="subtitle-1">
+            <h2>
                 Create a new Pipeline
-            </div>
+            </h2>
             <p class="text-justify">
                 A Pipeline may have several stages with apps
             </p>

src/addons/postgresql-crunchy.ts

@@ -1,4 +1,4 @@
-import { IAddon, IAddonFormFields } from '../addons';
+import { IAddon, IAddonFormFields } from '../modules/addons';
 
 export class CrunchyPostgresqlCluster implements IAddon {
     public id: string = 'postgresql-cluster';

src/addons/redis.ts

@@ -1,4 +1,4 @@
-import { IAddon, IAddonFormFields } from '../addons';
+import { IAddon, IAddonFormFields } from '../modules/addons';
 
 export class RedisCluster implements IAddon {
     public id: string = 'redis-cluster';

src/charts/namespace.ts

@@ -5,7 +5,7 @@ import bodyParser from 'body-parser';
 import { Router } from "./routes";
 import { init } from './socket'
 import { Keroku } from './keroku';
-import { Addons } from './addons';
+import { Addons } from './modules/addons';
 
 export const before = (app: Express) => {
     app.use(cors())

src/configure.ts

@@ -1,9 +1,9 @@
 import debug from 'debug';
 import { Server } from "socket.io";
 import { IApp, IPipeline, IKubectlAppList, IKubectlPipelineList, IPodSize, IKuberoConfig} from './types';
-import { App } from './types/application';
+import { App } from './modules/application';
 import { GithubApi } from './github/api';
-import { IAddon, IAddonMinimal } from './addons';
+import { IAddon, IAddonMinimal } from './modules/addons';
 import * as crypto from "crypto"
 import set from 'lodash.set';
 import YAML from 'yaml';
@@ -15,7 +15,7 @@ import { Stream } from 'stream';
 
 debug('app:keroku')
 
-import { Kubectl } from './kubectl';
+import { Kubectl } from './modules/kubectl';
 import { throws } from 'assert';
 
 export class Keroku {
@@ -275,14 +275,16 @@ export class Keroku {
         debug.debug('restart App: '+appName+' in '+ pipelineName+' phase: '+phaseName);
         const contextName = this.getContext(pipelineName, phaseName);
         if (contextName) {
-            this.kubectl.restartApp(pipelineName, phaseName, appName, contextName);
+            this.kubectl.restartApp(pipelineName, phaseName, appName, 'web', contextName);
+            this.kubectl.restartApp(pipelineName, phaseName, appName, 'worker', contextName);
+
             let message = {
                 'action': 'restarted', 
                 'pipeline':pipelineName, 
                 'phase':phaseName, 
                 'app': appName
             }
-            this._io.emit('updatedApps', message);
+            //this._io.emit('restartedApp', message);
         }
     }
 /*

src/keroku.ts

@@ -2,8 +2,8 @@ import debug from 'debug';
 debug('app:addons')
 import { Kubectl } from './kubectl';
 import { KubernetesListObject, KubernetesObject } from '@kubernetes/client-node'
-import { RedisCluster, Redis} from './addons/redis';
-import { CrunchyPostgresqlCluster} from './addons/postgresql-crunchy';
+import { RedisCluster, Redis} from '../addons/redis';
+import { CrunchyPostgresqlCluster} from '../addons/postgresql-crunchy';
 
 export interface AddonOptions {
     kubectl: Kubectl;

src/addons.ts src/modules/addons.ts

@@ -1,6 +1,6 @@
 
 import { IApp, IKubectlMetadata, IKubectlApp, IGithubRepository, ICronjob, IPodSize} from '../types';
-import { IAddon } from '../addons';
+import { IAddon } from './addons';
 
 export class KubectlApp implements IKubectlApp{
     apiVersion: string;

src/types/application.ts src/modules/application.ts

@@ -13,11 +13,11 @@ import {
     PatchUtils,
     Log as KubeLog,
     V1Pod,
+    V1Namespace,
 } from '@kubernetes/client-node'
-import { namespace as namespace_chart} from './charts/namespace';
-import { IPipeline, IKubectlPipeline, IKubectlPipelineList, IKubectlAppList} from './types';
-import { App, KubectlApp } from './types/application';
-import { KubectlPipeline } from './types/pipeline';
+import { IPipeline, IKubectlPipeline, IKubectlPipelineList, IKubectlAppList} from '../types';
+import { App, KubectlApp } from './application';
+import { KubectlPipeline } from './pipeline';
 import { IAddon, IAddonMinimal } from './addons';
 
 
@@ -161,10 +161,16 @@ export class Kubectl {
         console.log("create namespace ");
 
         try {
-            namespace_chart.metadata.name = ns_name;
-            console.log(namespace_chart);
+            let ns = new V1Namespace();
+            ns.metadata = {
+                name: ns_name,
+                labels: {
+                    "managed-by": "kubero"
+                }
+            }
+            console.log(ns);
             this.kc.setCurrentContext(context);
-            const ret = await this.coreV1Api.createNamespace(namespace_chart);
+            const ret = await this.coreV1Api.createNamespace(ns);
             //debug.debug(ret);
         } catch (error) {
             debug.log(error);
@@ -284,11 +290,11 @@ export class Kubectl {
         return appslist.body as IKubectlAppList;
     }
 
-    public async restartApp(pipelineName: string, phaseName: string, appName: string, context: string) {
+    public async restartApp(pipelineName: string, phaseName: string, appName: string, workloadType: string, context: string) {
         this.kc.setCurrentContext(context);
 
         let namespace = pipelineName+'-'+phaseName;
-        let deploymentName = appName+'-kuberoapp';
+        let deploymentName = appName+'-kuberoapp-'+workloadType;
         const date = new Date();
 
         // format : https://jsonpatch.com/
@@ -315,7 +321,10 @@ export class Kubectl {
         ).then(() => {
             console.log(`Deployment ${deploymentName} in Pipeline ${namespace} updated`);
         }).catch(error => {
-            debug.log('ERROR: '+error.body.message);
+            if (error.body.message) {
+                debug.log('ERROR: '+error.body.message);
+            }
+            debug.log('ERROR: '+error);
         });
     };
 

src/kubectl.ts src/modules/kubectl.ts

@@ -1,7 +1,7 @@
 import express, { Express, Request, Response } from 'express';
 import { IApp, IPipeline } from './types';
-import { App } from './types/application';
-import { IAddonMinimal } from './addons';
+import { App } from './modules/application';
+import { IAddonMinimal } from './modules/addons';
 
 export const Router = express.Router();
 

src/types/pipeline.ts src/modules/pipeline.ts

@@ -1,4 +1,4 @@
-import { IAddon } from './addons';
+import { IAddon } from './modules/addons';
 export interface IApp {
     name: string,
     pipeline: string,
@@ -127,11 +127,13 @@ export interface IPipelinePhase {
     apps: IApp[];
 }
 
+// TODO replace with default kubeclt Interface
 export interface IKubectlMetadata {
-    creationTimestamp?: string;
+    creationTimestamp?: Date;
     generation?: number;
     //labels?: [Object];
     labels?: {
+        'kubernetes.io/metadata.name'?: String,
         manager?: string;
     }
     managedFields?: [Array: Object];