@arkxos/arkos-app-gateway-manage 0.1.0

package/src/views/AddGroovyScript.vue

@@ -0,0 +1,337 @@
+<template>
+	<div>
+		<el-page-header @back="goBack" content="网关路由规则组件"></el-page-header>
+		<el-dialog title="添加规则组件" v-model="dialogFormVisible" width="70%" :close-on-click-modal="false">
+			<el-form :model="groovyForm" status-icon :rules="rules" ref="groovyForm" label-width="100px" size="mini">
+				<el-form-item label="组件名称" prop="name">
+					<el-input v-model="groovyForm.name" autocomplete="off" placeholder="请输入组件名称"></el-input>
+				</el-form-item>
+				<el-form-item label="扩展参数" prop="extendInfo">
+					<el-input v-model="groovyForm.extendInfo" autocomplete="off" placeholder="请输入组件参数，建议使用json格式"></el-input>
+				</el-form-item>
+				<el-form-item label="执行事件" prop="event">
+					<!-- <el-input v-model="groovyForm.event" autocomplete="off"></el-input> -->
+					<el-radio v-model="groovyForm.event" label="request">
+						<el-tag size="small" effect="plain">REQUEST</el-tag>
+					</el-radio>
+  					<el-radio v-model="groovyForm.event" label="response">
+						  <el-tag size="small" type="success" effect="plain">RESPONSE</el-tag>
+					  </el-radio>
+				</el-form-item>
+				<el-form-item label="组件代码" prop="content">
+					<el-input type="textarea" :rows="25" v-model="groovyForm.content" placeholder="请输入内容"></el-input>
+				</el-form-item>
+				<el-form-item label="备注" prop="remarks">
+					<el-input v-model="groovyForm.remarks" autocomplete="off"></el-input>
+				</el-form-item>
+
+				<el-form-item label="编译说明">
+					<el-tag type="warning">组件代码采用GroovyScipt动态脚本语言，无缝支持java语法和包</el-tag> &nbsp;&nbsp;
+					<el-link type="primary" @click="showGroovyScriptCode">导入GroovyScipt示例代码</el-link> &nbsp;&nbsp;&nbsp;&nbsp;
+					<el-link v-show="submitVisible" icon="el-icon-upload2" type="primary"> 提交中 >  </el-link>
+					<el-link v-show="submitVisible" icon="el-icon-loading" type="primary"> 编译中 >  </el-link>
+					<el-link v-show="successVisible" icon="el-icon-finished" type="success"> 编译成功 </el-link>
+					<el-link v-show="failVisible" icon="el-icon-close" type="danger" @click="showLog"> 编译失败  查看失败日志 </el-link>
+				</el-form-item>
+			</el-form>
+			<el-dialog width="65%" title="编译失败日志" v-model="innerVisible" append-to-body>
+<pre class="language-java line-numbers" style="height: 500px;"><code>{{codeErrorMsg}}</code></pre>
+				<div slot="footer" class="dialog-footer">
+					<el-button icon="el-icon-s-release" size="mini" type="warning" @click="innerVisible = false">关 闭</el-button>
+				</div>
+			</el-dialog>
+			<div slot="footer" class="dialog-footer">
+				<el-button icon="el-icon-s-claim" size="mini" type="success" @click="submitForm">提 交</el-button>
+				<el-button icon="el-icon-s-release" size="mini" type="warning" @click="dialogFormVisible = false">关 闭</el-button>
+			</div>
+		</el-dialog>
+
+		<el-dialog title="查看组件代码" v-model="dialogCodeVisible" width="60%" :close-on-click-modal="false">
+			<div >
+<pre class="language-java line-numbers" style="height: 700px;"><code v-html="groovScriptCode"></code></pre>
+			</div>
+			<div slot="footer" class="dialog-footer">
+				<el-button icon="el-icon-s-release" size="mini" type="warning" @click="dialogCodeVisible = false">关 闭</el-button>
+			</div>
+		</el-dialog>
+
+		<el-row :gutter="20" style="margin-top: 20px;">
+			<el-col>
+				<el-card class="box-card">
+					<div slot="header" class="clearfix">
+						<span>规则组件</span>
+						<el-popover trigger="click" placement="bottom">
+							<div style="font-size: 10pt;">
+								<span>添加规则组件说明：</span><br/>
+								<span>1. 开启路由服务端规则组件后，客户端请求到网关路由后，会进入规则组件过滤器。</span><br/>
+								<span>2. 规则组件过滤器根据添加的GroovyScript组件排序一一触发执行，当顺序执行组件过程抛出任意异常，则打断请求进程，直接返回客户端提示。</span><br/>
+								<span>3. 新添加的路由服务端规则组件后，默认为关闭状态，请手动开启后，立即生效。</span><br/>
+								<span>4. 路由服务端规则组件代码采用GroovyScipt动态脚本语言，无缝支持java语法和包。</span><br/>
+								<span>5. 路由服务端规则组件适用场景为，解决网关代理调用路由服务端之前，增加业务规则较验，如：签名较验、数据加签、参数验证、格式化处理、权限判断等。</span><br/>
+							</div>
+							<el-button slot="reference" style="padding: 3px 0;" icon="el-icon-question" type="text" title="说明"></el-button>
+						</el-popover>
+						<span style="margin-left: 50px;">
+							<i class="el-icon-monitor"></i>
+							<span style="font-size: 11pt;">
+								<el-tag size="mini" style="font-weight: bold;">{{routeForm.name}}</el-tag>
+							</span>
+						</span>
+						<div style="float: right; margin-left: 10px;">
+						    <el-button icon="el-icon-circle-plus-outline" size="small" type="success" @click="addRule" title="查找服务端"> 添加组件脚本 </el-button>
+						</div>
+					</div>
+
+					<el-tabs v-model="activeName" tab-position="left" @tab-click="handleClickTabs" style="height: 600px;">
+						<el-tab-pane name="request">
+							<span slot="label"><i class="el-icon-position" style="color:#409EFF;"></i> REQUEST</span>
+							<!-- 父组件传参与子组件方法监听 -->
+							<groovyScriptTableComponent ref="groovyScriptTable"
+								:tableData="requestTableData"
+								@queryCode="queryCode"
+								@handleCommandRegServer="handleCommandRegServer"/>
+						</el-tab-pane>
+						<el-tab-pane name="response">
+							<span slot="label"><i class="el-icon-s-promotion" style="color:#67C23A;"></i> RESPONSE</span>
+							<!-- 父组件传参与子组件方法监听 -->
+							<groovyScriptTableComponent ref="groovyScriptTable"
+								:tableData="responseTableData"
+								@queryCode="queryCode"
+								@handleCommandRegServer="handleCommandRegServer"/>
+						</el-tab-pane>
+					</el-tabs>
+
+				</el-card>
+			</el-col>
+		</el-row>
+
+	</div>
+</template>
+
+<script>
+
+	import groovyScriptTableComponent from '../component/GroovyScriptTable.vue'
+	import {deleteGroovyScript,stopGroovyScript,startGroovyScript,upGroovyScript,downGroovyScript,groovyScriptList,groovyScriptCode} from '../api/groovyscript_api'
+
+	export default {
+		data() {
+			return {
+				innerVisible: false,
+				dialogCodeVisible: false,
+				dialogFormVisible: false,
+				formLabelWidth: '100px',
+				handleType: null,
+				routeForm:{},
+				groovyForm:{
+					name: '',
+					extendInfo: '',
+					event: 'request',
+					content: '',
+					remarks: ''
+				},
+				rules:{
+					name: [
+						{ required: true, message: '请输入组件名称', trigger: 'blur' },
+						{ min: 3, max: 40, message: '长度在 3 到 40 个字符', trigger: 'blur' }
+					],
+					content: [
+						{ required: true, message: '请输入组件代码', trigger: 'blur' }
+					],
+				},
+				tableData: [],
+				requestTableData: [],
+				responseTableData: [],
+				submitVisible: false,
+				successVisible: false,
+				failVisible: false,
+				groovScriptCode: '',
+				codeErrorMsg: '',
+				activeName: 'request'
+			};
+		},
+		components:{
+			groovyScriptTableComponent
+		},
+		created: function() {
+			//在组件创建完毕后加载
+			let query = this.$route.query;
+			if (query){
+				let route = query.route;
+				console.log('route', route);
+				this.init(route);
+			}
+		},
+		mounted: function() {
+
+		},
+		beforeDestroy: function() {
+
+		},
+		methods:{
+			init(route) {
+				if (route){
+					this.routeForm = route.form;
+					this.groovyScriptList();
+				}
+			},
+			goBack() {
+			    console.log('go back');
+				this.$router.push({path:'/gatewayList',query:{}});
+			},
+			handleCommandRegServer(obj){
+				console.log("command" , obj);
+				let _this = this;
+				this.handleType = obj.command;
+				if (obj.command === 'edit'){
+					this.groovyForm = JSON.parse(JSON.stringify(obj.row));
+					this.resetVisible();
+					this.dialogFormVisible = true;
+				} else if (obj.command === 'start'){
+					this.$confirm('确认开启"'+obj.row.name+'"规则引擎动态脚本组件？').then(_ => {
+						startGroovyScript({id:obj.row.id}).then(function(result){
+							_this.GLOBAL_FUN.successMsg();
+							obj.row.status='0';
+						});
+					}).catch(_ => {});
+				} else if (obj.command === 'stop'){
+					this.$confirm('确认关闭"'+obj.row.name+'"规则引擎动态脚本组件？').then(_ => {
+						stopGroovyScript({id:obj.row.id}).then(function(result){
+							_this.GLOBAL_FUN.successMsg();
+							obj.row.status='1';
+						});
+					}).catch(_ => {});
+				} else if (obj.command === 'up'){
+					let rowObj = obj.row;
+					if (rowObj && rowObj.orderNum === 1){
+						_this.GLOBAL_FUN.successMsg('已经是排序第一位');
+						return false;
+					}
+					this.$confirm('确认上移"'+rowObj.name+'"规则引擎动态脚本组件？').then(_ => {
+						upGroovyScript({id:rowObj.id}).then(function(result){
+							_this.GLOBAL_FUN.successMsg();
+							_this.groovyScriptList();
+						});
+					}).catch(_ => {});
+				} else if (obj.command === 'down'){
+					let rowObj = obj.row;
+					let maxRow = this.tableData[this.tableData.length -1]
+					if (rowObj && maxRow && rowObj.id === maxRow.id){
+						_this.GLOBAL_FUN.successMsg('已经是排序最后一位');
+						return false;
+					}
+					this.$confirm('确认下移"'+rowObj.name+'"规则引擎动态脚本组件？').then(_ => {
+						downGroovyScript({id:rowObj.id}).then(function(result){
+							_this.GLOBAL_FUN.successMsg();
+							_this.groovyScriptList();
+						});
+					}).catch(_ => {});
+				} else if (obj.command === 'delete'){
+					this.$confirm('确认删除"'+obj.row.name+'"规则引擎动态脚本组件？').then(_ => {
+						deleteGroovyScript({id:obj.row.id}).then(function(result){
+							_this.GLOBAL_FUN.successMsg();
+							_this.groovyScriptList();
+						})
+					}).catch(_ => {});
+				}
+			},
+			queryCode(row){
+				this.groovScriptCode = row.content;
+				this.dialogCodeVisible = true;
+				setTimeout(()=>Prism.highlightAll(),50);
+			},
+			addRule(){
+				this.resetVisible();
+				if (this.$refs['groovyForm']){
+					this.$refs['groovyForm'].resetFields();
+				}
+				this.handleType = 'add';
+				this.groovyForm = this.$options.data().groovyForm;
+				this.dialogFormVisible = true;
+			},
+			submitForm(){
+				console.log('handleType', this.handleType);
+				let _this = this;
+				this.$refs['groovyForm'].validate((valid) => {
+					if (valid) {
+						this.submitVisible = true;
+						this.failVisible = false;
+						this.successVisible = false;
+						this.groovyForm.routeId = this.routeForm.id;
+						let path = this.handleType == 'add' ? '/groovyScript/add' : '/groovyScript/update' ;
+						this.$ajax
+						.post(this.GLOBAL_VAR.baseURL + path, this.groovyForm)
+						.then((result) => {
+							if (result && result.data) {
+								if (result.data.code == '1') {
+									_this.successVisible = true;
+									_this.GLOBAL_FUN.successMsg();
+									_this.groovyScriptList();
+								}
+							}
+						})
+						.catch((error) => { // 请求失败处理
+							if (error && error.response) {
+								_this.failVisible = true;
+								if (error.response.data){
+									_this.codeErrorMsg = error.response.data.msg;
+									_this.GLOBAL_FUN.errorMsg("操作失败,请查看失败日志!");
+								}else {
+									_this.GLOBAL_FUN.errorMsg("操作失败!");
+								}
+							}
+						});
+					}
+				});
+			},
+			showLog(){ //显示日志
+				this.innerVisible = true;
+				setTimeout(()=>Prism.highlightAll(),50);
+			},
+			resetVisible(){ //重置弹窗标识
+				this.submitVisible = false;
+				this.successVisible = false;
+				this.failVisible = false;
+			},
+			handleClickTabs(tab, event){
+				console.log(tab, event);
+				if (tab.index === '0'){
+					this.tableData = this.requestTableData;
+				} else {
+					this.tableData = this.responseTableData;
+				}
+			},
+			showGroovyScriptCode(){//导入示例代码
+				this.groovyForm.content = groovyScriptCode();
+			},
+			groovyScriptList(){
+				let _this = this;
+				groovyScriptList({routeId: this.routeForm.id}).then((result) => {
+					if (result.data){
+						_this.requestTableData = [];
+						_this.responseTableData = [];
+						result.data.forEach((data, index)=>{
+							if (data.event == 'request'){
+								_this.requestTableData.push(data);
+							} else {
+								_this.responseTableData.push(data);
+							}
+						});
+					}
+				});
+			}
+		}
+	}
+</script>
+
+<style>
+	.el-icon-setting:before {
+	    content: "\E6CA";
+	    font-size: 12pt;
+	}
+	.el-tabs__item.is-active {
+		color: #409EFF;
+		background-color: #ecf5ff;
+	}
+</style>
+
+

