You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dubbo.apache.org by il...@apache.org on 2018/08/24 07:10:43 UTC
[incubator-dubbo-ops] branch develop updated: search style change &
routing rule page (#95)
This is an automated email from the ASF dual-hosted git repository.
iluo pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/incubator-dubbo-ops.git
The following commit(s) were added to refs/heads/develop by this push:
new 177eee1 search style change & routing rule page (#95)
177eee1 is described below
commit 177eee1eb9e960a4bb2470d4a6a56d45a5a564ac
Author: min <z8...@gmail.com>
AuthorDate: Fri Aug 24 15:10:40 2018 +0800
search style change & routing rule page (#95)
* add restController
* controller
* add adminLTE
* update
* add routing rule page
* reconstruction
* update readme and configuration
* change file name to satisfy travis ci
* change title to dubbo ops
* relocation restful controller
* remove author & add license
* import specific class instead of *
* add ASF License & change theme
* change model name & serviceDetail page
* change search style & update routing rule page
* update
* add routing rule page
* update readme and configuration
* change model name & serviceDetail page
* search style change & routing rule page
* delete useless file
---
.../service/impl/ProviderServiceImpl.java | 1 +
dubbo-admin/dubbo-admin-frontend/package.json | 1 +
.../src/components/RoutingRule.vue | 172 ++++++++++++---------
.../src/components/ServiceDetail.vue | 25 +--
.../src/components/ServiceSearch.vue | 115 +++++++-------
5 files changed, 164 insertions(+), 150 deletions(-)
diff --git a/dubbo-admin/dubbo-admin-backend/src/main/java/org/apache/dubbo/admin/governance/service/impl/ProviderServiceImpl.java b/dubbo-admin/dubbo-admin-backend/src/main/java/org/apache/dubbo/admin/governance/service/impl/ProviderServiceImpl.java
index 64956c5..2732258 100644
--- a/dubbo-admin/dubbo-admin-backend/src/main/java/org/apache/dubbo/admin/governance/service/impl/ProviderServiceImpl.java
+++ b/dubbo-admin/dubbo-admin-backend/src/main/java/org/apache/dubbo/admin/governance/service/impl/ProviderServiceImpl.java
@@ -29,6 +29,7 @@ import org.apache.dubbo.admin.registry.common.route.ParseUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
+import java.io.File;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
diff --git a/dubbo-admin/dubbo-admin-frontend/package.json b/dubbo-admin/dubbo-admin-frontend/package.json
index 8d8342f..70c0488 100644
--- a/dubbo-admin/dubbo-admin-frontend/package.json
+++ b/dubbo-admin/dubbo-admin-frontend/package.json
@@ -12,6 +12,7 @@
},
"dependencies": {
"axios": "^0.18.0",
+ "codemirror": "^5.39.2",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuetify": "^1.0.0",
diff --git a/dubbo-admin/dubbo-admin-frontend/src/components/RoutingRule.vue b/dubbo-admin/dubbo-admin-frontend/src/components/RoutingRule.vue
index 46fe247..ae20fa9 100644
--- a/dubbo-admin/dubbo-admin-frontend/src/components/RoutingRule.vue
+++ b/dubbo-admin/dubbo-admin-frontend/src/components/RoutingRule.vue
@@ -17,59 +17,75 @@
<template>
<v-container grid-list-xl fluid >
- <!--<v-layout row wrap>-->
- <v-layout row wrap>
- <!--<v-layout row>-->
- <v-flex lg10 sm12 xs12>
- <v-text-field
- flat
- v-model="filter"
- />
- </v-flex>
- <v-flex lg1 sm6 xs6
- class="pl-0 ml-0 pr-0 mr-0"
- >
- <v-select
- :items="dropdown_font"
- v-model="pattern"
- ></v-select>
- </v-flex>
- <v-flex lg1 xm6 xs6
- class="pb-0 mb-0 pl-0 ml-0 mt-2"
- >
- <v-btn
- @click="search(filter, pattern, true)"
- color="primary">
- search
- </v-btn>
- </v-flex>
- </v-layout>
- <v-layout justify-space-between row>
- <v-flex lg10>
- <h3>Search Result</h3>
- </v-flex>
- <v-flex xs2>
- <v-btn @click.stop="dialog = true">create Rule</v-btn>
- </v-flex>
- </v-layout>
- <v-flex lg12>
+ <div>
+ <v-layout row wrap>
+ <v-flex xs12 class="justify-space-between">
+ <v-form>
+ <v-layout row wrap>
+ <v-flex xs11>
+ <v-text-field label="Search dubbo service"
+ v-model="filter"></v-text-field>
+ </v-flex>
+
+ <v-flex xs1>
+ <v-btn @click="submit" color="primary" >Search</v-btn>
+ </v-flex>
+ </v-layout>
+ </v-form>
+ </v-flex>
+ </v-layout>
+ <v-toolbar flat color="white">
+ <v-toolbar-title>Search Result</v-toolbar-title>
+ <v-spacer></v-spacer>
+ <v-btn outline color="primary" @click.stop="dialog = true" class="mb-2">CREATE</v-btn>
+ </v-toolbar>
<v-data-table
- class="elevation-1"
:headers="headers"
- :items="result"
+ :items="routingRules"
+ hide-actions
+ class="elevation-1"
>
<template slot="items" slot-scope="props">
- <td>{{props.item.service}}</td>
- <td>{{props.item.group}}</td>
- <td>{{props.item.application}}</td>
- <td>Details</td>
+ <td>{{ props.item.rule }}</td>
+ <td class="text-xs-left">{{ props.item.service }}</td>
+ <td class="text-xs-left">{{ props.item.priority }}</td>
+ <td class="text-xs-left">{{ props.item.status }}</td>
+ <td class="justify-center px-0">
+ <v-icon
+ small
+ class="mr-2"
+ @click="deleteItem(props.item)"
+ >
+ visibility
+ </v-icon>
+ <v-icon
+ small
+ class="mr-2"
+ @click="editItem(props.item)"
+ >
+ edit
+ </v-icon>
+ <v-icon
+ small
+ class="mr-2"
+ @click="editItem(props.item)"
+ >
+ block
+ </v-icon>
+ <v-icon
+ small
+ @click="deleteItem(props.item)"
+ >
+ delete
+ </v-icon>
+ </td>
</template>
</v-data-table>
- </v-flex>
+ </div>
<v-dialog v-model="dialog" width="450px" persistent >
<v-card>
<v-card-title class="justify-center">
- <span class="headline">Creat new Routing rule</span>
+ <span class="headline">Create new Routing rule</span>
</v-card-title>
<v-card-text >
<v-textarea
@@ -92,34 +108,21 @@
</template>
<script>
export default {
- props: {
- result: {
- type: Array,
- default: () => [
- {
- service: 'com.alibaba.dubbo.com',
- group: 'dubbo',
- application: 'demo-provider'
- },
- {
- service: 'com.alibaba.sample',
- group: 'dubbo',
- application: 'demo-provider'
- },
- {
- service: 'com.taobao.core.engine',
- group: 'dubbo',
- application: 'demo-provider'
- }
-
- ]
- }
- },
data: () => ({
dropdown_font: [ 'Service', 'App', 'IP' ],
pattern: 'Service',
filter: '',
dialog: false,
+ selected: [],
+ routingRules: [
+ {
+ id: 0,
+ rule: 'test',
+ service: 'com.alibaba.dubbo.com',
+ priority: 0,
+ status: 'enabled'
+ }
+ ],
placeholder: 'dataId: serviceKey + CONFIGURATORS\n' +
'\n' +
'%yaml 1.2\n' +
@@ -161,18 +164,23 @@
'...\n',
headers: [
{
- text: 'Service',
+ text: 'Rule Name',
+ value: 'rule',
+ class: 'font-weight-black'
+ },
+ {
+ text: 'Service Name',
value: 'service',
class: 'font-weight-black'
},
{
- text: 'Group',
- value: 'group',
+ text: 'Priority',
+ value: 'priority',
class: 'font-weight-black'
},
{
- text: 'Application',
- value: 'application',
+ text: 'Status',
+ value: 'status',
class: 'font-weight-black'
},
{
@@ -183,8 +191,18 @@
]
}),
methods: {
- click: function () {
- console.log('aaa')
+ submit () {
+ console.log('submit')
+ },
+ toggleAll () {
+ if (this.selected.length) this.selected = []
+ else this.selected = this.routingRules.slice()
+ },
+ enable: function (status) {
+ if (status === 'enabled') {
+ return 'disable'
+ }
+ return 'enable'
},
setHeight: function () {
this.height = window.innerHeight * 0.65
@@ -197,3 +215,9 @@
}
</script>
+
+<style scoped>
+ div.btn__content {
+ padding: 0;
+ }
+</style>
diff --git a/dubbo-admin/dubbo-admin-frontend/src/components/ServiceDetail.vue b/dubbo-admin/dubbo-admin-frontend/src/components/ServiceDetail.vue
index 32d6776..ce3cfa8 100644
--- a/dubbo-admin/dubbo-admin-frontend/src/components/ServiceDetail.vue
+++ b/dubbo-admin/dubbo-admin-frontend/src/components/ServiceDetail.vue
@@ -106,30 +106,6 @@
import {AXIOS} from './http-common'
export default {
- props: {
- metadata: {
- type: Array,
- default: () =>
- [
- {
- method: 'toString',
- parameter: 'java.lang.String',
- returnType: 'void'
- },
- {
- method: 'queryBatch',
- parameter: 'com.taobao.tc.domain.query.QueryBizOrderDO',
- returnType: 'com.taobao.tc.domain.result.BatchQueryBizOrderResultDO'
- },
- {
- method: 'isShowCheckcode',
- parameter: 'long',
- returnType: 'com.taobao.tc.domain.result.QueryTairResultDO'
- }
-
- ]
- }
- },
data: () => ({
metaHeaders: [
{
@@ -189,6 +165,7 @@
},
providerDetails: [],
consumerDetails: [],
+ metadata: [],
basic: []
}),
methods: {
diff --git a/dubbo-admin/dubbo-admin-frontend/src/components/ServiceSearch.vue b/dubbo-admin/dubbo-admin-frontend/src/components/ServiceSearch.vue
index ec13b51..3005bc7 100644
--- a/dubbo-admin/dubbo-admin-frontend/src/components/ServiceSearch.vue
+++ b/dubbo-admin/dubbo-admin-frontend/src/components/ServiceSearch.vue
@@ -18,53 +18,55 @@
<template>
<v-container id="search" grid-list-xl fluid >
<v-layout row wrap>
- <!--<v-layout row>-->
- <v-flex
- lg10
- sm12
- xs12
- >
- <v-text-field
- flat
- v-model="filter"
- />
- </v-flex>
- <v-flex lg1 sm6 xs6
- class="pl-0 ml-0 pr-0 mr-0"
- >
- <v-select
- :items="dropdown_font"
- v-model="pattern"
- ></v-select>
- </v-flex>
- <v-flex lg1 xm6 xs6
- class="pb-0 mb-0 pl-0 ml-0 mt-2"
- >
- <v-btn
- @click="search(filter, pattern, true)"
- color="primary">
- search
- </v-btn>
- </v-flex>
- </v-layout>
- <v-flex sm12>
- <h3>Search Result</h3>
- </v-flex>
- <v-flex lg12>
- <v-data-table
- class="elevation-1"
- :headers="headers"
- :items="services"
- >
- <template slot="items" slot-scope="props">
- <td>{{props.item.serviceName}}</td>
- <td>{{props.item.group}}</td>
- <td>{{props.item.appName}}</td>
- <td><v-btn small color='primary' :href='getHref(props.item.serviceName, props.item.appName)'>Detail</v-btn></td>
- </template>
- </v-data-table>
+ <v-flex xs12 class="justify-center">
+ <v-form>
+ <v-layout row wrap>
+ <v-flex xs10>
+ <v-text-field label="Search dubbo service"
+ v-bind:suffix="queryBy"
+ v-model="filter"></v-text-field>
+ </v-flex>
+
+ <v-flex xs2>
+ <v-menu bottom left class="hidden-xs-only">
+ <v-btn
+ slot="activator"
+ icon>
+ <v-icon>unfold_more</v-icon>
+ </v-btn>
+
+ <v-list>
+ <v-list-tile
+ v-for="(item, i) in items"
+ :key="i"
+ @click="selected = i">
+ <v-list-tile-title>{{ item.title }}</v-list-tile-title>
+ </v-list-tile>
+ </v-list>
+ </v-menu>
+ <v-btn @click="submit" color="primary" class="ml-4" large>Search</v-btn>
+ </v-flex>
+ </v-layout>
+ </v-form>
</v-flex>
- <!--</v-layout>-->
+ </v-layout>
+ <v-flex sm12>
+ <h3>Search Result</h3>
+ </v-flex>
+ <v-flex lg12>
+ <v-data-table
+ class="elevation-1"
+ :headers="headers"
+ :items="services"
+ >
+ <template slot="items" slot-scope="props">
+ <td>{{props.item.serviceName}}</td>
+ <td>{{props.item.group}}</td>
+ <td>{{props.item.appName}}</td>
+ <td><v-btn small color='primary' :href='getHref(props.item.serviceName, props.item.appName)'>Detail</v-btn></td>
+ </template>
+ </v-data-table>
+ </v-flex>
</v-container>
</template>
<script>
@@ -72,9 +74,13 @@
export default {
data: () => ({
+ items: [
+ {title: 'service name'},
+ {title: 'IP'},
+ {title: 'application'}
+ ],
+ selected: 0,
services: [],
- dropdown_font: [ 'Service', 'App', 'IP' ],
- pattern: 'Service',
filter: '',
headers: [
{
@@ -99,14 +105,19 @@
}
]
}),
+ computed: {
+ queryBy () {
+ return 'by ' + this.items[this.selected].title
+ }
+ },
methods: {
- click: function () {
- console.log('aaa')
- },
getHref: function (service, app) {
return '/#/serviceDetail?service=' + service + '&app=' + app
},
-
+ submit () {
+ let pattern = this.items[this.selected].title
+ this.search(this.filter, pattern, true)
+ },
search: function (filter, pattern, rewrite) {
AXIOS.get('service/search?' + 'filter=' + filter + '&pattern=' + pattern)
.then(response => {