Theming

.github/workflows/build-do.yml

@@ -21,6 +21,6 @@ jobs:
       - name: build the image
         run: |
           docker buildx build --push \
-            --tag selfhostedpro/yacht:latest \
+            --tag selfhostedpro/yacht:do \
             --build-arg VUE_APP_THEME=DigitalOcean \
             --platform linux/amd64,linux/arm,linux/arm64 .

backend/api/actions/apps.py

@@ -24,17 +24,16 @@ def get_running_apps():
 
     return apps_list
 
-
-def check_app_updates():
-    apps_list = []
+def check_app_update(app_name):
     dclient = docker.from_env()
-    apps = dclient.containers.list(all=True)
-    for app in apps:
-        if app.attrs["Config"]["Image"]:
-            if _update_check(app.attrs["Config"]["Image"]):
-                apps_list.append(app.name)
-    return apps_list
-
+    app = dclient.containers.get(app_name)
+    if app.attrs["Config"]["Image"]:
+        if _update_check(app.attrs["Config"]["Image"]):
+            app.attrs.update(conv2dict("isUpdatable", True))
+    app.attrs.update(conv2dict("name", app.name))
+    app.attrs.update(conv2dict("ports", app.ports))
+    app.attrs.update(conv2dict("short_id", app.short_id))
+    return app.attrs
 
 def get_apps():
     apps_list = []

backend/api/routers/apps.py

@@ -43,11 +43,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("/updates/{app_name}", dependencies=[Depends(get_active_user)])
+def check_app_updates(app_name):
+    return actions.check_app_update(app_name)
 
 @router.get("/{app_name}", dependencies=[Depends(get_active_user)])
 def get_container_details(app_name):

frontend/src/components/applications/ApplicationsList.vue

@@ -4,7 +4,13 @@
       <v-fade-transition>
         <v-progress-linear
           indeterminate
-          v-if="isLoading"
+          v-if="isLoading && isLoadingValue == null"
+          color="primary"
+          bottom
+        />
+        <v-progress-linear
+          v-model="isLoadingValue"
+          v-if="isLoading && isLoadingValue"
           color="primary"
           bottom
         />
@@ -22,7 +28,7 @@
               <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 @click="checkUpdate(apps)">
               <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>
@@ -115,13 +121,13 @@
                 <v-divider
                   v-if="
                     !item.Config.Image.includes('selfhostedpro/yacht') &&
-                      updatable.includes(item.name)
+                      item.isUpdatable
                   "
                 />
                 <v-list-item
                   v-if="
                     !item.Config.Image.includes('selfhostedpro/yacht') &&
-                      updatable.includes(item.name)
+                      item.isUpdatable
                   "
                   @click="AppAction({ Name: item.name, Action: 'update' })"
                 >
@@ -153,7 +159,7 @@
             <span class="nametext ml-1">{{ item.name }}</span>
             <v-tooltip
               right
-              v-if="updatable.includes(item.name)"
+              v-if="item.isUpdatable"
               color="primary"
               class="mb-2"
             >
@@ -288,7 +294,8 @@ export default {
     ...mapActions({
       readApps: "apps/readApps",
       AppAction: "apps/AppAction",
-      checkUpdates: "apps/checkAppsUpdates"
+      checkUpdates: "apps/checkAppsUpdates",
+      checkUpdate: "apps/checkAppUpdate"
     }),
     handleRowClick(appName) {
       this.$router.push({ path: `/apps${appName.Name}/info` });
@@ -311,13 +318,12 @@ export default {
     }
   },
   computed: {
-    ...mapState("apps", ["apps", "isLoading", "action", "updatable"]),
+    ...mapState("apps", ["apps", "isLoading", "isLoadingValue", "action", "updatable"]),
     showHeaders() {
       return this.headers.filter(s => this.selectedHeaders.includes(s));
     }
   },
   created() {
-    console.log(this.headersMap);
     this.headers = Object.values(this.headersMap);
     this.selectedHeaders = this.headers;
   },

frontend/src/plugins/vuetify.js

@@ -46,8 +46,6 @@ function theme() {
       },
     },
   }
