feat(frontend): optimize frontend interaction (#8)

Support auto refresh. Change authentication method. Streamline the frontend code.

frontend/src/views/logs/Dns.vue

@@ -7,41 +7,16 @@
       @change="handleTableChange"
       :rowClassName="(record, index) => index % 2 === 0 ? '' : 'gray-table-row'"
   >
-    <div
+    <filter-dropdown
         slot="filterDropdown"
         slot-scope="{ setSelectedKeys, selectedKeys, clearFilters, column }"
-        style="padding: 8px"
-    >
-      <a-input
-          :placeholder="`Search ${column.dataIndex}`"
-          :value="selectedKeys[0]"
-          style="width: 188px; margin-bottom: 8px; display: block;"
-          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
-          @pressEnter="() => {
-            filters[column.dataIndex] = selectedKeys[0];
-            fetch()
-          }"
-      />
-      <a-button
-          type="primary"
-          icon="search"
-          size="small"
-          style="width: 90px; margin-right: 8px"
-          @click="() => {
-            filters[column.dataIndex] = selectedKeys[0];
-            fetch()
-          }"
-      >
-        Search
-      </a-button>
-      <a-button size="small" style="width: 90px" @click="() =>{
-        clearFilters();
-        delete filters[column.dataIndex];
-        fetch()
-      }">
-        Reset
-      </a-button>
-    </div>
+        :set-selected-keys="setSelectedKeys"
+        :selected-keys="selectedKeys"
+        :clear-filters="clearFilters"
+        :column="column"
+        :filters="filters"
+        :fetch="fetch"
+    />
     <a-icon
         slot="filterIcon"
         slot-scope="filtered"
@@ -63,6 +38,7 @@
 
 import {getDnsRecord} from '@/api/record'
 import {store} from '@/main'
+import FilterDropdown from '@/components/FilterDropdown'
 
 const columns = [
   {
@@ -125,6 +101,7 @@ export default {
   name: 'DnsLogs',
   data() {
     return {
+      store,
       data: [],
       pagination: {current: 1},
       filters: {},
@@ -142,18 +119,17 @@ export default {
       this.fetch();
     },
     fetch: function () {
-      this.loading = true;
       let params = {
         ...this.filters,
         page: this.pagination.current,
         order: this.order
       }
+      this.loading = true;
       getDnsRecord(params).then(res => {
         let result = res.data.result
         this.data = result.data
         const pagination = {...this.pagination};
-        // Read total count from server
-        // pagination.total = data.totalCount;
+
         pagination.total = result.count;
         this.pagination = pagination;
         this.loading = false
@@ -165,10 +141,18 @@ export default {
           console.error(e)
         }
       })
-    }
+    },
   },
   mounted() {
-    this.fetch({page: "1"});
+    this.fetch();
   },
+  watch: {
+    'store.authed'() {
+      this.fetch()
+    }
+  },
+  components: {
+    FilterDropdown
+  }
 }
 </script>

frontend/src/views/logs/Ftp.vue

@@ -23,41 +23,16 @@
         FINISHED
       </a-checkbox>
     </div>
-    <div
+    <filter-dropdown
         slot="filterDropdown"
         slot-scope="{ setSelectedKeys, selectedKeys, clearFilters, column }"
-        style="padding: 8px"
-    >
-      <a-input
-          :placeholder="`Search ${column.dataIndex}`"
-          :value="selectedKeys[0]"
-          style="width: 188px; margin-bottom: 8px; display: block;"
-          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
-          @pressEnter="() => {
-            filters[column.dataIndex] = selectedKeys[0];
-            fetch()
-          }"
-      />
-      <a-button
-          type="primary"
-          icon="search"
-          size="small"
-          style="width: 90px; margin-right: 8px"
-          @click="() => {
-            filters[column.dataIndex] = selectedKeys[0];
-            fetch()
-          }"
-      >
-        Search
-      </a-button>
-      <a-button size="small" style="width: 90px" @click="() =>{
-        clearFilters();
-        delete filters[column.dataIndex];
-        fetch()
-      }">
-        Reset
-      </a-button>
-    </div>
+        :set-selected-keys="setSelectedKeys"
+        :selected-keys="selectedKeys"
+        :clear-filters="clearFilters"
+        :column="column"
+        :filters="filters"
+        :fetch="fetch"
+    />
     <a-icon
         slot="filterIcon"
         slot-scope="filtered"
