Merge pull request #481 from kubero-dev/feature/frontend-single-file-templates

Feature / Use singlefile templates

Author: mms-gianni

client/src/components/apps/form.vue

@@ -1653,10 +1653,9 @@ export default defineComponent({
       this.loadClusterIssuers();
       this.getDomains();
 
-      if (this.$route.query.template && this.$route.query.catalogId) {
-        const catalogId = this.$route.query.catalogId as string;
+      if (this.$route.query.template) {
         const template = this.$route.query.template as string;
-        this.loadTemplate(catalogId, template);
+        this.loadTemplate(template);
       }
 
       //this.buildPipeline = this.$vuetify.buildPipeline
@@ -1709,8 +1708,8 @@ export default defineComponent({
           this.letsecryptClusterIssuer = response.data.id;
         });
       },
-      loadTemplate(catalogId: string, template: string) {
-        axios.get('/api/templates/'+catalogId+'/'+template).then(response => {
+      loadTemplate(template: string) {
+        axios.get('/api/templates/'+template).then(response => {
 
           this.appname = response.data.name;
           this.containerPort = response.data.image.containerPort;

client/src/components/settings/form-templates.vue

@@ -43,17 +43,17 @@
             <v-row>
                 <v-col
                     cols="12"
-                    md="10"
+                    md="6"
                 >
-                    <v-text-field
-                    v-model="catalog.templateBasePath"
-                    label="Template Base Path"
+                    <v-select
+                    v-model="catalog.index.format"
+                    :items="['json']"
+                    label="Index Format"
                     required
-                    density="compact"
-                    ></v-text-field>
+                    ></v-select>
                 </v-col>
             </v-row>
-            <v-row>
+            <v-row justify="space-between">
                 <v-col
                     cols="12"
                     md="10"
@@ -67,19 +67,12 @@
                 </v-col>
             </v-row>
             <v-row justify="space-between">
+
                 <v-col
                     cols="12"
-                    md="6"
+                    md="10"
                 >
-                    <v-select
-                    v-model="catalog.index.format"
-                    :items="['json']"
-                    label="Index Format"
-                    required
-                    ></v-select>
                 </v-col>
-
-
                 <v-col
                     cols="12"
                     md="2"
@@ -156,7 +149,6 @@ export default defineComponent({
             this.settings.kubero.config.templates.catalogs.push({
                 name: '',
                 description: '',
-                templateBasePath: '',
                 index: {
                     url: '',
                     format: 'json'

client/src/components/templates/index.vue

@@ -109,7 +109,7 @@
                             color="primary"
                             dark
                             :disabled="!pipeline || !phase"
-                            @click="openInstall(clickedTemplate.dirname, pipeline, phase, catalogId)"
+                            @click="openInstall(clickedTemplate.template, pipeline, phase)"
                             >
                             Load template
                         </v-btn>
@@ -153,6 +153,7 @@ type Template = {
     website: string,
     screenshots: string[],
     dirname: string,
+    template: string,
 }
 
 type Templates = {
@@ -209,9 +210,10 @@ export default defineComponent({
             }
             this.dialog = false;
         },
-        openInstall(templatename: string, pipeline: string, phase: string, catalogId: number) {
+        openInstall(templateurl: string, pipeline: string, phase: string) {
             // redirect to install page
-            this.$router.push({ name: 'App Form', params: { pipeline: pipeline, phase: phase, app: 'new'}, query: { template: templatename, catalogId: catalogId }})
+            const templateurlB64 = btoa(templateurl);
+            this.$router.push({ name: 'App Form', params: { pipeline: pipeline, phase: phase, app: 'new'}, query: { template: templateurlB64 }})
 
         },
         openInstallDialog(template: Template) {

server/src/kubero.ts

@@ -858,7 +858,6 @@ export class Kubero {
                         {
                             name: 'Kubero',
                             description: 'Kubero Templates',
-                            templateBasePath: 'https://raw.githubusercontent.com/kubero-dev/kubero/main/services/',
                             index: {
                                 url: 'https://raw.githubusercontent.com/kubero-dev/templates/main/index.json',
                                 format: 'json',
@@ -1458,10 +1457,6 @@ export class Kubero {
         return this.config.templates;
     }
 
-    public async getTemplateBasePath(catalogId: number) {
-        return this.config.templates.catalogs[catalogId].templateBasePath;
-    }
-
     public getTemplateEnabled() {
         return this.config.templates.enabled;
     }

server/src/modules/config.ts

@@ -94,7 +94,7 @@ export class KuberoConfig {
             {
                 name: string;
                 description: string;
-                templateBasePath: string;
+                templateBasePath?: string; // deprecated v2.4.4
                 index: {
                     url: string;
                     format: string;

server/src/routes/templates.ts

@@ -8,46 +8,18 @@ export const auth = new Auth();
 auth.init();
 export const authMiddleware = auth.getAuthMiddleware();
 export const bearerMiddleware = auth.getBearerMiddleware();
-/*
-// load all services from github repo
-Router.get('/services', authMiddleware, async function (req: Request, res: Response) {
-    // #swagger.tags = ['UI']
-    // #swagger.summary = 'Get all services'
-
-    axios.get('https://raw.githubusercontent.com/kubero-dev/kubero/main/services/index.yaml')
-});
-
-
-// load a specific service from github repo
-Router.get('/services/:name', authMiddleware, async function (req: Request, res: Response) {
-    // #swagger.tags = ['UI']
-    // #swagger.summary = 'Get a specific service'
-    // #deprecated = true // since v1.11.0
-
-    const serviceName = req.params.name.replace(/[^\w.-]+/g, '');
-
-    const service = await axios.get('https://raw.githubusercontent.com/kubero-dev/kubero/main/services/' + serviceName + '/app.yaml')
-    .catch((err) => {
-        res
-            .status(500)
-            .send(err);
-    });
-    if (service) {
-        const ret = YAML.parse(service.data);
-        res.send(ret.spec);
-    }
-});
-*/
 
 // load a specific service from github repo
-Router.get('/templates/:catalogId/:template', authMiddleware, async function (req: Request, res: Response) {
+Router.get('/templates/:template', authMiddleware, async function (req: Request, res: Response) {
     // #swagger.tags = ['UI']
     // #swagger.summary = 'Get a specific template'
+    // #swagger.description = 'Get a specific template from a catalog'
+    // #swagger.parameters['template'] = { description: 'A base64 encoded URL', type: 'string' }
 
-    const templateName = req.params.template.replace(/[^\w.-]+/g, '');
-    const templateBasePath = await req.app.locals.kubero.getTemplateBasePath(parseInt(req.params.catalogId));
+    // decode the base64 encoded URL
+    const templateUrl = Buffer.from(req.params.template, 'base64').toString('ascii');
 
-    const template = await axios.get(templateBasePath + templateName + '/app.yaml')
+    const template = await axios.get(templateUrl)
     .catch((err) => {
         res
             .status(500)
@@ -58,15 +30,3 @@ Router.get('/templates/:catalogId/:template', authMiddleware, async function (re
         res.send(ret.spec);
     }
 });
-
-// load a specific service from github repo
-Router.get('/templates/:catalogId', authMiddleware, async function (req: Request, res: Response) {
-    // #swagger.tags = ['UI']
-    // #swagger.summary = 'Get a specific template'
-    
-    const templateBasePath = await req.app.locals.kubero.getTemplateBasePath(parseInt(req.params.catalogId));
-
-    
-    axios.get(templateBasePath + '/index.yaml')
-});
-

server/src/types.ts

@@ -384,7 +384,7 @@ export interface IKuberoConfig {
             {
                 name: string;
                 description: string;
-                templateBasePath: string;
+                templateBasePath?: string; // deprecated v2.4.4
                 index: {
                     url: string;
                     format: string;