Alert to slack if release action fails (#1117)

* Trigger mizu ent stg deployment on release

.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 }}

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

@@ -1,5 +1,5 @@
 import styles from "./EntrySections.module.sass";
-import React, { useEffect, 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,12 +125,6 @@ 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(false);
     const [decodeBase64, setDecodeBase64] = useState(true);
@@ -135,10 +136,10 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
 
     useEffect(() => {
         (isLineNumbersGreaterThenOne && isPretty) && setShowLineNumbers(true);
-        !isLineNumbersGreaterThenOne && setShowLineNumbers(false);   
+        !isLineNumbersGreaterThenOne && setShowLineNumbers(false);
     }, [isLineNumbersGreaterThenOne, isPretty])
 
-    const formatTextBody = (body: any): string => {
+    const formatTextBody = useCallback((body: any): string => {
         if (!decodeBase64) return body;
 
         const chunk = body.slice(0, MAXIMUM_BYTES_TO_FORMAT);
@@ -174,7 +175,14 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
             }
         }
         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
@@ -201,9 +209,8 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
             </div>
 
             <SyntaxHighlighter
-                code={formatTextBody(content)}
+                code={formattedText}
                 showLineNumbers={showLineNumbers}
-                setIsLineNumbersGreaterThenOne={setIsLineNumbersGreaterThenOne}
             />
 
         </EntrySectionContainer>}

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

@@ -27,20 +27,17 @@ interface Props {
     code: string;
     showLineNumbers?: boolean;
     language?: string;
-    setIsLineNumbersGreaterThenOne?: (flag: boolean) => void;
 }
 
 export const SyntaxHighlighter: React.FC<Props> = ({
     code,
     showLineNumbers = false,
     language = null,
-    setIsLineNumbersGreaterThenOne
 }) => {
     const [markers, setMarkers] = useState([])
 
     useEffect(() => {
         const newMarkers = code.split("\n").map((item, i) => {
-            setIsLineNumbersGreaterThenOne(i > 1 ? true : false);
             return {
                 line: i + 1,
                 className: styles.hljsMarkerLine

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;
+}