update gui (#89)

* update gui * update gui
flomesh-io · Nov 5, 2023 · a711c89 · a711c89
1 parent b129633
commit a711c89
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 59 deletions.
diff --git a/gui/src/App.vue b/gui/src/App.vue
@@ -9,16 +9,13 @@ import consumerVariables from '../../demo/consumer-variables/config.json';
 import loadBalancer from '../../demo/load-balancer/config.json';
 import staticWeb from '../../demo/static-web/config.json';
 import reverseProxy from '../../demo/reverse-proxy/config.json';
-import fullConfig from '../../docs/flowchart/config/config.json';
-const config = ref(fullConfig);
-const configString = ref(JSON.stringify(fullConfig));
-const activeKey  = ref('Config');
+const config = ref(loadBalancer);
+const configString = ref(JSON.stringify(loadBalancer));
 const exsamples = {
 	'Consumer Variables':consumerVariables,
 	'Load Balancer':loadBalancer,
 	'Static Web':staticWeb,
 	'Reverse Proxy':reverseProxy,
-	'Full Config':fullConfig,
 };
 watch(config, (n, o)=>{
   if(JSON.stringify(n)!=configString.value){
@@ -36,6 +33,9 @@ watch(configString, (n, o)=>{
 const useDemo = (key) => {
 	config.value = exsamples[key];
 }
+
+const docHeight = ref(document.documentElement.clientHeight - 46);
+
 const menus = [
   {
     key: 'exsamples',
@@ -59,10 +59,6 @@ const menus = [
         key: 'Reverse Proxy',
         label: 'Reverse Proxy',
       },
-      {
-				key: 'Full Config',
-        label: 'Full Config',
-      },
     ],
   },
   {
@@ -86,7 +82,7 @@ const menuClick = (e) => {
 		<a-col :span="12">
 				<JsonEditor 
 					:is-json="true"
-					height="700px"
+					:height="docHeight+'px'"
 					v-model:value="configString"
 				/>
 		</a-col>

diff --git a/gui/src/components/GatewayView.vue b/gui/src/components/GatewayView.vue
@@ -206,9 +206,9 @@ const displayMap = ref({});
 									HealthCheck
 									<MedicineBoxFilled class="font-green" />
 								</span>
-								<span>
+								<span @click="displayMap[`service-${service}`] = true">
 									More
-									<DownOutlined @click="displayMap[`service-${service}`] = true"/>
+									<DownOutlined/>
 								</span>
 							</template>
 							<a-card-meta :title="service" :description="`Cookie: ${json.Services[service].StickyCookieName || 'None'}`">
@@ -221,7 +221,6 @@ const displayMap = ref({});
 								</template>
 							</a-card-meta>
 						</a-card>
-
 						<div v-else class="service-block mb-20 all">
 							<div class="flex">
 								<b class="flex-item nowrap">Service</b>
@@ -248,15 +247,15 @@ const displayMap = ref({});
 								<b class="flex-item nowrap">Endpoints</b>
 								<div class="flex-item" style="flex: 5;">
 									<div class="endpoint-block" >
-										<ol>
-											<li v-for="(endpoint) in Object.keys(json.Services[service].Endpoints)">
+										<ol v-if="json.Services[service].Endpoints">
+											<li v-for="(endpoint,ei) in Object.keys(json.Services[service].Endpoints)" :key="ei">
 												<a-space>
 													<b class="nowrap">{{endpoint}}</b>
 													<span><ArrowRightOutlined/></span> 
-													<div class="inline-block">
+													<div class="inline-block" v-if="!!json.Services[service].Endpoints[endpoint]">
 														<div>
 															<a-tag>Weight:{{json.Services[service].Endpoints[endpoint].Weight}}</a-tag>
-															<a-tag v-for="(tag) in Object.keys(json.Services[service].Endpoints[endpoint].Tags)">{{tag}}:{{json.Services[service].Endpoints[endpoint].Tags[tag]}}</a-tag>
+															<a-tag v-for="(tag) in Object.keys(json.Services[service].Endpoints[endpoint].Tags|| [])">{{tag}}:{{json.Services[service].Endpoints[endpoint].Tags[tag]}}</a-tag>
 														</div>
 														<div class="flex" v-if="json.Services[service].Endpoints[endpoint].UpstreamCert">
 															<div class="flex-item nowrap" v-if="!!json.Services[service].Endpoints[endpoint].UpstreamCert.CertChain">Cert Chain
@@ -356,46 +355,5 @@ const displayMap = ref({});
 </template>
 
 <style scoped>
-.listener-block,.config-block {
-  border: 2px solid #00adef;
-	border-radius: 10px;
-	padding:5px 5px;
-}
-.service-block{
-  border: 2px solid lightseagreen;
-	border-radius: 10px;
-	padding: 10px;
-}
-.service-block b,.service-block div{
-	padding: 5px;
-}
-.route-block {
-  border: 2px dashed #00adef;
-	margin: 15px 15px 15px 0;
-	border-radius: 10px;
-	padding:15px 5px 5px 5px;
-}
-.endpoint-block{
-  border: 2px dashed lightseagreen;
-	border-radius: 10px;
-}
-.config-block b,.config-block>div{
-	padding: 10px;
-}
-section{
-	margin-bottom: 10px;
-}
-.block-item{
-	white-space: nowrap;
-	background-color: #f5f5f5;
-	line-height: 34px;
-	height: 34px;
-	display: inline-block;
-	padding: 0 10px 0 5px;
-	border-radius: 5px;
-	font-weight: bold;
-}
-.service-block.all{
-	padding-bottom: 50px !important;
-}
+  @import "index";
 </style>
diff --git a/gui/src/components/index.css b/gui/src/components/index.css
@@ -0,0 +1,42 @@
+.listener-block,.config-block {
+  border: 2px solid #00adef;
+	border-radius: 10px;
+	padding:5px;
+}
+.service-block{
+  border: 2px solid lightseagreen;
+	border-radius: 10px;
+	padding: 10px;
+}
+.service-block b,.service-block div{
+	padding: 5px;
+}
+.route-block {
+  border: 2px dashed #00adef;
+	margin: 15px 15px 15px 0;
+	border-radius: 10px;
+	padding:15px 5px 5px 5px;
+}
+.endpoint-block{
+  border: 2px dashed lightseagreen;
+	border-radius: 10px;
+}
+.config-block b,.config-block>div{
+	padding: 10px;
+}
+section{
+	margin-bottom: 10px;
+}
+.block-item{
+	white-space: nowrap;
+	background-color: #f5f5f5;
+	line-height: 34px;
+	height: 34px;
+	display: inline-block;
+	padding: 0 10px 0 5px;
+	border-radius: 5px;
+	font-weight: bold;
+}
+.service-block.all{
+	padding-bottom: 50px !important;
+}