You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dubbo.apache.org by li...@apache.org on 2023/06/19 06:38:38 UTC
[dubbo-admin] branch refactor-with-go updated: feat： Add six traffic function pages (#1160)
This is an automated email from the ASF dual-hosted git repository.
liujun pushed a commit to branch refactor-with-go
in repository https://gitbox.apache.org/repos/asf/dubbo-admin.git
The following commit(s) were added to refs/heads/refactor-with-go by this push:
new eb8aac0e feat： Add six traffic function pages (#1160)
eb8aac0e is described below
commit eb8aac0efe6ddfb1689337e20f361178bad20ad0
Author: SDUWYS <91...@users.noreply.github.com>
AuthorDate: Mon Jun 19 14:38:33 2023 +0800
feat： Add six traffic function pages (#1160)
---
dubbo-admin-ui/src/api/menu.js | 7 +-
.../src/components/governance/RoutingRule.vue | 5 +-
.../src/components/governance/TagRule.vue | 5 +-
dubbo-admin-ui/src/components/test/ServiceTest.vue | 4 -
.../src/components/traffic/Accesslog.vue | 281 +++++++++++++-
.../src/components/traffic/Arguments.vue | 343 ++++++++++++++++-
dubbo-admin-ui/src/components/traffic/Gray.vue | 421 +++++++++++++++++++++
dubbo-admin-ui/src/components/traffic/Host.vue | 297 ++++++++++++++-
.../src/components/traffic/Isolation.vue | 293 +++++++++++++-
dubbo-admin-ui/src/components/traffic/Mock.vue | 343 ++++++++++++++++-
dubbo-admin-ui/src/components/traffic/Region.vue | 343 ++++++++++++++++-
dubbo-admin-ui/src/components/traffic/Retry.vue | 343 ++++++++++++++++-
dubbo-admin-ui/src/components/traffic/Timeout.vue | 346 ++++++++++++++++-
dubbo-admin-ui/src/components/traffic/Weight.vue | 364 +++++++++++++++++-
dubbo-admin-ui/src/lang/zh.js | 3 +-
dubbo-admin-ui/src/router/index.js | 131 +++----
16 files changed, 3374 insertions(+), 155 deletions(-)
diff --git a/dubbo-admin-ui/src/api/menu.js b/dubbo-admin-ui/src/api/menu.js
index 36a09146..1c937fb5 100644
--- a/dubbo-admin-ui/src/api/menu.js
+++ b/dubbo-admin-ui/src/api/menu.js
@@ -26,12 +26,13 @@ const Menu = [
{ title: 'trafficTimeout', path: '/traffic/timeout' },
{ title: 'trafficRetry', path: '/traffic/retry' },
{ title: 'trafficRegion', path: '/traffic/region' },
- { title: 'trafficIsolation', path: '/traffic/isolation' },
- { title: 'trafficWeight', path: '/traffic/weight' },
+ // { title: 'trafficIsolation', path: '/traffic/isolation' },
+ // { title: 'trafficWeight', path: '/traffic/weight' },
{ title: 'trafficArguments', path: '/traffic/arguments' },
{ title: 'trafficMock', path: '/traffic/mock' },
{ title: 'trafficAccesslog', path: '/traffic/accesslog' },
- { title: 'trafficHost', path: '/traffic/host' },
+ // { title: 'trafficGray', path: '/traffic/gray' },
+ // { title: 'trafficHost', path: '/traffic/host' },
{ title: 'routingRule', path: '/governance/routingRule' },
{ title: 'tagRule', path: '/governance/tagRule' },
{ title: 'dynamicConfig', path: '/governance/config' }
diff --git a/dubbo-admin-ui/src/components/governance/RoutingRule.vue b/dubbo-admin-ui/src/components/governance/RoutingRule.vue
index d68ef8b9..1dc636be 100644
--- a/dubbo-admin-ui/src/components/governance/RoutingRule.vue
+++ b/dubbo-admin-ui/src/components/governance/RoutingRule.vue
@@ -200,13 +200,15 @@
</template>
<script>
+import AceEditor from '@/components/public/AceEditor'
import yaml from 'js-yaml'
import operations from '@/api/operation'
import Breadcrumb from '@/components/public/Breadcrumb'
export default {
components: {
- Breadcrumb
+ Breadcrumb,
+ AceEditor
},
data: () => ({
items: [
@@ -587,6 +589,7 @@ export default {
},
created () {
this.setHeight()
+ this.ruleText = this.template
},
computed: {
queryBy () {
diff --git a/dubbo-admin-ui/src/components/governance/TagRule.vue b/dubbo-admin-ui/src/components/governance/TagRule.vue
index 7b1284c4..cfa6751c 100644
--- a/dubbo-admin-ui/src/components/governance/TagRule.vue
+++ b/dubbo-admin-ui/src/components/governance/TagRule.vue
@@ -123,10 +123,11 @@
import yaml from 'js-yaml'
import operations from '@/api/operation'
import Breadcrumb from '@/components/public/Breadcrumb'
-
+import AceEditor from '@/components/public/AceEditor'
export default {
components: {
- Breadcrumb
+ Breadcrumb,
+ AceEditor
},
data: () => ({
dropdown_font: ['Service', 'App', 'IP'],
diff --git a/dubbo-admin-ui/src/components/test/ServiceTest.vue b/dubbo-admin-ui/src/components/test/ServiceTest.vue
index 8f48967f..a1267b03 100644
--- a/dubbo-admin-ui/src/components/test/ServiceTest.vue
+++ b/dubbo-admin-ui/src/components/test/ServiceTest.vue
@@ -81,15 +81,11 @@
</template>
<script>
-import JsonEditor from '@/components/public/JsonEditor'
-import Search from '@/components/public/Search'
import Breadcrumb from '@/components/public/Breadcrumb'
export default {
name: 'ServiceTest',
components: {
- JsonEditor,
- Search,
Breadcrumb
},
data () {
diff --git a/dubbo-admin-ui/src/components/traffic/Accesslog.vue b/dubbo-admin-ui/src/components/traffic/Accesslog.vue
index d126d163..37da4115 100644
--- a/dubbo-admin-ui/src/components/traffic/Accesslog.vue
+++ b/dubbo-admin-ui/src/components/traffic/Accesslog.vue
@@ -20,7 +20,155 @@
<v-flex lg12>
<Breadcrumb title="trafficAccesslog" :items="breads"></breadcrumb>
</v-flex>
- </v-layout>
+ <v-flex lg12>
+ <v-card flat color="transparent">
+ <v-card-text>
+ <v-form>
+ <v-layout row wrap>
+ <v-combobox
+ :loading="searchLoading"
+ :items="typeAhead"
+ :search-input.sync="application"
+ flat
+ append-icon=""
+ hide-no-data
+ label="请输入application"
+ hint="请输入application"
+ ></v-combobox>
+ <v-combobox
+ style="margin-left: 20px;"
+ :loading="searchLoading"
+ :items="typeAhead"
+ :search-input.sync="accesslog"
+ flat
+ append-icon=""
+ hide-no-data
+ label="请输入accesslog"
+ hint="请输入accesslog"
+ ></v-combobox>
+
+ <v-btn @click="submit" color="primary" large>搜索</v-btn>
+ <v-btn @click="create" color="primary" large>新建</v-btn>
+ </v-layout>
+ </v-form>
+ </v-card-text>
+ </v-card>
+ </v-flex>
+ <v-flex xs12>
+ <v-card>
+ <v-toolbar flat color="transparent" class="elevation-0">
+ <v-toolbar-title><span class="headline">{{$t('trafficAccesslog')}}</span></v-toolbar-title>
+ <v-spacer></v-spacer>
+ </v-toolbar>
+ <v-data-table :headers="headers" :items="tableData" hide-actions class="elevation-1">
+ <template slot="items" slot-scope="props">
+ <td >{{props.item.application}}</td>
+ <td>{{props.item.accesslog}}</td>
+ <td class="text-xs-center px-0" nowrap>
+ <v-btn
+ class="tiny"
+ color='success'
+ @click="update(props.item)"
+ >
+ 修改
+ </v-btn>
+ <v-btn
+ class="tiny"
+ outline
+ @click="deleteItem(props.item)"
+ >
+ 删除
+ </v-btn>
+ </td>
+ </template>
+ </v-data-table>
+ </v-card>
+ </v-flex>
+ <v-dialog v-model="dialog" width="800px" persistent >
+ <v-card>
+ <v-card-title class="justify-center">
+ <span class="headline">{{$t('createNewRoutingRule')}}</span>
+ </v-card-title>
+ <v-card-text >
+ <v-layout wrap>
+ <v-flex>
+ <v-text-field
+ label="Application Name"
+ hint="请输入Application Name"
+ v-model="createApplication"
+ ></v-text-field>
+ </v-flex>
+ </v-layout>
+ <v-text-field
+ label="Accesslog"
+ hint="请输入Accesslog"
+ v-model="createAccesslog"
+ ></v-text-field>
+ </v-card-text>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat @click.native="closeDialog">{{$t('close')}}</v-btn>
+ <v-btn depressed color="primary" @click.native="save">{{$t('save')}}</v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ <v-dialog v-model="updateDialog" width="800px" persistent >
+ <v-card>
+ <v-card-title class="justify-center">
+ <span class="headline">{{$t('createNewRoutingRule')}}</span>
+ </v-card-title>
+ <v-card-text >
+ <v-layout wrap>
+ <v-flex>
+ <v-text-field
+ label="Application Name"
+ hint="请输入Application Name"
+ v-model="updateApplication"
+ ></v-text-field>
+ </v-flex>
+ </v-layout>
+ <v-text-field
+ label="Accesslog"
+ hint="请输入Accesslog"
+ v-model="updateAccesslog"
+ ></v-text-field>
+ </v-card-text>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat @click.native="closeUpdateDialog">{{$t('close')}}</v-btn>
+ <v-btn depressed color="primary" @click.native="saveUpdate">{{$t('save')}}</v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ <v-dialog
+ v-model="deleteDialog"
+ persistent
+ max-width="290"
+ >
+ <v-card>
+ <v-card-title class="text-h5">
+ 您确认删除这条数据嘛?
+ </v-card-title>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn
+ color="green darken-1"
+ text
+ @click="deleteDialog = false"
+ >
+ 取消
+ </v-btn>
+ <v-btn
+ color="green darken-1"
+ text
+ @click="confirmDelete"
+ >
+ 确定
+ </v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ </v-layout>
</v-container>
</template>
<script>
@@ -38,7 +186,134 @@ export default {
text: 'trafficAccesslog',
href: ''
}
- ]
- })
+ ],
+ typeAhead: [],
+ input: null,
+ searchLoading: false,
+ timerID: null,
+ application: '',
+ accesslog: '',
+ deleteDialog: false,
+ createApplication: '',
+ createAccesslog: '',
+ deleteApplication: '',
+ deleteAccesslog: '',
+ dialog: false,
+ headers: [
+ ],
+ service: null,
+ tableData: [],
+ services: [],
+ loading: false,
+ updateDialog: false,
+ updateApplication: '',
+ updateAccesslog: ''
+ }),
+ methods: {
+ submit () {
+ if (this.accesslog && this.application) {
+ this.search()
+ } else {
+ this.$notify.error('service is needed')
+ return false
+ }
+ },
+ search () {
+ this.$axios.get('/traffic/accesslog', {
+ params: {
+ application: this.application,
+ accesslog: this.accesslog
+ }
+ }).then(response => {
+ console.log(response)
+ this.tableData = []
+ response.data.forEach(element => {
+ this.tableData.push(element)
+ })
+ console.log(this.tableData)
+ })
+ },
+ saveUpdate () {
+ console.log(this.updateAccesslog)
+ this.updateDialog = false
+ this.$axios.put('/traffic/accesslog', {
+ application: this.updateApplication,
+ accesslog: this.updateAccesslog
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ },
+ setHeaders: function () {
+ this.headers = [
+ {
+ text: '服务',
+ value: 'application'
+ },
+ {
+ text: 'accesslog',
+ value: 'accesslog'
+ },
+ {
+ text: '操作',
+ value: ''
+ }
+ ]
+ },
+ closeUpdateDialog () {
+ this.updateDialog = false
+ },
+ create () {
+ this.dialog = true
+ },
+ confirmDelete () {
+ console.log(this.deleteAccesslog)
+ this.$axios.delete('/traffic/accesslog', {
+ application: this.deleteApplication,
+ accesslog: this.deleteAccesslog
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ this.deleteAccesslog = false
+ },
+ deleteItem (props) {
+ this.deleteDialog = true
+ this.deleteAccesslog = props.accesslog
+ this.deleteApplication = props.application
+ },
+ update (props) {
+ console.log(props)
+ this.updateApplication = props.application
+ this.updateAccesslog = props.accesslog
+ this.updateDialog = true
+ console.log(this.updateApplication)
+ console.log(this.updateAccesslog)
+ },
+ save () {
+ this.$axios.post('/traffic/accesslog', {
+ application: this.createApplication,
+ accesslog: this.createAccesslog
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ },
+ closeDialog () {
+ this.dialog = false
+ }
+ },
+ watch: {
+ area () {
+ this.setHeaders()
+ }
+ },
+ mounted () {
+ this.setHeaders()
+ }
}
+
</script>
diff --git a/dubbo-admin-ui/src/components/traffic/Arguments.vue b/dubbo-admin-ui/src/components/traffic/Arguments.vue
index e060d2b0..f4786d0c 100644
--- a/dubbo-admin-ui/src/components/traffic/Arguments.vue
+++ b/dubbo-admin-ui/src/components/traffic/Arguments.vue
@@ -15,18 +15,195 @@
~ limitations under the License.
-->
<template>
- <v-container grid-list-xl fluid>
- <v-layout row wrap>
- <v-flex lg12>
- <Breadcrumb title="trafficArguments" :items="breads"></breadcrumb>
+ <v-container grid-list-xl fluid>
+ <v-layout row wrap>
+ <v-flex lg12>
+ <Breadcrumb title="trafficArguments" :items="breads"></breadcrumb>
+ </v-flex>
+ <v-flex lg12>
+ <v-card flat color="transparent">
+ <v-card-text>
+ <v-form>
+ <v-layout row wrap>
+ <v-flex xs6 sm3 md3>
+ <v-text-field
+ v-model="service"
+ flat
+ label="请输入应用名"
+ ></v-text-field>
+ </v-flex>
+ <v-flex xs6 sm3 md3>
+ <v-text-field
+ v-model="rule"
+ flat
+ label="请输入应用规则"
+ ></v-text-field>
+ </v-flex>
+ <v-flex xs6 sm3 md2 >
+ <v-text-field
+ label="Version"
+ :hint="$t('dataIdVersionHint')"
+ v-model="group"
+ ></v-text-field>
+ </v-flex>
+ <v-flex xs6 sm3 md2 >
+ <v-text-field
+ label="Group"
+ :hint="$t('dataIdGroupHint')"
+ v-model="version"
+ ></v-text-field>
+ </v-flex>
+ <v-btn @click="submit" color="primary" large>{{$t('search')}}</v-btn>
+ <v-btn @click="create" color="primary" large>新建</v-btn>
+ </v-layout>
+
+ </v-form>
+ </v-card-text>
+ </v-card>
</v-flex>
+ <v-flex xs12>
+ <v-card>
+ <v-toolbar flat color="transparent" class="elevation-0">
+ <v-toolbar-title><span class="headline">{{$t('trafficAccesslog')}}</span></v-toolbar-title>
+ <v-spacer></v-spacer>
+ </v-toolbar>
+ <v-data-table :headers="headers" :items="tableData" hide-actions class="elevation-1">
+ <template slot="items" slot-scope="props">
+ <td >{{props.item.service}}</td>
+ <td>{{props.item.rule}}</td>
+ <td>{{props.item.group}}</td>
+ <td>{{props.item.version}}</td>
+ <td class="text-xs-center px-0" nowrap>
+ <v-btn
+ class="tiny"
+ color='success'
+ @click="update(props.item)"
+ >
+ 修改
+ </v-btn>
+ <v-btn
+ class="tiny"
+ outline
+ @click="deleteItem(props.item)"
+ >
+ 删除
+ </v-btn>
+ </td>
+ </template>
+ </v-data-table>
+ </v-card>
+ </v-flex>
+ <v-dialog v-model="dialog" width="800px" persistent >
+ <v-card>
+ <v-card-title class="justify-center">
+ <span class="headline">{{$t('createNewRoutingRule')}}</span>
+ </v-card-title>
+ <v-card-text >
+ <v-layout wrap>
+ <v-flex>
+ <v-text-field
+ label="应用名"
+ hint="请输入应用名"
+ v-model="createService"
+ ></v-text-field>
+ </v-flex>
</v-layout>
- </v-container>
+ <v-text-field
+ label="应用规则"
+ hint="请输入应用规则"
+ v-model="createRule"
+ ></v-text-field>
+ <v-text-field
+ label="Group"
+ hint="请输入Group"
+ v-model="createGroup"
+ ></v-text-field>
+ <v-text-field
+ label="Version"
+ hint="请输入Version"
+ v-model="createVersion"
+ ></v-text-field>
+ </v-card-text>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat @click.native="closeDialog">{{$t('close')}}</v-btn>
+ <v-btn depressed color="primary" @click.native="save">{{$t('save')}}</v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ <v-dialog v-model="updateDialog" width="800px" persistent >
+ <v-card>
+ <v-card-title class="justify-center">
+ <span class="headline">{{$t('createNewRoutingRule')}}</span>
+ </v-card-title>
+ <v-card-text >
+ <v-layout wrap>
+ <v-flex>
+ <v-text-field
+ label="应用名"
+ hint="请输入应用名"
+ v-model="updateService"
+ ></v-text-field>
+ </v-flex>
+ </v-layout>
+ <v-text-field
+ label="应用规则"
+ hint="请输入应用规则"
+ v-model="updateRule"
+ ></v-text-field>
+ <v-text-field
+ label="Group"
+ hint="请输入Group"
+ v-model="updateGroup"
+ ></v-text-field>
+ <v-text-field
+ label="Version"
+ hint="请输入Version"
+ v-model="updateVersion"
+ ></v-text-field>
+ </v-card-text>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat @click.native="closeUpdateDialog">{{$t('close')}}</v-btn>
+ <v-btn depressed color="primary" @click.native="saveUpdate">{{$t('save')}}</v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ <v-dialog
+ v-model="deleteDialog"
+ persistent
+ max-width="290"
+ >
+ <v-card>
+ <v-card-title class="text-h5">
+ 您确认删除这条数据嘛?
+ </v-card-title>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn
+ color="green darken-1"
+ text
+ @click="deleteDialog = false"
+ >
+ 取消
+ </v-btn>
+ <v-btn
+ color="green darken-1"
+ text
+ @click="confirmDelete"
+ >
+ 确定
+ </v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ </v-layout>
+ </v-container>
</template>
<script>
import Breadcrumb from '../public/Breadcrumb.vue'
export default {
- name: 'Accesslog',
+ name: 'Arguments',
components: { Breadcrumb },
data: () => ({
breads: [
@@ -38,7 +215,157 @@ export default {
text: 'trafficArguments',
href: ''
}
- ]
- })
+ ],
+ typeAhead: [],
+ input: null,
+ searchLoading: false,
+ timerID: null,
+ service: '',
+ rule: '',
+ group: '',
+ version: '',
+ createGroup: '',
+ createVersion: '',
+ updateService: '',
+ updateRule: '',
+ updateGroup: '',
+ updateVersion: '',
+ deleteDialog: false,
+ createService: '',
+ createRule: '',
+ deleteService: '',
+ deleteRule: '',
+ deleteVersion: '',
+ deleteGroup: '',
+ dialog: false,
+ headers: [
+ ],
+ tableData: [],
+ services: [],
+ loading: false,
+ updateDialog: false
+ }),
+ methods: {
+ submit () {
+ if (this.service && this.rule) {
+ this.search()
+ } else {
+ this.$notify.error('service is needed')
+ return false
+ }
+ },
+ search () {
+ this.$axios.get('/traffic/argument', {
+ params: {
+ service: this.service,
+ rule: this.rule,
+ group: this.group,
+ version: this.version
+ }
+ }).then(response => {
+ this.tableData = []
+ response.data.forEach(element => {
+ this.tableData.push(element)
+ })
+ console.log(this.tableData)
+ })
+ },
+ saveUpdate () {
+ this.updateDialog = false
+ this.$axios.put('/traffic/argument', {
+ service: this.updateService,
+ rule: this.updateRule,
+ group: this.updateGroup,
+ version: this.updateVersion
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ },
+ setHeaders: function () {
+ this.headers = [
+ {
+ text: '应用',
+ value: 'service'
+ },
+ {
+ text: '应用规则',
+ value: 'rule'
+ },
+ {
+ text: 'Group',
+ value: 'group'
+ },
+ {
+ text: 'Version',
+ value: 'version'
+ },
+ {
+ text: '操作',
+ value: ''
+ }
+ ]
+ },
+ closeUpdateDialog () {
+ this.updateDialog = false
+ },
+ create () {
+ this.dialog = true
+ },
+ confirmDelete () {
+ console.log(this.deleteAccesslog)
+ this.$axios.delete('/traffic/argument', {
+ service: this.deleteService,
+ rule: this.deleteRule,
+ group: this.deleteGroup,
+ version: this.deleteVersion
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ this.deleteAccesslog = false
+ },
+ deleteItem (props) {
+ this.deleteDialog = true
+ this.deleteService = props.service
+ this.deleteRule = props.rule
+ this.deleteGroup = props.group
+ this.deleteVersion = props.version
+ },
+ update (props) {
+ this.updateService = props.service
+ this.updateRule = props.rule
+ this.updateGroup = props.group
+ this.updateVersion = props.version
+ this.updateDialog = true
+ },
+ save () {
+ this.$axios.post('/traffic/argument', {
+ service: this.createService,
+ rule: this.createRule,
+ group: this.createGroup,
+ version: this.createVersion
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ this.dialog = false
+ },
+ closeDialog () {
+ this.dialog = false
+ }
+ },
+ watch: {
+ area () {
+ this.setHeaders()
+ }
+ },
+ mounted () {
+ this.setHeaders()
+ }
}
+
</script>
diff --git a/dubbo-admin-ui/src/components/traffic/Gray.vue b/dubbo-admin-ui/src/components/traffic/Gray.vue
new file mode 100644
index 00000000..821b723f
--- /dev/null
+++ b/dubbo-admin-ui/src/components/traffic/Gray.vue
@@ -0,0 +1,421 @@
+<!--
+ ~ Licensed to the Apache Software Foundation (ASF) under one or more
+ ~ contributor license agreements. See the NOTICE file distributed with
+ ~ this work for additional information regarding copyright ownership.
+ ~ The ASF licenses this file to You under the Apache License, Version 2.0
+ ~ (the "License"); you may not use this file except in compliance with
+ ~ the License. You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+-->
+<template>
+ <v-container grid-list-xl fluid>
+ <v-layout row wrap>
+ <v-flex lg12>
+ <Breadcrumb title="trafficGray" :items="breads"></breadcrumb>
+ </v-flex>
+ <v-flex lg12>
+ <v-card flat color="transparent">
+ <v-card-text>
+ <v-form>
+ <v-layout row wrap>
+ <v-flex xs6 sm3 md9>
+ <v-text-field
+ v-model="service"
+ flat
+ label="请输入应用名"
+ ></v-text-field>
+ </v-flex>
+ <v-btn @click="submit" color="primary" large>{{$t('search')}}</v-btn>
+ <v-btn @click="create" color="primary" large>新建</v-btn>
+ </v-layout>
+ </v-form>
+ </v-card-text>
+ </v-card>
+ </v-flex>
+ <v-flex xs12>
+ <v-card>
+ <v-toolbar flat color="transparent" class="elevation-0">
+ <v-toolbar-title><span class="headline">{{$t('trafficAccesslog')}}</span></v-toolbar-title>
+ <v-spacer></v-spacer>
+ </v-toolbar>
+ <v-data-table :headers="headers" :items="tableData" hide-actions class="elevation-1">
+ <template slot="items" slot-scope="props">
+ <td >{{props.item.service}}</td>
+ <td>{{props.item.mock}}</td>
+ <td>{{props.item.group}}</td>
+ <td>{{props.item.version}}</td>
+ <td class="text-xs-center px-0" nowrap>
+ <v-btn
+ class="tiny"
+ color='success'
+ @click="Check(props.item)"
+ >
+ 查看
+ </v-btn>
+ <v-btn
+ class="tiny"
+ color='success'
+ @click="update(props.item)"
+ >
+ 修改
+ </v-btn>
+ <v-btn
+ class="tiny"
+ outline
+ @click="deleteItem(props.item)"
+ >
+ 删除
+ </v-btn>
+ </td>
+ </template>
+ </v-data-table>
+ </v-card>
+ </v-flex>
+ <v-dialog v-model="dialog" width="800px" persistent >
+ <v-card>
+ <v-card-title class="justify-center">
+ <span class="headline">新增GAY</span>
+ </v-card-title>
+ <v-card-text v-for="(modal,index) in createGay.tags" :key="index">
+ <v-flex>
+ <v-text-field
+ label="名称"
+ hint="请输入名称"
+ v-model="modal.name"
+ ></v-text-field>
+ </v-flex>
+ <v-layout row wrap v-for="(item,idx) in modal.match" :key="idx">
+ <v-flex xs6 sm3 md3>
+ <v-text-field
+ label="key"
+ hint="请输入key"
+ v-model="item.key"
+ ></v-text-field>
+ </v-flex>
+ <v-flex xs6 sm3 md3>
+ <v-select
+ style="margin-left: 20px;"
+ :items="items"
+ label="Outlined style"
+ v-model="selectedOption[idx]"
+ @change="updateValue"
+ outlined
+ ></v-select>
+ </v-flex>
+ <v-flex xs6 sm3 md>
+ <v-text-field
+ style="margin-left: 20px;"
+ label="value"
+ hint="请输入匹配的值"
+ v-model="item.value[selectedOption[idx]]"
+ ></v-text-field>
+ </v-flex>
+ <v-flex xs6 sm3 md3>
+ <v-btn
+ style="margin-left: 20px;"
+ class="tiny"
+ color='success'
+ outline
+ @click="addItem(index)"
+ >
+ 新增一条
+ </v-btn>
+ </v-flex>
+ </v-layout>
+ </v-card-text>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat @click.native="closeDialog">{{$t('close')}}</v-btn>
+ <v-btn depressed color="primary" @click.native="save">{{$t('save')}}</v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ <v-dialog v-model="updateDialog" width="800px" persistent >
+ <v-card>
+ <v-card-title class="justify-center">
+ <span class="headline">修改GAY</span>
+ </v-card-title>
+ <v-card-text v-for="(modal,index) in gay.tags" :key="index">
+ <v-flex>
+ <v-text-field
+ label="名称"
+ hint="请输入名称"
+ v-model="modal.name"
+ ></v-text-field>
+ </v-flex>
+ <v-layout row wrap v-for="(item,idx) in modal.match" :key="idx">
+ <v-flex xs6 sm3 md3>
+ <v-text-field
+ label="key"
+ hint="请输入key"
+ v-model="item.key"
+ ></v-text-field>
+ </v-flex>
+ <v-flex xs6 sm3 md3>
+ <v-select
+ style="margin-left: 20px;"
+ :items="items"
+ label="Outlined style"
+ v-model="selectedOption[idx]"
+ @change="updateValue"
+ outlined
+ ></v-select>
+ </v-flex>
+ <v-flex xs6 sm3 md>
+ <v-text-field
+ style="margin-left: 20px;"
+ label="value"
+ hint="请输入匹配的值"
+ v-model="item.value[selectedOption[idx]]"
+ ></v-text-field>
+ </v-flex>
+ <v-flex xs6 sm3 md3>
+ <v-btn
+ style="margin-left: 20px;"
+ class="tiny"
+ color='success'
+ outline
+ @click="addItem(index)"
+ >
+ 新增一条
+ </v-btn>
+ </v-flex>
+ </v-layout>
+ </v-card-text>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat @click.native="closeUpdateDialog">{{$t('close')}}</v-btn>
+ <v-btn depressed color="primary" @click.native="saveUpdate">{{$t('save')}}</v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ <v-dialog
+ v-model="deleteDialog"
+ persistent
+ max-width="290"
+ >
+ <v-card>
+ <v-card-title class="text-h5">
+ 您确认删除这条数据嘛?
+ </v-card-title>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn
+ color="green darken-1"
+ text
+ @click="deleteDialog = false"
+ >
+ 取消
+ </v-btn>
+ <v-btn
+ color="green darken-1"
+ text
+ @click="confirmDelete"
+ >
+ 确定
+ </v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ </v-layout>
+ </v-container>
+ </template>
+<script>
+import Breadcrumb from '../public/Breadcrumb.vue'
+export default {
+ name: 'Gray',
+ components: { Breadcrumb },
+ data: () => ({
+ breads: [
+ {
+ text: 'trafficManagement',
+ href: ''
+ },
+ {
+ text: 'trafficGray',
+ href: ''
+ }
+ ],
+ typeAhead: [],
+ input: null,
+ searchLoading: false,
+ timerID: null,
+ service: '',
+ gay: '',
+ mock: '',
+ group: '',
+ version: '',
+ createGroup: '',
+ createVersion: '',
+ updateService: '',
+ updateMock: '',
+ updateGroup: '',
+ updateVersion: '',
+ deleteDialog: false,
+ createService: '',
+ createMock: '',
+ deleteService: '',
+ deleteMock: '',
+ deleteVersion: '',
+ deleteGroup: '',
+ dialog: false,
+ selectedOption: [],
+ headers: [
+ ],
+ items: ['empty', 'exact', 'noempty', 'prefix', 'regex', 'wildcard'],
+ tableData: [],
+ services: [],
+ loading: false,
+ updateDialog: false,
+ createGay:
+ {
+ application: '244',
+ tags: [
+ {
+ name: '233',
+ match: [
+ {
+ key: 'string',
+ value: {
+ empty: '',
+ exact: '',
+ noempty: '',
+ prefix: '',
+ regex: '',
+ wildcard: ''
+ }
+ }
+ ]
+ }
+ ]
+ }
+ }),
+ methods: {
+ updateValue () {
+ console.log(this.selectedOption)
+ },
+ submit () {
+ if (this.service) {
+ this.search()
+ } else {
+ this.$notify.error('service is needed')
+ return false
+ }
+ },
+ addItem (params) {
+ const temp = {
+ key: 'string',
+ value: {
+ empty: '',
+ exact: '',
+ noempty: '',
+ prefix: '',
+ regex: '',
+ wildcard: ''
+ }
+ }
+ const index = parseInt(params)
+ this.createGay.tags[index].match.push(temp)
+ },
+ search () {
+ this.$axios.get('/traffic/gray', {
+ params: {
+ application: this.service
+ }
+ }).then(response => {
+ this.tableData = []
+ response.data.forEach(element => {
+ this.tableData.push(element)
+ })
+ console.log(this.tableData)
+ })
+ },
+ saveUpdate () {
+ this.updateDialog = false
+ this.$axios.put('/traffic/gray', this.gay).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ this.dialog = false
+ },
+ setHeaders: function () {
+ this.headers = [
+ {
+ text: '应用名',
+ value: 'service'
+ },
+ {
+ text: '灰度环境',
+ value: 'mock'
+ },
+ {
+ text: '操作',
+ value: 'version'
+ }
+ ]
+ },
+ closeUpdateDialog () {
+ this.updateDialog = false
+ },
+ create () {
+ this.dialog = true
+ },
+ confirmDelete () {
+ console.log(this.deleteAccesslog)
+ this.$axios.delete('/traffic/mock', {
+ service: this.deleteService,
+ mock: this.deleteMock,
+ group: this.deleteGroup,
+ version: this.deleteVersion
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ this.deleteAccesslog = false
+ },
+ deleteItem (props) {
+ this.deleteDialog = true
+ this.deleteService = props.service
+ this.deleteMock = props.mock
+ this.deleteGroup = props.group
+ this.deleteVersion = props.version
+ },
+ update (props) {
+ this.updateService = props.service
+ this.updateMock = props.mock
+ this.updateGroup = props.group
+ this.updateVersion = props.version
+ this.updateDialog = true
+ },
+ save () {
+ this.$axios.post('/traffic/gray', this.createGay).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ this.dialog = false
+ },
+ closeDialog () {
+ this.dialog = false
+ }
+ },
+ watch: {
+ area () {
+ this.setHeaders()
+ }
+ },
+ mounted () {
+ this.setHeaders()
+ }
+}
+
+</script>
diff --git a/dubbo-admin-ui/src/components/traffic/Host.vue b/dubbo-admin-ui/src/components/traffic/Host.vue
index 7427efe9..419e0857 100644
--- a/dubbo-admin-ui/src/components/traffic/Host.vue
+++ b/dubbo-admin-ui/src/components/traffic/Host.vue
@@ -15,13 +15,167 @@
~ limitations under the License.
-->
<template>
- <v-container grid-list-xl fluid>
- <v-layout row wrap>
- <v-flex lg12>
- <Breadcrumb title="trafficHost" :items="breads"></breadcrumb>
+ <v-container grid-list-xl fluid>
+ <v-layout row wrap>
+ <v-flex lg12>
+ <Breadcrumb title="trafficAccesslog" :items="breads"></breadcrumb>
+ </v-flex>
+ <v-flex lg12>
+ <v-card flat color="transparent">
+ <v-card-text>
+ <v-form>
+ <v-layout row wrap>
+ <v-combobox
+ :loading="searchLoading"
+ :items="typeAhead"
+ :search-input.sync="application"
+ flat
+ append-icon=""
+ hide-no-data
+ label="请输入application"
+ hint="请输入application"
+ ></v-combobox>
+ <v-combobox
+ style="margin-left: 20px;"
+ :loading="searchLoading"
+ :items="typeAhead"
+ :search-input.sync="accesslog"
+ flat
+ append-icon=""
+ hide-no-data
+ label="请输入accesslog"
+ hint="请输入accesslog"
+ ></v-combobox>
+
+ <v-btn @click="submit" color="primary" large>搜索</v-btn>
+ <v-btn @click="create" color="primary" large>新建</v-btn>
+ </v-layout>
+ </v-form>
+ </v-card-text>
+ </v-card>
</v-flex>
+ <v-flex xs12>
+ <v-card>
+ <v-toolbar flat color="transparent" class="elevation-0">
+ <v-toolbar-title><span class="headline">{{$t('trafficAccesslog')}}</span></v-toolbar-title>
+ <v-spacer></v-spacer>
+ </v-toolbar>
+ <v-data-table :headers="headers" :items="tableData" hide-actions class="elevation-1">
+ <template slot="items" slot-scope="props">
+ <td >{{props.item.application}}</td>
+ <td>{{props.item.accesslog}}</td>
+ <td class="text-xs-center px-0" nowrap>
+ <v-btn
+ class="tiny"
+ color='success'
+ @click="update(props.item)"
+ >
+ 修改
+ </v-btn>
+ <v-btn
+ class="tiny"
+ outline
+ @click="deleteItem(props.item)"
+ >
+ 删除
+ </v-btn>
+ <v-btn
+ class="tiny"
+ outline
+ >
+ 启用
+ </v-btn>
+ </td>
+ </template>
+ </v-data-table>
+ </v-card>
+ </v-flex>
+ <v-dialog v-model="dialog" width="800px" persistent >
+ <v-card>
+ <v-card-title class="justify-center">
+ <span class="headline">{{$t('createNewRoutingRule')}}</span>
+ </v-card-title>
+ <v-card-text >
+ <v-layout wrap>
+ <v-flex>
+ <v-text-field
+ label="Application Name"
+ hint="请输入Application Name"
+ v-model="createApplication"
+ ></v-text-field>
+ </v-flex>
</v-layout>
- </v-container>
+ <v-text-field
+ label="Accesslog"
+ hint="请输入Accesslog"
+ v-model="createAccesslog"
+ ></v-text-field>
+ </v-card-text>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat @click.native="closeDialog">{{$t('close')}}</v-btn>
+ <v-btn depressed color="primary" @click.native="save">{{$t('save')}}</v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ <v-dialog v-model="updateDialog" width="800px" persistent >
+ <v-card>
+ <v-card-title class="justify-center">
+ <span class="headline">{{$t('createNewRoutingRule')}}</span>
+ </v-card-title>
+ <v-card-text >
+ <v-layout wrap>
+ <v-flex>
+ <v-text-field
+ label="Application Name"
+ hint="请输入Application Name"
+ v-model="updateApplication"
+ ></v-text-field>
+ </v-flex>
+ </v-layout>
+ <v-text-field
+ label="Accesslog"
+ hint="请输入Accesslog"
+ v-model="updateAccesslog"
+ ></v-text-field>
+ </v-card-text>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat @click.native="closeUpdateDialog">{{$t('close')}}</v-btn>
+ <v-btn depressed color="primary" @click.native="saveUpdate">{{$t('save')}}</v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ <v-dialog
+ v-model="deleteDialog"
+ persistent
+ max-width="290"
+ >
+ <v-card>
+ <v-card-title class="text-h5">
+ 您确认删除这条数据嘛?
+ </v-card-title>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn
+ color="green darken-1"
+ text
+ @click="deleteDialog = false"
+ >
+ 取消
+ </v-btn>
+ <v-btn
+ color="green darken-1"
+ text
+ @click="confirmDelete"
+ >
+ 确定
+ </v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ </v-layout>
+ </v-container>
</template>
<script>
import Breadcrumb from '../public/Breadcrumb.vue'
@@ -35,10 +189,137 @@ export default {
href: ''
},
{
- text: 'trafficHost',
+ text: 'trafficAccesslog',
href: ''
}
- ]
- })
+ ],
+ typeAhead: [],
+ input: null,
+ searchLoading: false,
+ timerID: null,
+ application: '',
+ accesslog: '',
+ deleteDialog: false,
+ createApplication: '',
+ createAccesslog: '',
+ deleteApplication: '',
+ deleteAccesslog: '',
+ dialog: false,
+ headers: [
+ ],
+ service: null,
+ tableData: [],
+ services: [],
+ loading: false,
+ updateDialog: false,
+ updateApplication: '',
+ updateAccesslog: ''
+ }),
+ methods: {
+ submit () {
+ if (this.accesslog && this.application) {
+ this.search()
+ } else {
+ this.$notify.error('service is needed')
+ return false
+ }
+ },
+ search () {
+ this.$axios.get('/traffic/accesslog', {
+ params: {
+ application: this.application,
+ accesslog: this.accesslog
+ }
+ }).then(response => {
+ console.log(response)
+ this.tableData = []
+ response.data.forEach(element => {
+ this.tableData.push(element)
+ })
+ console.log(this.tableData)
+ })
+ },
+ saveUpdate () {
+ console.log(this.updateAccesslog)
+ this.updateDialog = false
+ this.$axios.put('/traffic/accesslog', {
+ application: this.updateApplication,
+ accesslog: this.updateAccesslog
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ },
+ setHeaders: function () {
+ this.headers = [
+ {
+ text: '服务',
+ value: 'application'
+ },
+ {
+ text: 'accesslog',
+ value: 'accesslog'
+ },
+ {
+ text: '操作',
+ value: ''
+ }
+ ]
+ },
+ closeUpdateDialog () {
+ this.updateDialog = false
+ },
+ create () {
+ this.dialog = true
+ },
+ confirmDelete () {
+ console.log(this.deleteAccesslog)
+ this.$axios.delete('/traffic/accesslog', {
+ application: this.deleteApplication,
+ accesslog: this.deleteAccesslog
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ this.deleteAccesslog = false
+ },
+ deleteItem (props) {
+ this.deleteDialog = true
+ this.deleteAccesslog = props.accesslog
+ this.deleteApplication = props.application
+ },
+ update (props) {
+ console.log(props)
+ this.updateApplication = props.application
+ this.updateAccesslog = props.accesslog
+ this.updateDialog = true
+ console.log(this.updateApplication)
+ console.log(this.updateAccesslog)
+ },
+ save () {
+ this.$axios.post('/traffic/accesslog', {
+ application: this.createApplication,
+ accesslog: this.createAccesslog
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ },
+ closeDialog () {
+ this.dialog = false
+ }
+ },
+ watch: {
+ area () {
+ this.setHeaders()
+ }
+ },
+ mounted () {
+ this.setHeaders()
+ }
}
+
</script>
diff --git a/dubbo-admin-ui/src/components/traffic/Isolation.vue b/dubbo-admin-ui/src/components/traffic/Isolation.vue
index f276b42f..1459bd37 100644
--- a/dubbo-admin-ui/src/components/traffic/Isolation.vue
+++ b/dubbo-admin-ui/src/components/traffic/Isolation.vue
@@ -15,13 +15,167 @@
~ limitations under the License.
-->
<template>
- <v-container grid-list-xl fluid>
- <v-layout row wrap>
- <v-flex lg12>
- <Breadcrumb title="trafficIsolation" :items="breads"></breadcrumb>
+ <v-container grid-list-xl fluid>
+ <v-layout row wrap>
+ <v-flex lg12>
+ <Breadcrumb title="trafficAccesslog" :items="breads"></breadcrumb>
+ </v-flex>
+ <v-flex lg12>
+ <v-card flat color="transparent">
+ <v-card-text>
+ <v-form>
+ <v-layout row wrap>
+ <v-combobox
+ :loading="searchLoading"
+ :items="typeAhead"
+ :search-input.sync="application"
+ flat
+ append-icon=""
+ hide-no-data
+ label="请输入application"
+ hint="请输入application"
+ ></v-combobox>
+ <v-combobox
+ style="margin-left: 20px;"
+ :loading="searchLoading"
+ :items="typeAhead"
+ :search-input.sync="accesslog"
+ flat
+ append-icon=""
+ hide-no-data
+ label="请输入accesslog"
+ hint="请输入accesslog"
+ ></v-combobox>
+
+ <v-btn @click="submit" color="primary" large>搜索</v-btn>
+ <v-btn @click="create" color="primary" large>新建</v-btn>
+ </v-layout>
+ </v-form>
+ </v-card-text>
+ </v-card>
</v-flex>
+ <v-flex xs12>
+ <v-card>
+ <v-toolbar flat color="transparent" class="elevation-0">
+ <v-toolbar-title><span class="headline">{{$t('trafficAccesslog')}}</span></v-toolbar-title>
+ <v-spacer></v-spacer>
+ </v-toolbar>
+ <v-data-table :headers="headers" :items="tableData" hide-actions class="elevation-1">
+ <template slot="items" slot-scope="props">
+ <td >{{props.item.application}}</td>
+ <td>{{props.item.accesslog}}</td>
+ <td class="text-xs-center px-0" nowrap>
+ <v-btn
+ class="tiny"
+ color='success'
+ @click="update(props.item)"
+ >
+ 修改
+ </v-btn>
+ <v-btn
+ class="tiny"
+ outline
+ @click="deleteItem(props.item)"
+ >
+ 删除
+ </v-btn>
+ <v-btn
+ class="tiny"
+ outline
+ >
+ 启用
+ </v-btn>
+ </td>
+ </template>
+ </v-data-table>
+ </v-card>
+ </v-flex>
+ <v-dialog v-model="dialog" width="800px" persistent >
+ <v-card>
+ <v-card-title class="justify-center">
+ <span class="headline">{{$t('createNewRoutingRule')}}</span>
+ </v-card-title>
+ <v-card-text >
+ <v-layout wrap>
+ <v-flex>
+ <v-text-field
+ label="Application Name"
+ hint="请输入Application Name"
+ v-model="createApplication"
+ ></v-text-field>
+ </v-flex>
</v-layout>
- </v-container>
+ <v-text-field
+ label="Accesslog"
+ hint="请输入Accesslog"
+ v-model="createAccesslog"
+ ></v-text-field>
+ </v-card-text>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat @click.native="closeDialog">{{$t('close')}}</v-btn>
+ <v-btn depressed color="primary" @click.native="save">{{$t('save')}}</v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ <v-dialog v-model="updateDialog" width="800px" persistent >
+ <v-card>
+ <v-card-title class="justify-center">
+ <span class="headline">{{$t('createNewRoutingRule')}}</span>
+ </v-card-title>
+ <v-card-text >
+ <v-layout wrap>
+ <v-flex>
+ <v-text-field
+ label="Application Name"
+ hint="请输入Application Name"
+ v-model="updateApplication"
+ ></v-text-field>
+ </v-flex>
+ </v-layout>
+ <v-text-field
+ label="Accesslog"
+ hint="请输入Accesslog"
+ v-model="updateAccesslog"
+ ></v-text-field>
+ </v-card-text>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat @click.native="closeUpdateDialog">{{$t('close')}}</v-btn>
+ <v-btn depressed color="primary" @click.native="saveUpdate">{{$t('save')}}</v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ <v-dialog
+ v-model="deleteDialog"
+ persistent
+ max-width="290"
+ >
+ <v-card>
+ <v-card-title class="text-h5">
+ 您确认删除这条数据嘛?
+ </v-card-title>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn
+ color="green darken-1"
+ text
+ @click="deleteDialog = false"
+ >
+ 取消
+ </v-btn>
+ <v-btn
+ color="green darken-1"
+ text
+ @click="confirmDelete"
+ >
+ 确定
+ </v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ </v-layout>
+ </v-container>
</template>
<script>
import Breadcrumb from '../public/Breadcrumb.vue'
@@ -35,10 +189,133 @@ export default {
href: ''
},
{
- text: 'trafficIsolation',
+ text: 'trafficAccesslog',
href: ''
}
- ]
- })
+ ],
+ typeAhead: [],
+ input: null,
+ searchLoading: false,
+ timerID: null,
+ application: '',
+ accesslog: '',
+ deleteDialog: false,
+ createApplication: '',
+ createAccesslog: '',
+ deleteApplication: '',
+ deleteAccesslog: '',
+ dialog: false,
+ headers: [
+ ],
+ service: null,
+ tableData: [],
+ services: [],
+ loading: false,
+ updateDialog: false,
+ updateApplication: '',
+ updateAccesslog: ''
+ }),
+ methods: {
+ submit () {
+ if (this.accesslog && this.application) {
+ this.search()
+ } else {
+ this.$notify.error('service is needed')
+ return false
+ }
+ },
+ search () {
+ this.$axios.get('/traffic/accesslog', {
+ params: {
+ application: this.application,
+ accesslog: this.accesslog
+ }
+ }).then(response => {
+ console.log(response)
+ this.tableData = []
+ response.data.forEach(element => {
+ this.tableData.push(element)
+ })
+ console.log(this.tableData)
+ })
+ },
+ saveUpdate () {
+ console.log(this.updateAccesslog)
+ this.updateDialog = false
+ this.$axios.put('/traffic/accesslog', {
+ application: this.updateApplication,
+ accesslog: this.updateAccesslog
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ },
+ setHeaders: function () {
+ this.headers = [
+ {
+ text: '服务',
+ value: 'application'
+ },
+ {
+ text: 'accesslog',
+ value: 'accesslog'
+ }
+ ]
+ },
+ closeUpdateDialog () {
+ this.updateDialog = false
+ },
+ create () {
+ this.dialog = true
+ },
+ confirmDelete () {
+ console.log(this.deleteAccesslog)
+ this.$axios.delete('/traffic/accesslog', {
+ application: this.deleteApplication,
+ accesslog: this.deleteAccesslog
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ this.deleteAccesslog = false
+ },
+ deleteItem (props) {
+ this.deleteDialog = true
+ this.deleteAccesslog = props.accesslog
+ this.deleteApplication = props.application
+ },
+ update (props) {
+ console.log(props)
+ this.updateApplication = props.application
+ this.updateAccesslog = props.accesslog
+ this.updateDialog = true
+ console.log(this.updateApplication)
+ console.log(this.updateAccesslog)
+ },
+ save () {
+ this.$axios.post('/traffic/accesslog', {
+ application: this.createApplication,
+ accesslog: this.createAccesslog
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ },
+ closeDialog () {
+ this.dialog = false
+ }
+ },
+ watch: {
+ area () {
+ this.setHeaders()
+ }
+ },
+ mounted () {
+ this.setHeaders()
+ }
}
+
</script>
diff --git a/dubbo-admin-ui/src/components/traffic/Mock.vue b/dubbo-admin-ui/src/components/traffic/Mock.vue
index b4cc47b3..7c5c039a 100644
--- a/dubbo-admin-ui/src/components/traffic/Mock.vue
+++ b/dubbo-admin-ui/src/components/traffic/Mock.vue
@@ -15,18 +15,195 @@
~ limitations under the License.
-->
<template>
- <v-container grid-list-xl fluid>
- <v-layout row wrap>
- <v-flex lg12>
- <Breadcrumb title="trafficMock" :items="breads"></breadcrumb>
+ <v-container grid-list-xl fluid>
+ <v-layout row wrap>
+ <v-flex lg12>
+ <Breadcrumb title="trafficMock" :items="breads"></breadcrumb>
+ </v-flex>
+ <v-flex lg12>
+ <v-card flat color="transparent">
+ <v-card-text>
+ <v-form>
+ <v-layout row wrap>
+ <v-flex xs6 sm3 md3>
+ <v-text-field
+ v-model="service"
+ flat
+ label="请输入应用名"
+ ></v-text-field>
+ </v-flex>
+ <v-flex xs6 sm3 md3>
+ <v-text-field
+ v-model="mock"
+ flat
+ label="请输入应用Mock"
+ ></v-text-field>
+ </v-flex>
+ <v-flex xs6 sm3 md2 >
+ <v-text-field
+ label="Version"
+ :hint="$t('dataIdVersionHint')"
+ v-model="group"
+ ></v-text-field>
+ </v-flex>
+ <v-flex xs6 sm3 md2 >
+ <v-text-field
+ label="Group"
+ :hint="$t('dataIdGroupHint')"
+ v-model="version"
+ ></v-text-field>
+ </v-flex>
+ <v-btn @click="submit" color="primary" large>{{$t('search')}}</v-btn>
+ <v-btn @click="create" color="primary" large>新建</v-btn>
+ </v-layout>
+
+ </v-form>
+ </v-card-text>
+ </v-card>
</v-flex>
+ <v-flex xs12>
+ <v-card>
+ <v-toolbar flat color="transparent" class="elevation-0">
+ <v-toolbar-title><span class="headline">{{$t('trafficAccesslog')}}</span></v-toolbar-title>
+ <v-spacer></v-spacer>
+ </v-toolbar>
+ <v-data-table :headers="headers" :items="tableData" hide-actions class="elevation-1">
+ <template slot="items" slot-scope="props">
+ <td >{{props.item.service}}</td>
+ <td>{{props.item.mock}}</td>
+ <td>{{props.item.group}}</td>
+ <td>{{props.item.version}}</td>
+ <td class="text-xs-center px-0" nowrap>
+ <v-btn
+ class="tiny"
+ color='success'
+ @click="update(props.item)"
+ >
+ 修改
+ </v-btn>
+ <v-btn
+ class="tiny"
+ outline
+ @click="deleteItem(props.item)"
+ >
+ 删除
+ </v-btn>
+ </td>
+ </template>
+ </v-data-table>
+ </v-card>
+ </v-flex>
+ <v-dialog v-model="dialog" width="800px" persistent >
+ <v-card>
+ <v-card-title class="justify-center">
+ <span class="headline">{{$t('createNewRoutingRule')}}</span>
+ </v-card-title>
+ <v-card-text >
+ <v-layout wrap>
+ <v-flex>
+ <v-text-field
+ label="应用名"
+ hint="请输入应用名"
+ v-model="createService"
+ ></v-text-field>
+ </v-flex>
</v-layout>
- </v-container>
+ <v-text-field
+ label="应用Mock"
+ hint="请输入Mock"
+ v-model="createMock"
+ ></v-text-field>
+ <v-text-field
+ label="Group"
+ hint="请输入Group"
+ v-model="createGroup"
+ ></v-text-field>
+ <v-text-field
+ label="Version"
+ hint="请输入Version"
+ v-model="createVersion"
+ ></v-text-field>
+ </v-card-text>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat @click.native="closeDialog">{{$t('close')}}</v-btn>
+ <v-btn depressed color="primary" @click.native="save">{{$t('save')}}</v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ <v-dialog v-model="updateDialog" width="800px" persistent >
+ <v-card>
+ <v-card-title class="justify-center">
+ <span class="headline">{{$t('createNewRoutingRule')}}</span>
+ </v-card-title>
+ <v-card-text >
+ <v-layout wrap>
+ <v-flex>
+ <v-text-field
+ label="应用名"
+ hint="请输入应用名"
+ v-model="updateService"
+ ></v-text-field>
+ </v-flex>
+ </v-layout>
+ <v-text-field
+ label="应用Mock"
+ hint="请输入Mock"
+ v-model="updateMock"
+ ></v-text-field>
+ <v-text-field
+ label="Group"
+ hint="请输入Group"
+ v-model="updateGroup"
+ ></v-text-field>
+ <v-text-field
+ label="Version"
+ hint="请输入Version"
+ v-model="updateVersion"
+ ></v-text-field>
+ </v-card-text>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat @click.native="closeUpdateDialog">{{$t('close')}}</v-btn>
+ <v-btn depressed color="primary" @click.native="saveUpdate">{{$t('save')}}</v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ <v-dialog
+ v-model="deleteDialog"
+ persistent
+ max-width="290"
+ >
+ <v-card>
+ <v-card-title class="text-h5">
+ 您确认删除这条数据嘛?
+ </v-card-title>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn
+ color="green darken-1"
+ text
+ @click="deleteDialog = false"
+ >
+ 取消
+ </v-btn>
+ <v-btn
+ color="green darken-1"
+ text
+ @click="confirmDelete"
+ >
+ 确定
+ </v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ </v-layout>
+ </v-container>
</template>
<script>
import Breadcrumb from '../public/Breadcrumb.vue'
export default {
- name: 'Accesslog',
+ name: 'Mock',
components: { Breadcrumb },
data: () => ({
breads: [
@@ -38,7 +215,157 @@ export default {
text: 'trafficMock',
href: ''
}
- ]
- })
+ ],
+ typeAhead: [],
+ input: null,
+ searchLoading: false,
+ timerID: null,
+ service: '',
+ mock: '',
+ group: '',
+ version: '',
+ createGroup: '',
+ createVersion: '',
+ updateService: '',
+ updateMock: '',
+ updateGroup: '',
+ updateVersion: '',
+ deleteDialog: false,
+ createService: '',
+ createMock: '',
+ deleteService: '',
+ deleteMock: '',
+ deleteVersion: '',
+ deleteGroup: '',
+ dialog: false,
+ headers: [
+ ],
+ tableData: [],
+ services: [],
+ loading: false,
+ updateDialog: false
+ }),
+ methods: {
+ submit () {
+ if (this.service && this.mock) {
+ this.search()
+ } else {
+ this.$notify.error('service is needed')
+ return false
+ }
+ },
+ search () {
+ this.$axios.get('/traffic/mock', {
+ params: {
+ service: this.service,
+ mock: this.mock,
+ group: this.group,
+ version: this.version
+ }
+ }).then(response => {
+ this.tableData = []
+ response.data.forEach(element => {
+ this.tableData.push(element)
+ })
+ console.log(this.tableData)
+ })
+ },
+ saveUpdate () {
+ this.updateDialog = false
+ this.$axios.put('/traffic/mock', {
+ service: this.updateService,
+ mock: this.updateMock,
+ group: this.updateGroup,
+ version: this.updateVersion
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ },
+ setHeaders: function () {
+ this.headers = [
+ {
+ text: '应用',
+ value: 'service'
+ },
+ {
+ text: 'Mock',
+ value: 'mock'
+ },
+ {
+ text: 'Group',
+ value: 'group'
+ },
+ {
+ text: 'Version',
+ value: 'version'
+ },
+ {
+ text: '操作',
+ value: ''
+ }
+ ]
+ },
+ closeUpdateDialog () {
+ this.updateDialog = false
+ },
+ create () {
+ this.dialog = true
+ },
+ confirmDelete () {
+ console.log(this.deleteAccesslog)
+ this.$axios.delete('/traffic/mock', {
+ service: this.deleteService,
+ mock: this.deleteMock,
+ group: this.deleteGroup,
+ version: this.deleteVersion
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ this.deleteAccesslog = false
+ },
+ deleteItem (props) {
+ this.deleteDialog = true
+ this.deleteService = props.service
+ this.deleteMock = props.mock
+ this.deleteGroup = props.group
+ this.deleteVersion = props.version
+ },
+ update (props) {
+ this.updateService = props.service
+ this.updateMock = props.mock
+ this.updateGroup = props.group
+ this.updateVersion = props.version
+ this.updateDialog = true
+ },
+ save () {
+ this.$axios.post('/traffic/mock', {
+ service: this.createService,
+ mock: this.createMock,
+ group: this.createGroup,
+ version: this.createVersion
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ this.dialog = false
+ },
+ closeDialog () {
+ this.dialog = false
+ }
+ },
+ watch: {
+ area () {
+ this.setHeaders()
+ }
+ },
+ mounted () {
+ this.setHeaders()
+ }
}
+
</script>
diff --git a/dubbo-admin-ui/src/components/traffic/Region.vue b/dubbo-admin-ui/src/components/traffic/Region.vue
index 7bf50d97..d17682ad 100644
--- a/dubbo-admin-ui/src/components/traffic/Region.vue
+++ b/dubbo-admin-ui/src/components/traffic/Region.vue
@@ -15,18 +15,195 @@
~ limitations under the License.
-->
<template>
- <v-container grid-list-xl fluid>
- <v-layout row wrap>
- <v-flex lg12>
- <Breadcrumb title="trafficRegion" :items="breads"></breadcrumb>
+ <v-container grid-list-xl fluid>
+ <v-layout row wrap>
+ <v-flex lg12>
+ <Breadcrumb title="trafficRegion" :items="breads"></breadcrumb>
+ </v-flex>
+ <v-flex lg12>
+ <v-card flat color="transparent">
+ <v-card-text>
+ <v-form>
+ <v-layout row wrap>
+ <v-flex xs6 sm3 md3>
+ <v-text-field
+ v-model="service"
+ flat
+ label="请输入应用名"
+ ></v-text-field>
+ </v-flex>
+ <v-flex xs6 sm3 md3>
+ <v-text-field
+ v-model="rule"
+ flat
+ label="请输入应用规则"
+ ></v-text-field>
+ </v-flex>
+ <v-flex xs6 sm3 md2 >
+ <v-text-field
+ label="Version"
+ :hint="$t('dataIdVersionHint')"
+ v-model="group"
+ ></v-text-field>
+ </v-flex>
+ <v-flex xs6 sm3 md2 >
+ <v-text-field
+ label="Group"
+ :hint="$t('dataIdGroupHint')"
+ v-model="version"
+ ></v-text-field>
+ </v-flex>
+ <v-btn @click="submit" color="primary" large>{{$t('search')}}</v-btn>
+ <v-btn @click="create" color="primary" large>新建</v-btn>
+ </v-layout>
+
+ </v-form>
+ </v-card-text>
+ </v-card>
</v-flex>
+ <v-flex xs12>
+ <v-card>
+ <v-toolbar flat color="transparent" class="elevation-0">
+ <v-toolbar-title><span class="headline">{{$t('trafficAccesslog')}}</span></v-toolbar-title>
+ <v-spacer></v-spacer>
+ </v-toolbar>
+ <v-data-table :headers="headers" :items="tableData" hide-actions class="elevation-1">
+ <template slot="items" slot-scope="props">
+ <td >{{props.item.service}}</td>
+ <td>{{props.item.rule}}</td>
+ <td>{{props.item.group}}</td>
+ <td>{{props.item.version}}</td>
+ <td class="text-xs-center px-0" nowrap>
+ <v-btn
+ class="tiny"
+ color='success'
+ @click="update(props.item)"
+ >
+ 修改
+ </v-btn>
+ <v-btn
+ class="tiny"
+ outline
+ @click="deleteItem(props.item)"
+ >
+ 删除
+ </v-btn>
+ </td>
+ </template>
+ </v-data-table>
+ </v-card>
+ </v-flex>
+ <v-dialog v-model="dialog" width="800px" persistent >
+ <v-card>
+ <v-card-title class="justify-center">
+ <span class="headline">{{$t('createNewRoutingRule')}}</span>
+ </v-card-title>
+ <v-card-text >
+ <v-layout wrap>
+ <v-flex>
+ <v-text-field
+ label="应用名"
+ hint="请输入应用名"
+ v-model="createService"
+ ></v-text-field>
+ </v-flex>
</v-layout>
- </v-container>
+ <v-text-field
+ label="应用规则"
+ hint="请输入应用规则"
+ v-model="createRule"
+ ></v-text-field>
+ <v-text-field
+ label="Group"
+ hint="请输入Group"
+ v-model="createGroup"
+ ></v-text-field>
+ <v-text-field
+ label="Version"
+ hint="请输入Version"
+ v-model="createVersion"
+ ></v-text-field>
+ </v-card-text>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat @click.native="closeDialog">{{$t('close')}}</v-btn>
+ <v-btn depressed color="primary" @click.native="save">{{$t('save')}}</v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ <v-dialog v-model="updateDialog" width="800px" persistent >
+ <v-card>
+ <v-card-title class="justify-center">
+ <span class="headline">{{$t('createNewRoutingRule')}}</span>
+ </v-card-title>
+ <v-card-text >
+ <v-layout wrap>
+ <v-flex>
+ <v-text-field
+ label="应用名"
+ hint="请输入应用名"
+ v-model="updateService"
+ ></v-text-field>
+ </v-flex>
+ </v-layout>
+ <v-text-field
+ label="应用规则"
+ hint="请输入应用规则"
+ v-model="updateRule"
+ ></v-text-field>
+ <v-text-field
+ label="Group"
+ hint="请输入Group"
+ v-model="updateGroup"
+ ></v-text-field>
+ <v-text-field
+ label="Version"
+ hint="请输入Version"
+ v-model="updateVersion"
+ ></v-text-field>
+ </v-card-text>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat @click.native="closeUpdateDialog">{{$t('close')}}</v-btn>
+ <v-btn depressed color="primary" @click.native="saveUpdate">{{$t('save')}}</v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ <v-dialog
+ v-model="deleteDialog"
+ persistent
+ max-width="290"
+ >
+ <v-card>
+ <v-card-title class="text-h5">
+ 您确认删除这条数据嘛?
+ </v-card-title>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn
+ color="green darken-1"
+ text
+ @click="deleteDialog = false"
+ >
+ 取消
+ </v-btn>
+ <v-btn
+ color="green darken-1"
+ text
+ @click="confirmDelete"
+ >
+ 确定
+ </v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ </v-layout>
+ </v-container>
</template>
<script>
import Breadcrumb from '../public/Breadcrumb.vue'
export default {
- name: 'Accesslog',
+ name: 'Region',
components: { Breadcrumb },
data: () => ({
breads: [
@@ -38,7 +215,157 @@ export default {
text: 'trafficRegion',
href: ''
}
- ]
- })
+ ],
+ typeAhead: [],
+ input: null,
+ searchLoading: false,
+ timerID: null,
+ service: '',
+ rule: '',
+ group: '',
+ version: '',
+ createGroup: '',
+ createVersion: '',
+ updateService: '',
+ updateRule: '',
+ updateGroup: '',
+ updateVersion: '',
+ deleteDialog: false,
+ createService: '',
+ createRule: '',
+ deleteService: '',
+ deleteRule: '',
+ deleteVersion: '',
+ deleteGroup: '',
+ dialog: false,
+ headers: [
+ ],
+ tableData: [],
+ services: [],
+ loading: false,
+ updateDialog: false
+ }),
+ methods: {
+ submit () {
+ if (this.service && this.rule) {
+ this.search()
+ } else {
+ this.$notify.error('service is needed')
+ return false
+ }
+ },
+ search () {
+ this.$axios.get('/traffic/region', {
+ params: {
+ service: this.service,
+ rule: this.rule,
+ group: this.group,
+ version: this.version
+ }
+ }).then(response => {
+ this.tableData = []
+ response.data.forEach(element => {
+ this.tableData.push(element)
+ })
+ console.log(this.tableData)
+ })
+ },
+ saveUpdate () {
+ this.updateDialog = false
+ this.$axios.put('/traffic/region', {
+ service: this.updateService,
+ rule: this.updateRule,
+ group: this.updateGroup,
+ version: this.updateVersion
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ },
+ setHeaders: function () {
+ this.headers = [
+ {
+ text: '应用',
+ value: 'service'
+ },
+ {
+ text: '应用规则',
+ value: 'rule'
+ },
+ {
+ text: 'Group',
+ value: 'group'
+ },
+ {
+ text: 'Version',
+ value: 'version'
+ },
+ {
+ text: '操作',
+ value: ''
+ }
+ ]
+ },
+ closeUpdateDialog () {
+ this.updateDialog = false
+ },
+ create () {
+ this.dialog = true
+ },
+ confirmDelete () {
+ console.log(this.deleteAccesslog)
+ this.$axios.delete('/traffic/region', {
+ service: this.deleteService,
+ rule: this.deleteRule,
+ group: this.deleteGroup,
+ version: this.deleteVersion
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ this.deleteAccesslog = false
+ },
+ deleteItem (props) {
+ this.deleteDialog = true
+ this.deleteService = props.service
+ this.deleteRule = props.rule
+ this.deleteGroup = props.group
+ this.deleteVersion = props.version
+ },
+ update (props) {
+ this.updateService = props.service
+ this.updateRule = props.rule
+ this.updateGroup = props.group
+ this.updateVersion = props.version
+ this.updateDialog = true
+ },
+ save () {
+ this.$axios.post('/traffic/region', {
+ service: this.createService,
+ rule: this.createRule,
+ group: this.createGroup,
+ version: this.createVersion
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ this.dialog = false
+ },
+ closeDialog () {
+ this.dialog = false
+ }
+ },
+ watch: {
+ area () {
+ this.setHeaders()
+ }
+ },
+ mounted () {
+ this.setHeaders()
+ }
}
+
</script>
diff --git a/dubbo-admin-ui/src/components/traffic/Retry.vue b/dubbo-admin-ui/src/components/traffic/Retry.vue
index caea8ae0..fcf661c8 100644
--- a/dubbo-admin-ui/src/components/traffic/Retry.vue
+++ b/dubbo-admin-ui/src/components/traffic/Retry.vue
@@ -15,18 +15,195 @@
~ limitations under the License.
-->
<template>
- <v-container grid-list-xl fluid>
- <v-layout row wrap>
- <v-flex lg12>
- <Breadcrumb title="trafficRetry" :items="breads"></breadcrumb>
+ <v-container grid-list-xl fluid>
+ <v-layout row wrap>
+ <v-flex lg12>
+ <Breadcrumb title="trafficRetry" :items="breads"></breadcrumb>
+ </v-flex>
+ <v-flex lg12>
+ <v-card flat color="transparent">
+ <v-card-text>
+ <v-form>
+ <v-layout row wrap>
+ <v-flex xs6 sm3 md3>
+ <v-text-field
+ v-model="service"
+ flat
+ label="请输入应用名"
+ ></v-text-field>
+ </v-flex>
+ <v-flex xs6 sm3 md3>
+ <v-text-field
+ v-model="retry"
+ flat
+ label="请输入Retry"
+ ></v-text-field>
+ </v-flex>
+ <v-flex xs6 sm3 md2 >
+ <v-text-field
+ label="Version"
+ :hint="$t('dataIdVersionHint')"
+ v-model="group"
+ ></v-text-field>
+ </v-flex>
+ <v-flex xs6 sm3 md2 >
+ <v-text-field
+ label="Group"
+ :hint="$t('dataIdGroupHint')"
+ v-model="version"
+ ></v-text-field>
+ </v-flex>
+ <v-btn @click="submit" color="primary" large>{{$t('search')}}</v-btn>
+ <v-btn @click="create" color="primary" large>新建</v-btn>
+ </v-layout>
+
+ </v-form>
+ </v-card-text>
+ </v-card>
</v-flex>
+ <v-flex xs12>
+ <v-card>
+ <v-toolbar flat color="transparent" class="elevation-0">
+ <v-toolbar-title><span class="headline">{{$t('trafficAccesslog')}}</span></v-toolbar-title>
+ <v-spacer></v-spacer>
+ </v-toolbar>
+ <v-data-table :headers="headers" :items="tableData" hide-actions class="elevation-1">
+ <template slot="items" slot-scope="props">
+ <td >{{props.item.service}}</td>
+ <td>{{props.item.retry}}</td>
+ <td>{{props.item.group}}</td>
+ <td>{{props.item.version}}</td>
+ <td class="text-xs-center px-0" nowrap>
+ <v-btn
+ class="tiny"
+ color='success'
+ @click="update(props.item)"
+ >
+ 修改
+ </v-btn>
+ <v-btn
+ class="tiny"
+ outline
+ @click="deleteItem(props.item)"
+ >
+ 删除
+ </v-btn>
+ </td>
+ </template>
+ </v-data-table>
+ </v-card>
+ </v-flex>
+ <v-dialog v-model="dialog" width="800px" persistent >
+ <v-card>
+ <v-card-title class="justify-center">
+ <span class="headline">{{$t('createNewRoutingRule')}}</span>
+ </v-card-title>
+ <v-card-text >
+ <v-layout wrap>
+ <v-flex>
+ <v-text-field
+ label="应用名"
+ hint="请输入应用名"
+ v-model="createService"
+ ></v-text-field>
+ </v-flex>
</v-layout>
- </v-container>
+ <v-text-field
+ label="应用规则"
+ hint="请输入应用规则"
+ v-model="createRetry"
+ ></v-text-field>
+ <v-text-field
+ label="Group"
+ hint="请输入Group"
+ v-model="createGroup"
+ ></v-text-field>
+ <v-text-field
+ label="Version"
+ hint="请输入Version"
+ v-model="createVersion"
+ ></v-text-field>
+ </v-card-text>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat @click.native="closeDialog">{{$t('close')}}</v-btn>
+ <v-btn depressed color="primary" @click.native="save">{{$t('save')}}</v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ <v-dialog v-model="updateDialog" width="800px" persistent >
+ <v-card>
+ <v-card-title class="justify-center">
+ <span class="headline">{{$t('createNewRoutingRule')}}</span>
+ </v-card-title>
+ <v-card-text >
+ <v-layout wrap>
+ <v-flex>
+ <v-text-field
+ label="应用名"
+ hint="请输入应用名"
+ v-model="updateService"
+ ></v-text-field>
+ </v-flex>
+ </v-layout>
+ <v-text-field
+ label="应用规则"
+ hint="请输入应用规则"
+ v-model="updateRetry"
+ ></v-text-field>
+ <v-text-field
+ label="Group"
+ hint="请输入Group"
+ v-model="updateGroup"
+ ></v-text-field>
+ <v-text-field
+ label="Version"
+ hint="请输入Version"
+ v-model="updateVersion"
+ ></v-text-field>
+ </v-card-text>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat @click.native="closeUpdateDialog">{{$t('close')}}</v-btn>
+ <v-btn depressed color="primary" @click.native="saveUpdate">{{$t('save')}}</v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ <v-dialog
+ v-model="deleteDialog"
+ persistent
+ max-width="290"
+ >
+ <v-card>
+ <v-card-title class="text-h5">
+ 您确认删除这条数据嘛?
+ </v-card-title>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn
+ color="green darken-1"
+ text
+ @click="deleteDialog = false"
+ >
+ 取消
+ </v-btn>
+ <v-btn
+ color="green darken-1"
+ text
+ @click="confirmDelete"
+ >
+ 确定
+ </v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ </v-layout>
+ </v-container>
</template>
<script>
import Breadcrumb from '../public/Breadcrumb.vue'
export default {
- name: 'Accesslog',
+ name: 'Retry',
components: { Breadcrumb },
data: () => ({
breads: [
@@ -38,7 +215,157 @@ export default {
text: 'trafficRetry',
href: ''
}
- ]
- })
+ ],
+ typeAhead: [],
+ input: null,
+ searchLoading: false,
+ timerID: null,
+ service: '',
+ retry: '',
+ group: '',
+ version: '',
+ createGroup: '',
+ createVersion: '',
+ updateService: '',
+ updateRetry: '',
+ updateGroup: '',
+ updateVersion: '',
+ deleteDialog: false,
+ createService: '',
+ createRetry: '',
+ deleteService: '',
+ deleteRetry: '',
+ deleteVersion: '',
+ deleteGroup: '',
+ dialog: false,
+ headers: [
+ ],
+ tableData: [],
+ services: [],
+ loading: false,
+ updateDialog: false
+ }),
+ methods: {
+ submit () {
+ if (this.service && this.retry) {
+ this.search()
+ } else {
+ this.$notify.error('service is needed')
+ return false
+ }
+ },
+ search () {
+ this.$axios.get('/traffic/retry', {
+ params: {
+ service: this.service,
+ retry: this.retry,
+ group: this.group,
+ version: this.version
+ }
+ }).then(response => {
+ this.tableData = []
+ response.data.forEach(element => {
+ this.tableData.push(element)
+ })
+ console.log(this.tableData)
+ })
+ },
+ saveUpdate () {
+ this.updateDialog = false
+ this.$axios.put('/traffic/retry', {
+ service: this.updateService,
+ retry: this.updateRetry,
+ group: this.updateGroup,
+ version: this.updateVersion
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ },
+ setHeaders: function () {
+ this.headers = [
+ {
+ text: '应用',
+ value: 'service'
+ },
+ {
+ text: 'Retry',
+ value: 'retry'
+ },
+ {
+ text: 'Group',
+ value: 'group'
+ },
+ {
+ text: 'Version',
+ value: 'version'
+ },
+ {
+ text: '操作',
+ value: ''
+ }
+ ]
+ },
+ closeUpdateDialog () {
+ this.updateDialog = false
+ },
+ create () {
+ this.dialog = true
+ },
+ confirmDelete () {
+ console.log(this.deleteAccesslog)
+ this.$axios.delete('/traffic/retry', {
+ service: this.deleteService,
+ retry: this.deleteRetry,
+ group: this.deleteGroup,
+ version: this.deleteVersion
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ this.deleteAccesslog = false
+ },
+ deleteItem (props) {
+ this.deleteDialog = true
+ this.deleteService = props.service
+ this.deleteRetry = props.retry
+ this.deleteGroup = props.group
+ this.deleteVersion = props.version
+ },
+ update (props) {
+ this.updateService = props.service
+ this.updateRetry = props.retry
+ this.updateGroup = props.group
+ this.updateVersion = props.version
+ this.updateDialog = true
+ },
+ save () {
+ this.$axios.post('/traffic/retry', {
+ service: this.createService,
+ retry: this.createRetry,
+ group: this.createGroup,
+ version: this.createVersion
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ this.dialog = false
+ },
+ closeDialog () {
+ this.dialog = false
+ }
+ },
+ watch: {
+ area () {
+ this.setHeaders()
+ }
+ },
+ mounted () {
+ this.setHeaders()
+ }
}
+
</script>
diff --git a/dubbo-admin-ui/src/components/traffic/Timeout.vue b/dubbo-admin-ui/src/components/traffic/Timeout.vue
index 7f77f111..cd7a35a3 100644
--- a/dubbo-admin-ui/src/components/traffic/Timeout.vue
+++ b/dubbo-admin-ui/src/components/traffic/Timeout.vue
@@ -15,18 +15,198 @@
~ limitations under the License.
-->
<template>
- <v-container grid-list-xl fluid>
- <v-layout row wrap>
- <v-flex lg12>
- <Breadcrumb title="trafficTimeout" :items="breads"></breadcrumb>
+ <v-container grid-list-xl fluid>
+ <v-layout row wrap>
+ <v-flex lg12>
+ <Breadcrumb title="trafficTimeout" :items="breads"></breadcrumb>
+ </v-flex>
+ <v-flex lg12>
+ <v-card flat color="transparent">
+ <v-card-text>
+ <v-form>
+ <v-layout row wrap>
+ <v-flex xs6 sm3 md3>
+ <v-text-field
+ v-model="service"
+ flat
+ label="请输入应用名"
+ ></v-text-field>
+ </v-flex>
+ <v-flex xs6 sm3 md3>
+ <v-text-field
+ v-model="timeout"
+ flat
+ type="number"
+ label="请输入Timeout"
+ ></v-text-field>
+ </v-flex>
+ <v-flex xs6 sm3 md2 >
+ <v-text-field
+ label="Version"
+ :hint="$t('dataIdVersionHint')"
+ v-model="group"
+ ></v-text-field>
+ </v-flex>
+ <v-flex xs6 sm3 md2 >
+ <v-text-field
+ label="Group"
+ :hint="$t('dataIdGroupHint')"
+ v-model="version"
+ ></v-text-field>
+ </v-flex>
+ <v-btn @click="submit" color="primary" large>{{$t('search')}}</v-btn>
+ <v-btn @click="create" color="primary" large>新建</v-btn>
+ </v-layout>
+
+ </v-form>
+ </v-card-text>
+ </v-card>
</v-flex>
+ <v-flex xs12>
+ <v-card>
+ <v-toolbar flat color="transparent" class="elevation-0">
+ <v-toolbar-title><span class="headline">{{$t('trafficAccesslog')}}</span></v-toolbar-title>
+ <v-spacer></v-spacer>
+ </v-toolbar>
+ <v-data-table :headers="headers" :items="tableData" hide-actions class="elevation-1">
+ <template slot="items" slot-scope="props">
+ <td >{{props.item.service}}</td>
+ <td>{{props.item.timeout}}</td>
+ <td>{{props.item.group}}</td>
+ <td>{{props.item.version}}</td>
+ <td class="text-xs-center px-0" nowrap>
+ <v-btn
+ class="tiny"
+ color='success'
+ @click="update(props.item)"
+ >
+ 修改
+ </v-btn>
+ <v-btn
+ class="tiny"
+ outline
+ @click="deleteItem(props.item)"
+ >
+ 删除
+ </v-btn>
+ </td>
+ </template>
+ </v-data-table>
+ </v-card>
+ </v-flex>
+ <v-dialog v-model="dialog" width="800px" persistent >
+ <v-card>
+ <v-card-title class="justify-center">
+ <span class="headline">{{$t('createNewRoutingRule')}}</span>
+ </v-card-title>
+ <v-card-text >
+ <v-layout wrap>
+ <v-flex>
+ <v-text-field
+ label="应用名"
+ hint="请输入应用名"
+ v-model="createService"
+ ></v-text-field>
+ </v-flex>
</v-layout>
- </v-container>
+ <v-text-field
+ label="Timeout"
+ hint="请输入Timeout"
+ type="number"
+ v-model="createTimeout"
+ ></v-text-field>
+ <v-text-field
+ label="Group"
+ hint="请输入Group"
+ v-model="createGroup"
+ ></v-text-field>
+ <v-text-field
+ label="Version"
+ hint="请输入Version"
+ v-model="createVersion"
+ ></v-text-field>
+ </v-card-text>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat @click.native="closeDialog">{{$t('close')}}</v-btn>
+ <v-btn depressed color="primary" @click.native="save">{{$t('save')}}</v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ <v-dialog v-model="updateDialog" width="800px" persistent >
+ <v-card>
+ <v-card-title class="justify-center">
+ <span class="headline">{{$t('createNewRoutingRule')}}</span>
+ </v-card-title>
+ <v-card-text >
+ <v-layout wrap>
+ <v-flex>
+ <v-text-field
+ label="应用名"
+ hint="请输入应用名"
+ v-model="updateService"
+ ></v-text-field>
+ </v-flex>
+ </v-layout>
+ <v-text-field
+ label="应用规则"
+ hint="请输入应用规则"
+ type="number"
+ v-model="updateTimeout"
+ ></v-text-field>
+ <v-text-field
+ label="Group"
+ hint="请输入Group"
+ v-model="updateGroup"
+ ></v-text-field>
+ <v-text-field
+ label="Version"
+ hint="请输入Version"
+ v-model="updateVersion"
+ ></v-text-field>
+ </v-card-text>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat @click.native="closeUpdateDialog">{{$t('close')}}</v-btn>
+ <v-btn depressed color="primary" @click.native="saveUpdate">{{$t('save')}}</v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ <v-dialog
+ v-model="deleteDialog"
+ persistent
+ max-width="290"
+ >
+ <v-card>
+ <v-card-title class="text-h5">
+ 您确认删除这条数据嘛?
+ </v-card-title>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn
+ color="green darken-1"
+ text
+ @click="deleteDialog = false"
+ >
+ 取消
+ </v-btn>
+ <v-btn
+ color="green darken-1"
+ text
+ @click="confirmDelete"
+ >
+ 确定
+ </v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ </v-layout>
+ </v-container>
</template>
<script>
import Breadcrumb from '../public/Breadcrumb.vue'
export default {
- name: 'Accesslog',
+ name: 'Timeout',
components: { Breadcrumb },
data: () => ({
breads: [
@@ -38,7 +218,157 @@ export default {
text: 'trafficTimeout',
href: ''
}
- ]
- })
+ ],
+ typeAhead: [],
+ input: null,
+ searchLoading: false,
+ timerID: null,
+ service: '',
+ timeout: null,
+ group: '',
+ version: '',
+ createGroup: '',
+ createVersion: '',
+ updateService: '',
+ updateTimeout: NaN,
+ updateGroup: '',
+ updateVersion: '',
+ deleteDialog: false,
+ createService: '',
+ createTimeout: NaN,
+ deleteService: '',
+ deleteTimeout: NaN,
+ deleteVersion: '',
+ deleteGroup: '',
+ dialog: false,
+ headers: [
+ ],
+ tableData: [],
+ services: [],
+ loading: false,
+ updateDialog: false
+ }),
+ methods: {
+ submit () {
+ if (this.service && this.timeout) {
+ this.search()
+ } else {
+ this.$notify.error('service is needed')
+ return false
+ }
+ },
+ search () {
+ this.$axios.get('/traffic/timeout', {
+ params: {
+ service: this.service,
+ timeout: parseInt(this.timeout),
+ group: this.group,
+ version: this.version
+ }
+ }).then(response => {
+ this.tableData = []
+ response.data.forEach(element => {
+ this.tableData.push(element)
+ })
+ console.log(this.tableData)
+ })
+ },
+ saveUpdate () {
+ this.updateDialog = false
+ this.$axios.put('/traffic/timeout', {
+ service: this.updateService,
+ timeout: parseInt(this.updateTimeout),
+ group: this.updateGroup,
+ version: this.updateVersion
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ },
+ setHeaders: function () {
+ this.headers = [
+ {
+ text: '应用',
+ value: 'service'
+ },
+ {
+ text: 'Timeout',
+ value: 'timeout'
+ },
+ {
+ text: 'Group',
+ value: 'group'
+ },
+ {
+ text: 'Version',
+ value: 'version'
+ },
+ {
+ text: '操作',
+ value: ''
+ }
+ ]
+ },
+ closeUpdateDialog () {
+ this.updateDialog = false
+ },
+ create () {
+ this.dialog = true
+ },
+ confirmDelete () {
+ console.log(this.deleteAccesslog)
+ this.$axios.delete('/traffic/timeout', {
+ service: this.deleteService,
+ timeout: parseInt(this.deleteTimeout),
+ group: this.deleteGroup,
+ version: this.deleteVersion
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ this.deleteAccesslog = false
+ },
+ deleteItem (props) {
+ this.deleteDialog = true
+ this.deleteService = props.service
+ this.deleteTimeout = props.timeout
+ this.deleteGroup = props.group
+ this.deleteVersion = props.version
+ },
+ update (props) {
+ this.updateService = props.service
+ this.updateTimeout = props.timeout
+ this.updateGroup = props.group
+ this.updateVersion = props.version
+ this.updateDialog = true
+ },
+ save () {
+ this.$axios.post('/traffic/timeout', {
+ service: this.createService,
+ timeout: parseInt(this.createTimeout),
+ group: this.createGroup,
+ version: this.createVersion
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ this.dialog = false
+ },
+ closeDialog () {
+ this.dialog = false
+ }
+ },
+ watch: {
+ area () {
+ this.setHeaders()
+ }
+ },
+ mounted () {
+ this.setHeaders()
+ }
}
+
</script>
diff --git a/dubbo-admin-ui/src/components/traffic/Weight.vue b/dubbo-admin-ui/src/components/traffic/Weight.vue
index 87e25d0f..752d5a4a 100644
--- a/dubbo-admin-ui/src/components/traffic/Weight.vue
+++ b/dubbo-admin-ui/src/components/traffic/Weight.vue
@@ -15,13 +15,192 @@
~ limitations under the License.
-->
<template>
- <v-container grid-list-xl fluid>
- <v-layout row wrap>
- <v-flex lg12>
- <Breadcrumb title="trafficWeight" :items="breads"></breadcrumb>
+ <v-container grid-list-xl fluid>
+ <v-layout row wrap>
+ <v-flex lg12>
+ <Breadcrumb title="trafficAccesslog" :items="breads"></breadcrumb>
+ </v-flex>
+ <v-flex lg12>
+ <v-card flat color="transparent">
+ <v-card-text>
+ <v-form>
+ <v-layout row wrap>
+ <v-combobox
+ :loading="searchLoading"
+ :items="typeAhead"
+ :search-input.sync="application"
+ flat
+ append-icon=""
+ hide-no-data
+ label="请输入application"
+ hint="请输入application"
+ ></v-combobox>
+ <v-combobox
+ style="margin-left: 20px;"
+ :loading="searchLoading"
+ :items="typeAhead"
+ :search-input.sync="accesslog"
+ flat
+ append-icon=""
+ hide-no-data
+ label="请输入accesslog"
+ hint="请输入accesslog"
+ ></v-combobox>
+
+ <v-btn @click="submit" color="primary" large>搜索</v-btn>
+ <v-btn @click="create" color="primary" large>新建</v-btn>
+ </v-layout>
+ </v-form>
+ </v-card-text>
+ </v-card>
</v-flex>
+ <v-flex xs12>
+ <v-card>
+ <v-toolbar flat color="transparent" class="elevation-0">
+ <v-toolbar-title><span class="headline">{{$t('trafficAccesslog')}}</span></v-toolbar-title>
+ <v-spacer></v-spacer>
+ </v-toolbar>
+ <v-data-table :headers="headers" :items="tableData" hide-actions class="elevation-1">
+ <template slot="items" slot-scope="props">
+ <td >{{props.item.application}}</td>
+ <td>{{props.item.accesslog}}</td>
+ <td class="text-xs-center px-0" nowrap>
+ <v-btn
+ class="tiny"
+ color='success'
+ @click="update(props.item)"
+ >
+ 修改
+ </v-btn>
+ <v-btn
+ class="tiny"
+ outline
+ @click="deleteItem(props.item)"
+ >
+ 删除
+ </v-btn>
+ <v-btn
+ class="tiny"
+ outline
+ >
+ 启用
+ </v-btn>
+ </td>
+ </template>
+ </v-data-table>
+ </v-card>
+ </v-flex>
+ <v-dialog v-model="dialog" width="800px" persistent >
+ <v-card>
+ <v-card-title class="justify-center">
+ <span class="headline">新增GAY</span>
+ </v-card-title>
+ <v-card-text>
+ <v-flex xs6 sm3 md3>
+ <v-select
+ hint="请选择key"
+ style="margin-left: 20px;"
+ :items="keys"
+ label="Outlined style"
+ outlined
+ ></v-select>
+ </v-flex>
+ <v-layout row wrap v-for="(item,idx) in createWeight.match.application.oneof" :key="idx">
+ <v-flex xs6 sm3 md3>
+ <v-select
+ style="margin-left: 20px;"
+ :items="items"
+ label="Outlined style"
+ v-model="selectedOption[idx]"
+ outlined
+ ></v-select>
+ </v-flex>
+ <v-flex xs6 sm3 md>
+ <v-text-field
+ style="margin-left: 20px;"
+ label="value"
+ hint="请输入匹配的值"
+ v-model="item[selectedOption[idx]]"
+ ></v-text-field>
+ </v-flex>
+ <v-flex xs6 sm3 md3>
+ <v-btn
+ style="margin-left: 20px;"
+ class="tiny"
+ color='success'
+ outline
+ @click="addItem(index)"
+ >
+ 新增一条
+ </v-btn>
+ </v-flex>
+ </v-layout>
+ </v-card-text>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat @click.native="closeDialog">{{$t('close')}}</v-btn>
+ <v-btn depressed color="primary" @click.native="save">{{$t('save')}}</v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ <v-dialog v-model="updateDialog" width="800px" persistent >
+ <v-card>
+ <v-card-title class="justify-center">
+ <span class="headline">{{$t('createNewRoutingRule')}}</span>
+ </v-card-title>
+ <v-card-text >
+ <v-layout wrap>
+ <v-flex>
+ <v-text-field
+ label="Application Name"
+ hint="请输入Application Name"
+ v-model="updateApplication"
+ ></v-text-field>
+ </v-flex>
</v-layout>
- </v-container>
+ <v-text-field
+ label="Accesslog"
+ hint="请输入Accesslog"
+ v-model="updateAccesslog"
+ ></v-text-field>
+ </v-card-text>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat @click.native="closeUpdateDialog">{{$t('close')}}</v-btn>
+ <v-btn depressed color="primary" @click.native="saveUpdate">{{$t('save')}}</v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ <v-dialog
+ v-model="deleteDialog"
+ persistent
+ max-width="290"
+ >
+ <v-card>
+ <v-card-title class="text-h5">
+ 您确认删除这条数据嘛?
+ </v-card-title>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn
+ color="green darken-1"
+ text
+ @click="deleteDialog = false"
+ >
+ 取消
+ </v-btn>
+ <v-btn
+ color="green darken-1"
+ text
+ @click="confirmDelete"
+ >
+ 确定
+ </v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+ </v-layout>
+ </v-container>
</template>
<script>
import Breadcrumb from '../public/Breadcrumb.vue'
@@ -35,10 +214,179 @@ export default {
href: ''
},
{
- text: 'trafficWeight',
+ text: 'trafficAccesslog',
href: ''
}
- ]
- })
+ ],
+ typeAhead: [],
+ input: null,
+ searchLoading: false,
+ timerID: null,
+ application: '',
+ accesslog: '',
+ items: ['empty', 'exact', 'noempty', 'prefix', 'regex', 'wildcard'],
+ keys: ['application', 'service', 'param'],
+ selectedKey: [],
+ deleteDialog: false,
+ createApplication: '',
+ selectedOption: [],
+ createAccesslog: '',
+ deleteApplication: '',
+ createWeight: {
+ match: {
+ application: {
+ oneof: [
+ {
+ empty: '',
+ exact: '',
+ noempty: '',
+ prefix: '',
+ regex: '',
+ wildcard: ''
+ }
+ ]
+ },
+ param: [
+ {
+ key: '',
+ value: {
+ empty: '',
+ exact: '',
+ noempty: '',
+ prefix: '',
+ regex: '',
+ wildcard: ''
+ }
+ }
+ ],
+ service: {
+ oneof: [
+ {
+ empty: '',
+ exact: '',
+ noempty: '',
+ prefix: '',
+ regex: '',
+ wildcard: ''
+ }
+ ]
+ }
+ },
+ weight: 0
+ },
+ deleteAccesslog: '',
+ dialog: false,
+ headers: [
+ ],
+ service: null,
+ tableData: [],
+ services: [],
+ loading: false,
+ updateDialog: false,
+ updateApplication: '',
+ updateAccesslog: ''
+ }),
+ methods: {
+ submit () {
+ if (this.accesslog && this.application) {
+ this.search()
+ } else {
+ this.$notify.error('service is needed')
+ return false
+ }
+ },
+ search () {
+ this.$axios.get('/traffic/accesslog', {
+ params: {
+ application: this.application,
+ accesslog: this.accesslog
+ }
+ }).then(response => {
+ console.log(response)
+ this.tableData = []
+ response.data.forEach(element => {
+ this.tableData.push(element)
+ })
+ console.log(this.tableData)
+ })
+ },
+ saveUpdate () {
+ console.log(this.updateAccesslog)
+ this.updateDialog = false
+ this.$axios.put('/traffic/accesslog', {
+ application: this.updateApplication,
+ accesslog: this.updateAccesslog
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ },
+ setHeaders: function () {
+ this.headers = [
+ {
+ text: '服务',
+ value: 'application'
+ },
+ {
+ text: 'accesslog',
+ value: 'accesslog'
+ }
+ ]
+ },
+ closeUpdateDialog () {
+ this.updateDialog = false
+ },
+ create () {
+ this.dialog = true
+ },
+ confirmDelete () {
+ console.log(this.deleteAccesslog)
+ this.$axios.delete('/traffic/accesslog', {
+ application: this.deleteApplication,
+ accesslog: this.deleteAccesslog
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ this.deleteAccesslog = false
+ },
+ deleteItem (props) {
+ this.deleteDialog = true
+ this.deleteAccesslog = props.accesslog
+ this.deleteApplication = props.application
+ },
+ update (props) {
+ console.log(props)
+ this.updateApplication = props.application
+ this.updateAccesslog = props.accesslog
+ this.updateDialog = true
+ console.log(this.updateApplication)
+ console.log(this.updateAccesslog)
+ },
+ save () {
+ this.$axios.post('/traffic/accesslog', {
+ application: this.createApplication,
+ accesslog: this.createAccesslog
+ }).then((res) => {
+ if (res) {
+ alert('操作成功')
+ }
+ })
+ },
+ closeDialog () {
+ this.dialog = false
+ }
+ },
+ watch: {
+ area () {
+ this.setHeaders()
+ }
+ },
+ mounted () {
+ this.setHeaders()
+ }
}
+
</script>
diff --git a/dubbo-admin-ui/src/lang/zh.js b/dubbo-admin-ui/src/lang/zh.js
index b6461bdd..f2272608 100644
--- a/dubbo-admin-ui/src/lang/zh.js
+++ b/dubbo-admin-ui/src/lang/zh.js
@@ -229,10 +229,11 @@ export default {
trafficRegion: '同区域优先',
trafficIsolation: '环境隔离',
trafficWeight: '权重比例',
- trafficArguments: '条件路由',
+ trafficArguments: '参数路由',
trafficMock: '调用降级',
trafficAccesslog: '访问日志',
trafficHost: '固定机器导流',
+ trafficGray: '流量灰度',
homePage: '集群概览',
serviceManagement: '开发测试'
diff --git a/dubbo-admin-ui/src/router/index.js b/dubbo-admin-ui/src/router/index.js
index 4555617a..a4b0ee47 100644
--- a/dubbo-admin-ui/src/router/index.js
+++ b/dubbo-admin-ui/src/router/index.js
@@ -35,8 +35,9 @@ import ServiceRelation from '@/components/metrics/ServiceRelation'
import Management from '@/components/Management'
import Accesslog from '@/components/traffic/Accesslog'
import Arguments from '@/components/traffic/Arguments'
-import Host from '@/components/traffic/Host'
-import Isolation from '@/components/traffic/Isolation'
+import Gray from '@/components/traffic/Gray'
+// import Host from '@/components/traffic/Host'
+// import Isolation from '@/components/traffic/Isolation'
import Mock from '@/components/traffic/Mock'
import Region from '@/components/traffic/Region'
import Retry from '@/components/traffic/Retry'
@@ -58,104 +59,68 @@ export default new Router({
path: '/',
name: 'Index',
component: Index,
- meta: {
- requireLogin: true
- },
children: [
{
path: '/service',
name: 'ServiceSearch',
- component: ServiceSearch,
- meta: {
- requireLogin: true
- }
+ component: ServiceSearch
},
{
path: '/serviceDetail',
name: 'ServiceDetail',
- component: ServiceDetail,
- meta: {
- requireLogin: true
- }
+ component: ServiceDetail
},
{
path: '/testMethod',
name: 'TestMethod',
- component: TestMethod,
- meta: {
- requireLogin: true
- }
+ component: TestMethod
},
{
path: '/governance/routingRule',
name: 'RoutingRule',
- component: RoutingRule,
- meta: {
- requireLogin: true
- }
+ component: RoutingRule
},
{
path: '/governance/tagRule',
name: 'TagRule',
- component: TagRule,
- meta: {
- requireLogin: true
- }
+ component: TagRule
},
{
path: '/governance/meshRule',
name: 'MeshRule',
- component: MeshRule,
- meta: {
- requireLogin: true
- }
+ component: MeshRule
},
{
path: '/governance/access',
name: 'AccessControl',
- component: AccessControl,
- meta: {
- requireLogin: true
- }
+ component: AccessControl
},
{
path: '/governance/loadbalance',
name: 'LoadBalance',
- component: LoadBalance,
- meta: {
- requireLogin: true
- }
+ component: LoadBalance
},
{
path: '/governance/weight',
name: 'WeightAdjust',
- component: WeightAdjust,
- meta: {
- requireLogin: true
- }
+ component: WeightAdjust
},
{
path: '/governance/config',
name: 'Overrides',
- component: Overrides,
- meta: {
- requireLogin: true
- }
+ component: Overrides
},
{
path: '/test',
name: 'ServiceTest',
- component: ServiceTest,
- meta: {
- requireLogin: true
- }
+ component: ServiceTest
},
{
path: '/mock/rule',
name: 'ServiceMock',
component: ServiceMock,
meta: {
- requireLogin: true
+ requireLogin: false
}
},
{
@@ -163,7 +128,7 @@ export default new Router({
name: 'ServiceMetrics',
component: ServiceMetrics,
meta: {
- requireLogin: true
+ requireLogin: false
}
},
{
@@ -171,7 +136,7 @@ export default new Router({
name: 'ServiceRelation',
component: ServiceRelation,
meta: {
- requireLogin: true
+ requireLogin: false
}
},
{
@@ -179,7 +144,7 @@ export default new Router({
name: 'Management',
component: Management,
meta: {
- requireLogin: true
+ requireLogin: false
}
},
{
@@ -187,7 +152,7 @@ export default new Router({
name: 'apiDocs',
component: ApiDocs,
meta: {
- requireLogin: true
+ requireLogin: false
}
},
{
@@ -195,7 +160,7 @@ export default new Router({
name: 'accesslog',
component: Accesslog,
meta: {
- requireLogin: true
+ requireLogin: false
}
},
{
@@ -203,56 +168,68 @@ export default new Router({
name: 'retry',
component: Retry,
meta: {
- requireLogin: true
+ requireLogin: false
}
}, {
path: '/traffic/region',
name: 'region',
component: Region,
meta: {
- requireLogin: true
- }
- }, {
- path: '/traffic/isolation',
- name: 'isolation',
- component: Isolation,
- meta: {
- requireLogin: true
+ requireLogin: false
}
- }, {
+ },
+ // {
+ // path: '/traffic/isolation',
+ // name: 'isolation',
+ // component: Isolation,
+ // meta: {
+ // requireLogin: false
+ // }
+ // },
+ {
path: '/traffic/weight',
name: 'weight',
component: Weight,
meta: {
- requireLogin: true
+ requireLogin: false
}
}, {
path: '/traffic/arguments',
name: 'arguments',
component: Arguments,
meta: {
- requireLogin: true
+ requireLogin: false
}
}, {
path: '/traffic/mock',
name: 'mock',
component: Mock,
meta: {
- requireLogin: true
+ requireLogin: false
}
- }, {
- path: '/traffic/host',
- name: 'host',
- component: Host,
- meta: {
- requireLogin: true
- }
- }, {
+ },
+ // {
+ // path: '/traffic/host',
+ // name: 'host',
+ // component: Host,
+ // meta: {
+ // requireLogin: false
+ // }
+ // },
+ {
path: '/traffic/timeout',
name: 'timeout',
component: Timeout,
meta: {
- requireLogin: true
+ requireLogin: false
+ }
+ },
+ {
+ path: '/traffic/gray',
+ name: 'gray',
+ component: Gray,
+ meta: {
+ requireLogin: false
}
}]
}, {