@@ -86,6 +61,7 @@
 
 import {getFtpRecord} from '@/api/record'
 import {store} from '@/main'
+import FilterDropdown from '@/components/FilterDropdown'
 
 const colors = {
   "CRASHED": "#f50",
@@ -128,17 +104,29 @@ const columns = [
     title: 'USER',
     dataIndex: 'user',
     key: 'user',
+    scopedSlots: {
+      filterDropdown: 'filterDropdown',
+      filterIcon: 'filterIcon',
+    },
   },
   {
     title: 'PASSWORD',
     dataIndex: 'password',
     key: 'password',
+    scopedSlots: {
+      filterDropdown: 'filterDropdown',
+      filterIcon: 'filterIcon',
+    },
   },
   {
     title: 'PATH',
     dataIndex: 'path',
     key: 'path',
     ellipsis: true,
+    scopedSlots: {
+      filterDropdown: 'filterDropdown',
+      filterIcon: 'filterIcon',
+    },
   },
   {
     title: 'STATUS',
@@ -167,9 +155,10 @@ const columns = [
 ];
 
 export default {
-  name: 'DnsLogs',
+  name: 'FtpLogs',
   data() {
     return {
+      store,
       data: [],
       pagination: {current: 1},
       filters: {},
@@ -188,18 +177,17 @@ export default {
       this.fetch();
     },
     fetch: function () {
-      this.loading = true;
       let params = {
         ...this.filters,
         page: this.pagination.current,
         order: this.order
       }
+      this.loading = true;
       getFtpRecord(params).then(res => {
         let result = res.data.result
         this.data = result.data
         const pagination = {...this.pagination};
-        // Read total count from server
-        // pagination.total = data.totalCount;
+
         pagination.total = result.count;
         this.pagination = pagination;
         this.loading = false
@@ -211,10 +199,18 @@ export default {
           console.error(e)
         }
       })
-    }
+    },
   },
   mounted() {
-    this.fetch({page: "1"});
+    this.fetch();
   },
+  watch: {
+    'store.authed'() {
+      this.fetch()
+    }
+  },
+  components: {
+    FilterDropdown
+  }
 }
 </script>

frontend/src/views/logs/Http.vue

@@ -7,41 +7,16 @@
       @change="handleTableChange"
       :rowClassName="(record, index) => index % 2 === 0 ? '' : 'gray-table-row'"
   >
-    <div
+    <filter-dropdown
         slot="filterDropdown"
         slot-scope="{ setSelectedKeys, selectedKeys, clearFilters, column }"
-        style="padding: 8px"
-    >
-      <a-input
-          :placeholder="`Search ${column.dataIndex}`"
-          :value="selectedKeys[0]"
-          style="width: 188px; margin-bottom: 8px; display: block;"
-          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
-          @pressEnter="() => {
-            filters[column.dataIndex] = selectedKeys[0];
-            fetch()
-          }"
-      />
-      <a-button
-          type="primary"
-          icon="search"
-          size="small"
-          style="width: 90px; margin-right: 8px"
-          @click="() => {
-            filters[column.dataIndex] = selectedKeys[0];
-            fetch()
-          }"
-      >
-        Search
-      </a-button>
-      <a-button size="small" style="width: 90px" @click="() =>{
-        clearFilters();
-        delete filters[column.dataIndex];
-        fetch()
-      }">
-        Reset
-      </a-button>
-    </div>
+        :set-selected-keys="setSelectedKeys"
+        :selected-keys="selectedKeys"
+        :clear-filters="clearFilters"
+        :column="column"
+        :filters="filters"
+        :fetch="fetch"
+    />
     <a-icon
         slot="filterIcon"
         slot-scope="filtered"
@@ -75,6 +50,7 @@
 
 import {getHttpRecord} from '@/api/record'
 import {store} from '@/main'
