feat(ldap): add ldap protocol support (#50)

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

frontend/src/App.vue

@@ -21,6 +21,9 @@
           <a-menu-item key="/logs/rmi">
             <router-link to="/logs/rmi">RMI Logs</router-link>
           </a-menu-item>
+          <a-menu-item key="/logs/ldap">
+            <router-link to="/logs/ldap">Ldap Logs</router-link>
+          </a-menu-item>
           <a-menu-item key="/logs/mysql">
             <router-link to="/logs/mysql">MySQL Logs</router-link>
           </a-menu-item>
@@ -39,6 +42,9 @@
           <a-menu-item key="/rules/rmi">
             <router-link to="/rules/rmi">RMI Rules</router-link>
           </a-menu-item>
+          <a-menu-item key="/rules/ldap">
+            <router-link to="/rules/ldap">Ldap 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

@@ -66,6 +66,22 @@ export function deleteRmiRecord(params) {
     })
 }
 
+export function getLdapRecord(params) {
+    return request({
+        url: '/record/ldap',
+        params: params,
+        method: 'get'
+    })
+}
+
+export function deleteLdapRecord(params) {
+    return request({
+        url: '/record/ldap',
+        params: params,
+        method: 'delete'
+    })
+}
+
 export function getFtpRecord(params) {
     return request({
         url: '/record/ftp',

frontend/src/api/rule.js

@@ -97,6 +97,30 @@ export function deleteRmiRule(data) {
     })
 }
 
+export function getLdapRule(params) {
+    return request({
+        url: '/rule/ldap',
+        params: params,
+        method: 'get'
+    })
+}
+
+export function upsertLdapRule(data) {
+    return request({
+        url: '/rule/ldap',
+        data: data,
+        method: 'post'
+    })
+}
+
+export function deleteLdapRule(data) {
+    return request({
+        url: '/rule/ldap',
+        data: data,
+        method: 'delete'
+    })
+}
+
 export function getFtpRule(params) {
     return request({
         url: '/rule/ftp',

frontend/src/api/settings.js

@@ -42,6 +42,20 @@ export function updateRmiConfig(data) {
     })
 }
 
+export function getLdapConfig() {
+    return request({
+        url: '/setting/getLdapConfig',
+    })
+}
+
+export function updateLdapConfig(data) {
+    return request({
+        url: '/setting/updateLdapConfig',
+        method: "post",
+        data: data,
+    })
+}
+
 export function getMySQLConfig() {
     return request({
         url: '/setting/getMySQLConfig',

frontend/src/router/index.js

@@ -30,6 +30,11 @@ const routes = [
         name: 'RmiLogs',
         component: () => import( '../views/logs/Rmi')
     },
+    {
+        path: '/logs/ldap',
+        name: 'LdapLogs',
+        component: () => import( '../views/logs/Ldap')
+    },
     {
         path: '/logs/ftp',
         name: 'FtpLogs',
@@ -56,6 +61,11 @@ const routes = [
         name: 'RmiRules',
         component: () => import( '../views/rules/Rmi')
     },
+    {
+        path: '/rules/ldap',
+        name: 'LdapRules',
+        component: () => import( '../views/rules/Ldap')
+    },
     {
         path: '/rules/ftp',
         name: 'FtpRules',

frontend/src/views/logs/Ldap.vue

@@ -0,0 +1,173 @@
+<template>
+  <a-table
+      style="overflow-x: auto;"
+      :columns="columns"
+      :data-source="data"
+      :loading="loading"
+      :pagination="pagination"
+      @change="handleTableChange"
+      :rowClassName="(record, index) => index % 2 === 0 ? '' : 'gray-table-row'"
+  >
+    <filter-dropdown
+        slot="filterDropdown"
+        slot-scope="{ setSelectedKeys, selectedKeys, clearFilters, column }"
+        :set-selected-keys="setSelectedKeys"
+        :selected-keys="selectedKeys"
+        :clear-filters="clearFilters"
+        :column="column"
+        :filters="filters"
+        :fetch="fetch"
+    />
+    <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 {deleteLdapRecord, getLdapRecord} from '@/api/record'
+import {store} from '@/main'
+import FilterDropdown from '@/components/FilterDropdown'
+
+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,
+    scopedSlots: {
+      filterDropdown: 'filterDropdown',
+      filterIcon: 'filterIcon',
+    },
+  },
+  {
+    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: 'LdapLogs',
+  data() {
+    return {
+      store,
+      data: [],
+      pagination: {
+        current: 1, showSizeChanger: true, pageSize: store.pageSize,
+        onShowSizeChange: (current, size) => {
+          store.pageSize = size
+        }
+      },
+      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 () {
+      let params = {
+        ...this.filters,
+        page: this.pagination.current,
+        pageSize: this.pagination.pageSize,
+        order: this.order
+      }
+      this.loading = true;
+      getLdapRecord(params).then(res => {
+        let result = res.data.result
+        this.data = result.data
+        const pagination = {...this.pagination};
+
+        pagination.total = result.count;
+        this.pagination = pagination;
+        this.loading = false
+      }).catch(e => {
+        if (e.response.status !== 403) {
+          this.$message.error('Unknown error with status code: ' + e.response.status)
+        }
+      })
+    },
+    delete: function () {
+      let params = {
+        ...this.filters,
+      }
+      this.loading = true;
+      deleteLdapRecord(params).then(() => {
+        this.$message.success('Deleted successfully')
+        this.filters = {}
+        this.fetch()
+      }).catch(e => {
+        if (e.response.status !== 403) {
+          this.$message.error('Failed to delete: ' + e.response.data.error)
+        }
+      })
+    },
+  },
+  mounted() {
+    this.fetch();
+  },
+  components: {
+    FilterDropdown
+  }
+}
+</script>

frontend/src/views/rules/Ldap.vue

@@ -0,0 +1,327 @@
+<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+ ' RMI rule'"
+        :width="490"
+        :visible="formVisible"
+        :body-style="{ paddingBottom: '80px' }"
+        @close="closeDrawer"
+    >
+      <a-form-model :model="form" ref="form" layout="vertical" @submit="handleSubmit">
+        <BasicRule :form="form" :readOnly="formReadOnly" flagFormat="path"/>
+      </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
+      style="overflow-x: auto;"
+        :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="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:0 10px 3px 0;
+        " 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:0 10px 3px 0;
+" 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 {getLdapRule, upsertLdapRule, deleteLdapRule} 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',
+    ellipsis: true,
+  },
+  {
+    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: 'LdapRules',
+  data() {
+    return {
+      store,
+      data: [],
+      formVisible: false,
+      pagination: {
+        current: 1, showSizeChanger: true, pageSize: store.pageSize,
+        onShowSizeChange: (current, size) => {
+          store.pageSize = size
+        }
+      },
+      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 () {
+      let params = {
+        ...this.filters,
+        page: this.pagination.current,
+        pageSize: this.pagination.pageSize,
+        order: this.order
+      }
+      this.loading = true;
+      getLdapRule(params).then(res => {
+        let result = res.data.result
+        this.data = result.data
+        const pagination = {...this.pagination};
+        pagination.total = result.count;
+        this.pagination = pagination;
+        this.loading = false
+      }).catch(e => {
+        if (e.response.status !== 403) {
+          this.$message.error('Unknown error with status code: ' + e.response.status)
+        }
+      })
+    },
+    clickSwitch(record, prop) {
+      record[prop] = !record[prop]
+      upsertLdapRule(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) {
+      deleteLdapRule(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) {
+          upsertLdapRule(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>

frontend/src/views/settings/Ldap.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <SettingForm :form="form" :spinning="spinning"></SettingForm>
+    <a-result v-if="status"
+              :status="status"
+              :title="title"
+              :sub-title="subTitle"
+    >
+      <template #extra>
+        <a-row>
+          <a-col :span="12" :offset="7">
+            <div style="text-align: left">
+              <li v-for="err in errors" :key="err">{{ err }}</li>
+            </div>
+          </a-col>
+        </a-row>
+      </template>
+    </a-result>
+  </div>
+</template>
+
+<script>
+import {getLdapConfig, updateLdapConfig} from "@/api/settings"
+import SettingForm from "@/components/SettingForm";
+
+export default {
+  name: "Ldap",
+  data() {
+    return {
+      form: {},
+      spinning: false,
+      status: "",
+      title: "",
+      subTitle: "",
+      errors: []
+    }
+  },
+  methods: {
+    getConfig() {
+      getLdapConfig().then(res => {
+        this.form = res.data
+      }).catch(e => {
+        this.$notification.error({
+          message: 'Error',
+          description:
+          e.response.data.error,
+          style: {
+            width: '600px',
+            marginLeft: `${335 - 600}px`,
+          },
+          duration: 4
+        });
+      })
+    },
+    updateConfig() {
+      this.spinning = true
+      let targetConfig = JSON.stringify(this.form)
+      updateLdapConfig(this.form).then(
+          () => {
+            setTimeout(() => {
+              getLdapConfig().then((res) => {
+                    this.spinning = false
+                    let nowConfig = JSON.stringify(res.data)
+                    if (nowConfig !== targetConfig) {
+                      this.status = "warning"
+                      this.title = "Updating the configuration seems to have failed"
+                      this.subTitle = "Please check your config options carefully."
+                    }
+                    this.form = res.data
+                    this.status = ""
+                    this.title = ""
+                    this.subTitle = ""
+                  }
+              )
+            }, 3000)
+          }
+      ).catch(e => {
+        this.$notification.error({
+          message: 'Error',
+          description:
+          e.response.data.error,
+          style: {
+            width: '600px',
+            marginLeft: `${335 - 600}px`,
+          },
+          duration: 4
+        });
+      })
+    }
+  },
+  mounted() {
+    this.getConfig()
+  },
+  components: {
+    SettingForm
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/views/settings/Settings.vue

@@ -8,6 +8,7 @@
       <http ref="settings" v-if="tabKey==='HTTP'"></http>
       <dns ref="settings" v-else-if="tabKey==='DNS'"></dns>
       <rmi ref="settings" v-else-if="tabKey==='RMI'"></rmi>
+      <ldap ref="settings" v-else-if="tabKey==='LDAP'"></ldap>
       <mysql ref="settings" v-else-if="tabKey==='MYSQL'"></mysql>
       <ftp ref="settings" v-else-if="tabKey==='FTP'"></ftp>
       <notice ref="settings" v-else-if="tabKey==='NOTICE'"></notice>
@@ -20,6 +21,7 @@
 import Http from "./Http"
 import Dns from "./Dns"
 import Rmi from "./Rmi"
+import Ldap from "./Ldap"
 import Mysql from "./Mysql"
 import Ftp from "./Ftp"
 import Notice from "./Notice"
@@ -33,6 +35,7 @@ export default {
         {key: "HTTP", tab: "PLATFORM|HTTP"},
         {key: "DNS", tab: "DNS"},
         {key: "RMI", tab: "RMI"},
+        {key: "LDAP", tab: "LDAP"},
         {key: "MYSQL", tab: "MYSQL"},
         {key: "FTP", tab: "FTP"},
         {key: "NOTICE", tab: "NOTICE"},
@@ -51,6 +54,7 @@ export default {
     Http,
     Dns,
     Rmi,
+    Ldap,
     Mysql,
     Ftp,
     Notice,