From 85af31dc4e70d3e84f590c3ec2f79bdbb30a265d Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Mon, 28 Sep 2020 19:14:36 -0700
Subject: [PATCH 01/24] added separate buttons for purging and added snack for
 number of items deleted and space reclaimed

---
 backend/api/actions/apps.py                   |   7 +-
 backend/api/routers/app_settings.py           |   6 +-
 backend/api/utils.py                          |   4 +-
 .../src/components/serverSettings/Prune.vue   | 116 ++++++++++++++++++
 .../serverSettings/ServerSettingsNav.vue      |   4 +
 frontend/src/router/index.js                  |   6 +
 frontend/src/store/modules/snackbar.js        |   7 ++
 7 files changed, 144 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/serverSettings/Prune.vue

diff --git a/backend/api/actions/apps.py b/backend/api/actions/apps.py
index 7c4f8d1c..e99f77a6 100644
--- a/backend/api/actions/apps.py
+++ b/backend/api/actions/apps.py
@@ -159,4 +159,9 @@ def prune_images():
     deleted_everything.update(deleted_volumes)
     deleted_everything.update(deleted_images)
     
-    return deleted_everything
\ No newline at end of file
+    return deleted_everything
+def prune_resources(resource):
+    dclient = docker.from_env()
+    action = getattr(dclient, resource)
+    deleted_resource = action.prune()
+    return deleted_resource
\ No newline at end of file
diff --git a/backend/api/routers/app_settings.py b/backend/api/routers/app_settings.py
index c0093039..20a2b661 100644
--- a/backend/api/routers/app_settings.py
+++ b/backend/api/routers/app_settings.py
@@ -37,6 +37,6 @@ def export_settings(db: Session = Depends(get_db)):
 def import_settings(db: Session = Depends(get_db), upload: UploadFile = File(...)):
     return crud.import_settings(db=db, upload=upload)
 
-@router.get("/prune", dependencies=[Depends(get_active_user)])
-def prune_images():
-    return apps.prune_images()
\ No newline at end of file
+@router.get("/prune/{resource}", dependencies=[Depends(get_active_user)])
+def prune_resources(resource: str):
+    return apps.prune_resources(resource)
\ No newline at end of file
diff --git a/backend/api/utils.py b/backend/api/utils.py
index b0878b9e..0ce815ed 100644
--- a/backend/api/utils.py
+++ b/backend/api/utils.py
@@ -49,7 +49,7 @@ def conv_ports2dict(data: List[str]) -> List[Dict[str, str]]:
         for port_data in data:
             for label, port in port_data.items():
                 if not re.match(REGEXP_PORT_ASSIGN, port, flags=re.IGNORECASE):
-                    raise ValueError('Malformed port assignment.')
+                    raise HTTPException(status_code=500, detail='Malformed port assignment.'+port_data)
 
                 hport, cport = None, port
                 if delim in cport:
@@ -65,7 +65,7 @@ def conv_ports2dict(data: List[str]) -> List[Dict[str, str]]:
         portlst = []
         for port_data in data:
             if not re.match(REGEXP_PORT_ASSIGN, port_data, flags=re.IGNORECASE):
-                raise ValueError('Malformed port assignment.')
+                raise HTTPException(status_code=500, detail='Malformed port assignment.'+port_data)
 
             hport, cport = None, port_data
             if delim in cport:
diff --git a/frontend/src/components/serverSettings/Prune.vue b/frontend/src/components/serverSettings/Prune.vue
new file mode 100644
index 00000000..582a5a0a
--- /dev/null
+++ b/frontend/src/components/serverSettings/Prune.vue
@@ -0,0 +1,116 @@
+<template>
+  <v-card>
+    <v-card-title class="subheading warning font-weight-bold"
+      >Prune</v-card-title
+    >
+    <v-card-text class="mt-2"
+      >Delete unused images, volumes, networks, and containers.</v-card-text
+    >
+    <v-btn
+      class="mx-5 mb-5"
+      color="warning"
+      @click="prune((resource = 'images'))"
+    >
+      Prune Images
+    </v-btn>
+    <v-btn
+      class="mx-5 mb-5"
+      color="warning"
+      @click="prune((resource = 'networks'))"
+    >
+      Prune Networks
+    </v-btn>
+    <v-btn
+      class="mx-5 mb-5"
+      color="warning"
+      @click="prune((resource = 'volumes'))"
+    >
+      Prune Volumes
+    </v-btn>
+    <v-dialog max-width="290" v-model="containerDialog">
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn class="mx-5 mb-5" color="warning" v-bind="attrs" v-on="on">
+          Prune Containers
+        </v-btn>
+      </template>
+      <v-card>
+        <v-card-title>
+          Prune Containers
+        </v-card-title>
+        <v-card-text>
+          This will remove all stopped containers. Please make sure this is what
+          you want to do before continuing.
+        </v-card-text>
+        <v-card-actions color="background">
+          <v-spacer></v-spacer>
+          <v-btn @click="containerDialog = false">Cancel</v-btn>
+          <v-btn
+            color="red"
+            @click="
+              containerDialog = false;
+              prune((resource = 'containers'));
+            "
+            >Continue</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-card>
+</template>
+
+<script>
+import axios from "axios";
+import { mapMutations } from "vuex";
+export default {
+  data() {
+    return {
+      containerDialog: false,
+    };
+  },
+  methods: {
+    ...mapMutations({
+      setMessage: "snackbar/setMessage",
+      setErr: "snackbar/setErr",
+    }),
+    formatBytes(bytes) {
+      if (bytes === 0) return "0 Bytes";
+      const decimals = 2;
+      const k = 1024;
+      const dm = decimals < 0 ? 0 : decimals;
+      const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+    },
+    prune(resource) {
+      axios({
+        url: "/api/settings/prune/" + resource,
+        method: "GET",
+        responseType: "text/json",
+      })
+        .then((response) => {
+          console.log(response.data);
+          let action = Object.keys(response.data)[0]
+          console.log(action)
+          if (response.data[action] != null) {
+            console.log(response.data[action].length)
+              var deletedNumber = response.data[action].length
+          } else {
+              deletedNumber = '0'
+          }
+          this.setMessage(
+            deletedNumber +
+              " " +
+              action +
+              ". Space Reclaimed: " +
+              this.formatBytes(response.data.SpaceReclaimed)
+          );
+        })
+        .catch((err) => {
+          this.setErr(err);
+        });
+    },
+  },
+};
+</script>
diff --git a/frontend/src/components/serverSettings/ServerSettingsNav.vue b/frontend/src/components/serverSettings/ServerSettingsNav.vue
index e52e56f8..e25920c1 100644
--- a/frontend/src/components/serverSettings/ServerSettingsNav.vue
+++ b/frontend/src/components/serverSettings/ServerSettingsNav.vue
@@ -8,6 +8,10 @@
         <v-icon left class="mr-1">mdi-view-list-outline</v-icon>Template
         Variables
       </v-tab>
+      <v-tab class="text-left" :to="{ path: 'prune' }">
+        <v-icon left class="mr-1">mdi-trash-can-outline</v-icon>
+        Prune
+      </v-tab>
     </v-tabs>
   </div>
 </template>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 1b2d1954..88e3f4ee 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -20,6 +20,7 @@ import UserInfo from "../components/userSettings/UserInfo.vue";
 import ServerSettings from "../views/ServerSettings.vue";
 import ServerInfo from "../components/serverSettings/ServerInfo.vue";
 import ServerVariables from "../components/serverSettings/ServerVariables.vue";
+import Prune from "../components/serverSettings/Prune.vue";
 
 Vue.use(VueRouter);
 
@@ -127,6 +128,11 @@ const routes = [
         name: "Template Variables",
         path: "templateVariables",
         component: ServerVariables
+      },
+      {
+        name: "Prune",
+        path: "prune",
+        component: Prune
       }
     ]
   },
diff --git a/frontend/src/store/modules/snackbar.js b/frontend/src/store/modules/snackbar.js
index 45cc7e1a..32136867 100644
--- a/frontend/src/store/modules/snackbar.js
+++ b/frontend/src/store/modules/snackbar.js
@@ -29,6 +29,13 @@ const mutations = {
     state.btnColor = "black";
     state.visible = true;
   },
+  setMessage(state, message) {
+    state.content = message;
+    state.bottom = true;
+    state.color = "primary";
+    state.btnColor = "black";
+    state.visible = true;
+  },
   clearSnack(state) {
     state.content = "";
     (state.bottom = false), (state.btnColor = "");

From 8313a13e636916016daca76732ff99c98950b969 Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Tue, 29 Sep 2020 09:19:41 -0700
Subject: [PATCH 02/24] removed purge from serverinfo

---
 .../components/serverSettings/ServerInfo.vue  | 24 -------------------
 1 file changed, 24 deletions(-)

diff --git a/frontend/src/components/serverSettings/ServerInfo.vue b/frontend/src/components/serverSettings/ServerInfo.vue
index 9a6a1a67..13553504 100644
--- a/frontend/src/components/serverSettings/ServerInfo.vue
+++ b/frontend/src/components/serverSettings/ServerInfo.vue
@@ -47,17 +47,6 @@
         >Export
       </v-btn>
     </v-card>
-    <v-card>
-      <v-card-title class="subheading warning font-weight-bold"
-        >Prune</v-card-title
-      >
-      <v-card-text class="mt-2"
-        >Delete unused images, volumes, and networks.</v-card-text
-      >
-      <v-btn class="mx-5 mb-5" color="warning" @click="prune_images()">
-        Prune
-      </v-btn>
-    </v-card>
   </v-card>
 </template>
 
@@ -80,19 +69,6 @@ export default {
       setSuccess: "snackbar/setSuccess",
       setErr: "snackbar/setErr"
     }),
-    prune_images() {
-      axios({
-        url: "/api/settings/prune",
-        method: "GET",
-        responseType: "text/json"
-      })
-        .then(response => {
-          this.setSuccess(response);
-        })
-        .catch(err => {
-          this.setErr(err);
-        });
-    },
     export_settings() {
       axios({
         url: "/api/settings/export",

From 1d920f5d7e350d2d6c4c317f3b982a63f2fd2cd1 Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Tue, 29 Sep 2020 14:23:26 -0700
Subject: [PATCH 03/24] added updated button

---
 backend/api/actions/apps.py                   |  28 +++++
 backend/api/routers/apps.py                   |   3 +
 .../applications/ApplicationsList.vue         | 103 ++++++++++--------
 3 files changed, 87 insertions(+), 47 deletions(-)

diff --git a/backend/api/actions/apps.py b/backend/api/actions/apps.py
index e99f77a6..4d6cd5f1 100644
--- a/backend/api/actions/apps.py
+++ b/backend/api/actions/apps.py
@@ -148,6 +148,34 @@ def app_action(app_name, action):
     apps_list = get_apps()
     return apps_list
 
+def app_update(app_name):
+    dclient = docker.from_env()
+    old = dclient.containers.get(app_name)
+    properties = {
+        'name': old.name,
+        'hostname': old.attrs['Config']['Hostname'],
+        'user': old.attrs['Config']['User'],
+        'detach': True,
+        'domainname': old.attrs['Config']['Domainname'],
+        'tty': old.attrs['Config']['Tty'],
+        'ports': None if not old.attrs['Config'].get('ExposedPorts') else {
+            k:v if v else None  for k,v in old.attrs['Config']['ExposedPorts'].items()
+        }, 
+        'volumes': None if not old.attrs['Config'].get('Volumes') else [
+            v for v in old.attrs['Config']['Volumes'].keys()
+        ],
+        'working_dir': old.attrs['Config']['WorkingDir'],
+        'labels': old.attrs['Config']['Labels'],
+        'entrypoint': old.attrs['Config']['Entrypoint'],
+        'environment': old.attrs['Config']['Env'],
+        'healthcheck': old.attrs['Config'].get('Healthcheck', None)
+    }
+    dclient.images.pull(old.image.tags[0])
+    old.stop()
+    old.remove()
+    dclient.containers.run(old.image.tags[0], old.attrs['Config']['Cmd'], **properties)
+    return get_apps()
+
 def prune_images():
     dclient = docker.from_env()
     deleted_everything = {}
diff --git a/backend/api/routers/apps.py b/backend/api/routers/apps.py
index d8be06a9..87048950 100644
--- a/backend/api/routers/apps.py
+++ b/backend/api/routers/apps.py
@@ -51,6 +51,9 @@ def get_container_processes(app_name):
 def get_container_logs(app_name):
     return actions.get_app_logs(app_name=app_name)
 
+@router.get("/{app_name}/update", dependencies=[Depends(get_active_user)])
+def update_container(app_name):
+    return actions.app_update(app_name)
 
 @router.get("/{app_name}/{action}", dependencies=[Depends(get_active_user)])
 def container_actions(app_name, action):
diff --git a/frontend/src/components/applications/ApplicationsList.vue b/frontend/src/components/applications/ApplicationsList.vue
index 4ed287ac..d68afef0 100644
--- a/frontend/src/components/applications/ApplicationsList.vue
+++ b/frontend/src/components/applications/ApplicationsList.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-  <div class="apps-list component">
+  <div class="apps-list component" style="max-width: 90%">
     <v-card>
       <v-fade-transition>
         <v-progress-linear
@@ -21,6 +21,8 @@
         ></v-text-field>
       </v-card-title>
       <v-data-table
+        style="width: 99%"
+        class="mx-auto"
         :headers="headers"
         :items="apps"
         :items-per-page="10"
@@ -62,6 +64,15 @@
                   <v-list-item-title>Restart</v-list-item-title>
                 </v-list-item>
                 <v-divider />
+                <v-list-item
+                  @click="AppAction({ Name: item.name, Action: 'update' })"
+                >
+                  <v-list-item-icon>
+                    <v-icon>mdi-update</v-icon>
+                  </v-list-item-icon>
+                  <v-list-item-title>Update</v-list-item-title>
+                </v-list-item>
+                <v-divider />
                 <v-list-item
                   @click="AppAction({ Name: item.name, Action: 'kill' })"
                 >
@@ -90,47 +101,36 @@
         </template>
         <template v-slot:item.ports="{ item }">
           <ins v-for="(port, index) in convPorts(item.ports)" :key="index">
-            <v-tooltip top transition="scale-transition">
-              <template v-slot:activator="{ on, attrs }">
-                <v-chip
-                  v-on="on"
-                  v-bind="attrs"
-                  class="mx-1"
-                  v-if="port.hip == '0.0.0.0'"
-                  color="indigo darken-2"
-                  label
-                  small
-                  :href="'http://' + host_ip + ':' + port.hport"
-                  target="_blank"
-                  ><v-icon small class="mr-1">mdi-link-variant</v-icon
-                  >{{
-                    item.Config.Labels[`local.yacht.port.${port.hport}`] ||
-                      port.hport
-                  }}</v-chip
-                >
-                <v-chip
-                  v-on="on"
-                  v-bind="attrs"
-                  class="ma-1"
-                  v-else
-                  color="indigo darken-2"
-                  label
-                  small
-                  :href="'http://' + port.hip + ':' + port.hport"
-                  target="_blank"
-                  ><v-icon small class="mr-1">mdi-link-variant</v-icon
-                  >{{ item.Config.Labels || port.hport }}</v-chip
-                >
-              </template>
-              <span>
-                {{ port.hport }}
-              </span>
-            </v-tooltip>
+            <v-chip
+              class="mx-1"
+              v-if="port.hip == '0.0.0.0'"
+              color="indigo darken-2"
+              label
+              small
+              :href="'http://' + host_ip + ':' + port.hport"
+              target="_blank"
+              ><v-icon small class="mr-1">mdi-link-variant</v-icon
+              >{{ port.hport }}</v-chip
+            >
+            <v-chip
+              class="ma-1"
+              v-else
+              color="indigo darken-2"
+              label
+              small
+              :href="'http://' + port.hip + ':' + port.hport"
+              target="_blank"
+              ><v-icon small class="mr-1">mdi-link-variant</v-icon
+              >{{ port.hport }}</v-chip
+            >
           </ins>
         </template>
         <template v-slot:item.image="{ item }">
           <span class="ImageName">{{ item.Config.Image }}</span>
         </template>
+        <template v-slot:item.created="{item}">
+          <span class="CreatedAt"> {{ item.Created | formatDate }} </span>
+        </template>
       </v-data-table>
     </v-card>
   </div>
@@ -150,32 +150,36 @@ export default {
           value: "name",
           sortable: true,
           align: "start",
-          width: "30%"
+          width: "30%",
         },
         {
           text: "Status",
           value: "status",
           sortable: true,
-          width: "10%"
+          width: "10%",
         },
         {
           text: "Image",
           value: "image",
-          sortable: true
+          sortable: true,
         },
         {
           text: "Ports",
           value: "ports",
           sortable: true,
-          width: "30%"
+        },
+        {
+          text: "Created At",
+          value: "created",
+          sortable: true,
         }
-      ]
+      ],
     };
   },
   methods: {
     ...mapActions({
       readApps: "apps/readApps",
-      AppAction: "apps/AppAction"
+      AppAction: "apps/AppAction",
     }),
     handleRowClick(appName) {
       this.$router.push({ path: `/apps${appName.Name}/info` });
@@ -195,14 +199,14 @@ export default {
     },
     refresh() {
       this.readApps();
-    }
+    },
   },
   computed: {
-    ...mapState("apps", ["apps", "isLoading"])
+    ...mapState("apps", ["apps", "isLoading"]),
   },
   mounted() {
     this.readApps();
-  }
+  },
 };
 </script>
 