+import FilterDropdown from '@/components/FilterDropdown'
 
 const colors = {
   "GET": "#52c41a",
@@ -157,6 +133,7 @@ export default {
   name: 'HttpLogs',
   data() {
     return {
+      store,
       data: [],
       pagination: {current: 1},
       filters: {},
@@ -175,18 +152,17 @@ export default {
       this.fetch();
     },
     fetch: function () {
-      this.loading = true;
       let params = {
         ...this.filters,
         page: this.pagination.current,
         order: this.order
       }
+      this.loading = true;
       getHttpRecord(params).then(res => {
         let result = res.data.result
         this.data = result.data
         const pagination = {...this.pagination};
-        // Read total count from server
-        // pagination.total = data.totalCount;
+
         pagination.total = result.count;
         this.pagination = pagination;
         this.loading = false
@@ -198,10 +174,18 @@ export default {
           console.error(e)
         }
       })
-    }
+    },
   },
   mounted() {
-    this.fetch({page: "1"});
+    this.fetch();
   },
+  watch: {
+    'store.authed'() {
+      this.fetch()
+    }
+  },
+  components: {
+    FilterDropdown
+  }
 }
 </script>

frontend/src/views/logs/Mysql.vue

@@ -27,41 +27,16 @@
         False
       </a-checkbox>
     </div>
-    <div
+    <filter-dropdown
         slot="filterDropdown"
         slot-scope="{ setSelectedKeys, selectedKeys, clearFilters, column }"
-        style="padding: 8px"
-    >
-      <a-input
-          :placeholder="`Search ${column.dataIndex}`"
-          :value="selectedKeys[0]"
-          style="width: 188px; margin-bottom: 8px; display: block;"
-          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
-          @pressEnter="() => {
-            filters[column.dataIndex] = selectedKeys[0];
-            fetch()
-          }"
-      />
-      <a-button
-          type="primary"
-          icon="search"
-          size="small"
-          style="width: 90px; margin-right: 8px"
-          @click="() => {
-            filters[column.dataIndex] = selectedKeys[0];
-            fetch()
-          }"
-      >
-        Search
-      </a-button>
-      <a-button size="small" style="width: 90px" @click="() =>{
-        clearFilters();
-        delete filters[column.dataIndex];
-        fetch()
-      }">
-        Reset
-      </a-button>
-    </div>
+        :set-selected-keys="setSelectedKeys"
+        :selected-keys="selectedKeys"
+        :clear-filters="clearFilters"
+        :column="column"
+        :filters="filters"
+        :fetch="fetch"
+    />
     <a-icon
         slot="filterIcon"
         slot-scope="filtered"
@@ -96,6 +71,7 @@
 
 import {getMysqlRecord} from '@/api/record'
 import {store} from '@/main'
