Add applink dialog in apps view

dashboard/src/components/AppsView.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="content">
+    <ApplinkDialog ref="applinkDialog" />
+
     <h1 class="section-header">
       {{ $t('apps.title') }}
       <div>
@@ -11,7 +13,7 @@
     <div v-show="ready">
       <TransitionGroup name="grid-animation" tag="div" class="grid" v-if="viewType === VIEW_TYPE.GRID">
         <a v-for="app in filteredApps" :key="app.id" class="grid-item" @click="onOpenApp(app, $event)" :href="'https://' + app.fqdn" target="_blank" v-tooltip="app.fqdn">
-          <a class="config" v-show="isOperator(app)" :href="`#/app/${app.id}/info`" @click="openAppInfo(app)"><Icon icon="fa-solid fa-cog" /></a>
+          <div class="config" v-show="isOperator(app)" @click.prevent="openAppEdit(app)"><Icon icon="fa-solid fa-cog" /></div>
           <img :src="API_ORIGIN + app.iconUrl"/>
           <div class="grid-item-label">{{ app.label || app.subdomain || app.fqdn }}</div>
           <div class="apps-progress" v-show="isOperator(app)">
@@ -63,7 +65,7 @@
                 <Button tool v-if="slotProps.manifest.addons.localstorage" :href="'/filemanager.html#/home/app/' + slotProps.id" target="_blank" v-tooltip="$t('app.filemanagerActionTooltip')" icon="fas fa-folder"></Button>
               </ButtonGroup>
 
-              <Button tool :href="`#/app/${slotProps.id}/info`" icon="fa-solid fa-cog"></Button>
+              <Button tool @click="openAppEdit(slotProps)" icon="fa-solid fa-cog"></Button>
             </div>
           </template>
         </TableView>
@@ -89,15 +91,18 @@
 
 <script>
 
-import { Button, ButtonGroup, Icon, ProgressBar, TableView, TextInput } from 'pankow';
+import { Button, ButtonGroup, Icon, TableView, TextInput } from 'pankow';
 
 import { APP_TYPES, HSTATES, ISTATES, RSTATES } from '../constants.js';
 import AppsModel from '../models/AppsModel.js';
+import ApplinksModel from '../models/ApplinksModel.js';
+import ApplinkDialog from './ApplinkDialog.vue';
 
 const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
 const accessToken = localStorage.token;
 
 const appsModel = AppsModel.create(API_ORIGIN, accessToken);
+const applinksModel = ApplinksModel.create(API_ORIGIN, accessToken);
 
 const VIEW_TYPE = {
   LIST: 'list',
@@ -109,10 +114,10 @@ let refreshInterval;
 export default {
   name: 'AppsView',
   components: {
+    ApplinkDialog,
     Button,
     ButtonGroup,
     Icon,
-    ProgressBar,
     TableView,
     TextInput,
   },
@@ -147,7 +152,7 @@ export default {
           sort: true
         },
         actions: {}
-      }
+      },
     };
   },
   computed: {
@@ -155,14 +160,15 @@ export default {
       return this.apps.filter(a => {
         return a.fqdn.indexOf(this.filter) !== -1;
       });
-    }
+    },
   },
   methods: {
     installationStateLabel: AppsModel.installationStateLabel,
     installationActive: AppsModel.installationActive,
     appProgressMessage: AppsModel.appProgressMessage,
-    openAppInfo(app) {
-      window.location.href = `#/app/${app.id}/info`;
+    openAppEdit(app) {
+      if (app.type === APP_TYPES.LINK) this.$refs.applinkDialog.open(app);
+      else window.location.href = `#/app/${app.id}/info`;
     },
     onOpenApp(app, event) {
       function stopEvent() {
@@ -193,7 +199,24 @@ export default {
       return app.accessLevel === 'operator' || app.accessLevel === 'admin';
     },
     async refreshApps() {
-      this.apps = await appsModel.list();
+      const apps = await appsModel.list();
+      const applinks = await applinksModel.list();
+
+      // amend properties to mimick full app
+      for (const applink of applinks) {
+        applink.type = APP_TYPES.LINK;
+        applink.fqdn = applink.upstreamUri;
+        applink.manifest = { addons: {}};
+        applink.installationState = ISTATES.INSTALLED;
+        applink.runState = RSTATES.RUNNING;
+        applink.health = HSTATES.HEALTHY;
+        applink.iconUrl = `/api/v1/applinks/${applink.id}/icon?access_token=${accessToken}&ts=${applink.ts}`;
+        applink.accessLevel = this.$root.profile.isAtLeastAdmin ? 'admin' : 'user';
+
+        apps.push(applink);
+      }
+
+      this.apps = apps;
     },
     toggleView() {
       this.viewType = this.viewType === VIEW_TYPE.LIST ? VIEW_TYPE.GRID : VIEW_TYPE.LIST;
@@ -201,7 +224,8 @@ export default {
     },
   },
   async mounted() {
-    this.apps = await appsModel.list();
+    await this.refreshApps();
+
     this.ready = true;
 
     refreshInterval = setInterval(this.refreshApps, 5000);