@@ -215,9 +219,14 @@ tr:hover {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+.CreatedAt{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .namecell {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-</style>
+</style>
\ No newline at end of file

From a788ffffcab568560fe9cf6315fdb335e202212d Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Tue, 29 Sep 2020 14:30:16 -0700
Subject: [PATCH 04/24] added update button

---
 .../applications/ApplicationsList.vue         | 58 ++++++++++++-------
 1 file changed, 36 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/applications/ApplicationsList.vue b/frontend/src/components/applications/ApplicationsList.vue
index d68afef0..18d8de41 100644
--- a/frontend/src/components/applications/ApplicationsList.vue
+++ b/frontend/src/components/applications/ApplicationsList.vue
@@ -101,28 +101,42 @@
         </template>
         <template v-slot:item.ports="{ item }">
           <ins v-for="(port, index) in convPorts(item.ports)" :key="index">
-            <v-chip
-              class="mx-1"
-              v-if="port.hip == '0.0.0.0'"
-              color="indigo darken-2"
-              label
-              small
-              :href="'http://' + host_ip + ':' + port.hport"
-              target="_blank"
-              ><v-icon small class="mr-1">mdi-link-variant</v-icon
-              >{{ port.hport }}</v-chip
-            >
-            <v-chip
-              class="ma-1"
-              v-else
-              color="indigo darken-2"
-              label
-              small
-              :href="'http://' + port.hip + ':' + port.hport"
-              target="_blank"
-              ><v-icon small class="mr-1">mdi-link-variant</v-icon
-              >{{ port.hport }}</v-chip
-            >
+            <v-tooltip top transition="scale-transition">
+              <template v-slot:activator="{ on, attrs }">
+                <v-chip
+                  v-on="on"
+                  v-bind="attrs"
+                  class="mx-1"
+                  v-if="port.hip == '0.0.0.0'"
+                  color="indigo darken-2"
+                  label
+                  small
+                  :href="'http://' + host_ip + ':' + port.hport"
+                  target="_blank"
+                  ><v-icon small class="mr-1">mdi-link-variant</v-icon
+                  >{{
+                    item.Config.Labels[`local.yacht.port.${port.hport}`] ||
+                      port.hport
+                  }}</v-chip
+                >
+                <v-chip
+                  v-on="on"
+                  v-bind="attrs"
+                  class="ma-1"
+                  v-else
+                  color="indigo darken-2"
+                  label
+                  small
+                  :href="'http://' + port.hip + ':' + port.hport"
+                  target="_blank"
+                  ><v-icon small class="mr-1">mdi-link-variant</v-icon
+                  >{{ item.Config.Labels[`local.yacht.port.${port.hport}`] || port.hport }}</v-chip
+                >
+              </template>
+              <span>
+                {{ port.hport }}
+              </span>
+            </v-tooltip>
           </ins>
         </template>
         <template v-slot:item.image="{ item }">

From 846433538eb9901e759af83444bc9be874724f7c Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Tue, 29 Sep 2020 15:32:30 -0700
Subject: [PATCH 05/24] disable updating yacht from yacht

---
 frontend/src/components/applications/ApplicationsList.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/applications/ApplicationsList.vue b/frontend/src/components/applications/ApplicationsList.vue
index 18d8de41..2beab00b 100644
--- a/frontend/src/components/applications/ApplicationsList.vue
+++ b/frontend/src/components/applications/ApplicationsList.vue
@@ -65,6 +65,7 @@
                 </v-list-item>
                 <v-divider />
                 <v-list-item
+                  v-if="!item.Config.Image.includes('selfhostedpro/yacht')"
                   @click="AppAction({ Name: item.name, Action: 'update' })"
                 >
                   <v-list-item-icon>

From a6bcba0e81988762fc1028e1b8a39707cb70e26e Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Wed, 30 Sep 2020 10:17:59 -0700
Subject: [PATCH 06/24] added self update ability

---
 backend/api/actions/apps.py                   | 16 +++++
 backend/api/routers/app_settings.py           |  6 +-
 .../serverSettings/ServerSettingsNav.vue      |  4 ++
 .../serverSettings/ServerUpdate.vue           | 62 +++++++++++++++++++
 frontend/src/router/index.js                  |  6 ++
 5 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/serverSettings/ServerUpdate.vue

diff --git a/backend/api/actions/apps.py b/backend/api/actions/apps.py
index 4d6cd5f1..65229037 100644
--- a/backend/api/actions/apps.py
+++ b/backend/api/actions/apps.py
@@ -5,6 +5,7 @@
 from ..utils import *
 
 from datetime import datetime
+import subprocess
 import docker
 
 
@@ -176,6 +177,21 @@ def app_update(app_name):
     dclient.containers.run(old.image.tags[0], old.attrs['Config']['Cmd'], **properties)
     return get_apps()
 
+def update_self():
+    dclient = docker.from_env()
+    bash_command = "head -1 /proc/self/cgroup|cut -d/ -f3"
+    yacht_id = subprocess.check_output(['bash','-c', bash_command]).decode('UTF-8')
+    print(yacht_id)
+    env = ['CONTAINER_ID='+yacht_id]
+    volumes ={'/var/run/docker.sock': {'bind':'/var/run/docker.sock', 'mode': 'rw'}}
+    dclient.containers.run(
+        image='selfhostedpro/docker-updater:latest',
+        remove=True,
+        environment=env,
+        volumes=volumes
+    )
+    return get_apps()
+
 def prune_images():
     dclient = docker.from_env()
     deleted_everything = {}
diff --git a/backend/api/routers/app_settings.py b/backend/api/routers/app_settings.py
index 20a2b661..0544a992 100644
--- a/backend/api/routers/app_settings.py
+++ b/backend/api/routers/app_settings.py
@@ -39,4 +39,8 @@ def import_settings(db: Session = Depends(get_db), upload: UploadFile = File(...
 
 @router.get("/prune/{resource}", dependencies=[Depends(get_active_user)])
 def prune_resources(resource: str):
-    return apps.prune_resources(resource)
\ No newline at end of file
+    return apps.prune_resources(resource)
+
+@router.get('/update', dependencies=[Depends(get_active_user)])
+def update_self():
+    return apps.update_self()
\ No newline at end of file
diff --git a/frontend/src/components/serverSettings/ServerSettingsNav.vue b/frontend/src/components/serverSettings/ServerSettingsNav.vue
index e25920c1..289d4657 100644
--- a/frontend/src/components/serverSettings/ServerSettingsNav.vue
+++ b/frontend/src/components/serverSettings/ServerSettingsNav.vue
@@ -12,6 +12,10 @@
         <v-icon left class="mr-1">mdi-trash-can-outline</v-icon>
         Prune
       </v-tab>
+      <v-tab class="text-left" :to="{ path: 'update' }">
+        <v-icon left class="mr-1">mdi-update</v-icon>
+        Update
+      </v-tab>
     </v-tabs>
   </div>
 </template>
diff --git a/frontend/src/components/serverSettings/ServerUpdate.vue b/frontend/src/components/serverSettings/ServerUpdate.vue
new file mode 100644
index 00000000..37b816f1
--- /dev/null
+++ b/frontend/src/components/serverSettings/ServerUpdate.vue
@@ -0,0 +1,62 @@
+<template>
+  <v-card>
+    <v-card-title class="subheading primary font-weight-bold"
+      >Prune</v-card-title
+    >
+    <v-card-text class="mt-2"
+      >Update Yacht to the latest version. <br/> Note: This will kill the running version of Yacht, Pull the latest version of the current tag, and run that with the same settings that are currently set.</v-card-text
+    >
+    <v-btn
+      class="mx-5 mb-5"
+      color="primary"
+      @click="update()"
+    >
+      Update Yacht
+    </v-btn>
+  </v-card>
+</template>
+
+<script>
+import axios from "axios";
+import { mapMutations } from "vuex";
+export default {
+  data() {
+    return {
+      containerDialog: false,
+    };
+  },
+  methods: {
+    ...mapMutations({
+      setMessage: "snackbar/setMessage",
+      setErr: "snackbar/setErr",
+    }),
+    formatBytes(bytes) {
+      if (bytes === 0) return "0 Bytes";
+      const decimals = 2;
+      const k = 1024;
+      const dm = decimals < 0 ? 0 : decimals;
+      const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+    },
+    update() {
+      axios({
+        url: "/api/settings/update",
+        method: "GET",
+        responseType: "text/json",
+      })
+        .then((response) => {
+          console.log(response.data);
+          this.setMessage(
+            "Yacht is updating now"
+          );
+        })
+        .catch((err) => {
+          this.setErr(err);
+        });
+    },
+  },
+};
+</script>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 88e3f4ee..5cec6e42 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -21,6 +21,7 @@ import ServerSettings from "../views/ServerSettings.vue";
 import ServerInfo from "../components/serverSettings/ServerInfo.vue";
 import ServerVariables from "../components/serverSettings/ServerVariables.vue";
 import Prune from "../components/serverSettings/Prune.vue";
+import ServerUpdate from "../components/serverSettings/ServerUpdate.vue";
 
 Vue.use(VueRouter);
 
@@ -133,6 +134,11 @@ const routes = [
         name: "Prune",
         path: "prune",
         component: Prune
+      },
+      {
+        name: "Update Yacht",
+        path: "update",
+        component: ServerUpdate
       }
     ]
   },

From 6d34400777f1592d0dc33ad76f07e516c8e6666f Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Wed, 30 Sep 2020 12:49:50 -0700
Subject: [PATCH 07/24] fixed update ports

---
 backend/api/actions/apps.py |  4 +---
 backend/api/utils.py        | 10 ++++++++++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/backend/api/actions/apps.py b/backend/api/actions/apps.py
index 65229037..d41dd72b 100644
--- a/backend/api/actions/apps.py
+++ b/backend/api/actions/apps.py
@@ -159,9 +159,7 @@ def app_update(app_name):
         'detach': True,
         'domainname': old.attrs['Config']['Domainname'],
         'tty': old.attrs['Config']['Tty'],
-        'ports': None if not old.attrs['Config'].get('ExposedPorts') else {
-            k:v if v else None  for k,v in old.attrs['Config']['ExposedPorts'].items()
-        }, 
+        'ports': get_update_ports(old.ports), 
         'volumes': None if not old.attrs['Config'].get('Volumes') else [
             v for v in old.attrs['Config']['Volumes'].keys()
         ],
diff --git a/backend/api/utils.py b/backend/api/utils.py
index 0ce815ed..ee6d1e62 100644
--- a/backend/api/utils.py
+++ b/backend/api/utils.py
@@ -337,3 +337,13 @@ async def get_app_stats(app_name):
                 "mem_percent": (mem_current / mem_total) * 100.0,
             }
             yield json.dumps(full_stats)
+
+def get_update_ports(ports):
+    if ports:
+        portdir={}
+        for hport in ports:
+            for d in ports[hport]:
+                portdir.update({str(hport): d.get('HostPort') })
+        return portdir
+    else:
+        return None
\ No newline at end of file

From 7cf9c0b5fa584918da52b5b99d318d00a8cc40e6 Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Wed, 30 Sep 2020 13:38:17 -0700
Subject: [PATCH 08/24] changed to using watchtower from custom solution

---
 backend/api/actions/apps.py | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/backend/api/actions/apps.py b/backend/api/actions/apps.py
index d41dd72b..b3c2c4ae 100644
--- a/backend/api/actions/apps.py
+++ b/backend/api/actions/apps.py
@@ -180,12 +180,11 @@ def update_self():
     bash_command = "head -1 /proc/self/cgroup|cut -d/ -f3"
     yacht_id = subprocess.check_output(['bash','-c', bash_command]).decode('UTF-8')
     print(yacht_id)
-    env = ['CONTAINER_ID='+yacht_id]
     volumes ={'/var/run/docker.sock': {'bind':'/var/run/docker.sock', 'mode': 'rw'}}
     dclient.containers.run(
-        image='selfhostedpro/docker-updater:latest',
+        image='containrrr/watchtower:latest',
+        command='--run-once '+yacht_id,
         remove=True,
-        environment=env,
         volumes=volumes
     )
     return get_apps()

From 873efdaea4249588f7df8595aed8f8b0b0213029 Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Wed, 30 Sep 2020 15:02:07 -0700
Subject: [PATCH 09/24] changed updating to watchtower

---
 backend/api/actions/apps.py | 34 ++++++++++------------------------
 1 file changed, 10 insertions(+), 24 deletions(-)

diff --git a/backend/api/actions/apps.py b/backend/api/actions/apps.py
index b3c2c4ae..a4e5afe0 100644
--- a/backend/api/actions/apps.py
+++ b/backend/api/actions/apps.py
@@ -152,38 +152,24 @@ def app_action(app_name, action):
 def app_update(app_name):
     dclient = docker.from_env()
     old = dclient.containers.get(app_name)
-    properties = {
-        'name': old.name,
-        'hostname': old.attrs['Config']['Hostname'],
-        'user': old.attrs['Config']['User'],
-        'detach': True,
-        'domainname': old.attrs['Config']['Domainname'],
-        'tty': old.attrs['Config']['Tty'],
-        'ports': get_update_ports(old.ports), 
-        'volumes': None if not old.attrs['Config'].get('Volumes') else [
-            v for v in old.attrs['Config']['Volumes'].keys()
-        ],
-        'working_dir': old.attrs['Config']['WorkingDir'],
-        'labels': old.attrs['Config']['Labels'],
-        'entrypoint': old.attrs['Config']['Entrypoint'],
-        'environment': old.attrs['Config']['Env'],
-        'healthcheck': old.attrs['Config'].get('Healthcheck', None)
-    }
-    dclient.images.pull(old.image.tags[0])
-    old.stop()
-    old.remove()
-    dclient.containers.run(old.image.tags[0], old.attrs['Config']['Cmd'], **properties)
+    volumes ={'/var/run/docker.sock': {'bind':'/var/run/docker.sock', 'mode': 'rw'}}
+    dclient.containers.run(
+        image='containrrr/watchtower:latest',
+        command='--run-once '+old.name,
+        remove=True,
+        volumes=volumes
+    )
     return get_apps()
 
 def update_self():
     dclient = docker.from_env()
     bash_command = "head -1 /proc/self/cgroup|cut -d/ -f3"
-    yacht_id = subprocess.check_output(['bash','-c', bash_command]).decode('UTF-8')
-    print(yacht_id)
+    yacht_id = subprocess.check_output(['bash','-c', bash_command]).decode('UTF-8').strip()
+    yacht = dclient.containers.get(yacht_id)
     volumes ={'/var/run/docker.sock': {'bind':'/var/run/docker.sock', 'mode': 'rw'}}
     dclient.containers.run(
         image='containrrr/watchtower:latest',
-        command='--run-once '+yacht_id,
+        command='--run-once '+yacht.name,
         remove=True,
         volumes=volumes
     )

From 3d6c91706d97aee42f2c7780131049b11342e968 Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Wed, 30 Sep 2020 15:17:30 -0700
Subject: [PATCH 10/24] changed wording and attach to the running instance

---
 backend/api/actions/apps.py                             | 2 ++
 frontend/src/components/serverSettings/ServerUpdate.vue | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/backend/api/actions/apps.py b/backend/api/actions/apps.py
index a4e5afe0..6022779f 100644
--- a/backend/api/actions/apps.py
+++ b/backend/api/actions/apps.py
@@ -156,6 +156,7 @@ def app_update(app_name):
     dclient.containers.run(
         image='containrrr/watchtower:latest',
         command='--run-once '+old.name,
+        detach=False,
         remove=True,
         volumes=volumes
     )
@@ -170,6 +171,7 @@ def update_self():
     dclient.containers.run(
         image='containrrr/watchtower:latest',
         command='--run-once '+yacht.name,
+        detach=False,
         remove=True,
         volumes=volumes
     )
diff --git a/frontend/src/components/serverSettings/ServerUpdate.vue b/frontend/src/components/serverSettings/ServerUpdate.vue
index 37b816f1..fdf61296 100644
--- a/frontend/src/components/serverSettings/ServerUpdate.vue
+++ b/frontend/src/components/serverSettings/ServerUpdate.vue
@@ -1,10 +1,10 @@
 <template>
   <v-card>
     <v-card-title class="subheading primary font-weight-bold"
-      >Prune</v-card-title
+      >Update</v-card-title
     >
     <v-card-text class="mt-2"
-      >Update Yacht to the latest version. <br/> Note: This will kill the running version of Yacht, Pull the latest version of the current tag, and run that with the same settings that are currently set.</v-card-text
+      >Update Yacht to the latest version. <br/> Note: This will spin up a run-once watchtower instance and update Yacht. In the process Yacht will be restarted.</v-card-text
     >
     <v-btn
       class="mx-5 mb-5"

From 87b7aeb867be7f555f70959daad20a6f3503cece Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Wed, 30 Sep 2020 15:21:08 -0700
Subject: [PATCH 11/24] attach to the app in a blocking stream until the update
 is done

---
 backend/api/actions/apps.py | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/backend/api/actions/apps.py b/backend/api/actions/apps.py
index 6022779f..fdf86355 100644
--- a/backend/api/actions/apps.py
+++ b/backend/api/actions/apps.py
@@ -157,6 +157,7 @@ def app_update(app_name):
         image='containrrr/watchtower:latest',
         command='--run-once '+old.name,
         detach=False,
+        stream=True,
         remove=True,
         volumes=volumes
     )
@@ -172,6 +173,7 @@ def update_self():
         image='containrrr/watchtower:latest',
         command='--run-once '+yacht.name,
         detach=False,
+        stream=True,
         remove=True,
         volumes=volumes
     )

From 6761a5b7bd6cad1da30bfac224fa86eef53dcf25 Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Wed, 30 Sep 2020 15:37:40 -0700
Subject: [PATCH 12/24] wait until watchtower exits to move on

---
 backend/api/actions/apps.py | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/backend/api/actions/apps.py b/backend/api/actions/apps.py
index fdf86355..356c62ee 100644
--- a/backend/api/actions/apps.py
+++ b/backend/api/actions/apps.py
@@ -5,6 +5,7 @@
 from ..utils import *
 
 from datetime import datetime
+import time
 import subprocess
 import docker
 
@@ -153,14 +154,17 @@ def app_update(app_name):
     dclient = docker.from_env()
     old = dclient.containers.get(app_name)
     volumes ={'/var/run/docker.sock': {'bind':'/var/run/docker.sock', 'mode': 'rw'}}
