69
69
prepend-icon =" mdi-file-certificate"
70
70
v-if =" template.spdx_id && template.spdx_id !== 'NOASSERTION'"
71
71
>{{ template.spdx_id }}</v-chip >
72
+ <br >
73
+ <v-chip
74
+ v-for =" category in template.categories"
75
+ :key =" category"
76
+ label
77
+ size =" x-small"
78
+ class =" mr-2 mt-2"
79
+ prepend-icon =" mdi-tag"
80
+ @click =" filterByCategory(category)"
81
+ >{{ category }}</v-chip >
72
82
</v-card-subtitle >
73
- <v-card-text style =" height : 150px " >
83
+ <v-card-text style =" height : 150px " class = " overflow-y-auto " >
74
84
{{ template.description }}
75
85
<!-- Operator: <a :href="template.url">{{ template.id }}</a>-->
86
+ <!-- <v-chip
87
+ v-for="addon in template.addons"
88
+ :key="addon"
89
+ label
90
+ size="small"
91
+ class="mr-2"
92
+ prepend-icon="mdi-plus"
93
+ >{{ addon }}</v-chip>-->
94
+ </v-card-text >
95
+ <v-card-text style =" height : 60px " class =" d-flex justify-left mb-0" >
96
+ <v-avatar
97
+ v-for =" addon in template.addons"
98
+ class =" pa-2 mr-2"
99
+ color =" grey-lighten-2"
100
+ rounded
101
+ :key =" addon"
102
+ :image =" addonImages[addon]" >
103
+ </v-avatar >
76
104
</v-card-text >
77
105
78
106
<v-divider ></v-divider >
154
182
import axios from " axios" ;
155
183
import { forEach } from " lodash" ;
156
184
import { defineComponent } from ' vue'
185
+ import { useRouter } from ' vue-router'
157
186
158
187
type Pipeline = {
159
188
name: string ,
@@ -187,6 +216,7 @@ type Template = {
187
216
last_updated: string ,
188
217
last_pushed: string ,
189
218
status: string ,
219
+
190
220
}
191
221
192
222
type Templates = {
@@ -232,6 +262,12 @@ export default defineComponent({
232
262
dialog: false ,
233
263
clickedTemplate: {} as Template ,
234
264
catalogId: 0 ,
265
+ addonImages: {
266
+ ' KuberoPostgresql' : ' /img/addons/pgsql.svg' ,
267
+ ' KuberoMysql' : ' /img/addons/mysql.svg' ,
268
+ ' KuberoRedis' : ' /img/addons/redis.svg' ,
269
+ ' KuberoMongoDB' : ' /img/addons/mongo.svg' ,
270
+ } as { [key : string ]: string },
235
271
templates: {
236
272
enabled: true ,
237
273
catalogs: [] as Catalog [],
@@ -258,10 +294,10 @@ export default defineComponent({
258
294
this .dialog = false ;
259
295
},
260
296
openInstall(templateurl : string , pipeline : string , phase : string ) {
297
+ const router = useRouter ();
261
298
// redirect to install page
262
299
const templateurlB64 = btoa (templateurl );
263
- this .$router .push ({ name: ' App Form' , params: { pipeline: pipeline , phase: phase , app: ' new' }, query: { template: templateurlB64 }})
264
-
300
+ router .push ({ name: ' App Form' , params: { pipeline: pipeline , phase: phase , app: ' new' }, query: { template: templateurlB64 }})
265
301
},
266
302
openInstallDialog(template : Template ) {
267
303
this .clickedTemplate = template ;
@@ -282,7 +318,7 @@ export default defineComponent({
282
318
});
283
319
},
284
320
filterByCategory(selectedCategory : string ) {
285
- console . log ( selectedCategory );
321
+
286
322
if (selectedCategory === ' All' ) {
287
323
this .showedTemplates .services = this .templatesList .services ;
288
324
} else {
0 commit comments