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

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;

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",

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>

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: {

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 => {