feat(ftp): support upload, download and PASV rebind (#13)

Co-authored-by: E99p1ant <[email protected]>

frontend/src/App.vue

@@ -55,7 +55,7 @@
             @click="() => (collapsed = !collapsed)"
         />
         <!--        <transition name="list1">-->
-        <div v-if="$route.path.includes('logs')" style="float: right; width:45% ;padding: 12px 0;line-height: 24px;">
+        <div v-if="isLogMode" style="float: right; width:45% ;padding: 12px 0;line-height: 24px;">
           <a-row :gutter="24" type="flex">
             <a-col :span="21">
               <a-form-model v-show="showSettings" ref="settings" layout="inline">
@@ -111,6 +111,11 @@ export default {
       openKeys: ['logs', "rules"],
     };
   },
+  computed: {
+    isLogMode() {
+      return this.$route.path.includes('logs')
+    }
+  },
   methods: {
     timing() {
       if (this.timer !== null) {
@@ -122,7 +127,7 @@ export default {
     }
   },
   mounted() {
-    if (this.autoRefresh) {
+    if (this.autoRefresh && this.isLogMode) {
       this.timing()
     }
   },
@@ -138,6 +143,14 @@ export default {
       }
       localStorage.setItem('autoRefresh', val)
     },
+    isLogMode(val) {
+      if (!val) {
+        clearInterval(this.timer)
+      } else {
+        this.timing()
+      }
+      localStorage.setItem('autoRefresh', val)
+    },
     refreshInterval(val) {
       clearInterval(this.timer)
       this.timing()

frontend/src/views/logs/Ftp.vue

@@ -39,6 +39,18 @@
         type="search"
         :style="{ color: filtered ? '#108ee9' : undefined }"
     />
+    <span slot="method" slot-scope="method">
+     <a-tag v-if="method" :color="method==='UPLOAD'?'#eb2f96':'#02a7ff'">{{ method }}</a-tag>
+    </span>
+    <span slot="file" slot-scope="file">
+     <a-tag
+         v-if="file.id"
+         color="#f5222d"
+     ><a target="_blank" :href="'/revsuit/api/file/ftp/'+file.id">TRUE</a> </a-tag>
+     <a-tag v-else color="#722ed1">
+      FALSE
+      </a-tag>
+    </span>
 
     <span slot="time" slot-scope="time">
         {{ new Date(time).format("yyyy-MM-dd hh:mm:ss") }}
@@ -65,7 +77,7 @@ import FilterDropdown from '@/components/FilterDropdown'
 
 const colors = {
   "CRASHED": "#f50",
-  "FINISHED": "#87d068"
+  "FINISHED": "#52c41a"
 }
 
 const columns = [
@@ -128,6 +140,24 @@ const columns = [
       filterIcon: 'filterIcon',
     },
   },
+  {
+    title: 'METHOD',
+    dataIndex: 'method',
+    key: 'method',
+    scopedSlots: {
+      customRender: 'method',
+      filterDropdown: 'selectDropdown',
+      filterIcon: 'filterIcon',
+    },
+  },
+  {
+    title: 'FILE',
+    dataIndex: 'file',
+    key: 'file',
+    scopedSlots: {
+      customRender: 'file'
+    },
+  },
   {
     title: 'STATUS',
     dataIndex: 'status',
@@ -169,6 +199,9 @@ export default {
     };
   },
   methods: {
+    aa(file) {
+      console.log(file)
+    },
     handleTableChange(pagination, filters, sorter) {
       const pager = {...this.pagination};
       pager.current = pagination.current;

frontend/src/views/logs/Mysql.vue

@@ -50,7 +50,7 @@
     <span slot="loadData" slot-scope="loadData">
        <a-tag v-if="loadData"
               color="#eb2f96"
-       >True</a-tag><a-tag v-else color="#f5222d">False</a-tag>
+       >TRUE</a-tag><a-tag v-else color="#f5222d">FALSE</a-tag>
     </span>
     <span slot="fileNum" slot-scope="files">
        <a-tag v-if="files.length>=3"

frontend/src/views/rules/Ftp.vue

@@ -20,7 +20,8 @@
               <span slot="label">
                   Pasv Address
                   <a-tooltip
-                      title="Support template such as ${user}/${password}/${varname}">
+                      title="1. Support template such as ${user}/${password}/${varname}.
+2.For setting the rebind mode, please use ',' to separate addresses.">
                     <a-icon type="question-circle-o"/>
                   </a-tooltip>
               </span>
@@ -33,6 +34,26 @@
             </a-form-model-item>
           </a-col>
         </a-row>
+        <a-row :gutter="24">
+          <a-col :span="24">
+            <a-form-model-item>
+              <span slot="label">
+                  Data
+                  <a-tooltip
+                      title="1. The data to be returned when the client executes the download request.
+                      2. Please use base64 encoding.
+                      3. Support template such as ${user}/${password}/${varname}">
+                    <a-icon type="question-circle-o"/>
+                  </a-tooltip>
+              </span>
+              <a-textarea v-model="form.data"
+                          placeholder="The data to be returned when the client executes the download request. Please use base64 encoding."
+                          :readOnly="formReadOnly"
+                          :auto-size="{ minRows: 10, maxRows: 30 }"
+              />
+            </a-form-model-item>
+          </a-col>
+        </a-row>
       </a-form-model>
       <div
           :style="{
@@ -132,11 +153,6 @@
     </a-table>
   </div>
 </template>
-<style scoped>
-#add-rule {
-  margin-bottom: 10px;
-}
-</style>
 <script>
 
 import {getFtpRule, upsertFtpRule, deleteFtpRule} from '@/api/rule'
@@ -344,7 +360,7 @@ export default {
     handleCancel() {
       this.form = {}
       this.closeDrawer()
-    }
+    },
   },
   mounted() {
     this.fetch({page: "1"});
@@ -358,4 +374,9 @@ export default {
     BasicRule,
   }
 }
-</script>
+</script>
+<style scoped>
+#add-rule {
+  margin-bottom: 10px;
+}
+</style>