+import FilterDropdown from '@/components/FilterDropdown'
 
 const colors = [
   "#13c2c2",
@@ -200,6 +176,7 @@ export default {
   name: 'MysqlLogs',
   data() {
     return {
+      store,
       data: [],
       pagination: {current: 1},
       filters: {},
@@ -218,18 +195,17 @@ export default {
       this.fetch();
     },
     fetch: function () {
-      this.loading = true;
       let params = {
         ...this.filters,
         page: this.pagination.current,
         order: this.order
       }
+      this.loading = true;
       getMysqlRecord(params).then(res => {
         let result = res.data.result
         this.data = result.data
         const pagination = {...this.pagination};
-        // Read total count from server
-        // pagination.total = data.totalCount;
+
         pagination.total = result.count;
         this.pagination = pagination;
         this.loading = false
@@ -241,10 +217,18 @@ export default {
           console.error(e)
         }
       })
-    }
+    },
   },
   mounted() {
-    this.fetch({page: "1"});
+    this.fetch();
   },
+  watch: {
+    'store.authed'() {
+      this.fetch()
+    }
+  },
+  components: {
+    FilterDropdown
+  }
 }
 </script>

frontend/src/views/logs/Rmi.vue

@@ -7,41 +7,16 @@
       @change="handleTableChange"
       :rowClassName="(record, index) => index % 2 === 0 ? '' : 'gray-table-row'"
   >
-    <div
+    <filter-dropdown
         slot="filterDropdown"
         slot-scope="{ setSelectedKeys, selectedKeys, clearFilters, column }"
-        style="padding: 8px"
-    >
-      <a-input
-          :placeholder="`Search ${column.dataIndex}`"
-          :value="selectedKeys[0]"
-          style="width: 188px; margin-bottom: 8px; display: block;"
-          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
-          @pressEnter="() => {
-            filters[column.dataIndex] = selectedKeys[0];
-            fetch()
-          }"
-      />
-      <a-button
-          type="primary"
-          icon="search"
-          size="small"
-          style="width: 90px; margin-right: 8px"
-          @click="() => {
-            filters[column.dataIndex] = selectedKeys[0];
-            fetch()
-          }"
-      >
-        Search
-      </a-button>
-      <a-button size="small" style="width: 90px" @click="() =>{
-        clearFilters();
-        delete filters[column.dataIndex];
-        fetch()
-      }">
-        Reset
-      </a-button>
-    </div>
+        :set-selected-keys="setSelectedKeys"
+        :selected-keys="selectedKeys"
+        :clear-filters="clearFilters"
+        :column="column"
+        :filters="filters"
+        :fetch="fetch"
+    />
     <a-icon
         slot="filterIcon"
         slot-scope="filtered"
@@ -63,6 +38,7 @@
 
 import {getRmiRecord} from '@/api/record'
 import {store} from '@/main'
