Start work on VolumesView.vue

dashboard/src/components/Index.vue

@@ -1,21 +1,25 @@
 <template>
   <div>
-    <SupportView v-if="view === VIEWS.SUPPORT"></SupportView>
+    <SupportView v-if="view === VIEWS.SUPPORT" />
+    <VolumesView v-if="view === VIEWS.VOLUMES" />
   </div>
 </template>
 
 <script>
 
 import SupportView from './SupportView.vue';
+import VolumesView from './VolumesView.vue';
 
 const VIEWS = {
-  SUPPORT: 'support'
+  SUPPORT: 'support',
+  VOLUMES: 'volumes',
 };
 
 export default {
   name: 'Index',
   components: {
-    SupportView
+    SupportView,
+    VolumesView,
   },
   data() {
     return {
@@ -38,6 +42,8 @@ export default {
 
       if (view === VIEWS.SUPPORT) {
         that.view = VIEWS.SUPPORT;
+      } else if (view === VIEWS.VOLUMES) {
+        that.view = VIEWS.VOLUMES;
       } else {
         that.view = '';
       }
@@ -45,8 +51,6 @@ export default {
 
     window.addEventListener('hashchange', onHashChange);
     onHashChange();
-
-    console.log('Indexvue mounted')
   }
 };
 

dashboard/src/components/VolumesView.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="content">
+    <h1 class="section-header">{{ $t('volumes.title') }}</h1>
+
+    <Card>
+      <div v-html="$t('volumes.description')"></div>
+      <br/>
+      <br/>
+      <TableView :columns="tableColumns" :model="tableModel">
+        <template #status="slotProps">
+          <div style="text-align: center;" v-tooltip="slotProps.status ? slotProps.status.message : ''">
+            <i class="fa fa-circle" :style="{ color: slotProps.status.state === 'active' ? '#27CE65' : '#d9534f' }" v-if="slotProps.status"></i>
+            <i class="fa fa-circle-notch fa-spin" v-if="!slotProps.status.state"></i>
+          </div>
+        </template>
+        <template #actions="slotProps">
+          <div style="text-align: right;">
+            <Button tool outline icon="fa fa-sync-alt" v-show="isMountProvider(slotProps.volume)" v-tooltip="$t('volumes.remountActionTooltip')"></Button>
+            <Button tool outline icon="fa fa-pencil-alt" v-tooltip="$t('volumes.editActionTooltip')"></Button>
+            <Button tool outline icon="fas fa-folder" v-tooltip="$t('volumes.openFileManagerActionTooltip')"></Button>
+            <Button tool danger icon="far fa-trash-alt" v-tooltip="$t('volumes.removeVolumeActionTooltip')"></Button>
+          </div>
+        </template>
+      </TableView>
+    </Card>
+  </div>
+</template>
+
+<script>
+
+import { fetcher, Button, TableView } from 'pankow';
+
+import Card from  './Card.vue';
+
+import { createVolumesModel } from '../models/VolumesModel.js';
+
+const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
+const accessToken = localStorage.token;
+
+const volumesModel = createVolumesModel(API_ORIGIN, accessToken);
+
+export default {
+  name: 'VolumesView',
+  components: {
+    Button,
+    Card,
+    TableView,
+  },
+  data() {
+    return {
+      ready: false,
+      tableColumns: {
+        status: {
+          label: ''
+        },
+        name: {
+          label: 'Name',
+          sort: true
+        },
+        type: {
+          label: 'Type',
+          sort: true
+        },
+        target: {
+          label: 'Target',
+          sort: true
+        },
+        actions: {
+          label: '',
+          sort: false
+        }
+      },
+      tableModel: [],
+      volumes: [],
+    };
+  },
+  methods: {
+    isMountProvider(v) {
+      return v.mountType === 'sshfs' || v.mountType === 'cifs' || v.mountType === 'nfs' || v.mountType === 'ext4' || v.mountType === 'xfs';
+    },
+    async toggleSshSupport() {
+        this.toggleSshSupportError = '';
+
+        const res = await fetcher.post(`${API_ORIGIN}/api/v1/support/remote_support`, { enable: !this.sshSupportEnabled }, { access_token: accessToken });
+        if (res.status === 412 || res.status === 417) this.toggleSshSupportError = res.body;
+        else if (res.status !== 202) console.error(res.body);
+
+        this.sshSupportEnabled = !this.sshSupportEnabled;
+    }
+  },
+  async mounted() {
+    this.volumes = await volumesModel.list();
+    this.tableModel = this.volumes.map(v => {
+      const m = {};
+
+      m.status = {};
+      m.name = v.name;
+      m.type = v.mountType;
+
+      if (v.mountType === 'mountpoint' || v.mountType === 'filesystem') m.target = v.hostPath;
+      else m.target = (v.mountOptions.host || v.mountOptions.diskPath || v.hostPath) + (v.mountOptions.remoteDir || '');
+
+      m.actions = '';
+
+      m.volume = v;
+
+      return m;
+    });
+    this.ready = true;
+
+    this.tableModel.forEach(async v => {
+      v.status = await volumesModel.getStatus(v.volume.id);
+      console.log(v.status)
+    });
+  }
+};
+
+</script>