Merge pull request kubero-dev#65 from kubero-dev/feature/improve-addons-view

Feature/ improve addons view

Author: mms-gianni

client/src/components/addons/list.vue

@@ -28,15 +28,16 @@
                                 color="blue"
                                 content="beta"
                                 >
-                            {{ addon.kind }}
+                            <a :href="addon.artifact_url">{{ addon.kind }}</a>
                             </v-badge>
                         </v-card-title>
                         <v-card-subtitle>
                             <span v-if="addon.enabled">{{ addon.version.installed }}</span>
                             <span v-if="!addon.enabled">{{ addon.version.latest }}</span>
                         </v-card-subtitle>
                         <v-card-text>
-                            Operator: {{ addon.id }}
+                            {{ addon.description }}
+                            <!--Operator: <a :href="addon.artifact_url">{{ addon.id }}</a>-->
                         </v-card-text>
                     </v-list-item-content>
                 </v-card>
@@ -58,8 +59,21 @@
             >
             <v-card>
                 <v-card-title class="text-h5">
-                {{clickedAddon.kind}}
+                    {{clickedAddon.display_name}} ({{clickedAddon.kind}})
                 </v-card-title>
+                <v-card-text>
+                    {{clickedAddon.description}}
+                    <br/>
+                    <h3>Maintainers</h3>
+                    <ul>
+                        <li v-for="maintainer in clickedAddon.maintainers" :key="maintainer.name">{{ maintainer.name }} <a :href="maintainer.url">{{ maintainer.url }}</a></li>
+                    </ul>
+                    <br/>
+                    <h3>Links</h3>
+                    <ul>
+                        <li v-for="link in clickedAddon.links" :key="link.url"><a :href="link.url">{{ link.name }}</a></li>
+                    </ul>
+                </v-card-text>
                 <v-card-text>
                     <pre>{{clickedAddon.install}}</pre>
                     <v-btn

src/addons/mongoDB.ts

@@ -4,7 +4,7 @@ import {Plugin, IPlugin, IPluginFormFields} from './plugin';
 export class MongoDB extends Plugin implements IPlugin {
     public id: string = 'mongodb-operator';//same as operator name
     public install: string = 'kubectl create -f https://operatorhub.io/install/mongodb-operator.yaml'
-    public artifact_url = 'https://artifacthub.io/packages/olm/community-operators/mongodb-operator'
+    public artifact_url = 'https://artifacthub.io/api/v1/packages/olm/community-operators/mongodb-operator'
     public beta: boolean = true;
 
     public formfields: {[key: string]: IPluginFormFields} = {

src/addons/mongoDBCluster.ts

@@ -4,7 +4,7 @@ import {Plugin, IPlugin, IPluginFormFields} from './plugin';
 export class MongoDBCluster extends Plugin implements IPlugin {
     public id: string = 'mongodb-operator';//same as operator name
     public install: string = 'kubectl create -f https://operatorhub.io/install/mongodb-operator.yaml'
-    public artifact_url = 'https://artifacthub.io/packages/olm/community-operators/mongodb-operator'
+    public artifact_url = 'https://artifacthub.io/api/v1/packages/olm/community-operators/mongodb-operator'
     public beta: boolean = true;
 
     public formfields: {[key: string]: IPluginFormFields} = {

src/addons/plugin.ts

@@ -37,7 +37,10 @@ export abstract class Plugin {
             'latest': '0.0.0', // version fetched from artifacthub
             'installed': '0.0.0', // loaded if avialable from local operators
         };
+    public display_name: string = '';
     public description: string = '';
+    public maintainers: Object[] = [];
+    public links: Object[] = [];
     public readme: string = '';
     //public crd: KubernetesObject = {}; // ExampleCRD which will be used as template
     protected additionalResourceDefinitions: Object = {};
@@ -58,7 +61,10 @@ export abstract class Plugin {
         // load data from artifacthub
         axios.get(this.artifact_url)
             .then(response => {
+                this.display_name = response.data.display_name;
                 this.description = response.data.description;
+                this.maintainers = response.data.maintainers;
+                this.links = response.data.links;
                 this.readme = response.data.readme;
                 this.version.latest = response.data.version;
             })