-  console.log(presetThemes)
-  console.log(process)
   return presetThemes[process.env.VUE_APP_THEME || 'Default']
 }
 

frontend/src/store/modules/apps.js

@@ -6,15 +6,16 @@ const state = {
   logs: [],
   processes: [],
   isLoading: false,
-  action: ""
+  isLoadingValue: null,
+  action: "",
 };
 
 const mutations = {
   setApps(state, apps) {
     state.apps = apps;
   },
   setApp(state, app) {
-    const idx = state.apps.findIndex(x => x.Name === app.Name);
+    const idx = state.apps.findIndex((x) => x.Name === app.Name);
     if (idx < 0) {
       state.apps.push(app);
     } else {
@@ -39,7 +40,7 @@ const mutations = {
   setUpdated(state, updated) {
     let index = state.updatable.indexOf(updated);
     state.updatable.splice(index, 1);
-  }
+  },
 };
 
 const actions = {
@@ -49,50 +50,54 @@ const actions = {
     const url = "/api/apps/";
     axios
       .get(url)
-      .then(response => {
+      .then((response) => {
         var apps = response.data;
         commit("setApps", apps);
       })
-      .catch(err => {
+      .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);
+  async checkAppUpdate({ commit }, apps) {
+    await commit("setLoading", true);
+    await commit("setAction", "Checking for updates...");
+    await Promise.all(
+      apps.map(async (_app) => {
+        let url = `/api/apps/updates/${_app.name}`;
+        await axios
+          .get(url)
+          .then((response) => {
+            let app = response.data;
+            commit("setApp", app);
+            commit("setLoading", true);
+          })
+          .catch((err) => {
+            commit("snackbar/setErr", err, { root: true });
+          });
       })
-      .catch(err => {
-        commit("snackbar/setErr", err, { root: true });
-      })
-      .finally(() => {
-        commit("setLoading", false);
-        commit("setAction", "");
-      });
+    ).then(() => {
+      commit("setLoading", false);
+      commit("setAction", "");
+    });
   },
+
   readApp({ commit }, Name) {
     const url = `/api/apps/${Name}`;
     commit("setLoading", true);
     return new Promise((resolve, reject) => {
       axios
         .get(url)
-        .then(response => {
+        .then((response) => {
           const app = response.data;
           commit("setLoading", false);
           commit("setApp", app);
           resolve(app);
         })
-        .catch(err => {
+        .catch((err) => {
           commit("snackbar/setErr", err, { root: true });
           reject(err);
         });
@@ -110,16 +115,16 @@ const actions = {
     let url = `/api/apps/${Name}/logs`;
     axios
       .get(url)
-      .then(response => {
+      .then((response) => {
         let logs = [];
         let _log = response.data.logs;
         let split_log = _log.split("\n");
-        split_log.forEach(element => {
+        split_log.forEach((element) => {
           logs.push(element);
         });
         commit("setAppLogs", logs);
       })
-      .catch(err => {
+      .catch((err) => {
         commit("snackbar/setErr", err, { root: true });
       });
   },
@@ -129,11 +134,11 @@ const actions = {
     const url = `/api/apps/${Name}/${Action}`;
     axios
       .get(url)
-      .then(response => {
+      .then((response) => {
         const app = response.data;
         commit("setApps", app);
       })
-      .catch(err => {
+      .catch((err) => {
         commit("snackbar/setErr", err, { root: true });
       })
       .finally(() => {
@@ -143,22 +148,22 @@ const actions = {
         commit("setLoading", false);
         commit("setAction", "");
       });
-  }
+  },
 };
 
 const getters = {
   getAppByName(state) {
-    return Name => {
+    return (Name) => {
       Name = "/" + Name;
-      return state.apps.find(x => x.Name == Name);
+      return state.apps.find((x) => x.Name == Name);
     };
-  }
+  },
 };
 
 export default {
   namespaced: true,
   state,
   mutations,
   getters,
-  actions
+  actions,
 };