validation that grpc error render only when needed (#1051)

* searchable dropdown added to oas modal

* remove unnecessary attribute from autocomplete

* move css to sass file

.github/workflows/static_code_analysis.yml

@@ -141,3 +141,42 @@ jobs:
         with:
           version: latest
           working-directory: tap/extensions/redis
+      
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16
+        
+      - name: Check modified UI files
+        id: ui_modified_files
+        run: devops/check_modified_files.sh ui/
+      
+      - name: ESLint prerequisites ui
+        if: steps.ui_modified_files.outputs.matched == 'true'
+        run: |
+          sudo npm install -g eslint
+          cd ui
+          npm run prestart
+          npm i
+
+      - name: ESLint ui
+        if: steps.ui_modified_files.outputs.matched == 'true'
+        run: |
+          cd ui
+          npm run eslint
+      
+      - name: Check modified ui-common files
+        id: ui_common_modified_files
+        run: devops/check_modified_files.sh ui-common/
+      
+      - name: ESLint prerequisites ui-common
+        if: steps.ui_common_modified_files.outputs.matched == 'true'
+        run: |
+          sudo npm install -g eslint
+          cd ui-common
+          npm i
+
+      - name: ESLint ui-common
+        if: steps.ui_common_modified_files.outputs.matched == 'true'
+        run: |
+          cd ui-common
+          npm run eslint

Dockerfile

@@ -67,6 +67,7 @@ COPY tap/extensions/kafka/go.mod ../tap/extensions/kafka/
 COPY tap/extensions/redis/go.mod ../tap/extensions/redis/
 RUN go mod download
 # cheap trick to make the build faster (as long as go.mod did not change)
+RUN go get github.com/patrickmn/go-cache
 RUN go list -f '{{.Path}}@{{.Version}}' -m all | sed 1d | grep -e 'go-cache' | xargs go get
 
 # Copy and build agent code

agent/go.mod

@@ -19,7 +19,6 @@ require (
 	github.com/nav-inc/datetime v0.1.3
 	github.com/op/go-logging v0.0.0-20160315200505-970db520ece7
 	github.com/orcaman/concurrent-map v1.0.0
-    github.com/patrickmn/go-cache v2.1.0+incompatible
 	github.com/stretchr/testify v1.7.0
 	github.com/up9inc/basenine/client/go v0.0.0-20220419100955-e2ca51087607
 	github.com/up9inc/mizu/logger v0.0.0

devops/ui-common-pack.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+
+# exit when any command fails
+set -e
+
+dst_folder=$1
+echo "dst folder: $dst_folder";
+
+cd $dst_folder/../ui-common
+npm i
+npm pack
+mv up9-mizu-common-0.0.0.tgz $dst_folder

ui-common/.eslintignore

@@ -1,6 +1,5 @@
 build/
 dist/
-src/
 node_modules/
 .snapshots/
 *.min.js

ui-common/.eslintrc

@@ -1,34 +0,0 @@
-{
-  "parser": "@typescript-eslint/parser",
-  "extends": [
-    "standard",
-    "standard-react",
-    "plugin:prettier/recommended",
-    "prettier/standard",
-    "prettier/react",
-    "plugin:@typescript-eslint/eslint-recommended"
-  ],
-  "env": {
-    "node": true
-  },
-  "parserOptions": {
-    "ecmaVersion": 2020,
-    "ecmaFeatures": {
-      "legacyDecorators": true,
-      "jsx": true
-    }
-  },
-  "settings": {
-    "react": {
-      "version": "16"
-    }
-  },
-  "rules": {
-    "space-before-function-paren": 0,
-    "react/prop-types": 0,
-    "react/jsx-handler-names": 0,
-    "react/jsx-fragments": 0,
-    "react/no-unused-prop-types": 0,
-    "import/export": 0
-  }
-}

ui-common/package-lock.json

@@ -23,7 +23,7 @@
         "moment": "^2.29.1",
         "node-fetch": "^3.1.1",
         "numeral": "^2.0.6",
-        "protobuf-decoder": "^0.1.0",
+        "protobuf-decoder": "^0.1.2",
         "react-graph-vis": "^1.0.7",
         "react-lowlight": "^3.0.0",
         "react-router-dom": "^6.2.1",
@@ -26065,9 +26065,9 @@
       }
     },
     "node_modules/protobuf-decoder": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/protobuf-decoder/-/protobuf-decoder-0.1.1.tgz",
-      "integrity": "sha512-yeyeCkdvOnzv+6/2YNx2FlT7565arz/mb0QnhmXFdHMwnek9Jp/0PpHJVdJkzdFBgi85XQWRcHdWHh2dOBrSng=="
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/protobuf-decoder/-/protobuf-decoder-0.1.2.tgz",
+      "integrity": "sha512-dKPIsI7W1A88f8WAXHzNujQuDWLAWVviw2svDOlwkpdVlaV8TRjxuBL4tE3dczYWRZ1ZeNts06k9njB4xjnBVQ=="
     },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
