Move status indicator code into a shared component

dashboard/src/views/VolumesView.vue

@@ -7,6 +7,7 @@ const t = i18n.t;
 import { computed, ref, useTemplateRef, onMounted } from 'vue';
 import { Button, ButtonGroup, Checkbox, Dialog, Dropdown, FormGroup, InputDialog, NumberInput, PasswordInput, TableView, TextInput } from 'pankow';
 import Section from  '../components/Section.vue';
+import StateLED from  '../components/StateLED.vue';
 import VolumesModel from '../models/VolumesModel.js';
 
 const volumesModel = VolumesModel.create();
@@ -86,14 +87,16 @@ async function refresh() {
 
   const [error, result] = await volumesModel.list();
   if (error) return console.error(error);
+  result.forEach(v => { v.busy = true; });
   volumes.value = result;
 
   busy.value = false;
 
   for (const v of volumes.value) {
     const status = await volumesModel.getStatus(v.id);
-    v.state = status.state;
+    v.state = status.state === 'inactive' ? 'danger' : (status.state === 'active' ? 'success' : '');
     v.message = status.message;
+    v.busy = false;
   }
 };
 
@@ -285,8 +288,8 @@ onMounted(async () =>{
           {{ (volume.mountType === 'mountpoint' || volume.mountType === 'filesystem') ? volume.hostPath : (volume.mountOptions.host || volume.mountOptions.diskPath || volume.hostPath) + (volume.mountOptions.remoteDir || '') }}
         </template>
         <template #status="volume">
-          <div style="text-align: center;" v-tooltip="volume.message">
-            <i class="fa fa-circle" :style="{ color: volume.state === 'active' ? '#27CE65' : '#d9534f' }"></i>
+          <div style="text-align: center;" :title="volume.message">
+            <StateLED :busy="volume.busy" :state="volume.state"/>
           </div>
         </template>
         <template #actions="volume">