Fix table flickering in services view

dashboard/src/views/ServicesView.vue

@@ -81,25 +81,19 @@ const servicesArray = computed(() => {
   });
 });
 
+let apps = [];
+
 async function refresh(id) {
   const [error, result] = await servicesModel.get(id);
   if (error) return console.error(error);
 
-  services[id] = result;
   services[id].id = id;
-  services[id].name = id.indexOf('redis') === 0 ? services[id].name : result.name;
+  services[id].status = result.status;
   services[id].config = result.config || {};
   services[id].memoryLimit = result.config.memoryLimit || 0;
   services[id].memoryUsed = result.memoryUsed || 0;
   services[id].memoryPercent = result.memoryPercent || 0;
 
-  if (id.indexOf('redis') === 0) {
-    // eslint-disable-next-line no-unused-vars
-    const [error, result] = await appsModel.get(id.slice('redis:'.length));
-    if (result) services[id].name = 'Redis (' + (result.label || result.fqdn) + ')';
-    else services[id].name = 'Redis (unknown app)';
-  }
-
   // we will poll until active
   if (result.status !== 'active') setTimeout(refresh.bind(null, id), 3000);
 }
@@ -107,15 +101,27 @@ async function refresh(id) {
 const refreshBusy = ref(false);
 async function refreshAll() {
   refreshBusy.value = true;
-  const [error, serviceList] = await servicesModel.list();
+
+  let [error, result] = await appsModel.list();
+  if (error) return console.error(error);
+
+  apps = result;
+
+  [error, result] = await servicesModel.list();
   if (error) return console.error(error);
 
   // init with all services
-  for (const s of serviceList.sort()) {
-    if (!services[s]) services[s] = { id: s, name: s, config: {} };
+  for (const s of result.sort()) {
+    if (!services[s]) services[s] = { id: s, name: s, config: {}, status: '' };
+
+    if (s.indexOf('redis') === 0) {
+      const app = apps.find(a => a.id === s.slice('redis:'.length));
+      if (app) services[s].name = `redis (${app.label || app.fqdn})`;
+      else services[s].name = 'redis (unknown app)';
+    }
   }
 
-  await each(serviceList, refresh);
+  await each(result, refresh);
   refreshBusy.value = false;
 }