@@ -55355,9 +55355,9 @@
       }
     },
     "protobuf-decoder": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/protobuf-decoder/-/protobuf-decoder-0.1.1.tgz",
-      "integrity": "sha512-yeyeCkdvOnzv+6/2YNx2FlT7565arz/mb0QnhmXFdHMwnek9Jp/0PpHJVdJkzdFBgi85XQWRcHdWHh2dOBrSng=="
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/protobuf-decoder/-/protobuf-decoder-0.1.2.tgz",
+      "integrity": "sha512-dKPIsI7W1A88f8WAXHzNujQuDWLAWVviw2svDOlwkpdVlaV8TRjxuBL4tE3dczYWRZ1ZeNts06k9njB4xjnBVQ=="
     },
     "proxy-addr": {
       "version": "2.0.7",

ui-common/package.json

@@ -19,7 +19,8 @@
     "test:build": "run-s build",
     "test:lint": "eslint .",
     "predeploy": "cd example && npm install && npm run build",
-    "deploy": "gh-pages -d example/build"
+    "deploy": "gh-pages -d example/build",
+    "eslint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "peerDependencies": {
     "@craco/craco": "^6.4.3",

ui-common/src/components/OasModal/OasModal.module.sass

@@ -32,6 +32,9 @@
     overflow-y: scroll
 
 .borderLine
-  border-top: 1px solid #dee6fe
-  margin-bottom: 1%
+    border-top: 1px solid #dee6fe
+    margin-bottom: 1%
+
+.root
+    width: 100%
 

ui-common/src/components/OasModal/OasModal.tsx

@@ -1,5 +1,5 @@
 import { Box, Fade, FormControl, MenuItem, Modal, Backdrop } from "@material-ui/core";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { RedocStandalone } from "redoc";
 import closeIcon from "assets/closeIcon.svg";
 import { toast } from 'react-toastify';
@@ -7,8 +7,8 @@ import style from './OasModal.module.sass';
 import openApiLogo from 'assets/openApiLogo.png'
 import { redocThemeOptions } from "./redocThemeOptions";
 import React from "react";
-import { Select } from "../UI/Select";
 import { TOAST_CONTAINER_ID } from "../../configs/Consts";
+import SearchableDropdown from "../UI/SearchableDropdown/SearchableDropdown";
 
 
 const modalStyle = {
@@ -30,6 +30,8 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
   const [oasServices, setOasServices] = useState([] as string[])
   const [selectedServiceName, setSelectedServiceName] = useState("");
   const [selectedServiceSpec, setSelectedServiceSpec] = useState(null);
+  
+  const classes = {root: style.root}
 
   const onSelectedOASService = async (selectedService) => {
     if (oasServices.length === 0) {
@@ -88,19 +90,12 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
             </div>
           </div>
           <div className={style.selectContainer} >
-            <FormControl>
-              <Select
-                labelId="service-select-label"
-                id="service-select"
-                value={selectedServiceName}
-                onChangeCb={onSelectedOASService}
-              >
-                {oasServices.map((service) => (
-                  <MenuItem key={service} value={service}>
-                    {service}
-                  </MenuItem>
-                ))}
-              </Select>
+            <FormControl classes={classes}>
+              <SearchableDropdown 
+                options={oasServices}
+                selectedValues={selectedServiceName}
+                onChange={onSelectedOASService}
+              />
             </FormControl>
           </div>
           <div className={style.borderLine}></div>

ui-common/src/components/TrafficViewer/EntryDetailed/EntrySections.tsx

@@ -158,9 +158,10 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
                 return jsonBeautify(protobufDecoded, null, 2, 80);
             }
         } catch (error) {
-            if(isDecodeGrpc)
+            if (String(error).includes("More than one message in")){
+                if(isDecodeGrpc)
                 setIsDecodeGrpc(false);
-            if (!String(error).includes("More than one message in")){
+            } else {
                 console.error(error);
             }
         }

ui-common/src/components/UI/SearchableDropdown/DefaultIconDown.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99999 13.6568L9.99997 13.6569L5.75732 9.41421L7.17154 8L10.0001 10.8285L12.8285 8.00009L14.2428 9.41431L10.0001 13.6569L9.99999 13.6568Z" fill="#205CF5"/>
+</svg>

ui-common/src/components/UI/SearchableDropdown/SearchableDropdown.module.sass

@@ -0,0 +1,30 @@
+.optionItem
+    font-size: 12px
+    display: flex
+    align-items: center
+    overflow: hidden
+    text-overflow: ellipsis
+    white-space: nowrap
+    font-family: Source Sans Pro, Lucida Grande, Tahoma, sans-serif
+
+.title
+    overflow: hidden
+    text-overflow: ellipsis
+    white-space: nowrap
+    font-family: Source Sans Pro, Lucida Grande, Tahoma, sans-serif
+
+.optionListItem
+    font-size: 12px
+    margin-right: -15px
+    background-color: #262a3e
+    border-radius: 20px 0px 0px 20px
+    padding: 0px 16px 4px 12px
+    display: flex
+    max-width: 100px
+    height: 18px
+
+.optionListItemTitle
+    overflow: hidden
+    max-width: 80px
+    text-overflow: ellipsis
+    white-space: nowrap

ui-common/src/components/UI/SearchableDropdown/SearchableDropdown.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import { Autocomplete } from "@material-ui/lab";
+import { Checkbox, TextField } from "@material-ui/core";
+import CheckBoxOutlineBlankIcon from "@material-ui/icons/CheckBoxOutlineBlank";
+import CheckBoxIcon from "@material-ui/icons/CheckBox";
+import DefaultIconDown from "DefaultIconDown.svg";
+import styles from "./SearchableDropdown.module.sass";
+
+interface SearchableDropdownProps {
+    options: string[],
+    selectedValues?: any,
+    onChange: (string) => void,
+    isLoading?: boolean,
+    label?: string,
+    multiple?: boolean,
+    inputWidth?: string
+    freeSolo?: boolean
+}
+
+const useStyles = makeStyles(() => ({
+
+    inputRoot: {
+        padding: "8px 4px 8px 12px !important",
+        borderRadius: "9px !important"
+    },
+    input: {
+        padding: "0px 33px 0px 0px !important",
+        height: 18,
+        fontWeight: "normal",
+        fontFamily: "Source Sans Pro, Lucida Grande, Tahoma, sans-serif"
+    },
+    root: {
+        "& .MuiFormLabel-root": {
+            fontFamily: "Source Sans Pro, Lucida Grande, Tahoma, sans-serif"
+        }
+    }
+}));
+
+
+const SearchableDropdown: React.FC<SearchableDropdownProps> = ({ options, selectedValues, onChange, isLoading, label, multiple, inputWidth, freeSolo }) => {
+
+    const classes = useStyles();
+
+    return <Autocomplete
+        freeSolo={freeSolo}
+        multiple={multiple}
+        loading={isLoading}
+        classes={classes}
+        options={options ? options : []}
+        disableCloseOnSelect={multiple}
+        fullWidth={false}
+        disableClearable
+        value={selectedValues ? selectedValues : (multiple ? [] : null)}
+        getOptionLabel={(option) => option}
+        onChange={(event, val) => onChange(val)}
+        size={"small"}
+        popupIcon={<img style={{ padding: 7 }} alt="iconDown" src={DefaultIconDown} />}
+        renderOption={(option, { selected }) => (
+            <div id={`option-${option}`} className={styles.optionItem}>
+                {multiple && <Checkbox
+                    icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
+                    checkedIcon={<CheckBoxIcon fontSize="small" />}
+                    style={{ marginRight: 8 }}
+                    checked={selected}
+                />}
+                <div title={option} className={styles.title}>{option}</div>
+            </div>
+        )}
+        renderTags={() => <div className={styles.optionListItem}>
+            <div title={selectedValues?.length > 0 ? `${selectedValues[0]} (+${selectedValues.length - 1})` : ""} className={styles.optionListItemTitle}>
+                {selectedValues?.length > 0 ? `${selectedValues[0]}` : ""}
+            </div>
+            {selectedValues?.length > 1 && <div style={{ marginLeft: 5 }}>{`(+${selectedValues.length - 1})`}</div>}
+        </div>}
+        renderInput={(params) => <TextField
+            onChange={(e) => freeSolo && onChange(e.target.value)}
+            variant="outlined" label={label}
+            className={`${classes.root} searchableDropdown`}
+            style={{ backgroundColor: "transparent" }}
+            {...params}
+        />
+        }
+    />
+};
+
+export default SearchableDropdown;

ui/package.json

@@ -51,11 +51,13 @@
     "react-error-overlay": "6.0.9"
   },
   "scripts": {
+    "prestart": "../devops/ui-common-pack.sh $PWD",
     "start": "craco start",
     "start-dev": "./node_modules/.bin/env-cmd -f .env.dev.basic craco start",
     "build": "./node_modules/.bin/env-cmd -f .env.basic craco build",
     "test": "craco test",
-    "eject": "craco eject"
+    "eject": "craco eject",
+    "eslint": "eslint . --ext .js,.jsx,.ts,.tsx --max-warnings=0"
   },
   "eslintConfig": {
     "extends": [