mirror of
https://github.com/Li4n0/revsuit.git
synced 2026-09-21 22:30:46 +08:00
feat(frontend): optimize frontend interaction (#8)
Support auto refresh. Change authentication method. Streamline the frontend code.
This commit is contained in:
Li4n0
+82
-2
@@ -28,7 +28,7 @@
|
||||
</a-menu-item>
|
||||
</a-sub-menu>
|
||||
<a-sub-menu key="rules">
|
||||
<span slot="title"><a-icon type="radar-chart"/><span>Rules</span></span>
|
||||
<span slot="title"><rule-icon/><span>Rules</span></span>
|
||||
<a-menu-item key="/rules/http">
|
||||
<router-link to="/rules/http">HTTP Rules</router-link>
|
||||
</a-menu-item>
|
||||
@@ -54,12 +54,43 @@
|
||||
:type="collapsed ? 'menu-unfold' : 'menu-fold'"
|
||||
@click="() => (collapsed = !collapsed)"
|
||||
/>
|
||||
<!-- <transition name="list1">-->
|
||||
<div v-if="$route.path.includes('logs')" 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">
|
||||
<a-row :gutter="24" type="flex">
|
||||
<a-col :span="9" :offset="2">
|
||||
<a-form-model-item label="Auto Refresh">
|
||||
<a-switch id="auto-refresh" v-model="autoRefresh"></a-switch>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="13">
|
||||
<a-form-model-item label="Refresh Interval">
|
||||
<a-input-number style="margin-right: -3rem;" id="refresh-interval"
|
||||
v-model="refreshInterval"
|
||||
:disabled="!autoRefresh"></a-input-number>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model>
|
||||
</a-col>
|
||||
<a-col :span="3">
|
||||
<a-icon
|
||||
:style="'font-size: 18px;padding: 12px 0;'+(showSettings?'color: #1b90ff;':'')"
|
||||
type="setting"
|
||||
@click="showSettings = !showSettings"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<!-- </transition>-->
|
||||
</a-layout-header>
|
||||
<a-layout-content
|
||||
:style="{ margin: '24px 16px', padding: '24px', borderRadius: '20px',background: '#fff', minHeight: 'initial' }"
|
||||
>
|
||||
<transition name="fade-transform">
|
||||
<router-view></router-view>
|
||||
<router-view ref='content'/>
|
||||
</transition>
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
@@ -68,15 +99,53 @@
|
||||
</template>
|
||||
<script>
|
||||
import Auth from '@/components/Auth'
|
||||
import RuleIcon from "@/components/Icon";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
autoRefresh: localStorage.getItem("autoRefresh") === "true",
|
||||
refreshInterval: localStorage.getItem("refreshInterval"),
|
||||
collapsed: false,
|
||||
showSettings: false,
|
||||
openKeys: ['logs', "rules"],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
timing() {
|
||||
if (this.timer !== null) {
|
||||
clearInterval(this.timer)
|
||||
}
|
||||
this.timer = setInterval(() => {
|
||||
this.$refs.content.fetch()
|
||||
}, this.refreshInterval * 1000)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.autoRefresh) {
|
||||
this.timing()
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
watch: {
|
||||
autoRefresh(val) {
|
||||
if (!val) {
|
||||
clearInterval(this.timer)
|
||||
} else {
|
||||
this.timing()
|
||||
}
|
||||
localStorage.setItem('autoRefresh', val)
|
||||
},
|
||||
refreshInterval(val) {
|
||||
clearInterval(this.timer)
|
||||
this.timing()
|
||||
localStorage.setItem('refreshInterval', val)
|
||||
}
|
||||
},
|
||||
components: {
|
||||
RuleIcon,
|
||||
Auth
|
||||
}
|
||||
};
|
||||
@@ -87,6 +156,17 @@ html, body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fade-enter.fade-enter-active,
|
||||
.fade-appear.fade-appear-active {
|
||||
-webkit-animation-name: none;
|
||||
animation-name: none;
|
||||
}
|
||||
|
||||
.fade-leave.fade-leave-active {
|
||||
-webkit-animation-name: none;
|
||||
animation-name: none;
|
||||
}
|
||||
|
||||
/* fade-transform */
|
||||
.fade-transform-leave-active,
|
||||
.fade-transform-enter-active {
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import request from './index'
|
||||
|
||||
export function ping() {
|
||||
export function auth(token) {
|
||||
return request({
|
||||
url: '/ping',
|
||||
url: '/auth',
|
||||
method: 'get',
|
||||
headers: {"Token": token},
|
||||
validateStatus: function (status) {
|
||||
return status >= 200 && status < 300 // 默认的
|
||||
return status >= 200 && status < 300
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -5,13 +5,4 @@ const service = axios.create({
|
||||
timeout: 5000 // request timeout
|
||||
})
|
||||
|
||||
service.interceptors.request.use(function (config) {
|
||||
const token = localStorage.getItem("token")
|
||||
if (token !== null) {
|
||||
config.headers['Token'] = token
|
||||
}
|
||||
// 在发送请求之前做些什么
|
||||
return config
|
||||
})
|
||||
|
||||
export default service
|
||||
@@ -13,13 +13,13 @@
|
||||
</template>
|
||||
<script>
|
||||
import {store} from "@/main";
|
||||
import {ping} from "@/api/ping"
|
||||
import {auth} from "@/api/auth"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
confirmLoading: false,
|
||||
token: localStorage.getItem("token")
|
||||
token: ""
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -27,17 +27,13 @@ export default {
|
||||
return !store.authed
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
token: function (val) {
|
||||
localStorage.setItem("token", val)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
auth() {
|
||||
this.confirmLoading = true;
|
||||
ping().then(() => {
|
||||
auth(this.token).then(() => {
|
||||
store.authed = true;
|
||||
this.confirmLoading = false;
|
||||
this.token = ""
|
||||
}).catch(e => {
|
||||
if (e.response.status === 403) {
|
||||
this.$notification.error({
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div
|
||||
slot="filterDropdown"
|
||||
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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "FilterDropdown",
|
||||
props:["setSelectedKeys","selectedKeys","clearFilters","column","filters","fetch"],
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<a-icon :component="RuleSvg"/>
|
||||
</template>
|
||||
<script>
|
||||
const RuleSvg = {
|
||||
template: `
|
||||
<svg t="1619355924145" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" width="1rem" height="1rem"><path d="M922.666667 163.413333H598.826667a37.333333 37.333333 0 0 1 0-74.666666h323.84a37.333333 37.333333 0 0 1 0 74.666666zM922.666667 437.12H598.826667a37.333333 37.333333 0 0 1 0-74.666667h323.84a37.333333 37.333333 0 0 1 0 74.666667zM922.666667 661.333333H598.826667a37.333333 37.333333 0 0 1 0-74.666666h323.84a37.333333 37.333333 0 0 1 0 74.666666zM922.666667 934.826667H598.826667a37.333333 37.333333 0 0 1 0-74.666667h323.84a37.333333 37.333333 0 0 1 0 74.666667zM424.96 462.08H101.333333A37.333333 37.333333 0 0 1 64 424.746667V101.12A37.333333 37.333333 0 0 1 101.333333 64h323.626667a37.333333 37.333333 0 0 1 37.333333 37.333333v323.413334a37.546667 37.546667 0 0 1-37.333333 37.333333zM138.666667 387.413333h248.96V138.453333H138.666667zM424.96 960H101.333333A37.333333 37.333333 0 0 1 64 922.453333V598.826667a37.333333 37.333333 0 0 1 37.333333-37.333334h323.626667a37.546667 37.546667 0 0 1 37.333333 37.333334v323.626666A37.333333 37.333333 0 0 1 424.96 960zM138.666667 885.12h248.96V636.16H138.666667z" p-id="2094"></path></svg>
|
||||
`
|
||||
};
|
||||
export default {
|
||||
name: "RuleIcon",
|
||||
data() {
|
||||
return {
|
||||
RuleSvg
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.custom-icons-list >>> .anticon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
</style>
|
||||
@@ -8,7 +8,9 @@ import '@/utils/index'
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
Vue.use(Antd);
|
||||
export const store = Vue.observable({authed: localStorage.getItem("token")})
|
||||
export const store = Vue.observable({
|
||||
authed: true,
|
||||
})
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
router: router,
|
||||
|
||||
@@ -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()
|
||||
}"
|
||||
:set-selected-keys="setSelectedKeys"
|
||||
:selected-keys="selectedKeys"
|
||||
:clear-filters="clearFilters"
|
||||
:column="column"
|
||||
:filters="filters"
|
||||
:fetch="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"
|
||||
@@ -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>
|
||||
@@ -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()
|
||||
}"
|
||||
:set-selected-keys="setSelectedKeys"
|
||||
:selected-keys="selectedKeys"
|
||||
:clear-filters="clearFilters"
|
||||
:column="column"
|
||||
:filters="filters"
|
||||
:fetch="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"
|
||||
@@ -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>
|
||||
@@ -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()
|
||||
}"
|
||||
:set-selected-keys="setSelectedKeys"
|
||||
:selected-keys="selectedKeys"
|
||||
:clear-filters="clearFilters"
|
||||
:column="column"
|
||||
:filters="filters"
|
||||
:fetch="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"
|
||||
@@ -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>
|
||||
@@ -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()
|
||||
}"
|
||||
:set-selected-keys="setSelectedKeys"
|
||||
:selected-keys="selectedKeys"
|
||||
:clear-filters="clearFilters"
|
||||
:column="column"
|
||||
:filters="filters"
|
||||
:fetch="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"
|
||||
@@ -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>
|
||||
@@ -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()
|
||||
}"
|
||||
:set-selected-keys="setSelectedKeys"
|
||||
:selected-keys="selectedKeys"
|
||||
:clear-filters="clearFilters"
|
||||
:column="column"
|
||||
:filters="filters"
|
||||
:fetch="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"
|
||||
@@ -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>
|
||||
@@ -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,
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
|
||||
@@ -17,6 +17,7 @@ module.exports = {
|
||||
}
|
||||
},
|
||||
},
|
||||
runtimeCompiler: true,
|
||||
filenameHashing: false,
|
||||
publicPath: ''
|
||||
}
|
||||
|
||||
@@ -67,6 +67,12 @@ func ListRecords(c *gin.Context) {
|
||||
if ftpRecord.Flag != "" {
|
||||
db.Where("flag = ?", ftpRecord.Flag)
|
||||
}
|
||||
if ftpRecord.User != "" {
|
||||
db.Where("user like ?", "%"+ftpRecord.User+"%")
|
||||
}
|
||||
if ftpRecord.Password != "" {
|
||||
db.Where("password like ?", "%"+ftpRecord.Password+"%")
|
||||
}
|
||||
if ftpRecord.Path != "" {
|
||||
db.Where("path like ?", "%"+ftpRecord.Path+"%")
|
||||
}
|
||||
|
||||
@@ -2,17 +2,23 @@ package server
|
||||
|
||||
import (
|
||||
"io"
|
||||
"net/http"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
"github.com/li4n0/revsuit/internal/record"
|
||||
log "unknwon.dev/clog/v2"
|
||||
)
|
||||
|
||||
func ping(c *gin.Context) {
|
||||
func auth(c *gin.Context) {
|
||||
c.SetSameSite(http.SameSiteLaxMode)
|
||||
c.SetCookie("token", c.Request.Header["Token"][0], 0, "/revsuit/api/", c.Request.Host, true, true)
|
||||
c.String(200, "pong")
|
||||
}
|
||||
|
||||
func ping(c *gin.Context) {
|
||||
c.String(200, "pong")
|
||||
}
|
||||
|
||||
func events(c *gin.Context) {
|
||||
log.Info("Receive connection from %v", c.Request.RemoteAddr)
|
||||
c.Stream(func(w io.Writer) bool {
|
||||
|
||||
@@ -38,6 +38,7 @@ func (revsuit *Revsuit) registerPlatformRouter() {
|
||||
revsuit.http.ApiGroup = api
|
||||
|
||||
//platform routers
|
||||
api.GET("/auth", auth)
|
||||
api.GET("/events", events)
|
||||
api.GET("/ping", ping)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user