package/src/views/ApiCount.vue

@@ -0,0 +1,291 @@
+<template>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+      <div class="box-flex-between">
+        <el-button
+          size="small"
+          icon="el-icon-refresh"
+          style="font-size: 16px; padding: 6px 12px"
+          @click="count"
+          title="刷新统计图表"
+        ></el-button>
+      </div>
+
+      <el-row :gutter="24" style="margin-top: 16px">
+        <el-col :span="12">
+          <div style="margin-left: 20px">
+            <i
+              class="iconfont icon-icon_renwujincheng"
+              style="font-size: 16pt; color: #90a0a5"
+            ></i>
+            <span class="span_14">7日请求总量</span>
+          </div>
+          <el-divider style="width: 80%"></el-divider>
+          <div id="apiAccessChart" class="chart_line_1"></div>
+        </el-col>
+        <el-col :span="12">
+          <div style="margin-left: 20px">
+            <i
+              class="iconfont icon-yibiaopan"
+              style="font-size: 16pt; color: #90a0a5"
+            ></i>
+            <span class="span_14">24小时请求总量</span>
+          </div>
+          <el-divider style="width: 80%"></el-divider>
+          <div id="requestAccessChart" class="chart_line_1"></div>
+        </el-col>
+      </el-row>
+
+      <el-row style="margin-top: 18px">
+        <el-col :span="10">&nbsp;</el-col>
+        <el-col :span="14">
+          <div style="float: right">
+            <el-input
+              placeholder="请输入服务端名称"
+              v-model="form.name"
+              class="input-with-select"
+              style="width: 520px"
+            >
+							<template #prepend>
+              	<el-select
+              	  v-model="form.groupCode"
+              	  placeholder="请选择分组"
+              	  style="width: 140px; margin-right: 10px"
+              	>
+              	  <el-option label="所有" value="" />
+              	  <el-option
+              	    v-for="item in groupOptions"
+              	    :key="item.value"
+              	    :label="item.label"
+              	    :value="item.value"
+              	  />
+              	</el-select>
+							</template>
+							<template #append>
+              	<el-button icon="el-icon-search" @click="search"></el-button>
+							</template>
+            </el-input>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-table size="small" :data="tableData" style="margin-top: 18px">
+        <el-table-column label="服务ID" width="300">
+          <template #default="{ row }">
+            <el-tag size="small" type="warning">{{ row.id }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="分组">
+          <template #default="{ row }">
+            <el-tag
+              v-for="group in groupOptions"
+              :key="group.value"
+              v-show="group.value === row.groupCode"
+              size="small"
+              type=""
+              >{{ group.label }}</el-tag
+            >
+          </template>
+        </el-table-column>
+        <el-table-column label="服务名称">
+          <template #default="{ row }">
+            <el-tag size="small" type="success">{{ row.name }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="服务地址" prop="uri"></el-table-column>
+        <el-table-column label="断言路径" prop="path"></el-table-column>
+        <!-- <el-table-column label="最近请求时间" prop="createTime" width="220"></el-table-column> -->
+        <el-table-column
+          label="今日请求总次数"
+          prop="count"
+          width="140"
+          style="font-weight: bold"
+        ></el-table-column>
+        <el-table-column label="查看" width="80">
+          <template #default="{ row }">
+            <el-button
+              size="mini"
+              @click="handleShowRouteCount(row)"
+              circle
+              title="请点击选中查看"
+              class="el-icon-s-data"
+            >
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="block" style="margin-top: 20px">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[10, 30, 50]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="totalNum"
+        >
+        </el-pagination>
+      </div>
+    </div>
+
+    <routeRequestCountComponent
+      ref="routeRequestCount"
+    ></routeRequestCountComponent>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import routeRequestCountComponent from "../component/RouteRequestCount.vue";
+import { countRoutePageList, countRequestTotal } from "../api/count_api.js";
+
+export default {
+  data() {
+    return {
+      form: {
+        name: null,
+        groupCode: null,
+      },
+      direction: "rtl",
+      dayCounts: [],
+      hourCounts: [],
+      tableData: [],
+      currentPage: 1,
+      pageSize: 10,
+      totalNum: 0,
+      statusOptions: [
+        { value: null, label: "所有" },
+        { value: "0", label: "启用" },
+        { value: "1", label: "禁用" },
+      ],
+      groupOptions: this.GLOBAL_VAR.groups,
+    };
+  },
+  components: {
+    routeRequestCountComponent,
+  },
+  created: function () {
+    this.init();
+  },
+  mounted: function () {},
+  beforeDestroy: function () {},
+  methods: {
+    init() {
+      this.search();
+      this.count();
+    },
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.search();
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.search();
+    },
+    handleShowRouteCount(row) {
+      this.$refs.routeRequestCount.dialogFormVisible = true;
+      this.$refs.routeRequestCount.count(row);
+    },
+    count() {
+      let _this = this;
+      countRequestTotal().then(function (result) {
+        console.log(result);
+        if (result.data) {
+          _this.drawLine("apiAccessChart", result.data.dayCounts);
+          _this.drawLine("requestAccessChart", result.data.hourCounts);
+        }
+      });
+    },
+    search() {
+      let _this = this;
+      countRoutePageList({
+        name: this.form.name,
+        groupCode: this.form.groupCode,
+        currentPage: this.currentPage,
+        pageSize: this.pageSize,
+      }).then(function (result) {
+        if (result.data) {
+          _this.tableData = result.data.records;
+          _this.totalNum = result.data.total;
+        }
+      });
+    },
+    drawLine(id, result) {
+      let xAxisData = [];
+      let seriesData = [];
+      if (result != undefined) {
+        xAxisData = result.dates;
+        seriesData = result.counts;
+      }
+      console.log("chart data", seriesData);
+      let _this = this;
+      // 基于准备好的dom，初始化echarts实例
+      let accessChart = echarts.init(document.getElementById(id));
+      var option = {
+        color: "#1890FF",
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+        },
+        grid: {
+          top: "5%",
+          left: "1%",
+          right: "2%",
+          bottom: "1%",
+          containLabel: true,
+        },
+        yAxis: {
+          type: "value",
+        },
+        xAxis: {
+          type: "category",
+          //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          data: xAxisData,
+        },
+        series: [
+          {
+            //data: [820, 932, 901, 934, 1290, 1330, 1320],
+            data: seriesData,
+            type: "line",
+            smooth: true,
+          },
+        ],
+      };
+      // 绘制图表
+      accessChart.setOption(option, true);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.input-with-select .el-input-group__prepend {
+  background-color: #fff;
+}
+.el-divider--horizontal {
+  display: block;
+  height: 1px;
+  width: 97%;
+  margin: 14px;
+}
+.span_1 {
+  font-size: 18pt;
+  font-weight: bold;
+  margin-bottom: 9px;
+}
+.span_14 {
+  font-size: 14pt;
+  color: #90a0a5;
+  font-weight: bold;
+  margin-left: 6px;
+}
+.chart_line_1 {
+  width: 100%;
+  height: 220px;
+}
+</style>