feat(rmi): support receive rmi connection (#5)

frontend/src/App.vue

@@ -17,6 +17,9 @@
           <a-menu-item key="/logs/dns">
             <router-link to="/logs/dns">DNS Logs</router-link>
           </a-menu-item>
+          <a-menu-item key="/logs/rmi">
+            <router-link to="/logs/rmi">RMI Logs</router-link>
+          </a-menu-item>
           <a-menu-item key="/logs/mysql">
             <router-link to="/logs/mysql">MySQL Logs</router-link>
           </a-menu-item>
@@ -29,6 +32,9 @@
           <a-menu-item key="/rules/dns">
             <router-link to="/rules/dns">DNS Rules</router-link>
           </a-menu-item>
+          <a-menu-item key="/rules/rmi">
+            <router-link to="/rules/rmi">RMI Rules</router-link>
+          </a-menu-item>
           <a-menu-item key="/rules/mysql">
             <router-link to="/rules/mysql">MySQL Rules</router-link>
           </a-menu-item>

frontend/src/api/record.js

@@ -31,4 +31,15 @@ export function getMysqlRecord(params) {
             return status >= 200 && status < 300 // 默认的
         }
     })
+}
+
+export function getRmiRecord(params) {
+    return request({
+        url: '/record/rmi',
+        params: params,
+        method: 'get',
+        validateStatus: function (status) {
+            return status >= 200 && status < 300 // 默认的
+        }
+    })
 }

frontend/src/api/rule.js

@@ -98,4 +98,37 @@ export function deleteMysqlRule(data) {
             return status >= 200 && status < 300 // 默认的
         }
     })
+}
+
+export function getRmiRule(params) {
+    return request({
+        url: '/rule/rmi',
+        params: params,
+        method: 'get',
+        validateStatus: function (status) {
+            return status >= 200 && status < 300 // 默认的
+        }
+    })
+}
+
+export function upsertRmiRule(data) {
+    return request({
+        url: '/rule/rmi',
+        data: data,
+        method: 'post',
+        validateStatus: function (status) {
+            return status >= 200 && status < 300 // 默认的
+        }
+    })
+}
+
+export function deleteRmiRule(data) {
+    return request({
+        url: '/rule/rmi',
+        data: data,
+        method: 'delete',
+        validateStatus: function (status) {
+            return status >= 200 && status < 300 // 默认的
+        }
+    })
 }

frontend/src/router/index.js

@@ -25,6 +25,11 @@ const routes = [
         name: 'MysqlLogs',
         component: () => import(/* webpackChunkName: "about" */ '../views/logs/Mysql')
     },
+    {
+        path: '/logs/rmi',
+        name: 'RmiLogs',
+        component: () => import(/* webpackChunkName: "about" */ '../views/logs/Rmi')
+    },
     {
         path: '/rules/http',
         name: 'HttpRules',
@@ -39,6 +44,11 @@ const routes = [
         path: '/rules/mysql',
         name: 'MysqlRules',
         component: () => import(/* webpackChunkName: "about" */ '../views/rules/Mysql')
+    },
+    {
+        path: '/rules/rmi',
+        name: 'RmiRules',
+        component: () => import(/* webpackChunkName: "about" */ '../views/rules/Rmi')
     }
 ]
 

frontend/src/views/logs/Http.vue

