Przeglądaj źródła

:lipstick: Updating the UI and style files. code api

冷冷 6 lat temu
rodzic
commit
61d8d9c6e1
22 zmienionych plików z 211 dodań i 593 usunięć
  1. 2 3
      pigx-upms/pigx-upms-biz/src/main/java/com/pig4cloud/pigx/admin/controller/UserController.java
  2. 2 4
      pigx-upms/pigx-upms-biz/src/main/java/com/pig4cloud/pigx/admin/service/SysUserService.java
  3. 6 6
      pigx-upms/pigx-upms-biz/src/main/java/com/pig4cloud/pigx/admin/service/impl/SysUserServiceImpl.java
  4. 18 17
      pigx-visual/pigx-codegen/src/main/resources/template/index.vue.vm
  5. 35 9
      pigx-visual/pigx-monitor/package-lock.json
  6. 1 0
      pigx-visual/pigx-monitor/package.json
  7. 3 0
      pigx-visual/pigx-monitor/src/main/frontend/index.js
  8. 1 1
      pigx-visual/pigx-monitor/src/main/frontend/views/applications/handle.vue
  9. 5 5
      pigx-visual/pigx-monitor/src/main/frontend/views/applications/index.vue
  10. 13 11
      pigx-visual/pigx-monitor/src/main/frontend/views/journal/index.vue
  11. 49 4
      pigx-visual/pigx-monitor/src/main/frontend/views/turbine/index.vue
  12. 1 1
      pigx-visual/pigx-monitor/src/main/frontend/views/wallboard/index.vue
  13. 1 1
      pigx-visual/pigx-monitor/src/main/resources/report.html
  14. 63 45
      pigx-visual/pigx-monitor/src/main/resources/templates/hystrix/index.ftl
  15. 8 21
      pigx-visual/pigx-monitor/src/main/resources/templates/hystrix/monitor.ftl
  16. 0 399
      pigx-visual/pigx-monitor/src/main/resources/ui/assets/css/sba-core.16e99150.css
  17. 0 59
      pigx-visual/pigx-monitor/src/main/resources/ui/assets/js/chunk-vendors.1df687d0.js
  18. 0 1
      pigx-visual/pigx-monitor/src/main/resources/ui/assets/js/chunk-vendors.1df687d0.js.map
  19. 0 2
      pigx-visual/pigx-monitor/src/main/resources/ui/assets/js/sba-core.57ec87a2.js
  20. 0 1
      pigx-visual/pigx-monitor/src/main/resources/ui/assets/js/sba-core.57ec87a2.js.map
  21. 2 2
      pigx-visual/pigx-monitor/src/main/resources/ui/index.html
  22. 1 1
      pigx-visual/pigx-monitor/src/main/resources/ui/login.html

+ 2 - 3
pigx-upms/pigx-upms-biz/src/main/java/com/pig4cloud/pigx/admin/controller/UserController.java

