TRA-4169 apply query by enter (#733)

* start dev commands

* env files

* no message

.github/workflows/pr_validation.yml

@@ -12,7 +12,7 @@ concurrency:
 
 jobs:
   build-cli:
-    name: Build CLI
+    name: Build CLI executable
     runs-on: ubuntu-latest
     steps:
       - name: Set up Go 1.16
@@ -27,35 +27,11 @@ jobs:
         run: make cli
 
   build-agent:
-    name: Build Agent
+    name: Build Agent docker image
     runs-on: ubuntu-latest
     steps:
-      - name: Set up Go 1.16
-        uses: actions/setup-go@v2
-        with:
-          go-version: '1.16'
-
       - name: Check out code into the Go module directory
         uses: actions/checkout@v2
 
-      - shell: bash
-        run: |
-          sudo apt-get install libpcap-dev
-
       - name: Build Agent
-        run: make agent
-
-  build-ui:
-    name: Build UI
-    runs-on: ubuntu-latest
-    steps:
-      - name: Set up Node 16
-        uses: actions/setup-node@v2
-        with:
-          node-version: '16'
-
-      - name: Check out code into the Go module directory
-        uses: actions/checkout@v2
-
-      - name: Build UI
-        run: make ui
+        run: make agent-docker

Makefile

@@ -47,6 +47,10 @@ agent-debug: ## Build agent for debug.
 docker: ## Build and publish agent docker image.
 	$(MAKE) push-docker
 
+agent-docker: ## Build agent docker image.
+	@echo "Building agent docker image"
+	@docker build -t up9inc/mizu:devlatest .
+
 push: push-docker push-cli ## Build and publish agent docker image & CLI.
 
 push-docker: ## Build and publish agent docker image.

cli/config/configStruct.go

@@ -27,7 +27,7 @@ type ConfigStruct struct {
 	Logs                   configStructs.LogsConfig    `yaml:"logs"`
 	Auth                   configStructs.AuthConfig    `yaml:"auth"`
 	Config                 configStructs.ConfigConfig  `yaml:"config,omitempty"`
-	AgentImage             string                      `yaml:"agent-image,omitempty"`
+	AgentImage             string                      `yaml:"agent-image,omitempty" readonly:""`
 	KratosImage            string                      `yaml:"kratos-image,omitempty" readonly:""`
 	KetoImage              string                      `yaml:"keto-image,omitempty" readonly:""`
 	ImagePullPolicyStr     string                      `yaml:"image-pull-policy" default:"Always"`

tap/extensions/kafka/response.go

@@ -251,10 +251,10 @@ func ReadResponse(r io.Reader, tcpID *api.TcpID, superTimer *api.SuperTimer, emi
 	}
 
 	connectionInfo := &api.ConnectionInfo{
-		ClientIP:   tcpID.SrcIP,
-		ClientPort: tcpID.SrcPort,
-		ServerIP:   tcpID.DstIP,
-		ServerPort: tcpID.DstPort,
+		ClientIP:   tcpID.DstIP,
+		ClientPort: tcpID.DstPort,
+		ServerIP:   tcpID.SrcIP,
+		ServerPort: tcpID.SrcPort,
 		IsOutgoing: true,
 	}
 

ui/.env.dev.basic

@@ -0,0 +1,3 @@
+REACT_APP_OVERRIDE_WS_URL="ws://localhost:8899/ws"
+REACT_APP_OVERRIDE_API_URL="http://localhost:8899/"
+REACT_APP_OVERRIDE_IS_ENTERPRISE="false"

ui/.env.dev.enterprise

@@ -0,0 +1,3 @@
+REACT_APP_OVERRIDE_WS_URL="ws://localhost:8899/ws"
+REACT_APP_OVERRIDE_API_URL="http://localhost:8899/"
+REACT_APP_OVERRIDE_IS_ENTERPRISE="true"

ui/package.json

@@ -49,7 +49,8 @@
   },
   "scripts": {
     "start": "craco start",
-    "start-ent": "./node_modules/.bin/env-cmd -f .env.enterprise craco start",
+    "start-dev": "./node_modules/.bin/env-cmd -f .env.dev.basic craco start",
+    "start-dev-ent": "./node_modules/.bin/env-cmd -f .env.dev.enterprise craco start",
     "build": "./node_modules/.bin/env-cmd -f .env.basic craco build",
     "build-ent": "BUILD_PATH='./build-ent' ./node_modules/.bin/env-cmd -f .env.enterprise craco build",
     "test": "craco test",

ui/src/components/EntryDetailed/EntrySections.tsx

@@ -137,12 +137,12 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
         const chunk = body.slice(0, MAXIMUM_BYTES_TO_FORMAT);
         const bodyBuf = isBase64Encoding ? atob(chunk) : chunk;
 
-        if (!isPretty) return bodyBuf;
-
         try {
             if (jsonLikeFormats.some(format => contentType?.indexOf(format) > -1)) {
+                if (!isPretty) return bodyBuf;
                 return jsonBeautify(JSON.parse(bodyBuf), null, 2, 80);
             }  else if (xmlLikeFormats.some(format => contentType?.indexOf(format) > -1)) {
+                if (!isPretty) return bodyBuf;
                 return xmlBeautify(bodyBuf, {
                     indentation: '  ',
                     filter: (node) => node.type !== 'Comment',
@@ -152,7 +152,9 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
             } else if (protobufFormats.some(format => contentType?.indexOf(format) > -1)) {
                 // Replace all non printable characters (ASCII)
                 const protobufDecoder = new ProtobufDecoder(bodyBuf, true);
-                return jsonBeautify(protobufDecoder.decode().toSimple(), null, 2, 80);
+                const protobufDecoded = protobufDecoder.decode().toSimple();
+                if (!isPretty) return JSON.stringify(protobufDecoded);
+                return jsonBeautify(protobufDecoded, null, 2, 80);
             }
         } catch (error) {
             console.error(error);

ui/src/components/OasModal/OasModal.tsx

@@ -21,7 +21,6 @@ const OasModal = ({ openModal, handleCloseModal }) => {
         const services = await api.getOasServices();
         setOasServices(services);
       } catch (e) {
-        toast.error("Error occurred while fetching services list");
         console.error(e);
       }
     })();

ui/src/helpers/api.js

@@ -1,12 +1,13 @@
 import * as axios from "axios";
 
-export const MizuWebsocketURL = window.location.protocol === 'https:' ? `wss://${window.location.host}/ws` : `ws://${window.location.host}/ws`;
+export const MizuWebsocketURL = process.env.REACT_APP_OVERRIDE_WS_URL ? process.env.REACT_APP_OVERRIDE_WS_URL :
+    window.location.protocol === 'https:' ? `wss://${window.location.host}/ws` : `ws://${window.location.host}/ws`;
 
 export const FormValidationErrorType = "formError";
 
 const CancelToken = axios.CancelToken;
 
-const apiURL =`${window.location.origin}/`;
+const apiURL = process.env.REACT_APP_OVERRIDE_API_URL ? process.env.REACT_APP_OVERRIDE_API_URL : `${window.location.origin}/`;
 
 export default class Api {
     static instance;

ui/src/hooks/useKeyPress.ts

@@ -10,8 +10,11 @@ const useKeyPress = (eventConfigs, callback, node = null) => {
   // handle what happens on key press
   const handleKeyPress = useCallback(
     (event) => {
+      
       // check if one of the key is part of the ones we want
       if (eventConfigs.some((eventConfig) => Object.keys(eventConfig).every(nameKey => eventConfig[nameKey] === event[nameKey]))) {
+        event.stopPropagation()
+        event.preventDefault();
         callbackRef.current(event);
       }
     },