@@ -131,6 +131,7 @@ const columns = [
     title: 'PATH',
     dataIndex: 'path',
     key: 'path',
+    ellipsis: true,
     scopedSlots: {
       filterDropdown: 'filterDropdown',
       filterIcon: 'filterIcon',

frontend/src/views/logs/Rmi.vue

@@ -0,0 +1,171 @@
+<template>
+  <a-table
+      :columns="columns"
+      :data-source="data"
+      :loading="loading"
+      :pagination="pagination"
+      @change="handleTableChange"
+      :rowClassName="(record, index) => index % 2 === 0 ? '' : 'gray-table-row'"
+  >
+    <div
+        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>
+    <a-icon
+        slot="filterIcon"
+        slot-scope="filtered"
+        type="search"
+        :style="{ color: filtered ? '#108ee9' : undefined }"
+    />
+
+    <span slot="time" slot-scope="time">
+        {{ new Date(time).format("yyyy-MM-dd hh:mm:ss") }}
+    </span>
+  </a-table>
+</template>
+<style>
+.gray-table-row {
+  background-color: #f5f5f5;
+}
+</style>
+<script>
+
+import {getRmiRecord} from '@/api/record'
+import {store} from '@/main'
+
+const columns = [
+  {
+    title: 'ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    sortDirections: ['descend', 'ascend'],
+  },
+  {
+    title: 'REQUEST TIME',
+    dataIndex: 'request_time',
+    key: 'request_time',
+    scopedSlots: {customRender: 'time'},
+  },
+  {
+    title: 'RULE',
+    dataIndex: 'rule_name',
+    key: 'rule_name',
+    scopedSlots: {
+      filterDropdown: 'filterDropdown',
+      filterIcon: 'filterIcon',
+    },
+  },
+  {
+    title: 'FLAG',
+    dataIndex: 'flag',
+    key: 'flag',
+    scopedSlots: {
+      filterDropdown: 'filterDropdown',
+      filterIcon: 'filterIcon',
+    },
+  },
+  {
+    title: 'PATH',
+    dataIndex: 'path',
+    key: 'path',
+    ellipsis: true,
+  },
+  {
+    title: 'REMOTE IP',
+    key: 'remote_ip',
+    dataIndex: 'remote_ip',
+    scopedSlots: {
+      filterDropdown: 'filterDropdown',
+      filterIcon: 'filterIcon',
+    },
+  },
+  {
+    title: 'IP AREA',
+    key: 'ip_area',
+    dataIndex: 'ip_area'
+  }
+];
+
+export default {
+  name: 'DnsLogs',
+  data() {
+    return {
+      data: [],
+      pagination: {current: 1},
+      filters: {},
+      order: "desc",
+      loading: false,
+      columns,
+    };
+  },
+  methods: {
+    handleTableChange(pagination, filters, sorter) {
+      const pager = {...this.pagination};
+      pager.current = pagination.current;
+      this.pagination = pager;
+      this.order = sorter.order === "ascend" ? "asc" : "desc"
+      this.fetch();
+    },
+    fetch: function () {
+      this.loading = true;
+      let params = {
+        ...this.filters,
+        page: this.pagination.current,
+        order: this.order
+      }
+      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
+      }).catch(e => {
+        if (e.response.status === 403) {
+          store.authed = false
+          return []
+        } else {
+          console.error(e)
+        }
+      })
+    }
+  },
+  mounted() {
+    this.fetch({page: "1"});
+  },
+}
+</script>

frontend/src/views/rules/Mysql.vue

@@ -137,11 +137,6 @@
       </a-tag>
       </span>
 
-      <span slot="files" slot-scope="files">
-<!--        eslint-disable-next-line-->
-        {{ files.length > 30 ? files.substr(0, 30) + "..." : files }}
-      </span>
-
       <span slot="switchRender" slot-scope="checked,record,index,dataIndex">
         <a-switch :checked="checked" @click="clickSwitch(record,dataIndex.dataIndex)"></a-switch>
       </span>