@@ -163,8 +163,7 @@ public class UserController {
 	@PutMapping
 	@PreAuthorize("@pms.hasPermission('sys_user_edit')")
 	public R<Boolean> userUpdate(@Valid @RequestBody UserDTO userDto) {
-		SysUser user = userService.selectById(userDto.getUserId());
-		return new R<>(userService.updateUser(userDto, user.getUsername()));
+		return new R<>(userService.updateUser(userDto));
 	}
 
 	/**
@@ -187,7 +186,7 @@ public class UserController {
 	@SysLog("修改个人信息")
 	@PutMapping("/edit")
 	public R<Boolean> editInfo(@Valid @RequestBody UserDTO userDto) {
-		return userService.updateUserInfo(userDto, SecurityUtils.getUser().getUsername());
+		return userService.updateUserInfo(userDto);
 	}
 
 	/**

+ 2 - 4
pigx-upms/pigx-upms-biz/src/main/java/com/pig4cloud/pigx/admin/service/SysUserService.java

@@ -64,19 +64,17 @@ public interface SysUserService extends IService<SysUser> {
 	 * 更新当前用户基本信息
 	 *
 	 * @param userDto  用户信息
-	 * @param username 用户名
 	 * @return Boolean
 	 */
-	R<Boolean> updateUserInfo(UserDTO userDto, String username);
+	R<Boolean> updateUserInfo(UserDTO userDto);
 
 	/**
 	 * 更新指定用户信息
 	 *
 	 * @param userDto  用户信息
-	 * @param username 用户信息
 	 * @return
 	 */
-	Boolean updateUser(UserDTO userDto, String username);
+	Boolean updateUser(UserDTO userDto);
 
 	/**
 	 * 通过ID查询用户信息

+ 6 - 6
pigx-upms/pigx-upms-biz/src/main/java/com/pig4cloud/pigx/admin/service/impl/SysUserServiceImpl.java

@@ -141,16 +141,16 @@ public class SysUserServiceImpl extends ServiceImpl<SysUserMapper, SysUser> impl
 	}
 
 	@Override
-	@CacheEvict(value = "user_details", key = "#username")
-	public R<Boolean> updateUserInfo(UserDTO userDto, String username) {
-		UserVO userVO = baseMapper.selectUserVoByUsername(username);
+	@CacheEvict(value = "user_details", key = "#userDto.username")
+	public R<Boolean> updateUserInfo(UserDTO userDto) {
+		UserVO userVO = baseMapper.selectUserVoByUsername(userDto.getUsername());
 		SysUser sysUser = new SysUser();
 		if (StrUtil.isNotBlank(userDto.getPassword())
 			&& StrUtil.isNotBlank(userDto.getNewpassword1())) {
 			if (ENCODER.matches(userDto.getPassword(), userVO.getPassword())) {
 				sysUser.setPassword(ENCODER.encode(userDto.getNewpassword1()));
 			} else {
-				log.warn("原密码错误,修改密码失败:{}", username);
+				log.warn("原密码错误,修改密码失败:{}", userDto.getUsername());
 				return new R<>(Boolean.FALSE, "原密码错误,修改失败");
 			}
 		}
@@ -161,8 +161,8 @@ public class SysUserServiceImpl extends ServiceImpl<SysUserMapper, SysUser> impl
 	}
 
 	@Override
-	@CacheEvict(value = "user_details", key = "#username")
-	public Boolean updateUser(UserDTO userDto, String username) {
+	@CacheEvict(value = "user_details", key = "#userDto.username")
+	public Boolean updateUser(UserDTO userDto) {
 		SysUser sysUser = new SysUser();
 		BeanUtils.copyProperties(userDto, sysUser);
 		sysUser.setUpdateTime(LocalDateTime.now());

+ 18 - 17
pigx-visual/pigx-codegen/src/main/resources/template/index.vue.vm

@@ -117,11 +117,12 @@
         })
         .then(data => {
         _this.tableData.splice(index, 1)
-      _this.$message({
-        showClose: true,
-        message: '删除成功',
-        type: 'success'
-      })
+        _this.$message({
+          showClose: true,
+          message: '删除成功',
+          type: 'success'
+        })
+        this.getList(this.page)
     })
     .catch(function(err) { })
     },
@@ -135,11 +136,11 @@
     handleUpdate: function(row, index, done) {
       putObj(row).then(data => {
         this.tableData.splice(index, 1, Object.assign({}, row))
-      this.$message({
-        showClose: true,
-        message: '修改成功',
-        type: 'success'
-      })
+        this.$message({
+          showClose: true,
+          message: '修改成功',
+          type: 'success'
+        })
       done()
       this.getList(this.page)
     })
@@ -153,13 +154,13 @@
     handleSave: function(row, done) {
       addObj(row).then(data => {
         this.tableData.push(Object.assign({}, row))
-      this.$message({
-        showClose: true,
-        message: '添加成功',
-        type: 'success'
-      })
-      done()
-      this.getList(this.page)
+        this.$message({
+          showClose: true,
+          message: '添加成功',
+          type: 'success'
+        })
+        done()
+        this.getList(this.page)
     })
     },
     /**

+ 35 - 9
pigx-visual/pigx-monitor/package-lock.json

@@ -2124,6 +2124,14 @@
       "integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -2311,8 +2319,7 @@
     "babel-helper-vue-jsx-merge-props": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
-      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==",
-      "dev": true
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
     },
     "babel-helpers": {
       "version": "6.24.1",
@@ -2486,7 +2493,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
       "requires": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
@@ -3820,8 +3826,7 @@
     "core-js": {
       "version": "2.5.7",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
-      "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==",
-      "dev": true
+      "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw=="
     },
     "core-util-is": {
       "version": "1.0.2",
@@ -4433,8 +4438,7 @@
     "deepmerge": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
-      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
-      "dev": true
+      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
     },
     "default-gateway": {
       "version": "2.7.2",
@@ -4870,6 +4874,19 @@
       "integrity": "sha512-DqJoDarxq50dcHsOOlMLNoy+qQitlMNbYb6wwbE0oUw2veHdRkpNrhmngiUYKMErdJ8SJ48rpJsZTQgy5SoEAA==",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.4.10",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.4.10.tgz",
+      "integrity": "sha512-yvcU6DpeZlAtCDyCI0rXi/nfDDhiO9IvoCzoXka95j+0F6S+KCw2dZksSxO5+00rGYSmIYVZ93oNkJNEQgDHOA==",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      }
+    },
     "elliptic": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.1.tgz",
@@ -10494,6 +10511,11 @@
       "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -12446,8 +12468,7 @@
     "regenerator-runtime": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-      "dev": true
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
     },
     "regenerator-transform": {
       "version": "0.13.3",
@@ -14451,6 +14472,11 @@
       "integrity": "sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=",
       "dev": true
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz",

+ 1 - 0
pigx-visual/pigx-monitor/package.json

@@ -26,6 +26,7 @@
     "d3-selection": "^1.3.2",
     "d3-shape": "^1.2.2",
     "d3-time": "^1.0.10",
+    "element-ui": "^2.4.10",
     "event-source-polyfill": "^1.0.3",
     "lodash": "^4.17.11",
     "moment": "^2.22.2",

+ 3 - 0
pigx-visual/pigx-monitor/src/main/frontend/index.js

@@ -23,11 +23,14 @@ import Notifications from './notifications';
 import sbaShell from './shell';
 import Store from './store';
 import ViewRegistry from './viewRegistry';
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
 import views from './views';
 
 moment.locale(window.navigator.language);
 Vue.use(VueRouter);
 Vue.use(components);
+Vue.use(ElementUI)
 
 const applicationStore = new Store();
 const viewRegistry = new ViewRegistry();

+ 1 - 1
pigx-visual/pigx-monitor/src/main/frontend/views/applications/handle.vue

@@ -20,7 +20,7 @@
       <font-awesome-icon icon="exclamation-triangle" />
     </span>
     <span :class="{ 'badge is-badge-danger' : downCount > 0 }" :data-badge="downCount">
-      Applications
+      应用
     </span>
   </span>
 </template>

+ 5 - 5
pigx-visual/pigx-monitor/src/main/frontend/views/applications/index.vue

@@ -29,23 +29,23 @@
       <div class="level applications-stats">
         <div class="level-item has-text-centered">
           <div>
-            <p class="heading">Applications</p>
+            <p class="heading">应用</p>
             <p class="title" v-text="applicationsCount">1</p>
           </div>
         </div>
         <div class="level-item has-text-centered">
           <div>
-            <p class="heading">Instances</p>
+            <p class="heading">实例</p>
             <p class="title" v-text="instancesCount">1</p>
           </div>
         </div>
         <div class="level-item has-text-centered">
           <div v-if="downCount === 0">
-            <p class="heading">Status</p>
+            <p class="heading">状态</p>
             <p class="title has-text-success">all up</p>
           </div>
           <div v-else>
-            <p class="heading">instances down</p>
+            <p class="heading">下线</p>
             <p class="title has-text-danger" v-text="downCount" />
           </div>
         </div>
@@ -110,7 +110,7 @@
         path: '/applications/:selected?',
         props: true,
         name: 'applications',
-        label: 'Applications',
+        label: '应用',
         handle,
         order: 0,
         component: this

+ 13 - 11
pigx-visual/pigx-monitor/src/main/frontend/views/journal/index.vue

@@ -17,7 +17,6 @@
 <template>
   <div class="section">
     <div class="container">
-      <h1 class="title">Event Journal</h1>
       <div v-if="error" class="message is-warning">
         <div class="message-body">
           <strong>
@@ -30,24 +29,27 @@
       <table class="table is-fullwidth">
         <thead>
           <tr>
-            <th>Application</th>
-            <th>Instance</th>
-            <th>Time</th>
-            <th>Event</th>
+            <th>应用</th>
+            <th>实例</th>
+            <th>时间</th>
+            <th>事件</th>
           </tr>
         </thead>
         <tbody>
           <template v-for="event in events">
             <tr class="is-selectable" :key="event.key"
-                @click="showPayload[event.key] ? $delete(showPayload, event.key) : $set(showPayload, event.key, true)"
-            >
+                @click="showPayload[event.key] ? $delete(showPayload, event.key) : $set(showPayload, event.key, true)">
               <td v-text="instanceNames[event.instance] || '?'" />
               <td v-text="event.instance" />
               <td v-text="event.timestamp.format('L HH:mm:ss.SSS')" />
               <td>
-                <span v-text="event.type" /> <span v-if="event.type === 'STATUS_CHANGED'"
-                                                   v-text="`(${event.payload.statusInfo.status})`"
-                />
+                <el-tag type="warning" v-if="event.type === 'DEREGISTERED'">取消注册</el-tag>
+                <el-tag v-if="event.type === 'REGISTERED'">服务注册</el-tag>
+                <el-tag v-if="event.type === 'REGISTRATION_UPDATED'">注册更新</el-tag>
+                <el-tag type="info" v-if="event.type === 'ENDPOINTS_DETECTED'">端点检查</el-tag>
+                <el-tag type="success" v-if="event.type === 'STATUS_CHANGED' && event.payload.statusInfo.status === 'UP'">服务上线</el-tag>
+                <el-tag type="warning" v-if="event.type === 'STATUS_CHANGED' && event.payload.statusInfo.status === 'DOWN'">服务下线</el-tag>
+                <el-tag type="danger" v-if="event.type === 'STATUS_CHANGED' && event.payload.statusInfo.status === 'OFFLINE'">服务注销</el-tag>
               </td>
             </tr>
             <tr :key="`${event.key}-detail`" v-if="showPayload[event.key]">
@@ -133,7 +135,7 @@
       viewRegistry.addView({
         path: '/journal',
         name: 'journal',
-        label: 'Journal',
+        label: '事件',
         order: 100,
         component: this
       });

+ 49 - 4
pigx-visual/pigx-monitor/src/main/frontend/views/turbine/index.vue

@@ -18,7 +18,28 @@
 <template>
   <div class="section">
     <div class="container">
-      <iframe src="/hystrix" class="hystrix"></iframe>
+      <div style="width:800px;margin:0 auto;">
+        <center>
+          <img width="264" height="233" src="hystrix/images/hystrix-logo.png">
+          <br>
+          <br>
+          <h2>PigX Hystrix Dashboard</h2>
+          <el-form ref="form" :model="form" label-width="80px">
+            <el-form-item label="目标流">
+              <el-input v-model="form.stream"></el-input>
+            </el-form-item>
+            <el-form-item label="延迟">
+              <el-input type="number" v-model="form.delay"></el-input>
+            </el-form-item>
+            <el-form-item label="标题">
+              <el-input v-model="form.title" t></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="sendToMonitor">开始监控</el-button>
+            </el-form-item>
+          </el-form>
+        </center>
+      </div>
     </div>
   </div>
 </template>
@@ -27,13 +48,37 @@
   export default {
     data: () => ({
       // eslint-disable-next-line no-undef
-      version: __PROJECT_VERSION__
+      version: __PROJECT_VERSION__,
+      form: {
+        stream: 'http://localhost:5001/turbine.stream',
+        delay: '',
+        title: ''
+      }
     }),
+    methods: {
+    sendToMonitor() {
+      if (this.form.stream) {
+        let url = "hystrix/monitor?stream=" + encodeURIComponent(this.form.stream) + "";
+        if (this.form.delay) {
+          url += "&delay=" +this.form.delay;
+        }
+        if (this.form.title) {
+          url += "&title=" + encodeURIComponent(this.form.title);
+        }
+        location.href = url;
+      } else {
+        this.$message({
+          message: "The 'stream' value is required.",
+          type: 'warning'
+        });
+      }
+    }
+  },
     install({viewRegistry}) {
       viewRegistry.addView({
         path: '/turbine',
         name: 'turbine',
-        label: 'Turbine',
+        label: '实时监控',
         order: 200,
         component: this
       });
@@ -43,6 +88,6 @@
 <style>
   .hystrix{
     width: 100%;
-    height: 600px;
+    height: 800px;
   }
 </style>

+ 1 - 1
pigx-visual/pigx-monitor/src/main/frontend/views/wallboard/index.vue

@@ -81,7 +81,7 @@
       viewRegistry.addView({
         path: '/wallboard',
         name: 'wallboard',
-        label: 'Wallboard',
+        label: '图表',
         order: -100,
         component: this
       });

Plik diff jest za duży
+ 1 - 1
pigx-visual/pigx-monitor/src/main/resources/report.html


+ 63 - 45
pigx-visual/pigx-monitor/src/main/resources/templates/hystrix/index.ftl

@@ -5,54 +5,72 @@
   <base href="${basePath}">
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   <title>Hystrix Dashboard</title>
-
-  <!-- Javascript to monitor and display -->
-  <script src="<@spring.url '/webjars/jquery/2.1.1/jquery.min.js'/>" type="text/javascript"></script>
-
-  <script>
-    function sendToMonitor() {
-
-      if($('#stream').val().length > 0) {
-        var url = "<@spring.url '/hystrix'/>/monitor?stream=" + encodeURIComponent($('#stream').val()) + "";
-        if($('#delay').val().length > 0) {
-          url += "&delay=" + $('#delay').val();
-        }
-        if($('#title').val().length > 0) {
-          url += "&title=" + encodeURIComponent($('#title').val());
-        }
-        location.href= url;
-      } else {
-        $('#message').html("The 'stream' value is required.");
-      }
-    }
-  </script>
+  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 </head>
 <body>
-<div style="width:800px;margin:0 auto;">
+<div id="app">
+  <el-container>
+    <el-main>
+      <div style="width:600px;margin:0 auto;">
+        <center>
+          <img width="264" height="233" src="<@spring.url '/hystrix'/>/images/hystrix-logo.png">
+          <br>
+          <br>
 
-  <center>
-    <img width="264" height="233" src="<@spring.url '/hystrix'/>/images/hystrix-logo.png">
-    <br>
-    <br>
-
-    <h2>Hystrix Dashboard</h2>
-    <input id="stream" type="textfield" size="120" placeholder="http://hostname:port/turbine/turbine.stream"></input>
-    <br><br>
-    <i>Cluster via Turbine (default cluster):</i> http://turbine-hostname:port/turbine.stream
-    <br>
-    <i>Cluster via Turbine (custom cluster):</i> http://turbine-hostname:port/turbine.stream?cluster=[clusterName]
-    <br>
-    <i>Single Hystrix App:</i> http://hystrix-app:port/actuator/hystrix.stream
-    <br><br>
-    Delay: <input id="delay" type="textfield" size="10" placeholder="2000"></input>ms
-    &nbsp;&nbsp;&nbsp;&nbsp;
-    Title: <input id="title" type="textfield" size="60" placeholder="Example Hystrix App"></input><br>
-    <br>
-    <button onclick="sendToMonitor()">Monitor Stream</button>
-    <br><br>
-    <div id="message" style="color:red"></div>
-
-  </center>
+          <h2>PigX Hystrix Dashboard</h2>
+          <el-form ref="form" :model="form" label-width="80px">
+            <el-form-item label="stream">
+              <el-input v-model="form.stream"></el-input>
+            </el-form-item>
+            <el-form-item label="delay">
+              <el-input v-model="form.delay"></el-input>
+            </el-form-item>
+            <el-form-item label="title">
+              <el-input v-model="form.title"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="sendToMonitor">开始监控</el-button>
+            </el-form-item>
+          </el-form>
+        </center>
+      </div>
+    </el-main>
+  </el-container>
 </div>
 </body>
 </html>
+  <script src="https://unpkg.com/vue/dist/vue.js"></script>
+  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
+  <script>
+    new Vue({
+      el: '#app',
+      data() {
+        return {
+          form: {
+            stream: '',
+            delay: '',
+            title: '',
+          }
+        }
+      },
+      methods: {
+        sendToMonitor() {
+          if ($('#stream').val().length > 0) {
+            var url = "<@spring.url '/hystrix'/>/monitor?stream=" + encodeURIComponent($('#stream').val()) + "";
+            if ($('#delay').val().length > 0) {
+              url += "&delay=" + $('#delay').val();
+            }
+            if ($('#title').val().length > 0) {
+              url += "&title=" + encodeURIComponent($('#title').val());
+            }
+            location.href = url;
+          } else {
+            this.$message({
+              message: "The 'stream' value is required.",
+              type: 'warning'
+            });
+          }
+        }
+      }
+    })
+  </script>

+ 8 - 21
pigx-visual/pigx-monitor/src/main/resources/templates/hystrix/monitor.ftl

@@ -4,31 +4,18 @@
 <head>
   <base href="${basePath}">
   <meta charset="utf-8" />
-  <title>Hystrix Monitor</title>
+  <title>断路器监控</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-  <!-- Setup base for everything -->
   <link rel="stylesheet" type="text/css" href="css/global.css" />
-
-  <!-- Our custom CSS -->
   <link rel="stylesheet" type="text/css" href="css/monitor.css" />
-
-  <!-- d3 -->
   <script type="text/javascript" src="<@spring.url '/webjars/d3js/3.4.11/d3.min.js'/>" ></script>
-
-  <!-- Javascript to monitor and display -->
   <script type="text/javascript" src="<@spring.url '/webjars/jquery/2.1.1/jquery.min.js'/>" ></script>
   <script type="text/javascript" src="js/jquery.tinysort.min.js"></script>
   <script type="text/javascript" src="js/tmpl.js"></script>
-
-  <!-- HystrixCommand -->
   <script type="text/javascript" src="components/hystrixCommand/hystrixCommand.js"></script>
   <link rel="stylesheet" type="text/css" href="components/hystrixCommand/hystrixCommand.css" />
-
-  <!-- HystrixThreadPool -->
   <script type="text/javascript" src="components/hystrixThreadPool/hystrixThreadPool.js"></script>
   <link rel="stylesheet" type="text/css" href="components/hystrixThreadPool/hystrixThreadPool.css" />
-
 </head>
 <body>
 <div id="header">
@@ -39,7 +26,7 @@
   <div class="row">
     <div class="menubar">
       <div class="title">
-        Circuit
+        熔断
       </div>
       <div class="menu_actions">
         Sort:
@@ -54,18 +41,18 @@
         <a href="javascript://" onclick="hystrixMonitor.sortByLatency995();">99.5</a>
       </div>
       <div class="menu_legend">
-        <span class="success">Success</span> | <span class="shortCircuited">Short-Circuited</span> | <span class="badRequest"> Bad Request</span> | <span class="timeout">Timeout</span> | <span class="rejected">Rejected</span> | <span class="failure">Failure</span> | <span class="errorPercentage">Error %</span>
+        <span class="success">成功</span> | <span class="shortCircuited">短路</span> | <span class="badRequest">Bad</span> | <span class="timeout">超时</span> | <span class="rejected">拒绝</span> | <span class="failure">失败</span> | <span class="errorPercentage">错误率</span>
       </div>
     </div>
   </div>
-  <div id="dependencies" class="row dependencies"><span class="loading">Loading ...</span></div>
+  <div id="dependencies" class="row dependencies"><span class="loading">加载中 ...</span></div>
 
   <div class="spacer"></div>
 
   <div class="row">
     <div class="menubar">
       <div class="title">
-        Thread Pools
+        线程池
       </div>
       <div class="menu_actions">
         Sort: <a href="javascript://" onclick="dependencyThreadPoolMonitor.sortAlphabetically();">Alphabetical</a> |
@@ -73,7 +60,7 @@
       </div>
     </div>
   </div>
-  <div id="dependencyThreadPools" class="row dependencyThreadPools"><span class="loading">Loading ...</span></div>
+  <div id="dependencyThreadPools" class="row dependencyThreadPools"><span class="loading">加载中 ...</span></div>
 </div>
 
 
@@ -101,9 +88,9 @@
     var poolStream = "${contextPath}/proxy.stream?origin=" + stream;
 
     if(getUrlVars()["title"] != undefined) {
-      $('#title_name').text("Hystrix Stream: " + decodeURIComponent(getUrlVars()["title"]))
+      $('#title_name').text("目标流: " + decodeURIComponent(getUrlVars()["title"]))
     } else {
-      $('#title_name').text("Hystrix Stream: " + decodeURIComponent(stream))
+      $('#title_name').text("目标流: " + decodeURIComponent(stream))
     }
   }
   console.log("Command Stream: " + commandStream)

Plik diff jest za duży
+ 0 - 399
pigx-visual/pigx-monitor/src/main/resources/ui/assets/css/sba-core.16e99150.css


Plik diff jest za duży
+ 0 - 59
pigx-visual/pigx-monitor/src/main/resources/ui/assets/js/chunk-vendors.1df687d0.js


Plik diff jest za duży
+ 0 - 1
pigx-visual/pigx-monitor/src/main/resources/ui/assets/js/chunk-vendors.1df687d0.js.map


Plik diff jest za duży
+ 0 - 2
pigx-visual/pigx-monitor/src/main/resources/ui/assets/js/sba-core.57ec87a2.js


Plik diff jest za duży
+ 0 - 1
pigx-visual/pigx-monitor/src/main/resources/ui/assets/js/sba-core.57ec87a2.js.map


Plik diff jest za duży
+ 2 - 2
pigx-visual/pigx-monitor/src/main/resources/ui/index.html


Plik diff jest za duży
+ 1 - 1
pigx-visual/pigx-monitor/src/main/resources/ui/login.html