@arkxos/arkos-app-gateway-manage 0.1.0

package/src/views/GatewayList.vue

@@ -0,0 +1,322 @@
+<template>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<div class="box-flex-between">
+			  <el-button icon="el-icon-folder-add" style="margin-left:5px" type="primary" @click="handleCreateGateway" title="创建网关服务"></el-button>
+
+			  <el-input placeholder="请输入网关服务名称" v-model="form.name" class="input-with-select" style="width: 620px;" clearable>
+					<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>
+				  	<el-popover placement="bottom" trigger="click">
+				  		<el-radio v-model="form.status" v-for="item in statusOptions" :key="item.value" :label="item.value">{{item.label}}</el-radio>
+				  		<template #reference>
+								<el-button>
+				  				服务状态:{{form.status === '0' ? '启用': form.status === '1' ? '禁用' : '所有'}}<i class="el-icon-caret-bottom el-icon--right"></i>
+				  			</el-button>
+							</template>
+				  	</el-popover>
+					</template>
+					<template #append>
+				  	<el-button  icon="el-icon-search" @click="search" title="查询网关服务"></el-button>
+					</template>
+			  </el-input>
+			</div>
+
+			<el-table size="small" :data="tableData" height="100%" style="width: 100%">
+				<el-table-column label="服务ID" width="180">
+					<template #default="{ row }">
+						<el-tag size="small" type="warning" style="font-weight: bold;">{{row.id}}</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column label="分组" width="100">
+					<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 }">
+						<span style="font-weight: bold;" v-if="row.systemCode != undefined && row.systemCode != ''">{{row.systemCode}} ></span> {{row.name}}
+					</template>
+				</el-table-column>
+				<el-table-column label="服务地址" :show-overflow-tooltip="true">
+					<template #default="{ row }">
+						<el-tag size="small" type="success" style="font-weight: bold;">{{row.uri}}</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column label="断言路径">
+					<template #default="{ row }">
+						{{row.path}}
+  					<el-popover
+  					  placement="bottom"
+  					  :width="250"
+							trigger="click"
+  					>
+  					  <template #reference>
+								<el-icon color="#409eff"><DataAnalysis /></el-icon>
+  					  </template>
+    					<template #default>
+								<div style="margin-bottom: 8px;">
+									<i class="el-icon-dataAnalysis" style="font-size: 16pt; color: #90A0A5;"></i>
+									<span class="route-title">网关代理地址</span>
+								</div>
+								<div style="display:flex;align-items: center;">
+									<el-tag size="small" type="success" style="font-weight: bold;">{{GLOBAL_VAR.gatewayRoutesURL}}{{row.path}}</el-tag>
+									<el-button icon="el-icon-document-copy" type="text" @click="handleCopy(row.path)" title="复制"></el-button>
+								</div>
+								<br/>
+								<el-button style="padding: 3px 0; " type="text" title="网关代理地址"></el-button>
+    					</template>
+  					</el-popover>
+					</template>
+				</el-table-column>
+				<el-table-column label="请求模式" prop="method" width="80">
+					<template #default="{ row }">
+						<el-tag effect="plain" size="small" v-if="row.method !== ''" type="success">{{ row.method }}</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column label="熔断器" prop="degradeRuleName" width="75">
+					<template #default="{ row }">
+						<el-tag effect="plain" size="small" v-if="row.degradeRuleName === 'default'" type="">启用</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column label="限流器" prop="flowRuleName" width="90">
+					<template #default="{ row }">
+						<el-tag effect="plain" size="small" v-if="row.flowRuleName === 'default'" type="">直接拒绝</el-tag>
+						<el-tag effect="plain" size="small" v-if="row.flowRuleName === 'warmUp'" type="">冷启动</el-tag>
+						<el-tag effect="plain" size="small" v-if="row.flowRuleName === 'rateLimiter'" type="">匀速器</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column label="缓存时长" prop="cacheTtl" width="75">
+					<template #default="{ row }">
+						<el-tag effect="plain" size="small" v-if="row.cacheTtl > 0" type="success">{{ row.cacheTtl }}s</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column label="规则组件" prop="useScript" width="75">
+					<template #default="{ row }">
+						<el-tag effect="plain" size="small" v-if="row.useScript > 0" type="">启用</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column label="创建时间" width="140" prop="createTime"></el-table-column>
+				<el-table-column label="状态" width="80" prop="status" :formatter="formatterStatus">
+					<template #default="{ row }">
+						<el-tag effect="dark" size="small" v-if="row.status === '0'" type="">启用</el-tag>
+						<el-tag effect="dark" size="small" v-if="row.status === '1'" type="danger">禁用</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column label="操作" width="100">
+					<template #default="{ row }">
+						<el-dropdown trigger="click" @command="handleCommandGateway">
+						   <el-button size="small" type="warning">
+						      管理
+									<el-icon><ArrowDown /></el-icon>
+						    </el-button>
+							<template #dropdown>
+						  <el-dropdown-menu>
+								<el-dropdown-item icon="el-icon-user" :command="{command:'addClient', row: row}">注册客户端</el-dropdown-item>
+								<el-dropdown-item icon="el-icon-tickets" :command="{command:'info', row: row}">详情</el-dropdown-item>
+								<el-dropdown-item icon="el-icon-orange" :command="{command:'topology', row: row}">拓扑</el-dropdown-item>
+								<el-dropdown-item icon="el-icon-edit" :command="{command:'edit', row: row}">编辑</el-dropdown-item>
+								<el-dropdown-item icon="el-icon-eleme" :command="{command:'rule', row: row}">规则组件</el-dropdown-item>
+								<el-dropdown-item :command="{command:'start', row: row}" divided><el-icon color="#409EFF"><CircleCheckFilled /></el-icon>启用</el-dropdown-item>
+								<el-dropdown-item :command="{command:'stop', row: row}"><el-icon color="#ff0000"><CircleCloseFilled /></el-icon>禁用</el-dropdown-item>
+								<el-dropdown-item icon="el-icon-delete" :command="{command:'delete', row: row}" divided>删除</el-dropdown-item>
+						  </el-dropdown-menu>
+							</template>
+						</el-dropdown>
+					</template>
+				</el-table-column>
+			</el-table>
+
+			<div class="block">
+				<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>
+		<el-drawer v-model="drawer" :direction="direction" :before-close="handleClose" :with-header="false" size="24%">
+			<!-- 父组件传参与子组件方法监听 -->
+			<routeInfoComponent ref="routeInfo" :infoForm="infoForm"></routeInfoComponent>
+		</el-drawer>
+	</div>
+</template>
+
+<script setup>
+import { ArrowDown, DataAnalysis, CircleCheckFilled, CircleCloseFilled } from '@element-plus/icons-vue'
+</script>
+
+<script>
+	import routeInfoComponent from '../component/RouteInfo.vue'
+	import {routePageList,startRoute,stopRoute,deleteRoute} from '../api/gateway_api.js'
+	export default {
+		data() {
+			return {
+				form:{
+					name:null,
+					groupCode: null,
+					status: null
+				},
+				drawer: false,
+				direction: 'rtl',
+				formLabelWidth: '140px',
+				infoForm:{},
+				gatewayServer:'',
+				alarmDate:'',
+				alarmStatus:[],
+				tableData: [],
+				currentPage: 1,
+				pageSize: 10,
+				totalNum: 1,
+				pickerOptions: {
+				  disabledDate(time) {
+					return time.getTime() > Date.now();
+				  }
+				},
+				statusOptions: [
+					{value: null, label: '所有'},
+					{value: '0',label: '启用'},
+					{value: '1',label: '禁用'},
+				],
+				groupOptions: this.GLOBAL_VAR.groups
+			};
+		},
+		components:{
+			routeInfoComponent
+		},
+		created: function() {
+			this.init();
+		},
+		mounted: function() {
+
+		},
+		beforeDestroy: function() {
+
+		},
+		methods:{
+			init() {
+				this.search();
+			},
+			handleSizeChange(val) {
+				this.pageSize = val;
+				this.search();
+			},
+			handleCurrentChange(val) {
+				this.currentPage = val;
+				this.search();
+			},
+			handleShowInfo(row, index){
+				this.infoForm = row;
+			},
+			formatterStatus(row, index){
+				return row.status === '0'?'启用':'禁用';
+			},
+			handleCreateGateway(){
+				this.$router.push({path:'/createGateway',query:{handleType:'add'}});
+			},
+			handleCommandGateway(obj){
+				console.log("command" , obj);
+				let _this = this;
+				if (obj.command === 'addClient'){
+					this.$router.push({path:'/addGatewayClient',query:{ route: JSON.stringify(this.newRoute(obj.row)) } });
+				} else if (obj.command === 'info'){
+					this.drawer = true;
+					this.infoForm = obj.row;
+				} else if (obj.command === 'edit'){
+					this.infoForm = obj.row;
+					this.$router.push({path:'/createGateway',query:{handleType:'edit',route:this.newRoute(obj.row)}});
+				} else if (obj.command === 'rule'){
+					this.$router.push({path:'/addGroovyScript',query:{route:this.newRoute(obj.row)}});
+				} else if (obj.command === 'start'){
+					startRoute({id:obj.row.id}).then(function(result){
+						_this.GLOBAL_FUN.successMsg();
+						_this.search();
+					});
+				} else if (obj.command === 'stop'){
+					stopRoute({id:obj.row.id}).then(function(result){
+						_this.GLOBAL_FUN.successMsg();
+						_this.search();
+					});
+				} else if (obj.command === 'delete'){
+					this.$confirm('确认删除"'+obj.row.name+'"网关路由？').then(_ => {
+						deleteRoute({id:obj.row.id}).then(function(result){
+							_this.GLOBAL_FUN.successMsg();
+							_this.search();
+						})
+					}).catch(_ => {});
+				} else if (obj.command === 'topology'){
+					this.$router.push({path:'/gatewayTopology',query:{route:this.newRoute(obj.row)}});
+				}
+			},
+			handleClose(done) {
+				// this.$confirm('确认关闭？').then(_ => {
+					done();
+				// }).catch(_ => {});
+			},
+			handleCopy(val){
+				let value = this.GLOBAL_VAR.gatewayRoutesURL + val;
+				this.GLOBAL_FUN.copy(value);
+			},
+			search(){
+				let _this = this;
+				routePageList({form : this.form, currentPage: this.currentPage, pageSize: this.pageSize}).then(function(result){
+					console.log('result:', result);
+					if (result.data && result.data.records){
+						_this.tableData = result.data.records;
+						_this.totalNum = result.data.total;
+					}
+				});
+			},
+			newRoute(row){
+				let route = {
+					form: row,
+					filter: {
+						ipChecked: row.filterGatewayName!=null && row.filterGatewayName.indexOf('ip')!=-1,
+						tokenChecked: row.filterGatewayName!=null && row.filterGatewayName.indexOf('token')!=-1,
+						idChecked: row.filterGatewayName!=null && row.filterGatewayName.indexOf('id')!=-1
+					},
+					access:{
+						headerChecked: row.filterAuthorizeName!=null && row.filterAuthorizeName.indexOf('header')!=-1,
+						ipChecked:  row.filterAuthorizeName!=null && row.filterAuthorizeName.indexOf('ip')!=-1,
+						parameterChecked: row.filterAuthorizeName!=null && row.filterAuthorizeName.indexOf('parameter')!=-1,
+						timeChecked: row.filterAuthorizeName!=null && row.filterAuthorizeName.indexOf('time')!=-1,
+						cookieChecked: row.filterAuthorizeName!=null && row.filterAuthorizeName.indexOf('cookie')!=-1
+					},
+					monitor:{
+						checked: row.monitor != null && row.monitor.status != '1'
+					},
+					degradeRule:{
+						checked: row.degradeRuleName != null && row.degradeRuleName.length > 0
+					},
+					flowRule:{
+						defaultChecked: row.flowRuleName!=null && row.flowRuleName.indexOf('default')!=-1,
+						warmUpChecked: row.flowRuleName!=null && row.flowRuleName.indexOf('warmUp')!=-1,
+						rateLimiterChecked: row.flowRuleName!=null && row.flowRuleName.indexOf('rateLimiter')!=-1,
+					},
+					cacheResult:{
+						checked: row.cacheTtl != null && row.cacheTtl > 0
+					}
+				}
+				return route;
+			}
+
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+.box-flex-between {
+	padding-bottom: 18px;
+}
+
+.block {
+	padding: 0 20px;
+}
+</style>

package/src/views/GatewayTopology.vue

@@ -0,0 +1,245 @@
+<template>
+	<div>
+		<el-page-header @back="goBack" content="服务管理"></el-page-header>
+		<el-row :gutter="24" style="margin-top: 20px;">
+			<el-col :span="16">
+				<el-card shadow="always">
+					<div slot="header" class="clearfix">
+					    <i class="el-icon-orange" style="font-size: 10pt;"></i>&nbsp;<span style="font-size: 12pt;">注册网关-客户端拓扑结构</span>
+					  </div>
+				  <div id="topologyChart" :style="{ width: '100%', height: '750px', padding: '0px', margin: '0px', border: '0px #0298F9 solid' }"></div>
+				</el-card>
+			</el-col>
+			<el-col :span="8" style="border: 0px solid red;">
+				<el-card shadow="always">
+					<div slot="header" class="clearfix">
+					    <i class="el-icon-s-custom" style="font-size: 10pt;"></i>&nbsp;<span style="font-size: 12pt;">注册客户端列表</span>
+					</div>
+					<el-card shadow="hover" class="paper-card__body" v-for="(item,index) in clientList" :key="index" style="margin-bottom: 10px; font-size: 10pt;">
+						<el-row :gutter="24">
+							<el-col :span="20" style="border: 0px solid red;">
+								<i class="el-icon-s-platform" style="font-size: 10pt;"></i>&nbsp;<el-tag size="small" style="font-weight: bold;">{{item.name}}</el-tag>
+								<i class="el-icon-caret-right" style="font-size: 10pt;"></i>&nbsp;<el-tag size="small" type="warning" style="font-weight: bold;">{{item.id}}</el-tag>
+							</el-col>
+							<el-col :span="4" style="border: 0px solid red;">
+								<el-switch v-model="item.regServerStatus" @change="handleSwitchChange(item,index)" active-color="#13ce66" inactive-color="#ff4949" active-value="0" inactive-value="1" style="float: right;"></el-switch>
+							</el-col>
+						</el-row>
+					</el-card>
+				</el-card>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+	import {regClientList,stopRegClient,startRegClient} from '../api/regserver_api.js'
+
+export default {
+	data() {
+		return {
+			form: {},
+			clientList:[]
+		};
+	},
+	created: function() {
+		//在组件创建完毕后加载
+		let query = this.$route.query;
+		if (query){
+			let route = query.route;
+			console.log('route', route);
+			this.form = route.form;
+		}
+	},
+	mounted: function() {
+		this.init();
+	},
+	beforeDestroy: function() {
+
+	},
+	methods: {
+		init() {
+			this.regClientList();
+		},
+		regClientList(){
+			let _this = this;
+			regClientList({routeId: this.form.id}).then(function(result){
+				if (result.data){
+					_this.clientList = result.data;
+					_this.drawLine();
+				}
+			})
+		},
+		handleSwitchChange(item, index){
+			let _this = this;
+			if (item && item.regServerStatus === '0'){
+				startRegClient({id:item.regServerId}).then(function(result){
+					_this.GLOBAL_FUN.successMsg();
+				});
+			}else {
+				stopRegClient({id:item.regServerId}).then(function(result){
+					_this.GLOBAL_FUN.successMsg();
+				});
+			}
+		},
+		goBack() {
+			this.$router.push({path:'/gatewayList',query:{}});
+		},
+		drawLine() {
+			let _this = this;
+			// 基于准备好的dom，初始化echarts实例
+			let topologyChart = echarts.init(document.getElementById('topologyChart'));
+			var colors = ['#00ADD0', '#FFA12F', '#B62AFF', '#727CF5', '#1890FF', '#00f6ff', '#20C0F4', '#95F300', '#04FDB8', '#AF5AFF'];
+			var getdata = function getData() {
+				let data = {
+					name: _this.form.name,
+					value: 0,
+					children: []
+				};
+				if (_this.clientList != null){
+					let legnth = _this.clientList.length;
+					for (let i = 0; i < legnth; i++) {
+						let client = _this.clientList[i];
+						let obj = {
+							name: client.name ,
+							value: i,
+							children: []
+						};
+						data.children.push(obj);
+					}
+				}
+				let arr = [];
+				arr.push(data);
+				//
+				arr = handle(arr, 0);
+				console.log(arr);
+				return arr;
+			};
+			var handle = function handleData(data, index, color = '#00f6ff') {
+				//index标识第几层
+				return data.map((item, index2) => {
+					//计算出颜色
+					if (index == 1) {
+						color = colors.find((item, eq) => eq == index2 % 10);
+					}
+					// 设置节点大小
+					if (index === 0 || index === 1) {
+						item.label = {
+							position: 'inside'
+							//   rotate: 0,
+							//   borderRadius: "50%",
+						};
+					}
+					// 设置label大小
+					switch (index) {
+						case 0:
+							item.symbolSize = 90;
+							break;
+						case 1:
+							item.symbolSize = 60;
+							break;
+						default:
+							item.symbolSize = 20;
+							break;
+					}
+					// 设置线条颜色
+					item.lineStyle = { color: color };
+
+					if (item.children) {
+						//存在子节点
+						item.itemStyle = {
+							borderColor: color,
+							color: color
+						};
+						item.children = handle(item.children, index + 1, color);
+					} else {
+						//不存在
+						item.itemStyle = {
+							color: 'transparent',
+							borderColor: color
+						};
+					}
+					return item;
+				});
+			};
+
+			var option = {
+				type: 'tree',
+				// backgroundColor: '#000',
+				toolbox: {
+					//工具栏
+					show: true,
+					iconStyle: {
+						borderColor: '#03ceda'
+					},
+					feature: {
+						restore: {}
+					}
+				},
+				tooltip: {
+					//提示框
+					trigger: 'item',
+					triggerOn: 'mousemove',
+					backgroundColor: 'rgba(1,70,86,1)',
+					borderColor: 'rgba(0,246,255,1)',
+					borderWidth: 0.5,
+					textStyle: {
+						fontSize: 10
+					},
+					formatter: '{b}'
+				},
+				series: [
+					{
+						type: 'tree',
+						hoverAnimation: true, //hover样式
+						data: getdata(),
+						top: 0,
+						bottom: 0,
+						left: 0,
+						right: 0,
+						layout: 'radial',
+						symbol: 'circle',
+						symbolSize: 10,
+						nodePadding: 20,
+						animationDurationUpdate: 750,
+						expandAndCollapse: true, //子树折叠和展开的交互，默认打开
+						initialTreeDepth: 2,
+						roam: true, //是否开启鼠标缩放和平移漫游。scale/move/true
+						focusNodeAdjacency: true,
+						itemStyle: {
+							borderWidth: 1
+						},
+						label: {
+							//标签样式
+							// color: '#fff',
+							fontSize: 10,
+							fontWeight: 'bold',
+							fontFamily: 'SourceHanSansCN',
+							position: 'inside',
+							rotate: 0
+						},
+						lineStyle: {
+							width: 1,
+							curveness: 0.5
+						}
+					}
+				]
+			};
+			// 绘制图表
+			topologyChart.setOption(option);
+		}
+	}
+};
+</script>
+
+<style scoped>
+	.paper-card__body >>> .el-card__body{
+		padding: 12px;
+	}
+	.paper-card__body >>> .el-card__header {
+	    padding: 10px 20px;
+	    border-bottom: 1px solid #EBEEF5;
+	    box-sizing: border-box;
+	}
+</style>