@@ -221,9 +216,7 @@ const columns = [
     title: 'FILES',
     dataIndex: 'files',
     key: 'files',
-    scopedSlots: {
-      customRender: "files"
-    }
+    ellipsis: true
   },
   {
     title: 'PUSH TO CLIENT',

frontend/src/views/rules/Rmi.vue

@@ -0,0 +1,337 @@
+<template xmlns:a-col="http://www.w3.org/1999/html">
+  <div>
+    <a-button id="add-rule" type="primary" @click="addRule">
+      <a-icon type="plus"/>
+      New Rule
+    </a-button>
+    <!--    rule form-->
+    <a-drawer
+        :title="formAction+ ' Dns rule'"
+        :width="460"
+        :visible="formVisible"
+        :body-style="{ paddingBottom: '80px' }"
+        @close="closeDrawer"
+    >
+      <a-form-model :model="form" ref="form" layout="vertical" @submit="handleSubmit">
+        <BasicRule :form="form" :readOnly="formReadOnly"/>
+      </a-form-model>
+      <div
+          :style="{
+          position: 'absolute',
+          right: 0,
+          bottom: 0,
+          width: '100%',
+          borderTop: '1px solid #e9e9e9',
+          padding: '10px 16px',
+          background: '#fff',
+          textAlign: 'right',
+          zIndex: 1,
+        }"
+      >
+        <a-button :style="{ marginRight: '8px' }" @click="handleCancel">
+          Cancel
+        </a-button>
+        <a-button type="primary" :disabled="formReadOnly" @click="handleSubmit">
+          Submit
+        </a-button>
+      </div>
+    </a-drawer>
+    <!--    rule table -->
+    <a-table
+        :columns="columns"
+        :data-source="data"
+        :loading="loading"
+        :pagination="pagination"
+        @change="handleTableChange"
+    >
+      <div
+          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>
+      </div>
+      <a-icon
+          slot="filterIcon"
+          slot-scope="filtered"
+          type="search"
+          :style="{ color: filtered ? '#108ee9' : undefined }"
+      />
+      <span slot="rank" slot-scope="rank">
+      <a-tag
+          :color="'#'+(0x2db7f5+rank*80).toString(16)"
+      >
+        {{ rank }}
+      </a-tag>
+    </span>
+      <span slot="type" slot-scope="type">
+      <a-tag
+          :color="colors[type]"
+      >
+        {{ resolveTypes[type] }}
+      </a-tag>
+    </span>
+
+      <span slot="switchRender" slot-scope="checked,record,index,dataIndex">
+        <a-switch :checked="checked" @click="clickSwitch(record,dataIndex.dataIndex)"></a-switch>
+      </span>
+      <span slot="valueRender" slot-scope="values">
+        <span v-for="value in values.split(',')" :key="value">{{ value }}<br/></span>
+      </span>
+      <span slot="action" slot-scope="text,record,index">
+<!--        <a-button @click="viewRule(record)" style="-->
+        <!--        color: #67C23A;-->
+        <!--    background-color: transparent;-->
+        <!--    border-color: #67C23A;-->
+        <!--    text-shadow: none;-->
+        <!--    margin-right: 10px;-->
+        <!--" size="small" ghost>View</a-button>-->
+        <a-button @click="editRule(record,index)" style="
+        color: #909399;
+    background-color: transparent;
+    border-color: #909399;
+    text-shadow: none;
+    margin-right: 10px;
+" size="small" ghost>Edit</a-button>
+        <a-popconfirm
+            title="Are you sure delete this task?"
+            ok-text="Yes"
+            cancel-text="No"
+            @confirm="deleteRule(record,index)"
+        >
+        <a-button type="danger" size="small" ghost>Delete</a-button>
+        </a-popconfirm>
+      </span>
+    </a-table>
+  </div>
+</template>
+<style scoped>
+#add-rule {
+  margin-bottom: 10px;
+}
+</style>
+<script>
+
+import {getRmiRule, upsertRmiRule, deleteRmiRule} from '@/api/rule'
+import {store} from '@/main'
+import BasicRule from "@/components/BasicRule";
+
+const VIEW = "View"
+const EDIT = "Edit"
+const CREATE = "Create"
+
+const columns = [
+  {
+    title: 'ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    sortDirections: ['descend', 'ascend'],
+  },
+  {
+    title: 'NAME',
+    dataIndex: 'name',
+    key: 'name',
+    scopedSlots: {
+      filterDropdown: 'filterDropdown',
+      filterIcon: 'filterIcon',
+    },
+  },
+  {
+    title: 'FLAG FORMAT',
+    dataIndex: 'flag_format',
+    key: 'flag_format',
+  },
+  {
+    title: 'RANK',
+    dataIndex: 'rank',
+    key: 'rank',
+    scopedSlots: {
+      customRender: 'rank',
+    },
+  },
+  {
+    title: 'PUSH TO CLIENT',
+    dataIndex: 'push_to_client',
+    key: 'push_to_client',
+    scopedSlots: {
+      customRender: 'switchRender',
+    }
+  },
+  {
+    title: 'NOTICE',
+    dataIndex: 'notice',
+    key: 'notice',
+    scopedSlots: {
+      customRender: 'switchRender',
+    }
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    scopedSlots: {customRender: 'action'},
+  },
+];
+export default {
+  name: 'RmiRules',
+  data() {
+    return {
+      data: [],
+      formVisible: false,
+      pagination: {current: 1},
+      filters: {},
+      loading: false,
+      columns,
+      form: {},
+      formReadOnly: false,
+      formAction: "", // View ,Create or Edit
+    }
+  },
+  methods: {
+    handleTableChange(pagination, filters, sorter) {
+      const pager = {...this.pagination};
+      pager.current = pagination.current;
+      this.pagination = pager;
+      this.order = sorter.order === "ascend" ? "asc" : "desc"
+      this.fetch();
+    },
+    fetch: function () {
+      this.loading = true;
+      let params = {
+        ...this.filters,
+        page: this.pagination.current,
+        order: this.order
+      }
+      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
+      }).catch(e => {
+        if (e.response.status === 403) {
+          store.authed = false
+          return []
+        } else {
+          this.$notification.error({
+            message: 'Unknown error: ' + e.response.status,
+            style: {
+              width: '100px',
+              marginLeft: `${335 - 600}px`,
+            },
+            duration: 4
+          });
+        }
+      })
+    },
+    clickSwitch(record, prop) {
+      record[prop] = !record[prop]
+      upsertRmiRule(record).then().catch(e => {
+        this.$notification.error({
+          message: 'Edit failed',
+          description:
+          e.response.data.error,
+          style: {
+            width: '600px',
+            marginLeft: `${335 - 600}px`,
+          },
+          duration: 4
+        });
+      })
+    },
+    addRule() {
+      this.form = {}
+      this.showForm(CREATE)
+    },
+    viewRule(record) {
+      this.form = record
+      this.showForm(VIEW)
+    },
+    editRule(record) {
+      this.form = JSON.parse(JSON.stringify(record))
+      this.showForm(EDIT)
+    },
+    deleteRule(record, index) {
+      deleteRmiRule(record).then(() => {
+        this.data.splice(index, 1)
+      }).catch(e => {
+        this.$notification.error({
+          message: 'Error',
+          description:
+          e.response.data.error,
+          style: {
+            width: '600px',
+            marginLeft: `${335 - 600}px`,
+          },
+          duration: 4
+        });
+      })
+    },
+    showForm(action) {
+      this.formAction = action
+      this.formReadOnly = action === VIEW;
+      this.formVisible = true;
+    },
+    closeDrawer() {
+      this.formVisible = false;
+    },
+    handleSubmit() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          upsertRmiRule(this.form).then(() => {
+            this.closeDrawer()
+            this.fetch({page: this.pagination.current});
+            this.$notification.info({
+              message: 'Success',
+              style: {
+                width: '600px',
+                marginLeft: `${335 - 600}px`,
+              },
+              duration: 2.5
+            });
+          }).catch(e => {
+            this.$notification.error({
+              message: this.formAction + ' failed',
+              description:
+              e.response.data.error,
+              style: {
+                width: '600px',
+                marginLeft: `${335 - 600}px`,
+              },
+              duration: 4
+            });
+          })
+        }
+      })
+    },
+    handleCancel() {
+      this.form = {}
+      this.closeDrawer()
+    }
+  },
+  mounted() {
+    this.fetch({page: "1"});
+  },
+  components: {
+    BasicRule,
+  }
+}
+</script>