minor changes updated (#1122)

Co-authored-by: Leon <>

.github/workflows/release.yml

@@ -290,3 +290,15 @@ jobs:
           tag: ${{ steps.versioning.outputs.version }}
           prerelease: ${{ github.ref != 'refs/heads/main' }}
           bodyFile: 'cli/bin/README.md'
+      
+      - name: Slack notification on failure
+        uses: ravsamhq/notify-slack-action@v1
+        if: always()
+        with:
+          status: ${{ job.status }}
+          notification_title: 'Mizu enterprise {workflow} has {status_message}'
+          message_format: '{emoji} *{workflow}* {status_message} during <{run_url}|run>, after commit <{commit_url}|{commit_sha}> by ${{ github.event.head_commit.author.name }} <${{ github.event.head_commit.author.email }}> ```${{ github.event.head_commit.message }}```'
+          footer: 'Linked Repo <{repo_url}|{repo}>'
+          notify_when: 'failure'
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

cli/cmd/install.go

@@ -1,8 +1,11 @@
 package cmd
 
 import (
+	"github.com/creasty/defaults"
 	"github.com/spf13/cobra"
+	"github.com/up9inc/mizu/cli/config/configStructs"
 	"github.com/up9inc/mizu/cli/telemetry"
+	"github.com/up9inc/mizu/logger"
 )
 
 var installCmd = &cobra.Command{
@@ -17,4 +20,11 @@ var installCmd = &cobra.Command{
 
 func init() {
 	rootCmd.AddCommand(installCmd)
+
+	defaultInstallConfig := configStructs.InstallConfig{}
+	if err := defaults.Set(&defaultInstallConfig); err != nil {
+		logger.Log.Debug(err)
+	}
+
+	installCmd.Flags().BoolP(configStructs.OutInstallName, "o", defaultInstallConfig.Out, "print (to stdout) Kubernetes manifest used to install Mizu Pro edition")
 }

cli/cmd/installRunner.go

@@ -2,6 +2,7 @@ package cmd
 
 import (
 	"fmt"
+	"strings"
 
 	"github.com/up9inc/mizu/cli/bucket"
 	"github.com/up9inc/mizu/cli/config"
@@ -9,12 +10,23 @@ import (
 )
 
 func runMizuInstall() {
-	bucketProvider := bucket.NewProvider(config.Config.Install.TemplateUrl, bucket.DefaultTimeout)
+	if config.Config.Install.Out {
-	installTemplate, err := bucketProvider.GetInstallTemplate(config.Config.Install.TemplateName)
+		bucketProvider := bucket.NewProvider(config.Config.Install.TemplateUrl, bucket.DefaultTimeout)
-	if err != nil {
+		installTemplate, err := bucketProvider.GetInstallTemplate(config.Config.Install.TemplateName)
-		logger.Log.Errorf("Failed getting install template, err: %v", err)
+		if err != nil {
+			logger.Log.Errorf("Failed getting install template, err: %v", err)
+			return
+		}
+
+		fmt.Print(installTemplate)
 		return
 	}
 
-	fmt.Print(installTemplate)
+	var sb strings.Builder
+	sb.WriteString("Hello! This command can be used to install Mizu Pro edition on your Kubernetes cluster.")
+	sb.WriteString("\nPlease run:")
+	sb.WriteString("\n\tmizu install -o | kubectl apply -f -")
+	sb.WriteString("\n\nor use helm chart as described in https://getmizu.io/docs/installing-mizu/centralized-installation\n")
+
+	fmt.Print(sb.String())
 }

cli/config/configStructs/installConfig.go

@@ -1,6 +1,11 @@
 package configStructs
 
+const (
+	OutInstallName = "out"
+)
+
 type InstallConfig struct {
 	TemplateUrl  string `yaml:"template-url" default:"https://storage.googleapis.com/static.up9.io/mizu/helm-template"`
 	TemplateName string `yaml:"template-name" default:"helm-template.yaml"`
+	Out          bool   `yaml:"out"`
 }

ui-common/package.json

@@ -24,63 +24,60 @@
   },
   "peerDependencies": {
     "@craco/craco": "^6.4.3",
-    "@material-ui/core": "^4.11.3",
+    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.2",
+    "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@types/jest": "^26.0.22",
+    "@types/jest": "^26.0.24",
-    "@types/node": "^12.20.10",
+    "@types/node": "^12.20.52",
-    "node-sass": "^6.0.0",
+    "node-sass": "^6.0.1",
     "react": "^17.0.2",
-    "react-copy-to-clipboard": "^5.0.3",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^17.0.2",
     "recoil": "^0.5.2"
   },
   "dependencies": {
     "@craco/craco": "^6.4.3",
-    "@types/lodash": "^4.14.179",
+    "@types/lodash": "^4.14.182",
-    "@uiw/react-textarea-code-editor": "^1.4.12",
+    "@uiw/react-textarea-code-editor": "^1.6.0",
     "axios": "^0.25.0",
-    "core-js": "^3.20.2",
+    "core-js": "^3.22.7",
-    "highlight.js": "^11.3.1",
+    "highlight.js": "^11.5.1",
     "json-beautify": "^1.1.1",
     "jsonpath": "^1.1.1",
-    "marked": "^4.0.10",
+    "marked": "^4.0.16",
-    "material-ui-popup-state": "^2.0.0",
+    "material-ui-popup-state": "^2.0.1",
-    "mobx": "^6.3.10",
+    "mobx": "^6.6.0",
-    "moment": "^2.29.1",
+    "moment": "^2.29.3",
-    "node-fetch": "^3.1.1",
+    "node-fetch": "^3.2.4",
     "numeral": "^2.0.6",
     "protobuf-decoder": "^0.1.2",
     "react-graph-vis": "^1.0.7",
     "react-lowlight": "^3.0.0",
-    "react-router-dom": "^6.2.1",
+    "react-router-dom": "^6.3.0",
     "react-scrollable-feed-virtualized": "^1.4.9",
-    "react-syntax-highlighter": "^15.4.3",
+    "react-syntax-highlighter": "^15.5.0",
-    "react-toastify": "^8.0.3",
+    "react-toastify": "^8.2.0",
     "redoc": "^2.0.0-rc.59",
-    "styled-components": "^5.3.3",
+    "styled-components": "^5.3.5",
-    "web-vitals": "^1.1.1",
+    "web-vitals": "^1.1.2",
-    "xml-formatter": "^2.6.0"
+    "xml-formatter": "^2.6.1"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-node-resolve": "^13.3.0",
     "@svgr/rollup": "^6.2.1",
-    "@testing-library/jest-dom": "^4.2.4",
+    "cross-env": "^7.0.3",
-    "@testing-library/react": "^9.5.0",
+    "env-cmd": "^10.1.0",
-    "@testing-library/user-event": "^7.2.1",
-    "cross-env": "^7.0.2",
-    "env-cmd": "^10.0.1",
     "gh-pages": "^2.2.0",
-    "microbundle-crl": "^0.13.10",
+    "microbundle-crl": "^0.13.11",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.4",
+    "prettier": "^2.6.2",
-    "rollup-plugin-import-css": "^3.0.2",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-sass": "^1.2.10",
-    "rollup-plugin-scss": "^3.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "typescript": "^4.2.4"
+    "rollup-plugin-import-css": "^3.0.3",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-sass": "^1.2.12",
+    "rollup-plugin-scss": "^3.0.0",
+    "typescript": "^4.7.2"
   },
   "eslintConfig": {
     "extends": [

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

@@ -34,8 +34,6 @@
     font-weight: 600
     margin-right: 35px
 
-  & .actions
-
 .graphSection
   flex: 85%
 

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

@@ -33,6 +33,11 @@ const modalStyle = {
     padding: "1px 1px",
     paddingBottom: "15px"
 };
+
+const protocolDisplayNameMap = {
+    "GQL": "GraphQL"
+}
+
 interface LegentLabelProps {
     color: string,
     name: string
@@ -119,7 +124,11 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
     const getProtocolsForFilter = useMemo(() => {
         return serviceMapApiData.edges.reduce<ProtocolType[]>((returnArr, currentValue, currentIndex, array) => {
             if (!returnArr.find(prot => prot.key === currentValue.protocol.abbr))
-                returnArr.push({ key: currentValue.protocol.abbr, value: currentValue.protocol.abbr, component: <LegentLabel color={currentValue.protocol.backgroundColor} name={currentValue.protocol.abbr} /> })
+                returnArr.push({
+                    key: currentValue.protocol.abbr, value: currentValue.protocol.abbr,
+                    component: <LegentLabel color={currentValue.protocol.backgroundColor}
+                        name={protocolDisplayNameMap[currentValue.protocol.abbr] ? protocolDisplayNameMap[currentValue.protocol.abbr] : currentValue.protocol.abbr} />
+                })
             return returnArr
         }, new Array<ProtocolType>())
     }, [serviceMapApiData])
@@ -221,12 +230,12 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
                                     <div className={styles.card}>
                                         <SelectList items={getProtocolsForFilter} checkBoxWidth="5%" tableName={"PROTOCOLS"} multiSelect={true}
                                             checkedValues={checkedProtocols} setCheckedValues={onProtocolsChange} tableClassName={styles.filters}
-                                            inputSearchClass={styles.servicesFilterSearch} isFilterable={false}/>
+                                            inputSearchClass={styles.servicesFilterSearch} isFilterable={false} />
                                     </div>
                                     <div className={styles.servicesFilterWrapper + ` ${styles.card}`}>
                                         <div className={styles.servicesFilterList}>
                                             <SelectList items={getServicesForFilter} tableName={"SERVICES"} tableClassName={styles.filters} multiSelect={true}
-                                                checkBoxWidth="5%" checkedValues={checkedServices} setCheckedValues={onServiceChanges} inputSearchClass={styles.servicesFilterSearch}/>
+                                                checkBoxWidth="5%" checkedValues={checkedServices} setCheckedValues={onServiceChanges} inputSearchClass={styles.servicesFilterSearch} />
                                         </div>
                                     </div>
                                 </div>

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

@@ -1,5 +1,5 @@
 import styles from "./EntrySections.module.sass";
-import React, { useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { SyntaxHighlighter } from "../../UI/SyntaxHighlighter/index";
 import CollapsibleContainer from "../../UI/CollapsibleContainer";
 import FancyTextDisplay from "../../UI/FancyTextDisplay";
@@ -8,6 +8,7 @@ import Checkbox from "../../UI/Checkbox";
 import ProtobufDecoder from "protobuf-decoder";
 import { default as jsonBeautify } from "json-beautify";
 import { default as xmlBeautify } from "xml-formatter";
+import { Utils } from "../../../helpers/Utils"
 
 interface EntryViewLineProps {
     label: string;
@@ -101,6 +102,12 @@ export const EntrySectionContainer: React.FC<EntrySectionContainerProps> = ({ ti
     </CollapsibleContainer>
 }
 
+const MAXIMUM_BYTES_TO_FORMAT = 1000000; // The maximum of chars to highlight in body, in case the response can be megabytes
+const jsonLikeFormats = ['json', 'yaml', 'yml'];
+const xmlLikeFormats = ['xml', 'html'];
+const protobufFormats = ['application/grpc'];
+const supportedFormats = jsonLikeFormats.concat(xmlLikeFormats, protobufFormats);
+
 interface EntryBodySectionProps {
     title: string,
     content: any,
@@ -118,21 +125,21 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
     contentType,
     selector,
 }) => {
-    const MAXIMUM_BYTES_TO_FORMAT = 1000000; // The maximum of chars to highlight in body, in case the response can be megabytes
-    const jsonLikeFormats = ['json', 'yaml', 'yml'];
-    const xmlLikeFormats = ['xml', 'html'];
-    const protobufFormats = ['application/grpc'];
-    const supportedFormats = jsonLikeFormats.concat(xmlLikeFormats, protobufFormats);
-
     const [isPretty, setIsPretty] = useState(true);
-    const [showLineNumbers, setShowLineNumbers] = useState(true);
+    const [showLineNumbers, setShowLineNumbers] = useState(false);
     const [decodeBase64, setDecodeBase64] = useState(true);
 
     const isBase64Encoding = encoding === 'base64';
     const supportsPrettying = supportedFormats.some(format => contentType?.indexOf(format) > -1);
     const [isDecodeGrpc, setIsDecodeGrpc] = useState(true);
+    const [isLineNumbersGreaterThenOne, setIsLineNumbersGreaterThenOne] = useState(true);
 
-    const formatTextBody = (body: any): string => {
+    useEffect(() => {
+        (isLineNumbersGreaterThenOne && isPretty) && setShowLineNumbers(true);
+        !isLineNumbersGreaterThenOne && setShowLineNumbers(false);
+    }, [isLineNumbersGreaterThenOne, isPretty])
+
+    const formatTextBody = useCallback((body: any): string => {
         if (!decodeBase64) return body;
 
         const chunk = body.slice(0, MAXIMUM_BYTES_TO_FORMAT);
@@ -158,15 +165,24 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
                 return jsonBeautify(protobufDecoded, null, 2, 80);
             }
         } catch (error) {
-            if (String(error).includes("More than one message in")){
+            if (String(error).includes("More than one message in")) {
-                if(isDecodeGrpc)
+                if (isDecodeGrpc)
-                setIsDecodeGrpc(false);
+                    setIsDecodeGrpc(false);
+            } else if (String(error).includes("Failed to parse")) {
+                console.warn(error);
             } else {
                 console.error(error);
             }
         }
         return bodyBuf;
-    }
+    }, [isPretty, contentType, isDecodeGrpc, decodeBase64, isBase64Encoding])
+
+    const formattedText = useMemo(() => formatTextBody(content), [formatTextBody, content]);
+
+    useEffect(() => {
+        const lineNumbers = Utils.lineNumbersInString(formattedText);
+        setIsLineNumbersGreaterThenOne(lineNumbers > 1);
+    }, [isPretty, content, showLineNumbers, formattedText]);
 
     return <React.Fragment>
         {content && content?.length > 0 && <EntrySectionContainer
@@ -181,18 +197,19 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
                 {supportsPrettying && <span style={{ marginLeft: '.2rem' }}>Pretty</span>}
 
                 <div style={{ paddingTop: 3, paddingLeft: supportsPrettying ? 20 : 0 }}>
-                    <Checkbox checked={showLineNumbers} onToggle={() => { setShowLineNumbers(!showLineNumbers) }} />
+                    <Checkbox checked={showLineNumbers} onToggle={() => { setShowLineNumbers(!showLineNumbers) }} disabled={!isLineNumbersGreaterThenOne || !decodeBase64} />
                 </div>
-                <span style={{ marginLeft: '.2rem' }}>Line numbers</span>      
+                <span style={{ marginLeft: '.2rem' }}>Line numbers</span>
-                {isBase64Encoding && <div style={{ paddingTop: 3, paddingLeft: 20 }}>
+
+                {isBase64Encoding && <div style={{ paddingTop: 3, paddingLeft: (isLineNumbersGreaterThenOne || supportsPrettying) ? 20 : 0 }}>
                     <Checkbox checked={decodeBase64} onToggle={() => { setDecodeBase64(!decodeBase64) }} />
                 </div>}
                 {isBase64Encoding && <span style={{ marginLeft: '.2rem' }}>Decode Base64</span>}
                 {!isDecodeGrpc && <span style={{ fontSize: '12px', color: '#DB2156', marginLeft: '.8rem' }}>More than one message in protobuf payload is not supported</span>}
-            </div>  
+            </div>
 
-            <SyntaxHighlighter  
+            <SyntaxHighlighter
-                code={formatTextBody(content)}
+                code={formattedText}
                 showLineNumbers={showLineNumbers}
             />
 

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

@@ -54,7 +54,7 @@ const Queryable: React.FC<Props> = ({query, style, iconStyle, className, useTool
                 {flipped && addButton}
                 {children}
                 {!flipped && addButton}
-                {useTooltip && showTooltip && <span data-cy={"QueryableTooltip"} className={QueryableStyle.QueryableTooltip} style={tooltipStyle}>{query}</span>}
+                {useTooltip && showTooltip && (query !== "") && <span data-cy={"QueryableTooltip"} className={QueryableStyle.QueryableTooltip} style={tooltipStyle}>{query}</span>}
         </div>
     );
 };

ui-common/src/components/UI/SyntaxHighlighter/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Lowlight from 'react-lowlight'
 import 'highlight.js/styles/atom-one-light.css'
 import styles from './index.module.sass';
@@ -30,18 +30,23 @@ interface Props {
 }
 
 export const SyntaxHighlighter: React.FC<Props> = ({
-        code,
+    code,
-        showLineNumbers = false,
+    showLineNumbers = false,
-        language = null
+    language = null,
-    }) => {
+}) => {
-    const markers = showLineNumbers ? code.split("\n").map((item, i) => {
+    const [markers, setMarkers] = useState([])
-        return {
-            line: i + 1,
-            className: styles.hljsMarkerLine
-        }
-    }) : [];
 
-    return <div style={{fontSize: ".75rem"}} className={styles.highlighterContainer}><Lowlight language={language ? language : ""} value={code} markers={markers}/></div>;
+    useEffect(() => {
+        const newMarkers = code.split("\n").map((item, i) => {
+            return {
+                line: i + 1,
+                className: styles.hljsMarkerLine
+            }
+        });
+        setMarkers(showLineNumbers ? newMarkers : []);
+    }, [showLineNumbers, code])
+
+    return <div style={{ fontSize: ".75rem" }} className={styles.highlighterContainer}><Lowlight language={language ? language : ""} value={code} markers={markers} /></div>;
 };
 
 export default SyntaxHighlighter;

ui-common/src/helpers/Utils.ts

@@ -3,4 +3,5 @@ const IP_ADDRESS_REGEX = /([0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3})(:([0-9]{
 
 export class Utils {
     static isIpAddress = (address: string): boolean => IP_ADDRESS_REGEX.test(address)
-}
+    static lineNumbersInString = (code:string): number => code.split("\n").length;
+}

ui/package.json

@@ -4,51 +4,48 @@
   "private": true,
   "dependencies": {
     "@craco/craco": "^6.4.3",
-    "@material-ui/core": "^4.11.3",
+    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.2",
+    "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@testing-library/jest-dom": "^5.11.10",
+    "@types/jest": "^26.0.24",
-    "@testing-library/react": "^11.2.6",
+    "@types/node": "^12.20.52",
-    "@testing-library/user-event": "^12.8.3",
+    "@uiw/react-textarea-code-editor": "^1.6.0",
-    "@types/jest": "^26.0.22",
-    "@types/node": "^12.20.10",
-    "@uiw/react-textarea-code-editor": "^1.4.12",
     "@up9/mizu-common": "file:up9-mizu-common-0.0.0.tgz",
     "axios": "^0.25.0",
-    "core-js": "^3.20.2",
+    "core-js": "^3.22.7",
     "craco-babel-loader": "^1.0.3",
-    "highlight.js": "^11.3.1",
+    "highlight.js": "^11.5.1",
     "json-beautify": "^1.1.1",
     "jsonpath": "^1.1.1",
-    "marked": "^4.0.10",
+    "marked": "^4.0.16",
-    "material-ui-popup-state": "^2.0.0",
+    "material-ui-popup-state": "^2.0.1",
-    "mobx": "^6.3.10",
+    "mobx": "^6.6.0",
-    "moment": "^2.29.1",
+    "moment": "^2.29.3",
-    "node-fetch": "^3.1.1",
+    "node-fetch": "^3.2.4",
-    "node-sass": "^6.0.0",
+    "node-sass": "^6.0.1",
     "numeral": "^2.0.6",
     "react": "^17.0.2",
-    "react-copy-to-clipboard": "^5.0.3",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^17.0.2",
     "react-graph-vis": "^1.0.7",
     "react-lowlight": "^3.0.0",
-    "react-router-dom": "^6.2.1",
+    "react-router-dom": "^6.3.0",
     "react-scrollable-feed-virtualized": "^1.4.9",
-    "react-syntax-highlighter": "^15.4.3",
+    "react-syntax-highlighter": "^15.5.0",
-    "react-toastify": "^8.0.3",
+    "react-toastify": "^8.2.0",
     "redoc": "^2.0.0-rc.59",
-    "styled-components": "^5.3.3",
+    "styled-components": "^5.3.5",
-    "typescript": "^4.2.4",
+    "typescript": "^4.7.2",
-    "web-vitals": "^1.1.1",
+    "web-vitals": "^1.1.2",
-    "xml-formatter": "^2.6.0"
+    "xml-formatter": "^2.6.1"
   },
   "devDependencies": {
-    "env-cmd": "^10.0.1",
+    "env-cmd": "^10.1.0",
     "npm-link-shared": "^0.5.6",
     "react-app-rewire-alias": "^1.1.7",
-    "react-dev-utils": "^12.0.0",
+    "react-dev-utils": "^12.0.1",
-    "recoil": "^0.5.2",
+    "react-error-overlay": "6.0.9",
-    "react-error-overlay": "6.0.9"
+    "recoil": "^0.5.2"
   },
   "scripts": {
     "prestart": "../devops/ui-common-pack.sh $PWD",