+import FilterDropdown from '@/components/FilterDropdown'
 
 const columns = [
   {
@@ -101,6 +77,10 @@ const columns = [
     dataIndex: 'path',
     key: 'path',
     ellipsis: true,
+    scopedSlots: {
+      filterDropdown: 'filterDropdown',
+      filterIcon: 'filterIcon',
+    },
   },
   {
     title: 'REMOTE IP',
@@ -119,9 +99,10 @@ const columns = [
 ];
 
 export default {
-  name: 'DnsLogs',
+  name: 'RmiLogs',
   data() {
     return {
+      store,
       data: [],
       pagination: {current: 1},
       filters: {},
@@ -139,18 +120,17 @@ export default {
       this.fetch();
     },
     fetch: function () {
-      this.loading = true;
       let params = {
         ...this.filters,
         page: this.pagination.current,
         order: this.order
       }
+      this.loading = true;
       getRmiRecord(params).then(res => {
         let result = res.data.result
         this.data = result.data
         const pagination = {...this.pagination};
-        // Read total count from server
-        // pagination.total = data.totalCount;
+
         pagination.total = result.count;
         this.pagination = pagination;
         this.loading = false
@@ -162,10 +142,18 @@ export default {
           console.error(e)
         }
       })
-    }
+    },
   },
   mounted() {
-    this.fetch({page: "1"});
+    this.fetch();
   },
+  watch: {
+    'store.authed'() {
+      this.fetch()
+    }
+  },
+  components: {
+    FilterDropdown
+  }
 }
 </script>

frontend/src/views/rules/Dns.vue

@@ -288,6 +288,7 @@ export default {
   name: 'DnsRules',
   data() {
     return {
+      store,
       data: [],
       formVisible: false,
       pagination: {current: 1},
@@ -311,18 +312,17 @@ export default {
       this.fetch();
     },
     fetch: function () {
-      this.loading = true;
       let params = {
         ...this.filters,
         page: this.pagination.current,
         order: this.order
       }
+      this.loading = true;
       getDnsRule(params).then(res => {
         let result = res.data.result
         this.data = result.data
         const pagination = {...this.pagination};
-        // Read total count from server
-        // pagination.total = data.totalCount;
+
         pagination.total = result.count;
         this.pagination = pagination;
         this.loading = false
@@ -430,6 +430,11 @@ export default {
   mounted() {
     this.fetch({page: "1"});
   },
+  watch: {
+    'store.authed'() {
+      this.fetch()
+    }
+  },
   components: {
     BasicRule,
   }

frontend/src/views/rules/Ftp.vue

@@ -210,6 +210,7 @@ export default {
   name: 'FtpRules',
   data() {
     return {
+      store,
       data: [],
       formVisible: false,
       pagination: {current: 1},
@@ -230,18 +231,17 @@ export default {
       this.fetch();
     },
     fetch: function () {
-      this.loading = true;
       let params = {
         ...this.filters,
         page: this.pagination.current,
         order: this.order
       }
+      this.loading = true;
       getFtpRule(params).then(res => {
         let result = res.data.result
         this.data = result.data
         const pagination = {...this.pagination};
-        // Read total count from server
-        // pagination.total = data.totalCount;
+
         pagination.total = result.count;
         this.pagination = pagination;
         this.loading = false
@@ -349,6 +349,11 @@ export default {
   mounted() {
     this.fetch({page: "1"});
   },
+  watch: {
+    'store.authed'() {
+      this.fetch()
+    }
+  },
   components: {
     BasicRule,
   }

frontend/src/views/rules/Http.vue

@@ -274,6 +274,7 @@ export default {
   name: 'HttpRules',
   data() {
     return {
+      store,
       data: [],
       formVisible: false,
       pagination: {current: 1},
@@ -341,18 +342,17 @@ export default {
       this.fetch();
     },
     fetch: function () {
-      this.loading = true;
       let params = {
         ...this.filters,
         page: this.pagination.current,
         order: this.order
       }
+      this.loading = true;
       getHttpRule(params).then(res => {
         let result = res.data.result
         this.data = result.data
         const pagination = {...this.pagination};
-        // Read total count from server
-        // pagination.total = data.totalCount;
+
         pagination.total = result.count;
         this.pagination = pagination;
         this.loading = false
@@ -497,6 +497,11 @@ export default {
   mounted() {
     this.fetch({page: "1"});
   },
+  watch: {
+    'store.authed'() {
+      this.fetch()
+    }
+  },
   components: {
     BasicRule,
   }

frontend/src/views/rules/Mysql.vue

@@ -248,6 +248,7 @@ export default {
   name: 'MysqlRules',
   data() {
     return {
+      store,
       data: [],
       formVisible: false,
       pagination: {current: 1},
@@ -270,18 +271,17 @@ export default {
       this.fetch();
     },
     fetch: function () {
-      this.loading = true;
       let params = {
         ...this.filters,
         page: this.pagination.current,
         order: this.order
       }
+      this.loading = true;
       getMysqlRule(params).then(res => {
         let result = res.data.result
         this.data = result.data
         const pagination = {...this.pagination};
-        // Read total count from server
-        // pagination.total = data.totalCount;
+
         pagination.total = result.count;
         this.pagination = pagination;
         this.loading = false
@@ -420,6 +420,11 @@ export default {
   mounted() {
     this.fetch({page: "1"});
   },
+  watch: {
+    'store.authed'() {
+      this.fetch()
+    }
+  },
   components: {
     BasicRule,
   }

frontend/src/views/rules/Rmi.vue

@@ -185,6 +185,7 @@ export default {
   name: 'RmiRules',
   data() {
     return {
+      store,
       data: [],
       formVisible: false,
       pagination: {current: 1},
@@ -205,18 +206,16 @@ export default {
       this.fetch();
     },
     fetch: function () {
-      this.loading = true;
       let params = {
         ...this.filters,
         page: this.pagination.current,
         order: this.order
       }
+      this.loading = true;
       getRmiRule(params).then(res => {
         let result = res.data.result
         this.data = result.data
         const pagination = {...this.pagination};
-        // Read total count from server
-        // pagination.total = data.totalCount;
         pagination.total = result.count;
         this.pagination = pagination;
         this.loading = false
@@ -319,11 +318,16 @@ export default {
     handleCancel() {
       this.form = {}
       this.closeDrawer()
-    }
+    },
   },
   mounted() {
     this.fetch({page: "1"});
   },
+  watch: {
+    'store.authed'() {
+      this.fetch()
+    }
+  },
   components: {
     BasicRule,
   }