-    dclient.containers.run(
+    updater = dclient.containers.run(
         image='containrrr/watchtower:latest',
         command='--run-once '+old.name,
-        detach=False,
-        stream=True,
         remove=True,
+        detach=True,
         volumes=volumes
     )
+    print('**** Updating '+old.name+'****')    
+    result = updater.wait(timeout=120)
+    print(result)
+    time.sleep(1)
     return get_apps()
 
 def update_self():
@@ -169,14 +173,17 @@ def update_self():
     yacht_id = subprocess.check_output(['bash','-c', bash_command]).decode('UTF-8').strip()
     yacht = dclient.containers.get(yacht_id)
     volumes ={'/var/run/docker.sock': {'bind':'/var/run/docker.sock', 'mode': 'rw'}}
-    dclient.containers.run(
+    print('**** Updating '+yacht.name+'****')
+    updater = dclient.containers.run(
         image='containrrr/watchtower:latest',
         command='--run-once '+yacht.name,
-        detach=False,
-        stream=True,
         remove=True,
+        detach=True,
         volumes=volumes
     )
+    result = updater.wait(timeout=120)
+    print(result)
+    time.sleep(1)
     return get_apps()
 
 def prune_images():

From d0cc9df805bd69ffe23c29003957c36b4bd8db59 Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Thu, 1 Oct 2020 07:22:34 -0700
Subject: [PATCH 13/24] added self update error handling

---
 backend/api/actions/apps.py                   | 12 ++++++++--
 .../src/components/serverSettings/Prune.vue   | 22 ++++++++++++++----
 .../serverSettings/ServerUpdate.vue           | 23 ++++++++++---------
 3 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/backend/api/actions/apps.py b/backend/api/actions/apps.py
index 356c62ee..544868dc 100644
--- a/backend/api/actions/apps.py
+++ b/backend/api/actions/apps.py
@@ -171,7 +171,15 @@ def update_self():
     dclient = docker.from_env()
     bash_command = "head -1 /proc/self/cgroup|cut -d/ -f3"
     yacht_id = subprocess.check_output(['bash','-c', bash_command]).decode('UTF-8').strip()
-    yacht = dclient.containers.get(yacht_id)
+    try:
+        yacht = dclient.containers.get(yacht_id)
+    except Exception as exc:
+        print(exc)
+        if exc.response.status_code == 404:
+            raise HTTPException(status_code=exc.response.status_code, detail="Unable to get Yacht container ID")
+        else:
+            raise HTTPException(status_code=exc.response.status_code, detail=exc.explanation)
+
     volumes ={'/var/run/docker.sock': {'bind':'/var/run/docker.sock', 'mode': 'rw'}}
     print('**** Updating '+yacht.name+'****')
     updater = dclient.containers.run(
@@ -184,7 +192,7 @@ def update_self():
     result = updater.wait(timeout=120)
     print(result)
     time.sleep(1)
-    return get_apps()
+    return result
 
 def prune_images():
     dclient = docker.from_env()
diff --git a/frontend/src/components/serverSettings/Prune.vue b/frontend/src/components/serverSettings/Prune.vue
index 582a5a0a..abb45d68 100644
--- a/frontend/src/components/serverSettings/Prune.vue
+++ b/frontend/src/components/serverSettings/Prune.vue
@@ -1,5 +1,13 @@
 <template>
   <v-card>
+    <v-fade-transition>
+      <v-progress-linear
+        indeterminate
+        v-if="isLoading"
+        color="primary"
+        bottom
+      />
+    </v-fade-transition>
     <v-card-title class="subheading warning font-weight-bold"
       >Prune</v-card-title
     >
@@ -65,6 +73,7 @@ export default {
   data() {
     return {
       containerDialog: false,
+      isLoading: false,
     };
   },
   methods: {
@@ -84,6 +93,7 @@ export default {
       return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
     },
     prune(resource) {
+      this.isLoading = true;
       axios({
         url: "/api/settings/prune/" + resource,
         method: "GET",
@@ -91,13 +101,13 @@ export default {
       })
         .then((response) => {
           console.log(response.data);
-          let action = Object.keys(response.data)[0]
-          console.log(action)
+          let action = Object.keys(response.data)[0];
+          console.log(action);
           if (response.data[action] != null) {
-            console.log(response.data[action].length)
-              var deletedNumber = response.data[action].length
+            console.log(response.data[action].length);
+            var deletedNumber = response.data[action].length;
           } else {
-              deletedNumber = '0'
+            deletedNumber = "0";
           }
           this.setMessage(
             deletedNumber +
@@ -106,9 +116,11 @@ export default {
               ". Space Reclaimed: " +
               this.formatBytes(response.data.SpaceReclaimed)
           );
+          this.isLoading = false;
         })
         .catch((err) => {
           this.setErr(err);
+          this.isLoading = false;
         });
     },
   },
diff --git a/frontend/src/components/serverSettings/ServerUpdate.vue b/frontend/src/components/serverSettings/ServerUpdate.vue
index fdf61296..859ef0d9 100644
--- a/frontend/src/components/serverSettings/ServerUpdate.vue
+++ b/frontend/src/components/serverSettings/ServerUpdate.vue
@@ -1,5 +1,13 @@
 <template>
   <v-card>
+    <v-fade-transition>
+        <v-progress-linear
+          indeterminate
+          v-if="isLoading"
+          color="primary"
+          bottom
+        />
+      </v-fade-transition>
     <v-card-title class="subheading primary font-weight-bold"
       >Update</v-card-title
     >
@@ -23,6 +31,7 @@ export default {
   data() {
     return {
       containerDialog: false,
+      isLoading: false,
     };
   },
   methods: {
@@ -30,30 +39,22 @@ export default {
       setMessage: "snackbar/setMessage",
       setErr: "snackbar/setErr",
     }),
-    formatBytes(bytes) {
-      if (bytes === 0) return "0 Bytes";
-      const decimals = 2;
-      const k = 1024;
-      const dm = decimals < 0 ? 0 : decimals;
-      const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-
-      const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-      return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
-    },
     update() {
+      this.isLoading = true
       axios({
         url: "/api/settings/update",
         method: "GET",
         responseType: "text/json",
       })
         .then((response) => {
+          this.isLoading = false
           console.log(response.data);
           this.setMessage(
             "Yacht is updating now"
           );
         })
         .catch((err) => {
+          this.isLoading = false
           this.setErr(err);
         });
     },

From fae1da2ce729821a2e3a2fb17e61fc7b49ffd9ba Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Thu, 1 Oct 2020 07:24:21 -0700
Subject: [PATCH 14/24] added app update error handling

---
 backend/api/actions/apps.py | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/backend/api/actions/apps.py b/backend/api/actions/apps.py
index 544868dc..7dbfe760 100644
--- a/backend/api/actions/apps.py
+++ b/backend/api/actions/apps.py
@@ -152,15 +152,28 @@ def app_action(app_name, action):
 
 def app_update(app_name):
     dclient = docker.from_env()
-    old = dclient.containers.get(app_name)
+    try:
+        old = dclient.containers.get(app_name)
+    except Exception as exc:
+        print(exc)
+        if exc.response.status_code == 404:
+            raise HTTPException(status_code=exc.response.status_code, detail="Unable to get container ID")
+        else:
+            raise HTTPException(status_code=exc.response.status_code, detail=exc.explanation)
+
     volumes ={'/var/run/docker.sock': {'bind':'/var/run/docker.sock', 'mode': 'rw'}}
-    updater = dclient.containers.run(
-        image='containrrr/watchtower:latest',
-        command='--run-once '+old.name,
-        remove=True,
-        detach=True,
-        volumes=volumes
-    )
+    try:
+        updater = dclient.containers.run(
+            image='containrrr/watchtower:latest',
+            command='--run-once '+old.name,
+            remove=True,
+            detach=True,
+            volumes=volumes
+        )
+    except Exception as exc:
+        print(exc)
+        raise HTTPException(status_code=exc.response.status_code, detail=exc.explanation)
+    
     print('**** Updating '+old.name+'****')    
     result = updater.wait(timeout=120)
     print(result)

From 24688aba2d7bdbb949ee491e06e505c15cc2cbb6 Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Thu, 1 Oct 2020 09:23:57 -0700
Subject: [PATCH 15/24] working on ability to check for updates

---
 .../components/serverSettings/ServerUpdate.vue    | 15 ++++++++++++---
 frontend/src/store/modules/apps.js                |  1 +
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/serverSettings/ServerUpdate.vue b/frontend/src/components/serverSettings/ServerUpdate.vue
index 859ef0d9..cba75b05 100644
--- a/frontend/src/components/serverSettings/ServerUpdate.vue
+++ b/frontend/src/components/serverSettings/ServerUpdate.vue
@@ -12,7 +12,7 @@
       >Update</v-card-title
     >
     <v-card-text class="mt-2"
-      >Update Yacht to the latest version. <br/> Note: This will spin up a run-once watchtower instance and update Yacht. In the process Yacht will be restarted.</v-card-text
+      >Update Yacht to the latest version. <br/> Note: This will spin up a run-once watchtower instance and update Yacht. In the process Yacht will be restarted and you will be logged out.</v-card-text
     >
     <v-btn
       class="mx-5 mb-5"
@@ -26,7 +26,7 @@
 
 <script>
 import axios from "axios";
-import { mapMutations } from "vuex";
+import { mapMutations, mapActions } from "vuex";
 export default {
   data() {
     return {
@@ -39,6 +39,9 @@ export default {
       setMessage: "snackbar/setMessage",
       setErr: "snackbar/setErr",
     }),
+    ...mapActions({
+      logout: "auth/AUTH_LOGOUT"
+    }),
     update() {
       this.isLoading = true
       axios({
@@ -50,9 +53,15 @@ export default {
           this.isLoading = false
           console.log(response.data);
           this.setMessage(
-            "Yacht is updating now"
+            "Yacht is updating now. You will be logged out to complete the update."
           );
         })
+        .finally(() => {
+          this.isLoading = true
+          const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
+          sleep(5000)
+          this.logout()
+        })
         .catch((err) => {
           this.isLoading = false
           this.setErr(err);
diff --git a/frontend/src/store/modules/apps.js b/frontend/src/store/modules/apps.js
index 875db0b0..a1d5fa8a 100644
--- a/frontend/src/store/modules/apps.js
+++ b/frontend/src/store/modules/apps.js
@@ -37,6 +37,7 @@ const actions = {
     axios
       .get(url)
       .then(response => {
+        console.log(response)
         const apps = response.data;
         commit("setApps", apps);
       })

From b0ed61e9718c35cf5c96c28d204426c4bcec8369 Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Thu, 1 Oct 2020 11:37:54 -0700
Subject: [PATCH 16/24] added update checks

---
 backend/api/actions/apps.py                   | 37 +++++++++++--
 backend/api/routers/app_settings.py           |  6 ++-
 backend/api/routers/apps.py                   |  3 ++
 backend/api/utils.py                          | 16 +++++-
 .../applications/ApplicationsList.vue         | 52 +++++++++++++++----
 .../serverSettings/ServerUpdate.vue           | 22 ++++++++
 frontend/src/store/modules/apps.js            | 44 ++++++++++++++--
 7 files changed, 161 insertions(+), 19 deletions(-)

diff --git a/backend/api/actions/apps.py b/backend/api/actions/apps.py
index 7dbfe760..76271afe 100644
--- a/backend/api/actions/apps.py
+++ b/backend/api/actions/apps.py
@@ -23,12 +23,27 @@ def get_running_apps():
 
     return apps_list
 
+def check_app_updates():
+    apps_list = []
+    dclient = docker.from_env()
+    apps = dclient.containers.list(all=True)
+    for app in apps:
+        attrs = app.attrs
+
+        attrs.update(check_updates(app.image.tags[0]))
+        attrs.update(conv2dict('name', app.name))
+        attrs.update(conv2dict('ports', app.ports))
+        attrs.update(conv2dict('short_id', app.short_id))
+        apps_list.append(attrs)
+    return apps_list
+
 def get_apps():
     apps_list = []
     dclient = docker.from_env()
     apps = dclient.containers.list(all=True)
     for app in apps:
         attrs = app.attrs
+
         attrs.update(conv2dict('name', app.name))
         attrs.update(conv2dict('ports', app.ports))
         attrs.update(conv2dict('short_id', app.short_id))
@@ -41,7 +56,7 @@ def get_app(app_name):
     dclient = docker.from_env()
     app = dclient.containers.get(app_name)
     attrs = app.attrs
-
+    
     attrs.update(conv2dict('ports', app.ports))
     attrs.update(conv2dict('short_id', app.short_id))
     attrs.update(conv2dict('name', app.name))
@@ -173,7 +188,7 @@ def app_update(app_name):
     except Exception as exc:
         print(exc)
         raise HTTPException(status_code=exc.response.status_code, detail=exc.explanation)
-    
+
     print('**** Updating '+old.name+'****')    
     result = updater.wait(timeout=120)
     print(result)
@@ -223,4 +238,20 @@ def prune_resources(resource):
     dclient = docker.from_env()
     action = getattr(dclient, resource)
     deleted_resource = action.prune()
-    return deleted_resource
\ No newline at end of file
+    return deleted_resource
+
+
+def check_self_update():
+    dclient = docker.from_env()
+    bash_command = "head -1 /proc/self/cgroup|cut -d/ -f3"
+    yacht_id = subprocess.check_output(['bash','-c', bash_command]).decode('UTF-8').strip()
+    try:
+        yacht = dclient.containers.get(yacht_id)
+    except Exception as exc:
+        print(exc)
+        if exc.response.status_code == 404:
+            raise HTTPException(status_code=exc.response.status_code, detail="Unable to get Yacht container ID")
+        else:
+            raise HTTPException(status_code=exc.response.status_code, detail=exc.explanation)
+
+    return check_updates(yacht.image.tags[0])
\ No newline at end of file
diff --git a/backend/api/routers/app_settings.py b/backend/api/routers/app_settings.py
index 0544a992..85f43f08 100644
--- a/backend/api/routers/app_settings.py
+++ b/backend/api/routers/app_settings.py
@@ -43,4 +43,8 @@ def prune_resources(resource: str):
 
 @router.get('/update', dependencies=[Depends(get_active_user)])
 def update_self():
-    return apps.update_self()
\ No newline at end of file
+    return apps.update_self()
+
+@router.get('/check/update', dependencies=[Depends(get_active_user)])
+def check_self_update():
+    return apps.check_self_update()
\ No newline at end of file
diff --git a/backend/api/routers/apps.py b/backend/api/routers/apps.py
index 87048950..3617ff29 100644
--- a/backend/api/routers/apps.py
+++ b/backend/api/routers/apps.py
@@ -36,6 +36,9 @@ def get_db():
 def index():
     return actions.get_apps()
 
+@router.get('/updates', dependencies=[Depends(get_active_user)])
+def check_updates():
+    return actions.check_app_updates()
 
 @router.get("/{app_name}", dependencies=[Depends(get_active_user)])
 def get_container_details(app_name):
diff --git a/backend/api/utils.py b/backend/api/utils.py
index ee6d1e62..9f5a10dc 100644
--- a/backend/api/utils.py
+++ b/backend/api/utils.py
@@ -10,6 +10,7 @@
 from .auth import user_db
 from .settings import Settings
 import aiodocker
+import docker
 import json
 settings = Settings()
 
@@ -346,4 +347,17 @@ def get_update_ports(ports):
                 portdir.update({str(hport): d.get('HostPort') })
         return portdir
     else:
-        return None
\ No newline at end of file
+        return None
+
+def check_updates(tag):
+    if tag:
+        dclient = docker.from_env()
+        current = dclient.images.get(tag)
+        new = dclient.images.get_registry_data(tag)
+        if new.attrs['Descriptor']['digest'] in current.attrs['RepoDigests'][0]:
+            return conv2dict('updatable', False)
+        else:
+            return conv2dict('updatable', True)
+
+    else:
+        return conv2dict('updatable', False)
\ No newline at end of file
diff --git a/frontend/src/components/applications/ApplicationsList.vue b/frontend/src/components/applications/ApplicationsList.vue
index 2beab00b..e9a6c656 100644
--- a/frontend/src/components/applications/ApplicationsList.vue
+++ b/frontend/src/components/applications/ApplicationsList.vue
@@ -10,7 +10,20 @@
         />
       </v-fade-transition>
       <v-card-title>
-        Apps <v-icon v-on:click="refresh()">mdi-refresh</v-icon>
+        Apps
+        <v-menu close-on-click close-on-content-click offset-y>
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn icon size="small" v-bind="attrs" v-on="on">
+              <v-icon>mdi-chevron-down</v-icon>
+            </v-btn>
+          </template>
+          <v-list dense>
+            <v-list-item @click="refresh()">
+              <v-list-item-icon><v-icon>mdi-refresh</v-icon></v-list-item-icon>
+              <v-list-item-title>Refresh Apps</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
         <v-spacer></v-spacer>
         <v-text-field
           v-model="search"
@@ -20,6 +33,7 @@
           hide-details
         ></v-text-field>
       </v-card-title>
+      <v-card-subtitle v-if="action">{{ action }} </v-card-subtitle>
       <v-data-table
         style="width: 99%"
         class="mx-auto"
@@ -63,9 +77,17 @@
                   </v-list-item-icon>
                   <v-list-item-title>Restart</v-list-item-title>
                 </v-list-item>
-                <v-divider />
+                <v-divider
+                  v-if="
+                    !item.Config.Image.includes('selfhostedpro/yacht') &&
+                      item.updatable
+                  "
+                />
                 <v-list-item
-                  v-if="!item.Config.Image.includes('selfhostedpro/yacht')"
+                  v-if="
+                    !item.Config.Image.includes('selfhostedpro/yacht') &&
+                      item.updatable
+                  "
                   @click="AppAction({ Name: item.name, Action: 'update' })"
                 >
                   <v-list-item-icon>
@@ -93,6 +115,12 @@
               </v-list>
             </v-menu>
             <span class="nametext ml-1">{{ item.name }}</span>
+            <v-tooltip right v-if="item.updatable" color="primary" class="mb-2">
+              <template v-slot:activator="{ on, attrs }">
+                  <v-avatar class="ml-1" v-bind="attrs" v-on="on" color="primary" size="6"></v-avatar>
+              </template>
+              <span>Update Available</span>
+            </v-tooltip>
           </div>
         </template>
         <template v-slot:item.status="{ item }">
@@ -131,7 +159,10 @@
                   :href="'http://' + port.hip + ':' + port.hport"
                   target="_blank"
                   ><v-icon small class="mr-1">mdi-link-variant</v-icon
-                  >{{ item.Config.Labels[`local.yacht.port.${port.hport}`] || port.hport }}</v-chip
+                  >{{
+                    item.Config.Labels[`local.yacht.port.${port.hport}`] ||
+                      port.hport
+                  }}</v-chip
                 >
               </template>
               <span>
@@ -143,7 +174,7 @@
         <template v-slot:item.image="{ item }">
           <span class="ImageName">{{ item.Config.Image }}</span>
         </template>
-        <template v-slot:item.created="{item}">
+        <template v-slot:item.created="{ item }">
           <span class="CreatedAt"> {{ item.Created | formatDate }} </span>
         </template>
       </v-data-table>
@@ -187,7 +218,7 @@ export default {
           text: "Created At",
           value: "created",
           sortable: true,
-        }
+        },
       ],
     };
   },
@@ -195,6 +226,7 @@ export default {
     ...mapActions({
       readApps: "apps/readApps",
       AppAction: "apps/AppAction",
+      checkUpdates: "apps/checkAppsUpdates",
     }),
     handleRowClick(appName) {
       this.$router.push({ path: `/apps${appName.Name}/info` });
@@ -214,13 +246,15 @@ export default {
     },
     refresh() {
       this.readApps();
+      this.checkUpdates();
     },
   },
   computed: {
-    ...mapState("apps", ["apps", "isLoading"]),
+    ...mapState("apps", ["apps", "isLoading", "action"]),
   },
   mounted() {
     this.readApps();
+    this.checkUpdates();
   },
 };
 </script>
@@ -234,7 +268,7 @@ tr:hover {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.CreatedAt{
+.CreatedAt {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -244,4 +278,4 @@ tr:hover {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/serverSettings/ServerUpdate.vue b/frontend/src/components/serverSettings/ServerUpdate.vue
index cba75b05..f9463f0d 100644
--- a/frontend/src/components/serverSettings/ServerUpdate.vue
+++ b/frontend/src/components/serverSettings/ServerUpdate.vue
@@ -18,6 +18,7 @@
       class="mx-5 mb-5"
       color="primary"
       @click="update()"
+      :disabled="!updatable"
     >
       Update Yacht
     </v-btn>
@@ -32,8 +33,12 @@ export default {
     return {
       containerDialog: false,
       isLoading: false,
+      updatable: false,
     };
   },
+  mounted() {
+    this.checkUpdate()
+  },
   methods: {
     ...mapMutations({
       setMessage: "snackbar/setMessage",
@@ -42,6 +47,23 @@ export default {
     ...mapActions({
       logout: "auth/AUTH_LOGOUT"
     }),
+    checkUpdate() {
+      this.isLoading = true
+      axios({
+        url: "/api/settings/check/update",
+        method: "GET",
+        responseType: "text/json",
+      })
+        .then((response) => {
+          this.isLoading = false
+          console.log(response.data)
+          this.updatable = response.data.updatable
+        })
+        .catch((err) => {
+          this.isLoading = false
+          this.setErr(err)
+        })
+    },
     update() {
       this.isLoading = true
       axios({
diff --git a/frontend/src/store/modules/apps.js b/frontend/src/store/modules/apps.js
index a1d5fa8a..caae17bf 100644
--- a/frontend/src/store/modules/apps.js
+++ b/frontend/src/store/modules/apps.js
@@ -4,7 +4,8 @@ const state = {
   apps: [],
   logs: [],
   processes: [],
-  isLoading: false
+  isLoading: false,
+  action: ''
 };
 
 const mutations = {
@@ -27,27 +28,60 @@ const mutations = {
   },
   setLoading(state, loading) {
     state.isLoading = loading;
+  },
+  setAction(state, action) {
+    state.action = action
   }
 };
 
 const actions = {
   readApps({ commit }) {
     commit("setLoading", true);
+    commit("setAction", 'Getting Apps ...')
     const url = "/api/apps/";
     axios
       .get(url)
       .then(response => {
         console.log(response)
-        const apps = response.data;
+        var apps = response.data;
         commit("setApps", apps);
+        const update_url = "/api/apps/updates"
+        commit("setAction", 'Checking for updates ...')
+        axios
+          .get(update_url)
+          .then(response => {
+            apps = response.data
+            commit("setApps", apps);
+          })
+          .catch(err => {
+            commit("snackbar/setErr", err, { root: true });
+          })
+          .finally(() => {
+            commit("setLoading", false);
+            commit("setAction", '')
+          })
       })
       .catch(err => {
         commit("snackbar/setErr", err, { root: true });
       })
-      .finally(() => {
-        commit("setLoading", false);
-      });
   },
+  // checkAppsUpdates({ commit }) {
+  //   commit("setLoading", true);
+  //   const url = "/api/apps/updates";
+  //   axios
+  //     .get(url)
+  //     .then(response => {
+  //       console.log(response)
+  //       const apps = response.data;
+  //       commit("setApps", apps);
+  //     })
+  //     .catch(err => {
+  //       commit("snackbar/setErr", err, { root: true })
+  //     })
+  //     .finally(() => {
+  //       commit("setLoading", false)
+  //     })
+  // },
   readApp({ commit }, Name) {
     const url = `/api/apps/${Name}`;
     commit("setLoading", true);

From 5fe5b115143083f2f86f5bc60949c6df16f66de5 Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Thu, 1 Oct 2020 14:44:43 -0700
Subject: [PATCH 17/24] moved updatable to different array in state; added
 checks to the update page; added button to check for updates in the apps list

---
 backend/api/actions/apps.py                   |  9 +--
 backend/api/utils.py                          |  6 +-
 .../applications/ApplicationsList.vue         | 14 ++--
 frontend/src/store/modules/apps.js            | 69 ++++++++++---------
 4 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/backend/api/actions/apps.py b/backend/api/actions/apps.py
index 76271afe..dc442a51 100644
--- a/backend/api/actions/apps.py
+++ b/backend/api/actions/apps.py
@@ -28,13 +28,8 @@ def check_app_updates():
     dclient = docker.from_env()
     apps = dclient.containers.list(all=True)
     for app in apps:
-        attrs = app.attrs
-
-        attrs.update(check_updates(app.image.tags[0]))
-        attrs.update(conv2dict('name', app.name))
-        attrs.update(conv2dict('ports', app.ports))
-        attrs.update(conv2dict('short_id', app.short_id))
-        apps_list.append(attrs)
+        if check_updates(app.image.tags[0]):
+            apps_list.append(app.name)
     return apps_list
 
 def get_apps():
diff --git a/backend/api/utils.py b/backend/api/utils.py
index 9f5a10dc..daaa34c4 100644
--- a/backend/api/utils.py
+++ b/backend/api/utils.py
@@ -355,9 +355,9 @@ def check_updates(tag):
         current = dclient.images.get(tag)
         new = dclient.images.get_registry_data(tag)
         if new.attrs['Descriptor']['digest'] in current.attrs['RepoDigests'][0]:
-            return conv2dict('updatable', False)
+            return False
         else:
-            return conv2dict('updatable', True)
+            return True
 
     else:
-        return conv2dict('updatable', False)
\ No newline at end of file
+        return False
\ No newline at end of file
diff --git a/frontend/src/components/applications/ApplicationsList.vue b/frontend/src/components/applications/ApplicationsList.vue
index e9a6c656..a35523f1 100644
--- a/frontend/src/components/applications/ApplicationsList.vue
+++ b/frontend/src/components/applications/ApplicationsList.vue
@@ -22,6 +22,10 @@
               <v-list-item-icon><v-icon>mdi-refresh</v-icon></v-list-item-icon>
               <v-list-item-title>Refresh Apps</v-list-item-title>
             </v-list-item>
+            <v-list-item @click="checkUpdates()">
+              <v-list-item-icon><v-icon>mdi-update</v-icon></v-list-item-icon>
+              <v-list-item-title>Check for updates</v-list-item-title>
+            </v-list-item>
           </v-list>
         </v-menu>
         <v-spacer></v-spacer>
@@ -80,13 +84,13 @@
                 <v-divider
                   v-if="
                     !item.Config.Image.includes('selfhostedpro/yacht') &&
-                      item.updatable
+                      updatable.includes(item.name)
                   "
                 />
                 <v-list-item
                   v-if="
                     !item.Config.Image.includes('selfhostedpro/yacht') &&
-                      item.updatable
+                      updatable.includes(item.name)
                   "
                   @click="AppAction({ Name: item.name, Action: 'update' })"
                 >
@@ -115,7 +119,7 @@
               </v-list>
             </v-menu>
             <span class="nametext ml-1">{{ item.name }}</span>
-            <v-tooltip right v-if="item.updatable" color="primary" class="mb-2">
+            <v-tooltip right v-if="updatable.includes(item.name)" color="primary" class="mb-2">
               <template v-slot:activator="{ on, attrs }">
                   <v-avatar class="ml-1" v-bind="attrs" v-on="on" color="primary" size="6"></v-avatar>
               </template>
@@ -246,15 +250,13 @@ export default {
     },
     refresh() {
       this.readApps();
-      this.checkUpdates();
     },
   },
   computed: {
-    ...mapState("apps", ["apps", "isLoading", "action"]),
+    ...mapState("apps", ["apps", "isLoading", "action", "updatable"]),
   },
   mounted() {
     this.readApps();
-    this.checkUpdates();
   },
 };
 </script>
diff --git a/frontend/src/store/modules/apps.js b/frontend/src/store/modules/apps.js
index caae17bf..e391315c 100644
--- a/frontend/src/store/modules/apps.js
+++ b/frontend/src/store/modules/apps.js
@@ -2,6 +2,7 @@ import axios from "axios";
 
 const state = {
   apps: [],
+  updatable: [],
   logs: [],
   processes: [],
   isLoading: false,
@@ -31,6 +32,13 @@ const mutations = {
   },
   setAction(state, action) {
     state.action = action
+  },
+  setUpdatable(state, updatable) {
+    state.updatable = updatable
+  },
+  setUpdated(state, updated) {
+    let index = state.updatable.indexOf(updated)
+    state.updatable.splice(index, 1);
   }
 };
 
@@ -42,46 +50,36 @@ const actions = {
     axios
       .get(url)
       .then(response => {
-        console.log(response)
         var apps = response.data;
         commit("setApps", apps);
-        const update_url = "/api/apps/updates"
-        commit("setAction", 'Checking for updates ...')
-        axios
-          .get(update_url)
-          .then(response => {
-            apps = response.data
-            commit("setApps", apps);
-          })
-          .catch(err => {
-            commit("snackbar/setErr", err, { root: true });
-          })
-          .finally(() => {
-            commit("setLoading", false);
-            commit("setAction", '')
-          })
       })
       .catch(err => {
         commit("snackbar/setErr", err, { root: true });
       })
+      .finally(() => {
+        commit("setLoading", false);
+        commit("setAction", '')
+      })
+  },
+  checkAppsUpdates({ commit }) {
+    commit("setLoading", true);
+    commit("setAction", 'Checking for updates...')
+    const url = "/api/apps/updates";
+    axios
+      .get(url)
+      .then(response => {
+        console.log(response)
+        const apps = response.data;
+        commit("setUpdatable", apps);
+      })
+      .catch(err => {
+        commit("snackbar/setErr", err, { root: true })
+      })
+      .finally(() => {
+        commit("setLoading", false)
+        commit("setAction", '')
+      })
   },
-  // checkAppsUpdates({ commit }) {
-  //   commit("setLoading", true);
-  //   const url = "/api/apps/updates";
-  //   axios
-  //     .get(url)
-  //     .then(response => {
-  //       console.log(response)
-  //       const apps = response.data;
-  //       commit("setApps", apps);
-  //     })
-  //     .catch(err => {
-  //       commit("snackbar/setErr", err, { root: true })
-  //     })
-  //     .finally(() => {
-  //       commit("setLoading", false)
-  //     })
-  // },
   readApp({ commit }, Name) {
     const url = `/api/apps/${Name}`;
     commit("setLoading", true);
@@ -127,6 +125,7 @@ const actions = {
   },
   AppAction({ commit }, { Name, Action }) {
     commit("setLoading", true);
+    commit("setAction", Action + ' ' + Name + ' ...')
     const url = `/api/apps/${Name}/${Action}`;
     axios
       .get(url)
@@ -138,7 +137,11 @@ const actions = {
         commit("snackbar/setErr", err, { root: true });
       })
       .finally(() => {
+        if (Action == 'update') {
+          commit("setUpdated", Name)
+        }
         commit("setLoading", false);
+        commit("setAction", '')
       });
   }
 };

From 9ffc550edfc9bea908c42d66faf3f5faebc5b80e Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Thu, 1 Oct 2020 15:19:13 -0700
Subject: [PATCH 18/24] added app actions to app details page

---
 .../applications/ApplicationDetails.vue       | 72 ++++++++++++++++---
 1 file changed, 61 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/applications/ApplicationDetails.vue b/frontend/src/components/applications/ApplicationDetails.vue
index 9a27c386..9ab03d19 100644
--- a/frontend/src/components/applications/ApplicationDetails.vue
+++ b/frontend/src/components/applications/ApplicationDetails.vue
@@ -7,6 +7,56 @@
           <v-col class="flex-grow-1 flex-shrink-0">
             <v-card-title>
               {{ app.name }}
+              <v-menu close-on-click close-on-content-click offset-y>
+                <template v-slot:activator="{ on, attrs }">
+                  <v-btn icon size="small" v-bind="attrs" v-on="on" class="">
+                    <v-icon>mdi-chevron-down</v-icon>
+                  </v-btn>
+                </template>
+                <v-list dense>
+                  <v-list-item
+                    @click="AppAction({ Name: app.name, Action: 'start' })"
+                  >
+                    <v-list-item-icon>
+                      <v-icon>mdi-play</v-icon>
+                    </v-list-item-icon>
+                    <v-list-item-title>Start</v-list-item-title>
+                  </v-list-item>
+                  <v-list-item
+                    @click="AppAction({ Name: app.name, Action: 'stop' })"
+                  >
+                    <v-list-item-icon>
+                      <v-icon>mdi-stop</v-icon>
+                    </v-list-item-icon>
+                    <v-list-item-title>Stop</v-list-item-title>
+                  </v-list-item>
+                  <v-list-item
+                    @click="AppAction({ Name: app.name, Action: 'restart' })"
+                  >
+                    <v-list-item-icon>
+                      <v-icon>mdi-refresh</v-icon>
+                    </v-list-item-icon>
+                    <v-list-item-title>Restart</v-list-item-title>
+                  </v-list-item>
+                  <v-divider/>
+                  <v-list-item
+                    @click="AppAction({ Name: app.name, Action: 'kill' })"
+                  >
+                    <v-list-item-icon>
+                      <v-icon>mdi-fire</v-icon>
+                    </v-list-item-icon>
+                    <v-list-item-title>Kill</v-list-item-title>
+                  </v-list-item>
+                  <v-list-item
+                    @click="AppAction({ Name: app.name, Action: 'remove' })"
+                  >
+                    <v-list-item-icon>
+                      <v-icon>mdi-delete</v-icon>
+                    </v-list-item-icon>
+                    <v-list-item-title>Remove</v-list-item-title>
+                  </v-list-item>
+                </v-list>
+              </v-menu>
             </v-card-title>
             <v-card-subtitle>
               View and Manage {{ app.name }}
@@ -41,7 +91,7 @@ import ApplicationDetailsNav from "./ApplicationDetailsComponents/ApplicationDet
 import { mapActions, mapGetters, mapState } from "vuex";
 export default {
   components: {
-    Nav: ApplicationDetailsNav
+    Nav: ApplicationDetailsNav,
   },
   data() {
     return {
@@ -51,27 +101,27 @@ export default {
         cpu_percent: [],
         mem_percent: [],
         mem_current: [],
-        mem_total: []
+        mem_total: [],
       },
       connection: null,
-      statConnection: null
+      statConnection: null,
     };
   },
   computed: {
     ...mapState("apps", ["apps", "app", "isLoading", "processes"]),
     ...mapGetters({
-      getAppByName: "apps/getAppByName"
+      getAppByName: "apps/getAppByName",
     }),
     app() {
       const appName = this.$route.params.appName;
       return this.getAppByName(appName);
-    }
+    },
   },
   methods: {
     ...mapActions({
       readApp: "apps/readApp",
-      readAppProcesses: "apps/readAppProcesses"
-      // readAppLogs: "apps/readAppLogs",
+      readAppProcesses: "apps/readAppProcesses",
+      AppAction: "apps/AppAction",
     }),
     refresh() {
       const appName = this.$route.params.appName;
@@ -93,7 +143,7 @@ export default {
         );
       };
 
-      this.connection.onmessage = event => {
+      this.connection.onmessage = (event) => {
         this.logs.push(event.data);
       };
     },
@@ -114,7 +164,7 @@ export default {
           JSON.stringify({ type: "onopen", data: "Connected!" })
         );
       };
-      this.statConnection.onmessage = event => {
+      this.statConnection.onmessage = (event) => {
         let statsGroup = JSON.parse(event.data);
         this.stats.time.push(statsGroup.time);
         this.stats.cpu_percent.push(Math.round(statsGroup.cpu_percent));
@@ -139,7 +189,7 @@ export default {
       );
       this.statConnection.close(1000, "Leaving page or refreshing");
       // this.statConnection.close(1001, "Leaving page or refreshing");
-    }
+    },
   },
   created() {
     const appName = this.$route.params.appName;
@@ -156,7 +206,7 @@ export default {
   beforeDestroy() {
     this.closeLogs();
     this.closeStats();
-  }
+  },
 };
 </script>
 

From 5e2b3f9f1e9d7449213b075fe3d596beca7a73aa Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Thu, 1 Oct 2020 16:10:37 -0700
Subject: [PATCH 19/24] added tamplate variable support to env variables

---
 backend/api/utils.py | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/backend/api/utils.py b/backend/api/utils.py
index daaa34c4..81574bfb 100644
--- a/backend/api/utils.py
+++ b/backend/api/utils.py
@@ -183,6 +183,14 @@ def conv_volumes2data(data):
 def conv_env2data(data):
     # Set is depracated. Name is the actual value. Label is the name of the field.
     # Label is the label of the label field.
+    db = SessionLocal()
+    t_variables = db.query(models.TemplateVariables).all()
+
+    for i,variable in enumerate(data):
+        for t_var in t_variables:
+            if t_var.variable in variable.default:
+                new_var = data[i].default.replace(t_var.variable, t_var.replacement)
+                variable.default = new_var
     delim = '='
     return [delim.join((d.name, d.default)) for d in data]
 

From e6718f6348f3df1d9173c467d9617b03c6a96106 Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Fri, 2 Oct 2020 10:18:54 -0700
Subject: [PATCH 20/24] fixed reverse proxy issue; consolidate templates in the
 deploy from template page; probably other stuff

---
 backend/api/db/schemas/templates.py           |   2 +
 .../ApplicationDeployFromTemplate.vue         | 395 ++++++++++++++++++
 .../applications/ApplicationDetails.vue       |  16 +-
 .../applications/ApplicationsForm.vue         |   2 +-
 frontend/src/router/index.js                  |   6 +
 frontend/src/store/modules/templates.js       |  34 ++
 frontend/src/views/Applications.vue           |   2 +
 frontend/src/views/Home.vue                   |   9 +-
 nginx.conf                                    |  12 +-
 9 files changed, 472 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/applications/ApplicationDeployFromTemplate.vue

diff --git a/backend/api/db/schemas/templates.py b/backend/api/db/schemas/templates.py
index 38ab9b09..9fc8d3ff 100644
--- a/backend/api/db/schemas/templates.py
+++ b/backend/api/db/schemas/templates.py
@@ -42,6 +42,8 @@ class TemplateRead(TemplateBase):
     updated_at: datetime
     created_at: datetime
 
+class TemplateReadAll(TemplateBase):
+    items: List[TemplateItem] = []
 
 class TemplateItems(TemplateRead):
     items: List[TemplateItem] = []
diff --git a/frontend/src/components/applications/ApplicationDeployFromTemplate.vue b/frontend/src/components/applications/ApplicationDeployFromTemplate.vue
new file mode 100644
index 00000000..8f747bbe
--- /dev/null
+++ b/frontend/src/components/applications/ApplicationDeployFromTemplate.vue
@@ -0,0 +1,395 @@
+<template lang="html">
+  <v-card>
+    <v-card-title>
+      Select a template to deploy from
+    </v-card-title>
+    <v-tabs v-model="tab" grow>
+      <v-tab v-for="template in templates" :key="template.id">
+        {{ template.title }} ({{ template.items.length }})
+      </v-tab>
+    </v-tabs>
+    <v-tabs-items v-model="tab">
+        <v-tab-item v-for="template in templates" :key="template.id">
+          <div class="d-flex templates-details page">
+            <v-container
+              fluid
+              v-if="template"
+              class="templateDetailsContainer component"
+            >
+              <v-card class="pb-3">
+                <v-fade-transition>
+                  <v-progress-linear
+                    indeterminate
+                    v-if="isLoading"
+                    color="primary"
+                    bottom
+                  />
+                </v-fade-transition>
+                <v-card-title>
+                  {{ template.title }}
+                </v-card-title>
+                <v-card-subtitle>
+                  {{ template.url }}
+                </v-card-subtitle>
+              
+              <!-- <v-text-field label="Search" v-model="search" class="mx-5"></v-text-field> -->
+              <v-row dense class="mt-3 mx-5">
+                <v-col
+                  v-for="item in sortByTitle(template.items)"
+                  :key="item.id"
+                  cols="12"
+                  xl="2"
+                  md="3"
+                  sm="4"
+                  xs="12"
+                  class="d-flex"
+                  style="flex-direction:column"
+                >
+                  <v-card class="flex-grow-1">
+                    <v-img
+                      :src="item.logo"
+                      contain
+                      class="white--text align-end"
+                      gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
+                      aspect-ratio="1"
+                      height="200px"
+                    >
+                      <v-card-title v-text="item.title"></v-card-title>
+                    </v-img>
+                    <v-card-text style="overflow-y: auto; height:168px">
+                      <!--
+                Back link required!
+                Perhaps display the description scrollable and add an action
+                "Deploy"
+                {{ item.description ? item.description : "" | truncate(200) }}
+              -->
+                      {{
+                        item.description ? item.description : "" | truncate(120)
+                      }}
+                    </v-card-text>
+
+                    <v-card-actions>
+                      <v-btn
+                        text
+                        @click="
+                          selectedApp = item;
+                          appDetailsDialog = true;
+                        "
+                      >
+                        View
+                      </v-btn>
+                      <v-spacer></v-spacer>
+                      <v-btn
+                        text
+                        color="primary"
+                        :to="{ name: 'Deploy', params: { appId: item.id } }"
+                      >
+                        Deploy
+                      </v-btn>
+                    </v-card-actions>
+                  </v-card>
+                </v-col>
+              </v-row>
+              </v-card>
+            </v-container>
+            <v-dialog
+              v-model="appDetailsDialog"
+              scrollable
+              class="mt-20"
+              max-width="90%"
+              v-if="selectedApp"
+            >
+              <v-card raised shaped>
+                <v-fade-transition>
+                  <v-progress-linear
+                    indeterminate
+                    v-if="isLoading"
+                    color="primary"
+                    bottom
+                  />
+                </v-fade-transition>
+                <v-img
+                  :src="selectedApp.logo"
+                  contain
+                  class="white--text align-end"
+                  gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
+                  aspect-ratio="1"
+                  height="200px"
+                >
+                  <v-card-title class="headline" style="word-break: break-all;">
+                    {{ selectedApp.title }}
+                  </v-card-title>
+                </v-img>
+                <v-card-text class="pt-2">
+                  {{ selectedApp.description }}
+                  <h4 v-if="selectedApp.notes" class="pt-2">Notes:</h4>
+                  <p v-if="selectedApp.notes" v-html="selectedApp.notes" />
+                  <v-card tile>
+                    <v-card-title class="subheading primary font-weight-bold">
+                      General
+                    </v-card-title>
+                    <v-divider />
+                    <v-list class="secondary" dense>
+                      <v-list-item>
+                        <v-list-item-content
+                          ><v-list-item-title
+                            class="px-5 text-centered font-weight-bold"
+                            >Name</v-list-item-title
+                          ></v-list-item-content
+                        >
+
+                        <v-list-item-content>
+                          <v-list-item-title class="px-5 text-centered">
+                            {{ selectedApp.name }}
+                          </v-list-item-title>
+                        </v-list-item-content>
+                      </v-list-item>
+                      <v-list-item>
+                        <v-list-item-content
+                          ><v-list-item-title
+                            class="px-5 text-centered font-weight-bold"
+                            >Image</v-list-item-title
+                          ></v-list-item-content
+                        >
+                        <v-list-item-content>
+                          <v-list-item-title class="px-5 text-centered">
+                            {{ selectedApp.image }}
+                          </v-list-item-title>
+                        </v-list-item-content>
+                      </v-list-item>
+                      <v-list-item>
+                        <v-list-item-content
+                          ><v-list-item-title
+                            class="px-5 text-centered font-weight-bold"
+                            >Platform</v-list-item-title
+                          ></v-list-item-content
+                        >
+                        <v-list-item-content>
+                          <v-list-item-title class="px-5 text-centered">
+                            {{ selectedApp.platform }}
+                          </v-list-item-title>
+                        </v-list-item-content>
+                      </v-list-item>
+                    </v-list>
+                  </v-card>
+                  <v-card v-if="selectedApp.ports" tile>
+                    <v-card-title
+                      class="subheading indigo darken-2 font-weight-bold"
+                    >
+                      Ports
+                    </v-card-title>
+                    <v-divider />
+                    <v-list dense class="secondary">
+                      <v-list-item>
+                        <v-list-item-content
+                          ><v-list-item-title
+                            class="px-5 text-centered font-weight-bold"
+                            >Label</v-list-item-title
+                          ></v-list-item-content
+                        >
+                        <v-list-item-content
+                          ><v-list-item-title
+                            class="px-5 text-centered font-weight-bold"
+                            >Host Port</v-list-item-title
+                          ></v-list-item-content
+                        >
+                        <v-list-item-content>
+                          <v-list-item-title
+                            class="px-5 text-centered font-weight-bold"
+                            >Container Port/Proto</v-list-item-title
+                          ></v-list-item-content
+                        >
+                      </v-list-item>
+                      <v-divider />
+                      <v-list-item
+                        v-for="port in selectedApp.ports"
+                        :key="port.hport"
+                      >
+                        <v-list-item-content
+                          ><v-list-item-title class="px-5 text-centered">{{
+                            port.label || "None"
+                          }}</v-list-item-title></v-list-item-content
+                        >
+                        <v-list-item-content
+                          ><v-list-item-title class="px-5 text-centered">{{
+                            port.hport
+                          }}</v-list-item-title></v-list-item-content
+                        >
+                        <v-list-item-content>
+                          <v-list-item-title class="px-5 text-centered">
+                            {{ port.cport }}/{{ port.proto }}
+                          </v-list-item-title>
+                        </v-list-item-content>
+                      </v-list-item>
+                    </v-list>
+                  </v-card>
+
+                  <v-card v-if="selectedApp.volumes" tile>
+                    <v-card-title
+                      class="subheading amber darken-2 font-weight-bold"
+                    >
+                      Volumes
+                    </v-card-title>
+                    <v-divider />
+                    <v-list dense class="secondary">
+                      <v-list-item>
+                        <v-list-item-content
+                          ><v-list-item-title
+                            class="px-5 text-centered font-weight-bold"
+                            >Host</v-list-item-title
+                          ></v-list-item-content
+                        >
+                        <v-list-item-content>
+                          <v-list-item-title
+                            class="px-5 text-centered font-weight-bold"
+                            >Container</v-list-item-title
+                          ></v-list-item-content
+                        >
+                      </v-list-item>
+                      <v-divider />
+                      <v-list-item
+                        v-for="volume in selectedApp.volumes"
+                        :key="volume.container"
+                      >
+                        <v-list-item-content
+                          ><v-list-item-title class="px-5 text-centered">{{
+                            volume.bind
+                          }}</v-list-item-title></v-list-item-content
+                        >
+
+                        <v-list-item-content
+                          ><v-list-item-title class="px-5 text-centered">{{
+                            volume.container
+                          }}</v-list-item-title></v-list-item-content
+                        >
+                      </v-list-item>
+                    </v-list>
+                  </v-card>
+
+                  <v-card v-if="selectedApp.env" tile>
+                    <v-card-title
+                      class="subheading green darken-3 font-weight-bold"
+                    >
+                      Env Variables
+                    </v-card-title>
+                    <v-divider />
+                    <v-list dense class="secondary">
+                      <v-list-item>
+                        <v-list-item-content
+                          ><v-list-item-title
+                            class="px-5 text-centered font-weight-bold"
+                            >Label</v-list-item-title
+                          ></v-list-item-content
+                        >
+                        <v-list-item-content
+                          ><v-list-item-title
+                            class="px-5 text-centered font-weight-bold"
+                            >Name</v-list-item-title
+                          ></v-list-item-content
+                        >
+                        <v-list-item-content
+                          ><v-list-item-title
+                            class="px-5 text-centered font-weight-bold"
+                            >Default</v-list-item-title
+                          ></v-list-item-content
+                        >
+                      </v-list-item>
+                      <v-divider />
+                      <v-list-item
+                        v-for="env in selectedApp.env"
+                        :key="env.label"
+                      >
+                        <v-list-item-content
+                          ><v-list-item-title class="px-5 text-centered">{{
+                            env.label
+                          }}</v-list-item-title></v-list-item-content
+                        >
+                        <v-list-item-content
+                          ><v-list-item-title class="px-5 text-centered">{{
+                            env.name
+                          }}</v-list-item-title></v-list-item-content
+                        >
+                        <v-list-item-content
+                          ><v-list-item-title class="px-5 text-centered">{{
+                            env.default
+                          }}</v-list-item-title></v-list-item-content
+                        >
+                      </v-list-item>
+                    </v-list>
+                  </v-card>
+                </v-card-text>
+                <v-card-actions>
+                  <v-spacer></v-spacer>
+
+                  <v-btn text @click="appDetailsDialog = false">
+                    Cancel
+                  </v-btn>
+                  <v-btn
+                    text
+                    color="primary"
+                    :to="{ name: 'Deploy', params: { appId: selectedApp.id } }"
+                  >
+                    Deploy
+                  </v-btn>
+                </v-card-actions>
+              </v-card>
+            </v-dialog>
+          </div>
+        </v-tab-item>
+    </v-tabs-items>
+  </v-card>
+</template>
+
+<script>
+import { mapActions, mapState } from "vuex";
+export default {
+  data() {
+    return {
+      appDetailsDialog: false,
+      selectedApp: null,
+      search: "",
+      tab: null,
+    };
+  },
+  computed: {
+    ...mapState("templates", ["templates", "isLoading"]),
+    filteredTemplateItems(templ) {
+      if (!templ) {
+        return [];
+      }
+      if (this.search.length === "") {
+        return templ.items;
+      }
+      return this.filterByTitle(templ.items);
+    },
+  },
+  methods: {
+    ...mapActions({
+      readTemplates: "templates/readTemplatesAndItems",
+    }),
+    sortByTitle(arr) {
+      // Set slice() to avoid to generate an infinite loop!
+      return arr.slice().sort(function(a, b) {
+        return a.title.localeCompare(b.title);
+      });
+    },
+    filterByTitle(item) {
+      if (!("title" in item)) {
+        return false;
+      }
+      const regex = new RegExp(this.search, "i");
+      return regex.test(item.title);
+      // return item.title.includes(this.search);
+    },
+  },
+  mounted() {
+    this.readTemplates();
+  },
+};
+</script>
+
+<style lang="css">
+/* .templateDetailsContainer{
+  width:98%
+} */
+</style>
diff --git a/frontend/src/components/applications/ApplicationDetails.vue b/frontend/src/components/applications/ApplicationDetails.vue
index 9ab03d19..259daccf 100644
--- a/frontend/src/components/applications/ApplicationDetails.vue
+++ b/frontend/src/components/applications/ApplicationDetails.vue
@@ -134,8 +134,14 @@ export default {
     },
     readAppLogs(appName) {
       console.log("Starting connection to Logs");
+      var proto = ''
+      if (location.protocol == 'http:') {
+        proto = 'ws://'
+      } else {
+        proto = 'wss://'
+      }
       this.connection = new WebSocket(
-        `ws://${location.hostname}:${location.port}/api/apps/${appName}/livelogs`
+        `${proto}${location.hostname}:${location.port}/api/apps/${appName}/livelogs`
       );
       this.connection.onopen = () => {
         this.connection.send(
@@ -155,9 +161,15 @@ export default {
     },
     readAppStats(appName) {
       console.log("Starting connection to Stats");
+      var sproto = ''
+      if (location.protocol == 'http:') {
+        sproto = 'ws://'
+      } else {
+        sproto = 'wss://'
+      }
 
       this.statConnection = new WebSocket(
-        `ws://${location.hostname}:${location.port}/api/apps/${appName}/stats`
+        `${sproto}${location.hostname}:${location.port}/api/apps/${appName}/stats`
       );
       this.statConnection.onopen = () => {
         this.statConnection.send(
diff --git a/frontend/src/components/applications/ApplicationsForm.vue b/frontend/src/components/applications/ApplicationsForm.vue
index b6cd58d6..71320afd 100644
--- a/frontend/src/components/applications/ApplicationsForm.vue
+++ b/frontend/src/components/applications/ApplicationsForm.vue
@@ -5,7 +5,7 @@
       <v-btn
         v-if="!this.$route.params.appId"
         tile
-        :to="{ name: 'View Templates' }"
+        :to="{ name: 'Deploy from Template' }"
         class="primary float-right"
       >
         <v-icon>mdi-plus</v-icon> From Template
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 5cec6e42..8ee4751e 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -13,6 +13,7 @@ import AppStats from "../components/applications/ApplicationDetailsComponents/Ap
 import ApplicationDetails from "../components/applications/ApplicationDetails.vue";
 import ApplicationsList from "../components/applications/ApplicationsList.vue";
 import ApplicationsForm from "../components/applications/ApplicationsForm.vue";
+import ApplicationDeployFromTemplate from "../components/applications/ApplicationDeployFromTemplate.vue";
 import Container from "../views/Container.vue";
 import UserSettings from "../views/UserSettings.vue";
 import ChangePasswordForm from "../components/userSettings/ChangePasswordForm.vue";
@@ -62,6 +63,11 @@ const routes = [
         path: "deploy/:appId",
         component: ApplicationsForm
       },
+      {
+        name: "Deploy from Template",
+        path: "templates",
+        component: ApplicationDeployFromTemplate
+      },
       {
         name: "View Applications",
         path: "/",
diff --git a/frontend/src/store/modules/templates.js b/frontend/src/store/modules/templates.js
index 4cf7b58b..adb3b2f2 100644
--- a/frontend/src/store/modules/templates.js
+++ b/frontend/src/store/modules/templates.js
@@ -51,6 +51,7 @@ const actions = {
     axios
       .get(url)
       .then(response => {
+        console.log(response)
         const templates = response.data;
         commit("setTemplates", templates);
       })
@@ -61,6 +62,39 @@ const actions = {
         commit("setLoading", false);
       });
   },
+  readTemplatesAndItems({ commit }) {
+    commit("setLoading", true);
+    const url = "/api/templates/";
+    axios
+      .get(url)
+      .then(response => {
+        console.log(response)
+        const templates = response.data;
+        
+        console.log(templates)
+        templates.forEach(function(template, i) {
+          console.log(template)
+          console.log(i)
+          let temp_url = `/api/templates/${template.id}`
+          axios
+            .get(temp_url)
+            .then(response => {
+              console.log(response)
+              commit("setTemplate", response.data);
+            })
+            .catch(err => {
+              commit("snackbar/setErr", err, { root: true })
+            })
+        })
+        commit("setTemplates", templates)
+      })
+      .catch(err => {
+        commit("snackbar/setErr", err, { root: true });
+      })
+      .finally(() => {
+        commit("setLoading", false)
+      })
+  },
   readTemplate({ commit }, id) {
     commit("setLoading", true);
     const url = `/api/templates/${id}`;
diff --git a/frontend/src/views/Applications.vue b/frontend/src/views/Applications.vue
index b6782d76..e1db2cdd 100644
--- a/frontend/src/views/Applications.vue
+++ b/frontend/src/views/Applications.vue
@@ -5,7 +5,9 @@
       enter-active-class="animated slideInRight delay"
       leave-active-class="animated slideOutLeft"
     >
+    
       <router-view />
+    
     </transition>
   </div>
 </template>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 95f1df31..80f64fb3 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -89,8 +89,15 @@ export default {
         window.location.reload();
         console.log(err);
       });
+      var proto = ''
+      if (location.protocol == 'http:') {
+        proto = 'ws://'
+      } else {
+        proto = 'wss://'
+      }
+      console.log(location.protocol)
       this.statConnection = new WebSocket(
-        `ws://${location.hostname}:${location.port}/api/apps/stats`
+        `${proto}${location.hostname}:${location.port}/api/apps/stats`
       );
       this.statConnection.onopen = () => {
         this.statConnection.send(
diff --git a/nginx.conf b/nginx.conf
index eafdbbdd..ac193dd2 100644
--- a/nginx.conf
+++ b/nginx.conf
@@ -17,11 +17,16 @@ http {
     sendfile on;
     keepalive_timeout 5;
 
+    map $http_upgrade $connection_upgrade {
+        default upgrade;
+        '' close;
+    }
+
     upstream api_server {
         server unix:/tmp/gunicorn.sock fail_timeout=0;
     }
 
-    # Paths for Vue and Flask
+    # Paths for Vue and FastAPI
     server {
         listen *:8000;
 
@@ -37,13 +42,16 @@ http {
             root /usr/share/nginx/html;
         }
 
-        # Flask
+        # FastAPI
         location /api/ {
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-Forwarded-Proto $scheme;
             proxy_set_header Host $http_host;
+
+            proxy_http_version 1.1;
             proxy_set_header Upgrade $http_upgrade;
             proxy_set_header Connection "Upgrade";
+
             client_body_temp_path /var/www/client_body_temp;
             proxy_temp_path /var/www/proxy_temp;
             # we don't want nginx trying to do something clever with

From 4b3675dc973b13136a53f0d09b7652fafe9bab86 Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Fri, 2 Oct 2020 11:15:31 -0700
Subject: [PATCH 21/24] fixed issue where Yacht wouldn't show it's updatable
 even if there's an update available

---
 frontend/src/components/serverSettings/ServerUpdate.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/serverSettings/ServerUpdate.vue b/frontend/src/components/serverSettings/ServerUpdate.vue
index f9463f0d..444f9932 100644
--- a/frontend/src/components/serverSettings/ServerUpdate.vue
+++ b/frontend/src/components/serverSettings/ServerUpdate.vue
@@ -56,8 +56,8 @@ export default {
       })
         .then((response) => {
           this.isLoading = false
-          console.log(response.data)
-          this.updatable = response.data.updatable
+          console.log(response)
+          this.updatable = response.data
         })
         .catch((err) => {
           this.isLoading = false

From af1e606e9f85ecd546e43d1a8b6e6d39de894e02 Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Fri, 2 Oct 2020 14:14:38 -0700
Subject: [PATCH 22/24] added search to 'Deploy from Template' page

---
 backend/api/routers/apps.py                   |   2 -
 .../ApplicationDeployFromTemplate.vue         | 561 +++++++++---------
 frontend/src/store/modules/templates.js       |  84 ++-
 frontend/src/views/Home.vue                   |   2 +-
 4 files changed, 320 insertions(+), 329 deletions(-)

diff --git a/backend/api/routers/apps.py b/backend/api/routers/apps.py
index 3617ff29..9c2756bc 100644
--- a/backend/api/routers/apps.py
+++ b/backend/api/routers/apps.py
@@ -122,7 +122,6 @@ async def stats(websocket: WebSocket, app_name: str):
                         cpu_percent = await calculate_cpu_percent(line)
 
                     full_stats = {
-                        "time": line['read'],
                         "cpu_percent": cpu_percent,
                         "mem_current": mem_current,
                         "mem_total": mem_total,
@@ -180,7 +179,6 @@ async def process_container(name, stats, websocket):
 
         full_stats = {
             "name": name,
-            "time": line['read'],
             "cpu_percent": cpu_percent,
             "mem_current": mem_current,
             "mem_total": mem_total,
diff --git a/frontend/src/components/applications/ApplicationDeployFromTemplate.vue b/frontend/src/components/applications/ApplicationDeployFromTemplate.vue
index 8f747bbe..fa938ceb 100644
--- a/frontend/src/components/applications/ApplicationDeployFromTemplate.vue
+++ b/frontend/src/components/applications/ApplicationDeployFromTemplate.vue
@@ -1,41 +1,45 @@
 <template lang="html">
-  <v-card>
+  <v-card class="mx-5">
     <v-card-title>
       Select a template to deploy from
     </v-card-title>
     <v-tabs v-model="tab" grow>
       <v-tab v-for="template in templates" :key="template.id">
-        {{ template.title }} ({{ template.items.length }})
+        {{ template.title }} <small v-if="template.items">({{ template.items.length }})</small>
       </v-tab>
     </v-tabs>
     <v-tabs-items v-model="tab">
-        <v-tab-item v-for="template in templates" :key="template.id">
-          <div class="d-flex templates-details page">
-            <v-container
-              fluid
-              v-if="template"
-              class="templateDetailsContainer component"
-            >
-              <v-card class="pb-3">
-                <v-fade-transition>
-                  <v-progress-linear
-                    indeterminate
-                    v-if="isLoading"
-                    color="primary"
-                    bottom
-                  />
-                </v-fade-transition>
-                <v-card-title>
-                  {{ template.title }}
-                </v-card-title>
-                <v-card-subtitle>
-                  {{ template.url }}
-                </v-card-subtitle>
-              
-              <!-- <v-text-field label="Search" v-model="search" class="mx-5"></v-text-field> -->
+      <v-tab-item v-for="template in templates" :key="template.id">
+        <div class="d-flex templates-details page">
+          <v-container
+            fluid
+            v-if="template"
+            class="templateDetailsContainer component"
+          >
+            <v-card class="pb-3">
+              <v-fade-transition>
+                <v-progress-linear
+                  indeterminate
+                  v-if="isLoading"
+                  color="primary"
+                  bottom
+                />
+              </v-fade-transition>
+              <v-card-title>
+                {{ template.title }}
+              </v-card-title>
+              <v-card-subtitle>
+                {{ template.url }}
+              </v-card-subtitle>
+
+              <v-text-field
+                label="Search"
+                v-model="search"
+                class="mx-5"
+              ></v-text-field>
               <v-row dense class="mt-3 mx-5">
                 <v-col
-                  v-for="item in sortByTitle(template.items)"
+                  v-for="item in filterAndSortItems(template.items)"
                   :key="item.id"
                   cols="12"
                   xl="2"
@@ -90,252 +94,252 @@
                   </v-card>
                 </v-col>
               </v-row>
-              </v-card>
-            </v-container>
-            <v-dialog
-              v-model="appDetailsDialog"
-              scrollable
-              class="mt-20"
-              max-width="90%"
-              v-if="selectedApp"
-            >
-              <v-card raised shaped>
-                <v-fade-transition>
-                  <v-progress-linear
-                    indeterminate
-                    v-if="isLoading"
-                    color="primary"
-                    bottom
-                  />
-                </v-fade-transition>
-                <v-img
-                  :src="selectedApp.logo"
-                  contain
-                  class="white--text align-end"
-                  gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
-                  aspect-ratio="1"
-                  height="200px"
-                >
-                  <v-card-title class="headline" style="word-break: break-all;">
-                    {{ selectedApp.title }}
+            </v-card>
+          </v-container>
+          <v-dialog
+            v-model="appDetailsDialog"
+            scrollable
+            class="mt-20"
+            max-width="90%"
+            v-if="selectedApp"
+          >
+            <v-card raised shaped>
+              <v-fade-transition>
+                <v-progress-linear
+                  indeterminate
+                  v-if="isLoading"
+                  color="primary"
+                  bottom
+                />
+              </v-fade-transition>
+              <v-img
+                :src="selectedApp.logo"
+                contain
+                class="white--text align-end"
+                gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
+                aspect-ratio="1"
+                height="200px"
+              >
+                <v-card-title class="headline" style="word-break: break-all;">
+                  {{ selectedApp.title }}
+                </v-card-title>
+              </v-img>
+              <v-card-text class="pt-2">
+                {{ selectedApp.description }}
+                <h4 v-if="selectedApp.notes" class="pt-2">Notes:</h4>
+                <p v-if="selectedApp.notes" v-html="selectedApp.notes" />
+                <v-card tile>
+                  <v-card-title class="subheading primary font-weight-bold">
+                    General
                   </v-card-title>
-                </v-img>
-                <v-card-text class="pt-2">
-                  {{ selectedApp.description }}
-                  <h4 v-if="selectedApp.notes" class="pt-2">Notes:</h4>
-                  <p v-if="selectedApp.notes" v-html="selectedApp.notes" />
-                  <v-card tile>
-                    <v-card-title class="subheading primary font-weight-bold">
-                      General
-                    </v-card-title>
-                    <v-divider />
-                    <v-list class="secondary" dense>
-                      <v-list-item>
-                        <v-list-item-content
-                          ><v-list-item-title
-                            class="px-5 text-centered font-weight-bold"
-                            >Name</v-list-item-title
-                          ></v-list-item-content
-                        >
+                  <v-divider />
+                  <v-list class="secondary" dense>
+                    <v-list-item>
+                      <v-list-item-content
+                        ><v-list-item-title
+                          class="px-5 text-centered font-weight-bold"
+                          >Name</v-list-item-title
+                        ></v-list-item-content
+                      >
 
-                        <v-list-item-content>
-                          <v-list-item-title class="px-5 text-centered">
-                            {{ selectedApp.name }}
-                          </v-list-item-title>
-                        </v-list-item-content>
-                      </v-list-item>
-                      <v-list-item>
-                        <v-list-item-content
-                          ><v-list-item-title
-                            class="px-5 text-centered font-weight-bold"
-                            >Image</v-list-item-title
-                          ></v-list-item-content
-                        >
-                        <v-list-item-content>
-                          <v-list-item-title class="px-5 text-centered">
-                            {{ selectedApp.image }}
-                          </v-list-item-title>
-                        </v-list-item-content>
-                      </v-list-item>
-                      <v-list-item>
-                        <v-list-item-content
-                          ><v-list-item-title
-                            class="px-5 text-centered font-weight-bold"
-                            >Platform</v-list-item-title
-                          ></v-list-item-content
-                        >
-                        <v-list-item-content>
-                          <v-list-item-title class="px-5 text-centered">
-                            {{ selectedApp.platform }}
-                          </v-list-item-title>
-                        </v-list-item-content>
-                      </v-list-item>
-                    </v-list>
-                  </v-card>
-                  <v-card v-if="selectedApp.ports" tile>
-                    <v-card-title
-                      class="subheading indigo darken-2 font-weight-bold"
-                    >
-                      Ports
-                    </v-card-title>
+                      <v-list-item-content>
+                        <v-list-item-title class="px-5 text-centered">
+                          {{ selectedApp.name }}
+                        </v-list-item-title>
+                      </v-list-item-content>
+                    </v-list-item>
+                    <v-list-item>
+                      <v-list-item-content
+                        ><v-list-item-title
+                          class="px-5 text-centered font-weight-bold"
+                          >Image</v-list-item-title
+                        ></v-list-item-content
+                      >
+                      <v-list-item-content>
+                        <v-list-item-title class="px-5 text-centered">
+                          {{ selectedApp.image }}
+                        </v-list-item-title>
+                      </v-list-item-content>
+                    </v-list-item>
+                    <v-list-item>
+                      <v-list-item-content
+                        ><v-list-item-title
+                          class="px-5 text-centered font-weight-bold"
+                          >Platform</v-list-item-title
+                        ></v-list-item-content
+                      >
+                      <v-list-item-content>
+                        <v-list-item-title class="px-5 text-centered">
+                          {{ selectedApp.platform }}
+                        </v-list-item-title>
+                      </v-list-item-content>
+                    </v-list-item>
+                  </v-list>
+                </v-card>
+                <v-card v-if="selectedApp.ports" tile>
+                  <v-card-title
+                    class="subheading indigo darken-2 font-weight-bold"
+                  >
+                    Ports
+                  </v-card-title>
+                  <v-divider />
+                  <v-list dense class="secondary">
+                    <v-list-item>
+                      <v-list-item-content
+                        ><v-list-item-title
+                          class="px-5 text-centered font-weight-bold"
+                          >Label</v-list-item-title
+                        ></v-list-item-content
+                      >
+                      <v-list-item-content
+                        ><v-list-item-title
+                          class="px-5 text-centered font-weight-bold"
+                          >Host Port</v-list-item-title
+                        ></v-list-item-content
+                      >
+                      <v-list-item-content>
+                        <v-list-item-title
+                          class="px-5 text-centered font-weight-bold"
+                          >Container Port/Proto</v-list-item-title
+                        ></v-list-item-content
+                      >
+                    </v-list-item>
                     <v-divider />
-                    <v-list dense class="secondary">
-                      <v-list-item>
-                        <v-list-item-content
-                          ><v-list-item-title
-                            class="px-5 text-centered font-weight-bold"
-                            >Label</v-list-item-title
-                          ></v-list-item-content
-                        >
-                        <v-list-item-content
-                          ><v-list-item-title
-                            class="px-5 text-centered font-weight-bold"
-                            >Host Port</v-list-item-title
-                          ></v-list-item-content
-                        >
-                        <v-list-item-content>
-                          <v-list-item-title
-                            class="px-5 text-centered font-weight-bold"
-                            >Container Port/Proto</v-list-item-title
-                          ></v-list-item-content
-                        >
-                      </v-list-item>
-                      <v-divider />
-                      <v-list-item
-                        v-for="port in selectedApp.ports"
-                        :key="port.hport"
+                    <v-list-item
+                      v-for="port in selectedApp.ports"
+                      :key="port.hport"
+                    >
+                      <v-list-item-content
+                        ><v-list-item-title class="px-5 text-centered">{{
+                          port.label || "None"
+                        }}</v-list-item-title></v-list-item-content
                       >
-                        <v-list-item-content
-                          ><v-list-item-title class="px-5 text-centered">{{
-                            port.label || "None"
-                          }}</v-list-item-title></v-list-item-content
-                        >
-                        <v-list-item-content
-                          ><v-list-item-title class="px-5 text-centered">{{
-                            port.hport
-                          }}</v-list-item-title></v-list-item-content
-                        >
-                        <v-list-item-content>
-                          <v-list-item-title class="px-5 text-centered">
-                            {{ port.cport }}/{{ port.proto }}
-                          </v-list-item-title>
-                        </v-list-item-content>
-                      </v-list-item>
-                    </v-list>
-                  </v-card>
+                      <v-list-item-content
+                        ><v-list-item-title class="px-5 text-centered">{{
+                          port.hport
+                        }}</v-list-item-title></v-list-item-content
+                      >
+                      <v-list-item-content>
+                        <v-list-item-title class="px-5 text-centered">
+                          {{ port.cport }}/{{ port.proto }}
+                        </v-list-item-title>
+                      </v-list-item-content>
+                    </v-list-item>
+                  </v-list>
+                </v-card>
 
-                  <v-card v-if="selectedApp.volumes" tile>
-                    <v-card-title
-                      class="subheading amber darken-2 font-weight-bold"
-                    >
-                      Volumes
-                    </v-card-title>
+                <v-card v-if="selectedApp.volumes" tile>
+                  <v-card-title
+                    class="subheading amber darken-2 font-weight-bold"
+                  >
+                    Volumes
+                  </v-card-title>
+                  <v-divider />
+                  <v-list dense class="secondary">
+                    <v-list-item>
+                      <v-list-item-content
+                        ><v-list-item-title
+                          class="px-5 text-centered font-weight-bold"
+                          >Host</v-list-item-title
+                        ></v-list-item-content
+                      >
+                      <v-list-item-content>
+                        <v-list-item-title
+                          class="px-5 text-centered font-weight-bold"
+                          >Container</v-list-item-title
+                        ></v-list-item-content
+                      >
+                    </v-list-item>
                     <v-divider />
-                    <v-list dense class="secondary">
-                      <v-list-item>
-                        <v-list-item-content
-                          ><v-list-item-title
-                            class="px-5 text-centered font-weight-bold"
-                            >Host</v-list-item-title
-                          ></v-list-item-content
-                        >
-                        <v-list-item-content>
-                          <v-list-item-title
-                            class="px-5 text-centered font-weight-bold"
-                            >Container</v-list-item-title
-                          ></v-list-item-content
-                        >
-                      </v-list-item>
-                      <v-divider />
-                      <v-list-item
-                        v-for="volume in selectedApp.volumes"
-                        :key="volume.container"
+                    <v-list-item
+                      v-for="volume in selectedApp.volumes"
+                      :key="volume.container"
+                    >
+                      <v-list-item-content
+                        ><v-list-item-title class="px-5 text-centered">{{
+                          volume.bind
+                        }}</v-list-item-title></v-list-item-content
                       >
-                        <v-list-item-content
-                          ><v-list-item-title class="px-5 text-centered">{{
-                            volume.bind
-                          }}</v-list-item-title></v-list-item-content
-                        >
 
-                        <v-list-item-content
-                          ><v-list-item-title class="px-5 text-centered">{{
-                            volume.container
-                          }}</v-list-item-title></v-list-item-content
-                        >
-                      </v-list-item>
-                    </v-list>
-                  </v-card>
+                      <v-list-item-content
+                        ><v-list-item-title class="px-5 text-centered">{{
+                          volume.container
+                        }}</v-list-item-title></v-list-item-content
+                      >
+                    </v-list-item>
+                  </v-list>
+                </v-card>
 
-                  <v-card v-if="selectedApp.env" tile>
-                    <v-card-title
-                      class="subheading green darken-3 font-weight-bold"
-                    >
-                      Env Variables
-                    </v-card-title>
+                <v-card v-if="selectedApp.env" tile>
+                  <v-card-title
+                    class="subheading green darken-3 font-weight-bold"
+                  >
+                    Env Variables
+                  </v-card-title>
+                  <v-divider />
+                  <v-list dense class="secondary">
+                    <v-list-item>
+                      <v-list-item-content
+                        ><v-list-item-title
+                          class="px-5 text-centered font-weight-bold"
+                          >Label</v-list-item-title
+                        ></v-list-item-content
+                      >
+                      <v-list-item-content
+                        ><v-list-item-title
+                          class="px-5 text-centered font-weight-bold"
+                          >Name</v-list-item-title
+                        ></v-list-item-content
+                      >
+                      <v-list-item-content
+                        ><v-list-item-title
+                          class="px-5 text-centered font-weight-bold"
+                          >Default</v-list-item-title
+                        ></v-list-item-content
+                      >
+                    </v-list-item>
                     <v-divider />
-                    <v-list dense class="secondary">
-                      <v-list-item>
-                        <v-list-item-content
-                          ><v-list-item-title
-                            class="px-5 text-centered font-weight-bold"
-                            >Label</v-list-item-title
-                          ></v-list-item-content
-                        >
-                        <v-list-item-content
-                          ><v-list-item-title
-                            class="px-5 text-centered font-weight-bold"
-                            >Name</v-list-item-title
-                          ></v-list-item-content
-                        >
-                        <v-list-item-content
-                          ><v-list-item-title
-                            class="px-5 text-centered font-weight-bold"
-                            >Default</v-list-item-title
-                          ></v-list-item-content
-                        >
-                      </v-list-item>
-                      <v-divider />
-                      <v-list-item
-                        v-for="env in selectedApp.env"
-                        :key="env.label"
+                    <v-list-item
+                      v-for="env in selectedApp.env"
+                      :key="env.label"
+                    >
+                      <v-list-item-content
+                        ><v-list-item-title class="px-5 text-centered">{{
+                          env.label
+                        }}</v-list-item-title></v-list-item-content
                       >
-                        <v-list-item-content
-                          ><v-list-item-title class="px-5 text-centered">{{
-                            env.label
-                          }}</v-list-item-title></v-list-item-content
-                        >
-                        <v-list-item-content
-                          ><v-list-item-title class="px-5 text-centered">{{
-                            env.name
-                          }}</v-list-item-title></v-list-item-content
-                        >
-                        <v-list-item-content
-                          ><v-list-item-title class="px-5 text-centered">{{
-                            env.default
-                          }}</v-list-item-title></v-list-item-content
-                        >
-                      </v-list-item>
-                    </v-list>
-                  </v-card>
-                </v-card-text>
-                <v-card-actions>
-                  <v-spacer></v-spacer>
+                      <v-list-item-content
+                        ><v-list-item-title class="px-5 text-centered">{{
+                          env.name
+                        }}</v-list-item-title></v-list-item-content
+                      >
+                      <v-list-item-content
+                        ><v-list-item-title class="px-5 text-centered">{{
+                          env.default
+                        }}</v-list-item-title></v-list-item-content
+                      >
+                    </v-list-item>
+                  </v-list>
+                </v-card>
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer></v-spacer>
 
-                  <v-btn text @click="appDetailsDialog = false">
-                    Cancel
-                  </v-btn>
-                  <v-btn
-                    text
-                    color="primary"
-                    :to="{ name: 'Deploy', params: { appId: selectedApp.id } }"
-                  >
-                    Deploy
-                  </v-btn>
-                </v-card-actions>
-              </v-card>
-            </v-dialog>
-          </div>
-        </v-tab-item>
+                <v-btn text @click="appDetailsDialog = false">
+                  Cancel
+                </v-btn>
+                <v-btn
+                  text
+                  color="primary"
+                  :to="{ name: 'Deploy', params: { appId: selectedApp.id } }"
+                >
+                  Deploy
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
+        </div>
+      </v-tab-item>
     </v-tabs-items>
   </v-card>
 </template>
@@ -353,33 +357,28 @@ export default {
   },
   computed: {
     ...mapState("templates", ["templates", "isLoading"]),
-    filteredTemplateItems(templ) {
-      if (!templ) {
-        return [];
-      }
-      if (this.search.length === "") {
-        return templ.items;
-      }
-      return this.filterByTitle(templ.items);
-    },
   },
   methods: {
     ...mapActions({
       readTemplates: "templates/readTemplatesAndItems",
     }),
-    sortByTitle(arr) {
-      // Set slice() to avoid to generate an infinite loop!
-      return arr.slice().sort(function(a, b) {
-        return a.title.localeCompare(b.title);
+    filterItems(items) {
+      if (!items) {
+        return [];
+      }
+      if (this.search === "") {
+        return items;
+      }
+      let regex = new RegExp(this.search, "i");
+      return items.filter((item) => {
+        return regex.test(item.title);
       });
     },
-    filterByTitle(item) {
-      if (!("title" in item)) {
-        return false;
-      }
-      const regex = new RegExp(this.search, "i");
-      return regex.test(item.title);
-      // return item.title.includes(this.search);
+    filterAndSortItems(items) {
+      let result = this.filterItems(items);
+      return [...result].sort((a, b) => {
+        return a.title.localeCompare(b.title);
+      });
     },
   },
   mounted() {
diff --git a/frontend/src/store/modules/templates.js b/frontend/src/store/modules/templates.js
index adb3b2f2..c71f3f29 100644
--- a/frontend/src/store/modules/templates.js
+++ b/frontend/src/store/modules/templates.js
@@ -3,7 +3,7 @@ import router from "@/router/index";
 
 const state = {
   templates: [],
-  isLoading: false
+  isLoading: false,
 };
 
 const mutations = {
@@ -11,7 +11,7 @@ const mutations = {
     state.templates = templates;
   },
   setTemplate(state, template) {
-    const idx = state.templates.findIndex(x => x.id === template.id);
+    const idx = state.templates.findIndex((x) => x.id === template.id);
     if (idx < 0) {
       state.templates.push(template);
     } else {
@@ -22,14 +22,14 @@ const mutations = {
     state.templates.push(template);
   },
   removeTemplate(state, template) {
-    const idx = state.templates.findIndex(x => x.id === template.id);
+    const idx = state.templates.findIndex((x) => x.id === template.id);
     if (idx < 0) {
       return;
     }
     state.templates.splice(idx, 1);
   },
   setApp(state, app) {
-    const idx = state.apps.findIndex(x => x.id === app.id);
+    const idx = state.apps.findIndex((x) => x.id === app.id);
     if (idx < 0) {
       state.apps.push(app);
     } else {
@@ -41,7 +41,7 @@ const mutations = {
   },
   setTemplateVariables(state, templateVariables) {
     state.templateVariables = templateVariables;
-  }
+  },
 };
 
 const actions = {
@@ -50,12 +50,11 @@ const actions = {
     const url = "/api/templates/";
     axios
       .get(url)
-      .then(response => {
-        console.log(response)
+      .then((response) => {
         const templates = response.data;
         commit("setTemplates", templates);
       })
-      .catch(err => {
+      .catch((err) => {
         commit("snackbar/setErr", err, { root: true });
       })
       .finally(() => {
@@ -67,44 +66,39 @@ const actions = {
     const url = "/api/templates/";
     axios
       .get(url)
-      .then(response => {
-        console.log(response)
+      .then((response) => {
         const templates = response.data;
-        
-        console.log(templates)
-        templates.forEach(function(template, i) {
-          console.log(template)
-          console.log(i)
-          let temp_url = `/api/templates/${template.id}`
+
+        templates.forEach(function(template) {
+          let temp_url = `/api/templates/${template.id}`;
           axios
             .get(temp_url)
-            .then(response => {
-              console.log(response)
+            .then((response) => {
               commit("setTemplate", response.data);
             })
-            .catch(err => {
-              commit("snackbar/setErr", err, { root: true })
-            })
-        })
-        commit("setTemplates", templates)
+            .catch((err) => {
+              commit("snackbar/setErr", err, { root: true });
+            });
+        });
+        commit("setTemplates", templates);
       })
-      .catch(err => {
+      .catch((err) => {
         commit("snackbar/setErr", err, { root: true });
       })
       .finally(() => {
-        commit("setLoading", false)
-      })
+        commit("setLoading", false);
+      });
   },
   readTemplate({ commit }, id) {
     commit("setLoading", true);
     const url = `/api/templates/${id}`;
     axios
       .get(url)
-      .then(response => {
+      .then((response) => {
         const template = response.data;
         commit("setTemplate", template);
       })
-      .catch(err => {
+      .catch((err) => {
         commit("snackbar/setErr", err, { root: true });
       })
       .finally(() => {
@@ -116,11 +110,11 @@ const actions = {
     const url = "/api/templates/";
     axios
       .post(url, payload)
-      .then(response => {
+      .then((response) => {
         const template = response.data;
         commit("addTemplate", template);
       })
-      .catch(err => {
+      .catch((err) => {
         commit("snackbar/setErr", err, { root: true });
       })
       .finally(() => {
@@ -133,11 +127,11 @@ const actions = {
     const url = `/api/templates/${id}/refresh`;
     axios
       .get(url)
-      .then(response => {
+      .then((response) => {
         const template = response.data;
         commit("setTemplate", template);
       })
-      .catch(err => {
+      .catch((err) => {
         commit("snackbar/setErr", err, { root: true });
       })
       .finally(() => {
@@ -149,11 +143,11 @@ const actions = {
     const url = `/api/templates/${id}`;
     axios
       .delete(url)
-      .then(response => {
+      .then((response) => {
         const template = response.data;
         commit("removeTemplate", template);
       })
-      .catch(err => {
+      .catch((err) => {
         commit("snackbar/setErr", err, { root: true });
       })
       .finally(() => {
@@ -166,7 +160,7 @@ const actions = {
     return new Promise((resolve, reject) => {
       axios
         .get(url)
-        .then(response => {
+        .then((response) => {
           const app = response.data;
           commit("setLoading", false);
           resolve(app);
@@ -174,7 +168,7 @@ const actions = {
         .finally(() => {
           commit("setLoading", false);
         })
-        .catch(error => {
+        .catch((error) => {
           commit("snackbar/setErr", error, { root: true });
           reject(error);
         });
@@ -200,7 +194,7 @@ const actions = {
     return new Promise((resolve, reject) => {
       axios
         .get(url)
-        .then(response => {
+        .then((response) => {
           const templateVariables = response.data;
           commit("setTemplateVariables", templateVariables);
           resolve(templateVariables);
@@ -208,7 +202,7 @@ const actions = {
         .finally(() => {
           commit("setLoading", false);
         })
-        .catch(err => {
+        .catch((err) => {
           commit("snackbar/setErr", err, { root: true });
           reject(err);
         });
@@ -219,25 +213,25 @@ const actions = {
     const url = "/api/settings/variables";
     axios
       .post(url, payload, {})
-      .then(response => {
+      .then((response) => {
         const templateVariables = response.data;
         commit("setTemplateVariables", templateVariables);
       })
-      .catch(err => {
+      .catch((err) => {
         commit("snackbar/setErr", err, { root: true });
       })
       .finally(() => {
         commit("setLoading", false);
       });
-  }
+  },
 };
 
 const getters = {
   getTemplateById(state) {
-    return id => {
-      return state.templates.find(x => x.id == id);
+    return (id) => {
+      return state.templates.find((x) => x.id == id);
     };
-  }
+  },
 };
 
 export default {
@@ -245,5 +239,5 @@ export default {
   state,
   mutations,
   getters,
-  actions
+  actions,
 };
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 80f64fb3..f5996b7f 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -120,7 +120,7 @@ export default {
         this.stats[statsGroup.name].mem_total.push(statsGroup.mem_total);
         for (let key in this.stats[statsGroup.name]) {
           if (
-            this.stats[statsGroup.name][key].length > 5 &&
+            this.stats[statsGroup.name][key].length > 3 &&
             Array.isArray(this.stats[statsGroup.name][key])
           ) {
             this.stats[statsGroup.name][key].shift();

From a1fbd7acbfd5e75113022b48194037724c69a5af Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Fri, 2 Oct 2020 14:27:47 -0700
Subject: [PATCH 23/24] linted

---
 frontend/package-lock.json                    | 38 +++++-----
 frontend/package.json                         |  8 +--
 .../ApplicationDeployFromTemplate.vue         | 15 ++--
 .../applications/ApplicationDetails.vue       | 38 +++++-----
 .../AppContent.vue                            | 10 +--
 .../applications/ApplicationsForm.vue         | 53 ++++++++++----
 .../applications/ApplicationsList.vue         | 37 ++++++----
 frontend/src/components/nav/Sidebar.vue       | 26 +++----
 .../src/components/serverSettings/Prune.vue   | 14 ++--
 .../serverSettings/ServerUpdate.vue           | 70 ++++++++++---------
 frontend/src/store/modules/apps.js            | 34 ++++-----
 frontend/src/store/modules/templates.js       | 60 ++++++++--------
 frontend/src/views/Applications.vue           |  2 -
 frontend/src/views/Home.vue                   | 10 +--
 14 files changed, 226 insertions(+), 189 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 8a7c3ed0..5f114617 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10942,9 +10942,9 @@
       }
     },
     "moment": {
-      "version": "2.28.0",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.28.0.tgz",
-      "integrity": "sha512-Z5KOjYmnHyd/ukynmFd/WwyXHd7L4J9vTI/nn5Ap9AVUgaAE15VvQ9MOGmJJygEUklupqIrFnor/tjTwRU+tQw=="
+      "version": "2.29.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.0.tgz",
+      "integrity": "sha512-z6IJ5HXYiuxvFTI6eiQ9dm77uE0gyy1yXNApVHqTcnIKfY9tIwEjlzsZ6u1LQXvVgKeTnv9Xm7NDvJ7lso3MtA=="
     },
     "move-concurrently": {
       "version": "1.0.1",
@@ -11101,9 +11101,9 @@
       "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
     },
     "node-forge": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
-      "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==",
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
+      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
       "dev": true
     },
     "node-ipc": {
@@ -13510,12 +13510,12 @@
       "dev": true
     },
     "selfsigned": {
-      "version": "1.10.7",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz",
-      "integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==",
+      "version": "1.10.8",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz",
+      "integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==",
       "dev": true,
       "requires": {
-        "node-forge": "0.9.0"
+        "node-forge": "^0.10.0"
       }
     },
     "semver": {
@@ -15496,9 +15496,9 @@
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
     },
     "vee-validate": {
-      "version": "3.3.11",
-      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-3.3.11.tgz",
-      "integrity": "sha512-+/M2g0VYwBDX8o7PkW/CRUxDkyudo9C/8S/Q7EoGV1duIrK2Q9W08BFcbDkkNnSAVVfknPOWkFGHeAGOgfOxCw=="
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-3.4.0.tgz",
+      "integrity": "sha512-qxcqrGYr2gchZOjyhBKu7G4NOyOTmH6vk8APGdxAiL/0Iy2QZP/vcOYNbx7+zMhg7P3q418AseHR1sbckB5I+A=="
     },
     "vendors": {
       "version": "1.0.4",
@@ -15912,9 +15912,9 @@
       }
     },
     "vue-router": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.3.tgz",
-      "integrity": "sha512-BADg1mjGWX18Dpmy6bOGzGNnk7B/ZA0RxuA6qedY/YJwirMfKXIDzcccmHbQI0A6k5PzMdMloc0ElHfyOoX35A=="
+      "version": "3.4.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.5.tgz",
+      "integrity": "sha512-ioRY5QyDpXM9TDjOX6hX79gtaMXSVDDzSlbIlyAmbHNteIL81WIVB2e+jbzV23vzxtoV0krdS2XHm+GxFg+Nxg=="
     },
     "vue-style-loader": {
       "version": "4.1.2",
@@ -15951,9 +15951,9 @@
       "dev": true
     },
     "vuetify": {
-      "version": "2.3.10",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.3.10.tgz",
-      "integrity": "sha512-KzL/MhZ7ajubm9kwbdCoA/cRV50RX+a5Hcqiwt7Am1Fni2crDtl2no05UNwKroTfscrYYf07gq3WIFSurPsnCA=="
+      "version": "2.3.12",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.3.12.tgz",
+      "integrity": "sha512-FSt1pzpf0/Lh0xuctAPB7RiLbUl7bzVc7ejbXLLhfmgm7zD7yabuhVYuyVda/SzokjZMGS3j1lNu2lLfdrz0oQ=="
     },
     "vuetify-loader": {
       "version": "1.6.0",
diff --git a/frontend/package.json b/frontend/package.json
index 4a418697..98646dca 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,12 +14,12 @@
     "chart.js": "^2.9.3",
     "chartjs-plugin-crosshair": "^1.1.6",
     "core-js": "^3.6.5",
-    "moment": "^2.28.0",
-    "vee-validate": "^3.3.11",
+    "moment": "^2.29.0",
+    "vee-validate": "^3.4.0",
     "vue": "^2.6.12",
     "vue-chartjs": "^3.5.1",
-    "vue-router": "^3.4.3",
-    "vuetify": "^2.3.10",
+    "vue-router": "^3.4.5",
+    "vuetify": "^2.3.12",
     "vuex": "^3.4.0"
   },
   "devDependencies": {
diff --git a/frontend/src/components/applications/ApplicationDeployFromTemplate.vue b/frontend/src/components/applications/ApplicationDeployFromTemplate.vue
index fa938ceb..7570ecba 100644
--- a/frontend/src/components/applications/ApplicationDeployFromTemplate.vue
+++ b/frontend/src/components/applications/ApplicationDeployFromTemplate.vue
@@ -5,7 +5,8 @@
     </v-card-title>
     <v-tabs v-model="tab" grow>
       <v-tab v-for="template in templates" :key="template.id">
-        {{ template.title }} <small v-if="template.items">({{ template.items.length }})</small>
+        {{ template.title }}
+        <small v-if="template.items">({{ template.items.length }})</small>
       </v-tab>
     </v-tabs>
     <v-tabs-items v-model="tab">
@@ -352,15 +353,15 @@ export default {
       appDetailsDialog: false,
       selectedApp: null,
       search: "",
-      tab: null,
+      tab: null
     };
   },
   computed: {
-    ...mapState("templates", ["templates", "isLoading"]),
+    ...mapState("templates", ["templates", "isLoading"])
   },
   methods: {
     ...mapActions({
-      readTemplates: "templates/readTemplatesAndItems",
+      readTemplates: "templates/readTemplatesAndItems"
     }),
     filterItems(items) {
       if (!items) {
@@ -370,7 +371,7 @@ export default {
         return items;
       }
       let regex = new RegExp(this.search, "i");
-      return items.filter((item) => {
+      return items.filter(item => {
         return regex.test(item.title);
       });
     },
@@ -379,11 +380,11 @@ export default {
       return [...result].sort((a, b) => {
         return a.title.localeCompare(b.title);
       });
-    },
+    }
   },
   mounted() {
     this.readTemplates();
-  },
+  }
 };
 </script>
 
diff --git a/frontend/src/components/applications/ApplicationDetails.vue b/frontend/src/components/applications/ApplicationDetails.vue
index 259daccf..c444254a 100644
--- a/frontend/src/components/applications/ApplicationDetails.vue
+++ b/frontend/src/components/applications/ApplicationDetails.vue
@@ -38,7 +38,7 @@
                     </v-list-item-icon>
                     <v-list-item-title>Restart</v-list-item-title>
                   </v-list-item>
-                  <v-divider/>
+                  <v-divider />
                   <v-list-item
                     @click="AppAction({ Name: app.name, Action: 'kill' })"
                   >
@@ -91,7 +91,7 @@ import ApplicationDetailsNav from "./ApplicationDetailsComponents/ApplicationDet
 import { mapActions, mapGetters, mapState } from "vuex";
 export default {
   components: {
-    Nav: ApplicationDetailsNav,
+    Nav: ApplicationDetailsNav
   },
   data() {
     return {
@@ -101,27 +101,27 @@ export default {
         cpu_percent: [],
         mem_percent: [],
         mem_current: [],
-        mem_total: [],
+        mem_total: []
       },
       connection: null,
-      statConnection: null,
+      statConnection: null
     };
   },
   computed: {
     ...mapState("apps", ["apps", "app", "isLoading", "processes"]),
     ...mapGetters({
-      getAppByName: "apps/getAppByName",
+      getAppByName: "apps/getAppByName"
     }),
     app() {
       const appName = this.$route.params.appName;
       return this.getAppByName(appName);
-    },
+    }
   },
   methods: {
     ...mapActions({
       readApp: "apps/readApp",
       readAppProcesses: "apps/readAppProcesses",
-      AppAction: "apps/AppAction",
+      AppAction: "apps/AppAction"
     }),
     refresh() {
       const appName = this.$route.params.appName;
@@ -134,11 +134,11 @@ export default {
     },
     readAppLogs(appName) {
       console.log("Starting connection to Logs");
-      var proto = ''
-      if (location.protocol == 'http:') {
-        proto = 'ws://'
+      var proto = "";
+      if (location.protocol == "http:") {
+        proto = "ws://";
       } else {
-        proto = 'wss://'
+        proto = "wss://";
       }
       this.connection = new WebSocket(
         `${proto}${location.hostname}:${location.port}/api/apps/${appName}/livelogs`
@@ -149,7 +149,7 @@ export default {
         );
       };
 
-      this.connection.onmessage = (event) => {
+      this.connection.onmessage = event => {
         this.logs.push(event.data);
       };
     },
@@ -161,11 +161,11 @@ export default {
     },
     readAppStats(appName) {
       console.log("Starting connection to Stats");
-      var sproto = ''
-      if (location.protocol == 'http:') {
-        sproto = 'ws://'
+      var sproto = "";
+      if (location.protocol == "http:") {
+        sproto = "ws://";
       } else {
-        sproto = 'wss://'
+        sproto = "wss://";
       }
 
       this.statConnection = new WebSocket(
@@ -176,7 +176,7 @@ export default {
           JSON.stringify({ type: "onopen", data: "Connected!" })
         );
       };
-      this.statConnection.onmessage = (event) => {
+      this.statConnection.onmessage = event => {
         let statsGroup = JSON.parse(event.data);
         this.stats.time.push(statsGroup.time);
         this.stats.cpu_percent.push(Math.round(statsGroup.cpu_percent));
@@ -201,7 +201,7 @@ export default {
       );
       this.statConnection.close(1000, "Leaving page or refreshing");
       // this.statConnection.close(1001, "Leaving page or refreshing");
-    },
+    }
   },
   created() {
     const appName = this.$route.params.appName;
@@ -218,7 +218,7 @@ export default {
   beforeDestroy() {
     this.closeLogs();
     this.closeStats();
-  },
+  }
 };
 </script>
 
diff --git a/frontend/src/components/applications/ApplicationDetailsComponents/AppContent.vue b/frontend/src/components/applications/ApplicationDetailsComponents/AppContent.vue
index 2f56ac3b..bd831a24 100644
--- a/frontend/src/components/applications/ApplicationDetailsComponents/AppContent.vue
+++ b/frontend/src/components/applications/ApplicationDetailsComponents/AppContent.vue
@@ -258,8 +258,8 @@
         <template v-slot:default>
           <thead>
             <tr>
-              <th class="text-center" >Label</th>
-              <th class="text-center" >Value</th>
+              <th class="text-center">Label</th>
+              <th class="text-center">Value</th>
             </tr>
           </thead>
           <tbody>
@@ -281,7 +281,7 @@
 export default {
   data() {
     return {
-      host_ip: location.hostname,
+      host_ip: location.hostname
     };
   },
   props: ["app"],
@@ -311,8 +311,8 @@ export default {
         env.push(_split_data);
       }
       return env;
-    },
-  },
+    }
+  }
 };
 </script>
 
diff --git a/frontend/src/components/applications/ApplicationsForm.vue b/frontend/src/components/applications/ApplicationsForm.vue
index 71320afd..b6c1f582 100644
--- a/frontend/src/components/applications/ApplicationsForm.vue
+++ b/frontend/src/components/applications/ApplicationsForm.vue
@@ -105,7 +105,12 @@
                 ></v-select>
               </ValidationProvider>
             </form>
-            <v-btn color="primary" @click="deployStep += 1" :disabled="invalid" class="float-right">
+            <v-btn
+              color="primary"
+              @click="deployStep += 1"
+              :disabled="invalid"
+              class="float-right"
+            >
               Continue
             </v-btn>
           </ValidationObserver>
@@ -209,10 +214,19 @@
                 </v-col>
               </v-row>
             </form>
-            <v-btn color="primary" @click="deployStep += 1" :disabled="invalid" class="float-right">
+            <v-btn
+              color="primary"
+              @click="deployStep += 1"
+              :disabled="invalid"
+              class="float-right"
+            >
               Continue
             </v-btn>
-            <v-btn color="secondary" @click="deployStep -= 1" class="mx-2 float-right">
+            <v-btn
+              color="secondary"
+              @click="deployStep -= 1"
+              class="mx-2 float-right"
+            >
               Back
             </v-btn>
           </ValidationObserver>
@@ -278,10 +292,19 @@
                 </v-col>
               </v-row>
             </form>
-            <v-btn color="primary" @click="deployStep += 1" :disabled="invalid" class="float-right">
+            <v-btn
+              color="primary"
+              @click="deployStep += 1"
+              :disabled="invalid"
+              class="float-right"
+            >
               Continue
             </v-btn>
-            <v-btn color="secondary" @click="deployStep -= 1" class="mx-2 float-right">
+            <v-btn
+              color="secondary"
+              @click="deployStep -= 1"
+              class="mx-2 float-right"
+            >
               Back
             </v-btn>
           </ValidationObserver>
@@ -618,7 +641,7 @@ import { ValidationObserver, ValidationProvider } from "vee-validate";
 export default {
   components: {
     ValidationProvider,
-    ValidationObserver,
+    ValidationObserver
   },
   data() {
     return {
@@ -635,7 +658,7 @@ export default {
         devices: [],
         labels: [],
         sysctls: [],
-        cap_add: [],
+        cap_add: []
       },
       isLoading: false,
       cap_options: [
@@ -661,16 +684,16 @@ export default {
         "SYS_BOOT",
         "LEASE",
         "WAKE_ALARM",
-        "BLOCK_SUSPEND",
-      ],
+        "BLOCK_SUSPEND"
+      ]
     };
   },
   methods: {
     ...mapActions({
-      readApp: "templates/readApp",
+      readApp: "templates/readApp"
     }),
     ...mapMutations({
-      setErr: "snackbar/setErr",
+      setErr: "snackbar/setErr"
     }),
     addPort() {
       this.form.ports.push({ hport: "", cport: "", proto: "tcp" });
@@ -732,7 +755,7 @@ export default {
           this.isLoading = false;
           this.$router.push({ name: "View Applications" });
         })
-        .catch((err) => {
+        .catch(err => {
           this.isLoading = false;
           this.setErr(err);
         });
@@ -752,7 +775,7 @@ export default {
             devices: app.devices || [],
             labels: app.labels || [],
             sysctls: app.sysctls || [],
-            cap_add: app.cap_add || [],
+            cap_add: app.cap_add || []
           };
         } catch (error) {
           console.error(error, error.response);
@@ -761,11 +784,11 @@ export default {
       } else {
         console.log("No app selected");
       }
-    },
+    }
   },
   async created() {
     await this.populateForm();
-  },
+  }
 };
 </script>
 
diff --git a/frontend/src/components/applications/ApplicationsList.vue b/frontend/src/components/applications/ApplicationsList.vue
index a35523f1..5a51ecf1 100644
--- a/frontend/src/components/applications/ApplicationsList.vue
+++ b/frontend/src/components/applications/ApplicationsList.vue
@@ -119,9 +119,20 @@
               </v-list>
             </v-menu>
             <span class="nametext ml-1">{{ item.name }}</span>
-            <v-tooltip right v-if="updatable.includes(item.name)" color="primary" class="mb-2">
+            <v-tooltip
+              right
+              v-if="updatable.includes(item.name)"
+              color="primary"
+              class="mb-2"
+            >
               <template v-slot:activator="{ on, attrs }">
-                  <v-avatar class="ml-1" v-bind="attrs" v-on="on" color="primary" size="6"></v-avatar>
+                <v-avatar
+                  class="ml-1"
+                  v-bind="attrs"
+                  v-on="on"
+                  color="primary"
+                  size="6"
+                ></v-avatar>
               </template>
               <span>Update Available</span>
             </v-tooltip>
@@ -200,37 +211,37 @@ export default {
           value: "name",
           sortable: true,
           align: "start",
-          width: "30%",
+          width: "30%"
         },
         {
           text: "Status",
           value: "status",
           sortable: true,
-          width: "10%",
+          width: "10%"
         },
         {
           text: "Image",
           value: "image",
-          sortable: true,
+          sortable: true
         },
         {
           text: "Ports",
           value: "ports",
-          sortable: true,
+          sortable: true
         },
         {
           text: "Created At",
           value: "created",
-          sortable: true,
-        },
-      ],
+          sortable: true
+        }
+      ]
     };
   },
   methods: {
     ...mapActions({
       readApps: "apps/readApps",
       AppAction: "apps/AppAction",
-      checkUpdates: "apps/checkAppsUpdates",
+      checkUpdates: "apps/checkAppsUpdates"
     }),
     handleRowClick(appName) {
       this.$router.push({ path: `/apps${appName.Name}/info` });
@@ -250,14 +261,14 @@ export default {
     },
     refresh() {
       this.readApps();
-    },
+    }
   },
   computed: {
-    ...mapState("apps", ["apps", "isLoading", "action", "updatable"]),
+    ...mapState("apps", ["apps", "isLoading", "action", "updatable"])
   },
   mounted() {
     this.readApps();
-  },
+  }
 };
 </script>
 
diff --git a/frontend/src/components/nav/Sidebar.vue b/frontend/src/components/nav/Sidebar.vue
index 63d220ee..d2eab04c 100644
--- a/frontend/src/components/nav/Sidebar.vue
+++ b/frontend/src/components/nav/Sidebar.vue
@@ -54,7 +54,7 @@ export default {
         to: "/",
         icon: "mdi-view-dashboard",
         text: "Dashboard",
-        divider: true,
+        divider: true
       },
       {
         icon: "mdi-application",
@@ -63,14 +63,14 @@ export default {
           {
             text: "View Applications",
             to: "/apps",
-            icon: "mdi-view-list",
+            icon: "mdi-view-list"
           },
           {
             text: "New Application",
             to: "/apps/deploy",
-            icon: "mdi-plus",
-          },
-        ],
+            icon: "mdi-plus"
+          }
+        ]
       },
       {
         icon: "mdi-folder",
@@ -79,22 +79,22 @@ export default {
           {
             text: "View Templates",
             to: "/templates",
-            icon: "mdi-view-list",
+            icon: "mdi-view-list"
           },
           {
             text: "New Template",
             to: "/templates/new",
-            icon: "mdi-plus",
-          },
-        ],
+            icon: "mdi-plus"
+          }
+        ]
       },
       {
         to: "/settings/info",
         icon: "mdi-cog",
-        text: "Settings",
-      },
-    ],
-  }),
+        text: "Settings"
+      }
+    ]
+  })
 };
 </script>
 
diff --git a/frontend/src/components/serverSettings/Prune.vue b/frontend/src/components/serverSettings/Prune.vue
index abb45d68..a9feff44 100644
--- a/frontend/src/components/serverSettings/Prune.vue
+++ b/frontend/src/components/serverSettings/Prune.vue
@@ -73,13 +73,13 @@ export default {
   data() {
     return {
       containerDialog: false,
-      isLoading: false,
+      isLoading: false
     };
   },
   methods: {
     ...mapMutations({
       setMessage: "snackbar/setMessage",
-      setErr: "snackbar/setErr",
+      setErr: "snackbar/setErr"
     }),
     formatBytes(bytes) {
       if (bytes === 0) return "0 Bytes";
@@ -97,9 +97,9 @@ export default {
       axios({
         url: "/api/settings/prune/" + resource,
         method: "GET",
-        responseType: "text/json",
+        responseType: "text/json"
       })
-        .then((response) => {
+        .then(response => {
           console.log(response.data);
           let action = Object.keys(response.data)[0];
           console.log(action);
@@ -118,11 +118,11 @@ export default {
           );
           this.isLoading = false;
         })
-        .catch((err) => {
+        .catch(err => {
           this.setErr(err);
           this.isLoading = false;
         });
-    },
-  },
+    }
+  }
 };
 </script>
diff --git a/frontend/src/components/serverSettings/ServerUpdate.vue b/frontend/src/components/serverSettings/ServerUpdate.vue
index 444f9932..86946f17 100644
--- a/frontend/src/components/serverSettings/ServerUpdate.vue
+++ b/frontend/src/components/serverSettings/ServerUpdate.vue
@@ -1,18 +1,21 @@
 <template>
   <v-card>
     <v-fade-transition>
-        <v-progress-linear
-          indeterminate
-          v-if="isLoading"
-          color="primary"
-          bottom
-        />
-      </v-fade-transition>
+      <v-progress-linear
+        indeterminate
+        v-if="isLoading"
+        color="primary"
+        bottom
+      />
+    </v-fade-transition>
     <v-card-title class="subheading primary font-weight-bold"
       >Update</v-card-title
     >
     <v-card-text class="mt-2"
-      >Update Yacht to the latest version. <br/> Note: This will spin up a run-once watchtower instance and update Yacht. In the process Yacht will be restarted and you will be logged out.</v-card-text
+      >Update Yacht to the latest version. <br />
+      Note: This will spin up a run-once watchtower instance and update Yacht.
+      In the process Yacht will be restarted and you will be logged
+      out.</v-card-text
     >
     <v-btn
       class="mx-5 mb-5"
@@ -33,62 +36,63 @@ export default {
     return {
       containerDialog: false,
       isLoading: false,
-      updatable: false,
+      updatable: false
     };
   },
   mounted() {
-    this.checkUpdate()
+    this.checkUpdate();
   },
   methods: {
     ...mapMutations({
       setMessage: "snackbar/setMessage",
-      setErr: "snackbar/setErr",
+      setErr: "snackbar/setErr"
     }),
     ...mapActions({
       logout: "auth/AUTH_LOGOUT"
     }),
     checkUpdate() {
-      this.isLoading = true
+      this.isLoading = true;
       axios({
         url: "/api/settings/check/update",
         method: "GET",
-        responseType: "text/json",
+        responseType: "text/json"
       })
-        .then((response) => {
-          this.isLoading = false
-          console.log(response)
-          this.updatable = response.data
-        })
-        .catch((err) => {
-          this.isLoading = false
-          this.setErr(err)
+        .then(response => {
+          this.isLoading = false;
+          console.log(response);
+          this.updatable = response.data;
         })
+        .catch(err => {
+          this.isLoading = false;
+          this.setErr(err);
+        });
     },
     update() {
-      this.isLoading = true
+      this.isLoading = true;
       axios({
         url: "/api/settings/update",
         method: "GET",
-        responseType: "text/json",
+        responseType: "text/json"
       })
-        .then((response) => {
-          this.isLoading = false
+        .then(response => {
+          this.isLoading = false;
           console.log(response.data);
           this.setMessage(
             "Yacht is updating now. You will be logged out to complete the update."
           );
         })
         .finally(() => {
-          this.isLoading = true
-          const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
-          sleep(5000)
-          this.logout()
+          this.isLoading = true;
+          const sleep = delay =>
+            new Promise(resolve => setTimeout(resolve, delay));
+          sleep(5000);
+          this.logout();
         })
-        .catch((err) => {
-          this.isLoading = false
+        .catch(err => {
+          this.isLoading = false;
           this.setErr(err);
         });
-    },
-  },
+    }
+  }
 };
 </script>
diff --git a/frontend/src/store/modules/apps.js b/frontend/src/store/modules/apps.js
index e391315c..47a554aa 100644
--- a/frontend/src/store/modules/apps.js
+++ b/frontend/src/store/modules/apps.js
@@ -6,7 +6,7 @@ const state = {
   logs: [],
   processes: [],
   isLoading: false,
-  action: ''
+  action: ""
 };
 
 const mutations = {
@@ -31,13 +31,13 @@ const mutations = {
     state.isLoading = loading;
   },
   setAction(state, action) {
-    state.action = action
+    state.action = action;
   },
   setUpdatable(state, updatable) {
-    state.updatable = updatable
+    state.updatable = updatable;
   },
   setUpdated(state, updated) {
-    let index = state.updatable.indexOf(updated)
+    let index = state.updatable.indexOf(updated);
     state.updatable.splice(index, 1);
   }
 };
@@ -45,7 +45,7 @@ const mutations = {
 const actions = {
   readApps({ commit }) {
     commit("setLoading", true);
-    commit("setAction", 'Getting Apps ...')
+    commit("setAction", "Getting Apps ...");
     const url = "/api/apps/";
     axios
       .get(url)
@@ -58,27 +58,27 @@ const actions = {
       })
       .finally(() => {
         commit("setLoading", false);
-        commit("setAction", '')
-      })
+        commit("setAction", "");
+      });
   },
   checkAppsUpdates({ commit }) {
     commit("setLoading", true);
-    commit("setAction", 'Checking for updates...')
+    commit("setAction", "Checking for updates...");
     const url = "/api/apps/updates";
     axios
       .get(url)
       .then(response => {
-        console.log(response)
+        console.log(response);
         const apps = response.data;
         commit("setUpdatable", apps);
       })
       .catch(err => {
-        commit("snackbar/setErr", err, { root: true })
+        commit("snackbar/setErr", err, { root: true });
       })
       .finally(() => {
-        commit("setLoading", false)
-        commit("setAction", '')
-      })
+        commit("setLoading", false);
+        commit("setAction", "");
+      });
   },
   readApp({ commit }, Name) {
     const url = `/api/apps/${Name}`;
@@ -125,7 +125,7 @@ const actions = {
   },
   AppAction({ commit }, { Name, Action }) {
     commit("setLoading", true);
-    commit("setAction", Action + ' ' + Name + ' ...')
+    commit("setAction", Action + " " + Name + " ...");
     const url = `/api/apps/${Name}/${Action}`;
     axios
       .get(url)
@@ -137,11 +137,11 @@ const actions = {
         commit("snackbar/setErr", err, { root: true });
       })
       .finally(() => {
-        if (Action == 'update') {
-          commit("setUpdated", Name)
+        if (Action == "update") {
+          commit("setUpdated", Name);
         }
         commit("setLoading", false);
-        commit("setAction", '')
+        commit("setAction", "");
       });
   }
 };
diff --git a/frontend/src/store/modules/templates.js b/frontend/src/store/modules/templates.js
index c71f3f29..b2cbacb2 100644
--- a/frontend/src/store/modules/templates.js
+++ b/frontend/src/store/modules/templates.js
@@ -3,7 +3,7 @@ import router from "@/router/index";
 
 const state = {
   templates: [],
-  isLoading: false,
+  isLoading: false
 };
 
 const mutations = {
@@ -11,7 +11,7 @@ const mutations = {
     state.templates = templates;
   },
   setTemplate(state, template) {
-    const idx = state.templates.findIndex((x) => x.id === template.id);
+    const idx = state.templates.findIndex(x => x.id === template.id);
     if (idx < 0) {
       state.templates.push(template);
     } else {
@@ -22,14 +22,14 @@ const mutations = {
     state.templates.push(template);
   },
   removeTemplate(state, template) {
-    const idx = state.templates.findIndex((x) => x.id === template.id);
+    const idx = state.templates.findIndex(x => x.id === template.id);
     if (idx < 0) {
       return;
     }
     state.templates.splice(idx, 1);
   },
   setApp(state, app) {
-    const idx = state.apps.findIndex((x) => x.id === app.id);
+    const idx = state.apps.findIndex(x => x.id === app.id);
     if (idx < 0) {
       state.apps.push(app);
     } else {
@@ -41,7 +41,7 @@ const mutations = {
   },
   setTemplateVariables(state, templateVariables) {
     state.templateVariables = templateVariables;
-  },
+  }
 };
 
 const actions = {
@@ -50,11 +50,11 @@ const actions = {
     const url = "/api/templates/";
     axios
       .get(url)
-      .then((response) => {
+      .then(response => {
         const templates = response.data;
         commit("setTemplates", templates);
       })
-      .catch((err) => {
+      .catch(err => {
         commit("snackbar/setErr", err, { root: true });
       })
       .finally(() => {
@@ -66,23 +66,23 @@ const actions = {
     const url = "/api/templates/";
     axios
       .get(url)
-      .then((response) => {
+      .then(response => {
         const templates = response.data;
 
         templates.forEach(function(template) {
           let temp_url = `/api/templates/${template.id}`;
           axios
             .get(temp_url)
-            .then((response) => {
+            .then(response => {
               commit("setTemplate", response.data);
             })
-            .catch((err) => {
+            .catch(err => {
               commit("snackbar/setErr", err, { root: true });
             });
         });
         commit("setTemplates", templates);
       })
-      .catch((err) => {
+      .catch(err => {
         commit("snackbar/setErr", err, { root: true });
       })
       .finally(() => {
@@ -94,11 +94,11 @@ const actions = {
     const url = `/api/templates/${id}`;
     axios
       .get(url)
-      .then((response) => {
+      .then(response => {
         const template = response.data;
         commit("setTemplate", template);
       })
-      .catch((err) => {
+      .catch(err => {
         commit("snackbar/setErr", err, { root: true });
       })
       .finally(() => {
@@ -110,11 +110,11 @@ const actions = {
     const url = "/api/templates/";
     axios
       .post(url, payload)
-      .then((response) => {
+      .then(response => {
         const template = response.data;
         commit("addTemplate", template);
       })
-      .catch((err) => {
+      .catch(err => {
         commit("snackbar/setErr", err, { root: true });
       })
       .finally(() => {
@@ -127,11 +127,11 @@ const actions = {
     const url = `/api/templates/${id}/refresh`;
     axios
       .get(url)
-      .then((response) => {
+      .then(response => {
         const template = response.data;
         commit("setTemplate", template);
       })
-      .catch((err) => {
+      .catch(err => {
         commit("snackbar/setErr", err, { root: true });
       })
       .finally(() => {
@@ -143,11 +143,11 @@ const actions = {
     const url = `/api/templates/${id}`;
     axios
       .delete(url)
-      .then((response) => {
+      .then(response => {
         const template = response.data;
         commit("removeTemplate", template);
       })
-      .catch((err) => {
+      .catch(err => {
         commit("snackbar/setErr", err, { root: true });
       })
       .finally(() => {
@@ -160,7 +160,7 @@ const actions = {
     return new Promise((resolve, reject) => {
       axios
         .get(url)
-        .then((response) => {
+        .then(response => {
           const app = response.data;
           commit("setLoading", false);
           resolve(app);
@@ -168,7 +168,7 @@ const actions = {
         .finally(() => {
           commit("setLoading", false);
         })
-        .catch((error) => {
+        .catch(error => {
           commit("snackbar/setErr", error, { root: true });
           reject(error);
         });
@@ -194,7 +194,7 @@ const actions = {
     return new Promise((resolve, reject) => {
       axios
         .get(url)
-        .then((response) => {
+        .then(response => {
           const templateVariables = response.data;
           commit("setTemplateVariables", templateVariables);
           resolve(templateVariables);
@@ -202,7 +202,7 @@ const actions = {
         .finally(() => {
           commit("setLoading", false);
         })
-        .catch((err) => {
+        .catch(err => {
           commit("snackbar/setErr", err, { root: true });
           reject(err);
         });
@@ -213,25 +213,25 @@ const actions = {
     const url = "/api/settings/variables";
     axios
       .post(url, payload, {})
-      .then((response) => {
+      .then(response => {
         const templateVariables = response.data;
         commit("setTemplateVariables", templateVariables);
       })
-      .catch((err) => {
+      .catch(err => {
         commit("snackbar/setErr", err, { root: true });
       })
       .finally(() => {
         commit("setLoading", false);
       });
-  },
+  }
 };
 
 const getters = {
   getTemplateById(state) {
-    return (id) => {
-      return state.templates.find((x) => x.id == id);
+    return id => {
+      return state.templates.find(x => x.id == id);
     };
-  },
+  }
 };
 
 export default {
@@ -239,5 +239,5 @@ export default {
   state,
   mutations,
   getters,
-  actions,
+  actions
 };
diff --git a/frontend/src/views/Applications.vue b/frontend/src/views/Applications.vue
index e1db2cdd..b6782d76 100644
--- a/frontend/src/views/Applications.vue
+++ b/frontend/src/views/Applications.vue
@@ -5,9 +5,7 @@
       enter-active-class="animated slideInRight delay"
       leave-active-class="animated slideOutLeft"
     >
-    
       <router-view />
-    
     </transition>
   </div>
 </template>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index f5996b7f..9d3dc3e1 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -89,13 +89,13 @@ export default {
         window.location.reload();
         console.log(err);
       });
-      var proto = ''
-      if (location.protocol == 'http:') {
-        proto = 'ws://'
+      var proto = "";
+      if (location.protocol == "http:") {
+        proto = "ws://";
       } else {
-        proto = 'wss://'
+        proto = "wss://";
       }
-      console.log(location.protocol)
+      console.log(location.protocol);
       this.statConnection = new WebSocket(
         `${proto}${location.hostname}:${location.port}/api/apps/stats`
       );

From 52dba54a683b457cfae5fe139282c1d32724ff4e Mon Sep 17 00:00:00 2001
From: SelfhostedPro <info@selfhosted.pro>
Date: Fri, 2 Oct 2020 15:52:19 -0700
Subject: [PATCH 24/24] added check to see if templates list is empty and
 prompt to add a template

---
 .../ApplicationDeployFromTemplate.vue         | 23 ++++++++++++-------
 frontend/src/store/modules/templates.js       |  1 -
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/applications/ApplicationDeployFromTemplate.vue b/frontend/src/components/applications/ApplicationDeployFromTemplate.vue
index 7570ecba..8cf296b1 100644
--- a/frontend/src/components/applications/ApplicationDeployFromTemplate.vue
+++ b/frontend/src/components/applications/ApplicationDeployFromTemplate.vue
@@ -3,13 +3,20 @@
     <v-card-title>
       Select a template to deploy from
     </v-card-title>
-    <v-tabs v-model="tab" grow>
+    <v-card v-if="templates.length <1 || templates == undefined">
+      <v-card-title>No Templates Found!</v-card-title>
+      <v-card-text
+        > No templates available. <a href="/#/templates/new">Add</a> one to view
+        information and launch apps from here.</v-card-text
+      >
+    </v-card>
+    <v-tabs v-model="tab" grow v-else>
       <v-tab v-for="template in templates" :key="template.id">
         {{ template.title }}
         <small v-if="template.items">({{ template.items.length }})</small>
       </v-tab>
     </v-tabs>
-    <v-tabs-items v-model="tab">
+    <v-tabs-items v-model="tab" v-if="templates">
       <v-tab-item v-for="template in templates" :key="template.id">
         <div class="d-flex templates-details page">
           <v-container
@@ -353,15 +360,15 @@ export default {
       appDetailsDialog: false,
       selectedApp: null,
       search: "",
-      tab: null
+      tab: null,
     };
   },
   computed: {
-    ...mapState("templates", ["templates", "isLoading"])
+    ...mapState("templates", ["templates", "isLoading"]),
   },
   methods: {
     ...mapActions({
-      readTemplates: "templates/readTemplatesAndItems"
+      readTemplates: "templates/readTemplatesAndItems",
     }),
     filterItems(items) {
       if (!items) {
@@ -371,7 +378,7 @@ export default {
         return items;
       }
       let regex = new RegExp(this.search, "i");
-      return items.filter(item => {
+      return items.filter((item) => {
         return regex.test(item.title);
       });
     },
@@ -380,11 +387,11 @@ export default {
       return [...result].sort((a, b) => {
         return a.title.localeCompare(b.title);
       });
-    }
+    },
   },
   mounted() {
     this.readTemplates();
-  }
+  },
 };
 </script>
 
diff --git a/frontend/src/store/modules/templates.js b/frontend/src/store/modules/templates.js
index b2cbacb2..bf82a1e8 100644
--- a/frontend/src/store/modules/templates.js
+++ b/frontend/src/store/modules/templates.js
@@ -68,7 +68,6 @@ const actions = {
       .get(url)
       .then(response => {
         const templates = response.data;
-
         templates.forEach(function(template) {
           let temp_url = `/api/templates/${template.id}`;
           axios