Merge pull request #1046 from apache/dashboard-configuration

#700 EventMesh Dashboard: Configuration

build.gradle

@@ -62,6 +62,11 @@ allprojects {
 
     compileJava.options.compilerArgs << "-Xlint:unchecked" << "-Xlint:deprecation"
 
+    java {
+        sourceCompatibility = "1.8"
+        targetCompatibility = "1.8"
+    }
+
     clean.doFirst {
         delete 'build'
         delete 'dist'
@@ -423,7 +428,7 @@ subprojects {
 
 
             dependency "com.google.guava:guava:31.0.1-jre"
-            
+
             dependency "org.slf4j:slf4j-api:1.7.30"
             dependency "org.apache.logging.log4j:log4j-api:2.17.1"
             dependency "org.apache.logging.log4j:log4j-core:2.17.1"

eventmesh-dashboard/.gitignore

@@ -77,6 +77,7 @@ typings/
 # Nuxt.js build / generate output
 .nuxt
 dist
+next-env.d.ts
 
 # Gatsby files
 .cache/

eventmesh-dashboard/components/client/ClientTable.tsx

@@ -33,7 +33,8 @@ import {
   Button,
 } from '@chakra-ui/react';
 import axios from 'axios';
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
+import { AppContext } from '../../context/context';
 
 interface Client {
   env: string,
@@ -67,12 +68,14 @@ interface RemoveClientRequest {
 const ClientRow = ({
   host, port, group, protocol, url,
 }: ClientProps) => {
+  const { state } = useContext(AppContext);
+
   const toast = useToast();
   const [loading, setLoading] = useState(false);
   const onRemoveClick = async () => {
     try {
       setLoading(true);
-      await axios.delete<RemoveClientRequest>('/client', {
+      await axios.delete<RemoveClientRequest>(`${state.endpoint}/client`, {
         data: {
           host,
           port,
@@ -117,6 +120,8 @@ const ClientRow = ({
 };
 
 const ClientTable = () => {
+  const { state } = useContext(AppContext);
+
   const [searchInput, setSearchInput] = useState<string>('');
   const handleSearchInputChange = (event: React.FormEvent<HTMLInputElement>) => {
     setSearchInput(event.currentTarget.value);
@@ -138,7 +143,7 @@ const ClientTable = () => {
   useEffect(() => {
     const fetch = async () => {
       try {
-        const { data } = await axios.get<Client[]>('/client');
+        const { data } = await axios.get<Client[]>(`${state.endpoint}/client`);
         setClientList(data);
 
         const nextGroupSet = new Set<string>();

eventmesh-dashboard/components/index/Configuration.tsx

@@ -0,0 +1,234 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  Text,
+  Table,
+  TableContainer,
+  Tbody,
+  Th,
+  Thead,
+  Tr,
+  Td,
+  Box,
+} from '@chakra-ui/react';
+import axios from 'axios';
+import React, { useContext, useEffect, useState } from 'react';
+import { AppContext } from '../../context/context';
+
+interface EventMeshConfiguration {
+  sysID: string,
+  namesrvAddr: string,
+  eventMeshEnv: string,
+  eventMeshIDC: string,
+  eventMeshCluster: string,
+  eventMeshServerIp: string,
+  eventMeshName: string,
+  eventMeshWebhookOrigin: string,
+  eventMeshServerSecurityEnable: boolean,
+  eventMeshServerRegistryEnable: boolean,
+
+  eventMeshTcpServerPort: number,
+  eventMeshTcpServerEnabled: boolean,
+
+  eventMeshHttpServerPort: number,
+  eventMeshHttpServerUseTls: boolean,
+
+  eventMeshGrpcServerPort: number,
+  eventMeshGrpcServerUseTls: boolean,
+}
+
+const Configuration = () => {
+  const { state } = useContext(AppContext);
+  const [configuration, setConfiguration] = useState<Partial<EventMeshConfiguration>>({});
+
+  useEffect(() => {
+    const fetch = async () => {
+      try {
+        const { data } = await axios.get<EventMeshConfiguration>(`${state.endpoint}/configuration`);
+        setConfiguration(data);
+      } catch (error) {
+        setConfiguration({});
+      }
+    };
+
+    fetch();
+  }, []);
+
+  type ConfigurationRecord = Record<string, string | number | boolean | undefined>;
+  const commonConfiguration: ConfigurationRecord = {
+    'System ID': configuration.sysID,
+    'NameServer Address': configuration.namesrvAddr,
+    'EventMesh Environment': configuration.eventMeshEnv,
+    'EventMesh IDC': configuration.eventMeshIDC,
+    'EventMesh Cluster': configuration.eventMeshCluster,
+    'EventMesh Server IP': configuration.eventMeshServerIp,
+    'EventMEsh Name': configuration.eventMeshName,
+    'EventMesh Webhook Origin': configuration.eventMeshWebhookOrigin,
+    'EventMesh Server Security Enable': configuration.eventMeshServerSecurityEnable,
+    'EventMesh Server Registry Enable': configuration.eventMeshServerRegistryEnable,
+  };
+
+  const tcpConfiguration: ConfigurationRecord = {
+    'TCP Server Port': configuration.eventMeshTcpServerPort,
+    'TCP Server Enabled': configuration.eventMeshTcpServerEnabled,
+  };
+
+  const httpConfiguration: ConfigurationRecord = {
+    'HTTP Server Port': configuration.eventMeshHttpServerPort,
+    'HTTP Server TLS Enabled': configuration.eventMeshHttpServerUseTls,
+  };
+
+  const grpcConfiguration: ConfigurationRecord = {
+    'gRPC Server Port': configuration.eventMeshGrpcServerPort,
+    'gRPC Server TLS Enabled': configuration.eventMeshGrpcServerUseTls,
+  };
+
+  const convertConfigurationToTable = (
+    configurationRecord: Record<string, string | number | boolean | undefined>,
+  ) => Object.entries(configurationRecord).map(([key, value]) => {
+    if (value === undefined) {
+      return (
+        <Tr>
+          <Td>{key}</Td>
+          <Td>Undefined</Td>
+        </Tr>
+      );
+    }
+
+    return (
+      <Tr>
+        <Td>{key}</Td>
+        <Td>{value.toString()}</Td>
+      </Tr>
+    );
+  });
+
+  if (Object.keys(configuration).length === 0) {
+    return false;
+  }
+
+  return (
+    <>
+      <Box
+        maxW="full"
+        bg="white"
+        borderWidth="1px"
+        borderRadius="md"
+        overflow="hidden"
+        p="4"
+        mt="4"
+      >
+        <Text
+          w="full"
+        >
+          EventMesh Configuration
+        </Text>
+
+        <TableContainer mt="4">
+          <Table variant="simple">
+            <Thead>
+              <Tr>
+                <Th>Configuration Field</Th>
+                <Th>Value</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {convertConfigurationToTable(commonConfiguration)}
+            </Tbody>
+          </Table>
+        </TableContainer>
+
+      </Box>
+      <Box
+        maxW="full"
+        bg="white"
+        borderWidth="1px"
+        borderRadius="md"
+        overflow="hidden"
+        p="4"
+        mt="4"
+      >
+        <Text
+          w="full"
+        >
+          TCP Configuration
+        </Text>
+
+        <TableContainer mt="4">
+          <Table variant="simple">
+            <Thead>
+              <Tr>
+                <Th>Configuration Field</Th>
+                <Th>Value</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {convertConfigurationToTable(tcpConfiguration)}
+            </Tbody>
+          </Table>
+        </TableContainer>
+
+        <Text
+          w="full"
+          mt="4"
+        >
+          HTTP Configuration
+        </Text>
+
+        <TableContainer mt="4">
+          <Table variant="simple">
+            <Thead>
+              <Tr>
+                <Th>Configuration Field</Th>
+                <Th>Value</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {convertConfigurationToTable(httpConfiguration)}
+            </Tbody>
+          </Table>
+        </TableContainer>
+
+        <Text
+          w="full"
+          mt="4"
+        >
+          gRPC Configuration
+        </Text>
+
+        <TableContainer mt="4">
+          <Table variant="simple">
+            <Thead>
+              <Tr>
+                <Th>Configuration Field</Th>
+                <Th>Value</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {convertConfigurationToTable(grpcConfiguration)}
+            </Tbody>
+          </Table>
+        </TableContainer>
+      </Box>
+    </>
+  );
+};
+
+export default Configuration;

eventmesh-dashboard/components/index/Endpoint.tsx

@@ -26,20 +26,17 @@ import {
   useToast,
 } from '@chakra-ui/react';
 import axios from 'axios';
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
+import { AppContext } from '../../context/context';
 
 const Endpoint = () => {
+  const { state, dispatch } = useContext(AppContext);
   const toast = useToast();
   const [endpointInput, setEndpointInput] = useState('http://localhost:10106');
   const [loading, setLoading] = useState(false);
 
   useEffect(() => {
-    const endpoint = localStorage.getItem('endpoint');
-    if (endpoint === null) {
-      return;
-    }
-    setEndpointInput(endpoint);
-    axios.defaults.baseURL = endpoint;
+    setEndpointInput(state.endpoint);
   }, []);
 
   const handleEndpointInputChange = (event: React.FormEvent<HTMLInputElement>) => {
@@ -50,8 +47,12 @@ const Endpoint = () => {
     try {
       setLoading(true);
       await axios.get(`${endpointInput}/client`);
-      axios.defaults.baseURL = endpointInput;
-      localStorage.setItem('endpoint', endpointInput);
+      dispatch({
+        type: 'SetEndPointAction',
+        payload: {
+          endpoint: endpointInput,
+        },
+      });
     } catch (error) {
       if (axios.isAxiosError(error)) {
         toast({