Merge branch 'develop' into feat/ebpf-arm64

acceptanceTests/cypress/e2e/tests/UiTest.js

@@ -269,7 +269,7 @@ function checkRightSideResponseBody() {
         const responseBody = JSON.parse(decodedBody);
 
 
-        const expectdJsonBody = {
+        const expectedJsonBody = {
             args: RegExp({}),
             url: RegExp('http://.*/get'),
             headers: {
@@ -279,27 +279,24 @@ function checkRightSideResponseBody() {
             }
         };
 
-        expect(responseBody.args).to.match(expectdJsonBody.args);
+        const expectedStringInJsonBody = RegExp('/api/v1/namespaces/.*/services/.*/proxy/get');
-        expect(responseBody.url).to.match(expectdJsonBody.url);
+        
-        expect(responseBody.headers['User-Agent']).to.match(expectdJsonBody.headers['User-Agent']);
+
-        expect(responseBody.headers['Accept-Encoding']).to.match(expectdJsonBody.headers['Accept-Encoding']);
+        expect(responseBody.args).to.match(expectedJsonBody.args);
-        expect(responseBody.headers['X-Forwarded-Uri']).to.match(expectdJsonBody.headers['X-Forwarded-Uri']);
+        expect(responseBody.url).to.match(expectedJsonBody.url);
+        expect(responseBody.headers['User-Agent']).to.match(expectedJsonBody.headers['User-Agent']);
+        expect(responseBody.headers['Accept-Encoding']).to.match(expectedJsonBody.headers['Accept-Encoding']);
+        expect(responseBody.headers['X-Forwarded-Uri']).to.match(expectedJsonBody.headers['X-Forwarded-Uri']);
 
         cy.get(`${Cypress.env('bodyJsonClass')}`).should('have.text', encodedBody);
+        cy.get(`[data-cy="lineNumbersCheckBoxInput"]`).should('be.disabled');
+
         clickCheckbox('Decode Base64');
+        cy.get(`[data-cy="lineNumbersCheckBoxInput"]`).should('not.be.disabled');
 
         cy.get(`${Cypress.env('bodyJsonClass')} > `).its('length').should('be.gt', 1).then(linesNum => {
             cy.get(`${Cypress.env('bodyJsonClass')} > >`).its('length').should('be.gt', linesNum).then(jsonItemsNum => {
-                // checkPrettyAndLineNums(decodedBody);
+                checkOnlyLineNumberes(jsonItemsNum, expectedStringInJsonBody);
-
-                //clickCheckbox('Line numbers');
-                //checkPrettyOrNothing(jsonItemsNum, decodedBody);
-
-                // clickCheckbox('Pretty');
-                // checkPrettyOrNothing(jsonItemsNum, decodedBody);
-                //
-                // clickCheckbox('Line numbers');
-                // checkOnlyLineNumberes(jsonItemsNum, decodedBody);
             });
         });
     });
@@ -309,37 +306,9 @@ function clickCheckbox(type) {
     cy.contains(`${type}`).prev().children().click();
 }
 
-function checkPrettyAndLineNums(decodedBody) {
-    decodedBody = decodedBody.replaceAll(' ', '');
-    cy.get(`${Cypress.env('bodyJsonClass')} >`).then(elements => {
-        const lines = Object.values(elements);
-        lines.forEach((line, index) => {
-            if (line.getAttribute) {
-                const cleanLine = getCleanLine(line);
-                const currentLineFromDecodedText = decodedBody.substring(0, cleanLine.length);
-
-                expect(cleanLine).to.equal(currentLineFromDecodedText, `expected the text in line number ${index + 1} to match the text that generated by the base64 decoding`)
-
-                decodedBody = decodedBody.substring(cleanLine.length);
-            }
-        });
-    });
-}
-
-function getCleanLine(lineElement) {
-    return (lineElement.innerText.substring(0, lineElement.innerText.length - 1)).replaceAll(' ', '');
-}
-
-function checkPrettyOrNothing(jsonItems, decodedBody) {
-    cy.get(`${Cypress.env('bodyJsonClass')} > `).should('have.length', jsonItems).then(text => {
-        const json = text.text();
-        expect(json).to.equal(decodedBody);
-    });
-}
-
 function checkOnlyLineNumberes(jsonItems, decodedText) {
-    cy.get(`${Cypress.env('bodyJsonClass')} >`).should('have.length', 1).and('have.text', decodedText);
+    cy.get(`${Cypress.env('bodyJsonClass')} > >`).should('have.length', jsonItems);
-    cy.get(`${Cypress.env('bodyJsonClass')} > >`).should('have.length', jsonItems)
+    cy.get(`${Cypress.env('bodyJsonClass')} >`).contains(decodedText);
 }
 
 function serviceMapCheck() {

cli/cmd/installRunner.go

@@ -25,7 +25,7 @@ func runMizuInstall() {
 	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\tmizu install -o | kubectl apply -n mizu -f -")
 	sb.WriteString("\n\nor use helm chart as described in https://getmizu.io/docs/installing-mizu/centralized-installation\n")
 
 	fmt.Print(sb.String())

ui-common/package.json

@@ -26,7 +26,7 @@
     "@craco/craco": "^6.4.3",
     "@types/jest": "^26.0.24",
     "@types/node": "^12.20.54",
-    "node-sass": "^6.0.1",
+    "sass": "^1.52.3",
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^17.0.2",

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

@@ -3,8 +3,8 @@ import styles from './EntriesList.module.sass';
 import ScrollableFeedVirtualized from "react-scrollable-feed-virtualized";
 import Moment from 'moment';
 import {EntryItem} from "../EntryListItem/EntryListItem";
-import down from "../assets/downImg.svg";
+import down from "assets/downImg.svg";
-import spinner from '../assets/spinner.svg';
+import spinner from 'assets/spinner.svg';
 import {RecoilState, useRecoilState, useRecoilValue, useSetRecoilState} from "recoil";
 import entriesAtom from "../../recoil/entries";
 import queryAtom from "../../recoil/query";

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

@@ -12,7 +12,7 @@ import TrafficViewerApiAtom from "../../recoil/TrafficViewerApi/atom";
 import queryAtom from "../../recoil/query/atom";
 import useWindowDimensions, { useRequestTextByWidth } from "../../hooks/WindowDimensionsHook";
 import { TOAST_CONTAINER_ID } from "../../configs/Consts";
-import spinner from "../assets/spinner.svg";
+import spinner from "assets/spinner.svg";
 
 const useStyles = makeStyles(() => ({
     entryTitle: {

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

@@ -192,17 +192,17 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
         >
             <div style={{ display: 'flex', alignItems: 'center', alignContent: 'center', margin: "5px 0" }}>
                 {supportsPrettying && <div style={{ paddingTop: 3 }}>
-                    <Checkbox checked={isPretty} onToggle={() => { setIsPretty(!isPretty) }} />
+                    <Checkbox checked={isPretty} onToggle={() => { setIsPretty(!isPretty) }} data-cy="prettyCheckBoxInput"/>
                 </div>}
                 {supportsPrettying && <span style={{ marginLeft: '.2rem' }}>Pretty</span>}
 
                 <div style={{ paddingTop: 3, paddingLeft: supportsPrettying ? 20 : 0 }}>
-                    <Checkbox checked={showLineNumbers} onToggle={() => { setShowLineNumbers(!showLineNumbers) }} disabled={!isLineNumbersGreaterThenOne || !decodeBase64} />
+                    <Checkbox checked={showLineNumbers} onToggle={() => { setShowLineNumbers(!showLineNumbers) }} disabled={!isLineNumbersGreaterThenOne || !decodeBase64} data-cy="lineNumbersCheckBoxInput"/>
                 </div>
                 <span style={{ marginLeft: '.2rem' }}>Line numbers</span>
 
                 {isBase64Encoding && <div style={{ paddingTop: 3, paddingLeft: (isLineNumbersGreaterThenOne || supportsPrettying) ? 20 : 0 }}>
-                    <Checkbox checked={decodeBase64} onToggle={() => { setDecodeBase64(!decodeBase64) }} />
+                    <Checkbox checked={decodeBase64} onToggle={() => { setDecodeBase64(!decodeBase64) }}  data-cy="decodeBase64CheckboxInput"/>
                 </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>}

ui-common/src/components/EntryDetailed/assets/spinner.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<circle cx="50" cy="50" fill="none" stroke="#1d3f72" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" transform="rotate(275.903 50 50)">
+  <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
+</circle>
+<!-- [ldio] generated by https://loading.io/ --></svg>

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

@@ -4,15 +4,15 @@ import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
 import styles from './EntryListItem.module.sass';
 import StatusCode, {getClassification, StatusCodeClassification} from "../UI/StatusCode/StatusCode";
 import Protocol, {ProtocolInterface} from "../UI/Protocol/Protocol"
-import eBPFLogo from './assets/lock.svg';
+import eBPFLogo from 'assets/lock.svg';
 import {Summary} from "../UI/Summary/Summary";
 import Queryable from "../UI/Queryable/Queryable";
-import ingoingIconSuccess from "./assets/ingoing-traffic-success.svg"
+import ingoingIconSuccess from "assets/ingoing-traffic-success.svg"
-import ingoingIconFailure from "./assets/ingoing-traffic-failure.svg"
+import ingoingIconFailure from "assets/ingoing-traffic-failure.svg"
-import ingoingIconNeutral from "./assets/ingoing-traffic-neutral.svg"
+import ingoingIconNeutral from "assets/ingoing-traffic-neutral.svg"
-import outgoingIconSuccess from "./assets/outgoing-traffic-success.svg"
+import outgoingIconSuccess from "assets/outgoing-traffic-success.svg"
-import outgoingIconFailure from "./assets/outgoing-traffic-failure.svg"
+import outgoingIconFailure from "assets/outgoing-traffic-failure.svg"
-import outgoingIconNeutral from "./assets/outgoing-traffic-neutral.svg"
+import outgoingIconNeutral from "assets/outgoing-traffic-neutral.svg"
 import {useRecoilState} from "recoil";
 import focusedEntryIdAtom from "../../recoil/focusedEntryId";
 import queryAtom from "../../recoil/query";

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

@@ -4,8 +4,8 @@ import {Button, Grid, Modal, Box, Typography, Backdrop, Fade, Divider, debounce}
 import CodeEditor from '@uiw/react-textarea-code-editor';
 import MenuBookIcon from '@mui/icons-material/MenuBook';
 import { SyntaxHighlighter } from "../UI/SyntaxHighlighter";
-import filterUIExample1 from "../TrafficViewer/assets/filter-ui-example-1.png"
+import filterUIExample1 from "assets/filter-ui-example-1.png"
-import filterUIExample2 from "../TrafficViewer/assets/filter-ui-example-2.png"
+import filterUIExample2 from "assets/filter-ui-example-2.png"
 import variables from '../../variables.module.scss';
 import { useRecoilState, useRecoilValue } from "recoil";
 import queryAtom from "../../recoil/query";

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

@@ -1,6 +1,6 @@
 import React from "react";
-import collapsedImg from "../assets/collapsed.svg";
+import collapsedImg from "assets/collapsed.svg";
-import expandedImg from "../assets/expanded.svg";
+import expandedImg from "assets/expanded.svg";
 import styles from "./CollapsibleContainer.module.sass";
 
 interface Props {

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import duplicateImg from "../assets/duplicate.svg";
+import duplicateImg from "assets/duplicate.svg";
 import styles from './FancyTextDisplay.module.sass';
 
 interface Props {

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

@@ -5,8 +5,9 @@ const DEFUALT_LINK = "https://getmizu.io/docs"
 
 interface LinkProps {
     link?: string,
-    className?: string
+    className?: string,
-    title?: string
+    title?: string,
+    children?: React.ReactNode
 }
 
 export const Link: React.FC<LinkProps> = ({ link, className, title, children }) => {

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

@@ -1,5 +1,5 @@
 import React from "react";
-import circleImg from '../assets/dotted-circle.svg';
+import circleImg from 'assets/dotted-circle.svg';
 import styles from './NoDataMessage.module.sass'
 
 export interface Props {

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

@@ -4,7 +4,7 @@ import { Autocomplete } from "@mui/material";
 import { Checkbox, TextField } from "@mui/material";
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
-import DefaultIconDown from "DefaultIconDown.svg";
+import DefaultIconDown from "assets/DefaultIconDown.svg";
 import styles from "./SearchableDropdown.module.sass";
 
 interface SearchableDropdownProps {

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

@@ -1,4 +1,4 @@
-import {ReactComponent as DefaultIconDown} from '../assets/default_icon_down.svg';
+import {ReactComponent as DefaultIconDown} from './assets/defaultIconDown.svg';
 import {MenuItem, Select as MUISelect, SelectProps as MUISelectProps} from '@mui/material';
 import React from 'react';
 import styles from './Select.module.sass';

ui-common/src/components/UI/Select/assets/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/StatusBar/StatusBar.tsx

@@ -1,8 +1,8 @@
 import style from './StatusBar.module.sass';
 import React, {useState} from "react";
-import warningIcon from '../assets/warning_icon.svg';
+import warningIcon from 'assets/warning_icon.svg';
-import failIcon from '../assets/failed.svg';
+import failIcon from 'assets/failed.svg';
-import successIcon from '../assets/success.svg';
+import successIcon from 'assets/success.svg';
 import {useRecoilValue} from "recoil";
 import tappingStatusAtom, {tappingStatusDetails} from "../../../recoil/tappingStatus";
 import Tooltip from "../Tooltip/Tooltip";

ui-common/src/components/UI/assets/default_icon_down.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="7.237" height="7.237" viewBox="0 0 7.237 7.237" fill="white">
-    <path id="icon_down" d="M5.117 0H3.07v3.07H0v2.047h5.117V0z" transform="rotate(45 1.809 4.367)"/>
-</svg>

ui-common/src/components/assets/icon-next.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
-    <g id="prefix__icon_expand" fill="#627ef7" transform="rotate(0 11 11)">
-        <path id="prefix__icon_down" d="M5.117 0H3.07v3.07H0v2.047h5.117V0z" transform="rotate(-45 16.54 -2.201)"/>
-    </g>
-</svg>

ui-common/src/components/assets/icon-prev.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
-    <g id="prefix__icon_expand" fill="#627ef7" transform="rotate(180 11 11)">
-        <path id="prefix__icon_down" d="M5.117 0H3.07v3.07H0v2.047h5.117V0z" transform="rotate(-45 16.54 -2.201)"/>
-    </g>
-</svg>

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

@@ -1,10 +1,10 @@
 import { Box, Fade, FormControl, Modal, Backdrop } from "@mui/material";
 import { useCallback, useEffect, useState } from "react";
 import { RedocStandalone } from "redoc";
-import closeIcon from "./assets/closeIcon.svg";
+import closeIcon from "assets/closeIcon.svg";
 import { toast } from 'react-toastify';
 import style from './OasModal.module.sass';
-import openApiLogo from './assets/openApiLogo.png'
+import openApiLogo from 'assets/openApiLogo.png'
 import { redocThemeOptions } from "./redocThemeOptions";
 import React from "react";
 import { TOAST_CONTAINER_ID } from "../../../configs/Consts";

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

@@ -1,15 +1,15 @@
 import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Box, Fade, Modal, Backdrop, Button } from "@mui/material";
 import { toast } from "react-toastify";
-import spinnerImg from '../../assets/spinner.svg';
+import spinnerImg from 'assets/spinner.svg';
 import Graph from "react-graph-vis";
 import debounce from 'lodash/debounce';
 import ServiceMapOptions from './ServiceMapOptions'
 import { useCommonStyles } from "../../../helpers/commonStyle";
-import refreshIcon from "./assets/refresh.svg";
+import refreshIcon from "assets/refresh.svg";
-import filterIcon from "./assets/filter-icon.svg";
+import filterIcon from "assets/filter-icon.svg";
-import filterIconClicked from "./assets/filter-icon-clicked.svg";
+import filterIconClicked from "assets/filter-icon-clicked.svg";
-import closeIcon from "./assets/close.svg"
+import closeIcon from "assets/close.svg"
 import styles from './ServiceMapModal.module.sass'
 import SelectList from "../../UI/SelectList/SelectList";
 import { GraphData, ServiceMapGraph } from "./ServiceMapModalTypes"

ui-common/src/components/modals/ServiceMapModal/assets/spinner.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<circle cx="50" cy="50" fill="none" stroke="#1d3f72" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" transform="rotate(275.903 50 50)">
+  <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
+</circle>
+<!-- [ldio] generated by https://loading.io/ --></svg>

ui/package.json

@@ -23,7 +23,7 @@
     "mobx": "^6.6.0",
     "moment": "^2.29.3",
     "node-fetch": "^3.2.4",
-    "node-sass": "^6.0.1",
+    "sass": "^1.52.3",
     "numeral": "^2.0.6",
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.1.0",