Implemented entities refresh on the UI

platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue

@@ -1,9 +1,13 @@
 <template>
   <div class="row item entity">
-    <Loading v-if="loading" />
-    <Icon v-bind="value.meta?.icon || {}" />
+    <div class="status-container">
+      <img src="@/assets/img/spinner.gif" class="loading" v-if="loading">
+      <Icon v-bind="value.meta?.icon || {}" v-else />
+    </div>
     <div class="component-container">
-      <component :is="component" :value="value" @input="$emit('input', $event)" />
+      <component :is="component" :value="value"
+        @input="$emit('input', $event)"
+        @loading="$emit('loading', $event)" />
     </div>
   </div>
 </template>
@@ -11,14 +15,13 @@
 <script>
 import { defineAsyncComponent } from 'vue'
 import Utils from "@/Utils"
-import Loading from "@/components/Loading"
 import Icon from "@/components/elements/Icon";
 
 export default {
   name: "Entity",
-  components: {Loading, Icon},
+  components: {Icon},
   mixins: [Utils],
-  emits: ['input'],
+  emits: ['input', 'loading'],
   props: {
     loading: {
       type: Boolean,
@@ -53,13 +56,29 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import "vars";
 
 .entity {
   width: 100%;
   display: table;
 
+  .status-container {
+    width: 2.5em;
+    height: 1.5em;
+    display: table-cell;
+    vertical-align: middle;
+    position: relative;
+
+    .loading {
+      position: absolute;
+      bottom: 0;
+      transform: translate(50%, -50%);
+      width: 1em;
+      height: 1em;
+    }
+  }
+
   .icon-container,
   .component-container {
     height: 100%;

platypush/backend/http/webapp/src/components/panels/Entities/Index.vue

@@ -2,9 +2,17 @@
   <div class="row plugin entities-container">
     <Loading v-if="loading" />
 
-    <div class="entity-selector-container">
-      <Selector :entity-groups="entityGroups" :value="selector" @input="selector = $event" />
-    </div>
+    <header>
+      <div class="col-11">
+        <Selector :entity-groups="entityGroups" :value="selector" @input="selector = $event" />
+      </div>
+
+      <div class="col-1 pull-right">
+        <button title="Refresh" @click="refresh">
+          <i class="fa fa-sync-alt" />
+        </button>
+      </div>
+    </header>
 
     <div class="groups-canvas">
       <NoItems v-if="!Object.keys(displayGroups || {})?.length">No entities found</NoItems>
@@ -30,7 +38,12 @@
 
             <div class="body">
               <div class="entity-frame" v-for="entity in group.entities" :key="entity.id">
-                <Entity :value="entity" @input="entities[entity.id] = $event" />
+                <Entity
+                  :value="entity"
+                  @input="onEntityInput"
+                  :loading="!!loadingEntities[entity.id]"
+                  @loading="loadingEntities[entity.id] = true"
+                />
               </div>
             </div>
           </div>
@@ -58,6 +71,7 @@ export default {
   data() {
     return {
       loading: false,
+      loadingEntities: {},
       entities: {},
       selector: {
         grouping: 'type',
@@ -118,6 +132,27 @@ export default {
     },
 
     async refresh() {
+      const actions = Object.keys(
+          Object.values(this.selector.selectedEntities).reduce((obj, entity) => {
+            if (entity.plugin)
+              obj[entity.plugin] = true
+              return obj
+          }, {})
+      ).map((plugin) => `${plugin}.status`)
+
+      this.loadingEntities = {
+        ...this.loadingEntities,
+        ...Object.keys(this.selector.selectedEntities).reduce((obj, id) => {
+            obj[id] = true
+            return obj
+        }, {}),
+      }
+
+      // Force refresh by calling `.status` on all the selected plugins
+      await Promise.all(actions.map((act) => this.request(act)))
+    },
+
+    async sync() {
       this.loading = true
 
       try {
@@ -137,10 +172,19 @@ export default {
       }
     },
 
+    onEntityInput(entity) {
+      const entityId = entity.id
+      this.entities[entityId] = entity
+      if (this.loadingEntities[entity.id])
+        delete this.loadingEntities[entity.id]
+    },
+
     onEntityUpdate(event) {
       const entityId = event.entity.id
       if (entityId == null)
         return
+      if (this.loadingEntities[entityId])
+        delete this.loadingEntities[entityId]
 
       this.entities[entityId] = {
         ...event.entity,
@@ -159,7 +203,7 @@ export default {
       'platypush.message.event.entities.EntityUpdateEvent'
     )
 
-    this.refresh()
+    this.sync()
   },
 }
 </script>
@@ -187,8 +231,21 @@ export default {
   color: $default-fg-2;
   font-weight: 400;
 
-  .entity-selector-container {
+  button {
+    background: #ffffff00;
+    border: 0;
+
+    &:hover {
+      color: $default-hover-fg;
+    }
+  }
+
+  header {
+    width: 100%;
     height: $selector-height;
+    display: flex;
+    background: $default-bg-2;
+    box-shadow: $border-shadow-bottom;
   }
 
   .groups-canvas {

platypush/backend/http/webapp/src/components/panels/Entities/Selector.vue

@@ -172,10 +172,8 @@ export default {
 <style lang="scss" scoped>
 .entities-selectors-container {
   width: 100%;
-  background: $default-bg-2;
   display: flex;
   align-items: center;
-  box-shadow: $border-shadow-bottom;
 
   .selector {
     height: 100%;