Merge pull request #5 from zero4994/electron

Electron

Author: zero4994

index.js

@@ -1,6 +1,6 @@
 {
   "name": "docker-dashboard",
-  "version": "1.4.20",
+  "version": "1.4.26a",
   "author": "zero4994 <[email protected]>",
   "scripts": {
     "lint": "vue-cli-service lint",
@@ -13,7 +13,6 @@
   "main": "background.js",
   "dependencies": {
     "dockerode": "^2.5.8",
-    "express": "^4.16.4",
     "moment": "^2.24.0",
     "vue": "^2.5.16",
     "vue-command": "^6.2.3",

package.json

@@ -13,18 +13,32 @@
           <v-icon class="icon-padding-left">refresh</v-icon>
         </v-btn>
       </v-layout>
+      <v-layout>
+        <v-flex md8></v-flex>
+        <v-flex md4>
+          <v-spacer></v-spacer>
+          <v-text-field
+            v-model="search"
+            append-icon="search"
+            label="Search"
+            single-line
+            hide-details
+          ></v-text-field>
+        </v-flex>
+      </v-layout>
       <v-data-table
         :headers="headers"
         :items="this.volumes"
         class="elevation-1 mt-4 mb-4"
         :rows-per-page-items="[10]"
+        :search="search"
       >
         <template v-slot:items="props">
-          <td>{{ props.item.Name }}</td>
+          <td>{{ formatText(props.item.Name) }}</td>
           <td>{{ formatDate(props.item.CreatedAt) }}</td>
           <td>{{ props.item.Driver }}</td>
           <td>{{ props.item.Scope }}</td>
-          <td>{{ props.item.Mountpoint }}</td>
+          <td>{{ formatText(props.item.Mountpoint, 50) }}</td>
           <v-btn icon @click="deleteVolume(props.item.Name)">
             <v-icon>delete</v-icon>
           </v-btn>
@@ -83,7 +97,8 @@ export default {
         sortable: false,
         value: "Mountpoint"
       }
-    ]
+    ],
+    search: ""
   }),
   methods: {
     fetchAllVolumes: async function() {
@@ -100,6 +115,11 @@ export default {
     formatDate: function(date) {
       return moment(date).format("LLL");
     },
+    formatText: function(text, maxLength = 20) {
+      return text.length <= maxLength
+        ? text
+        : `${text.substr(0, maxLength)}...`;
+    },
     createVolume: async function() {
       try {
         const volumeName = await this.$dialog.prompt({

server/callbacks/index.js

@@ -2,7 +2,17 @@ import { docker } from "./config";
 
 export const allVolumes = async function() {
   console.log("Querying all volumes");
-  return await docker.listVolumes();
+  const volumes = await docker.listVolumes();
+  volumes.Volumes.sort((a, b) => {
+    if (a.Name.toLowerCase() < b.Name.toLowerCase()) {
+      return -1;
+    } else if (a.Name.toLowerCase() > b.Name.toLowerCase()) {
+      return 1;
+    } else {
+      return 0;
+    }
+  });
+  return volumes;
 };
 
 export const createVolume = async function(name) {