| Status | +Available | +
| Messages | +{analyzeStatus?.sentCount} | +
| Status | +Processing | +
| Messages | +{analyzeStatus?.sentCount} | +
| Please allow a few minutes for the analysis to complete | +
| Status | +Waiting for traffic | +
| Messages | +{analyzeStatus?.sentCount} | +
+
+
+
);
+}
diff --git a/ui-common/src/components/AnalyzeButton/logo_up9.svg b/ui-common/src/components/AnalyzeButton/logo_up9.svg
new file mode 100644
index 000000000..4446859b5
--- /dev/null
+++ b/ui-common/src/components/AnalyzeButton/logo_up9.svg
@@ -0,0 +1,39 @@
+
diff --git a/ui/src/components/OasModal/OasModal.module.sass b/ui-common/src/components/OasModal/OasModal.module.sass
similarity index 94%
rename from ui/src/components/OasModal/OasModal.module.sass
rename to ui-common/src/components/OasModal/OasModal.module.sass
index 2a7d3d9a3..8cef4c07d 100644
--- a/ui/src/components/OasModal/OasModal.module.sass
+++ b/ui-common/src/components/OasModal/OasModal.module.sass
@@ -25,5 +25,4 @@
.redoc
height: 98%
- overflow-y: scroll
-
+ overflow-y: scroll
\ No newline at end of file
diff --git a/ui/src/components/OasModal/OasModal.tsx b/ui-common/src/components/OasModal/OasModal.tsx
similarity index 91%
rename from ui/src/components/OasModal/OasModal.tsx
rename to ui-common/src/components/OasModal/OasModal.tsx
index f64558931..f2d91e1db 100644
--- a/ui/src/components/OasModal/OasModal.tsx
+++ b/ui-common/src/components/OasModal/OasModal.tsx
@@ -1,13 +1,13 @@
import { Box, Fade, FormControl, MenuItem, Modal, Backdrop, ListSubheader } from "@material-ui/core";
import { useCallback, useEffect, useState } from "react";
import { RedocStandalone } from "redoc";
-import Api from "../../helpers/api";
-import { Select } from "../UI/Select";
-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 { Select } from "../UI/Select";
const modalStyle = {
position: 'absolute',
@@ -23,10 +23,9 @@ const modalStyle = {
color: '#000',
};
-const api = Api.getInstance();
const ipAddressWithPortRegex = new RegExp('([0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}):([0-9]{1,5})');
-const OasModal = ({ openModal, handleCloseModal }) => {
+const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService}) => {
const [oasServices, setOasServices] = useState([] as string[])
const [selectedServiceName, setSelectedServiceName] = useState("");
const [selectedServiceSpec, setSelectedServiceSpec] = useState(null);
@@ -40,7 +39,7 @@ const OasModal = ({ openModal, handleCloseModal }) => {
return
}
try {
- const data = await api.getOasByService(selectedService);
+ const data = await getOasByService(selectedService);
setSelectedServiceSpec(data);
} catch (e) {
toast.error("Error occurred while fetching service OAS spec");
@@ -71,7 +70,7 @@ const OasModal = ({ openModal, handleCloseModal }) => {
useEffect(() => {
(async () => {
try {
- const services = await api.getOasServices();
+ const services = await getOasServices();
resolvedArrayBuilder(services);
setOasServices(services);
} catch (e) {
@@ -107,7 +106,7 @@ const OasModal = ({ openModal, handleCloseModal }) => {
id="service-select"
placeholder="Show OAS"
value={selectedServiceName}
- onChange={onSelectedOASService}
+ onChangeCb={onSelectedOASService}
>
+
+
+
{isLoadingTop &&
- ;
+ ;
};
diff --git a/ui/src/components/EntryDetailed.tsx b/ui-common/src/components/TrafficViewer/EntryDetailed.tsx
similarity index 85%
rename from ui/src/components/EntryDetailed.tsx
rename to ui-common/src/components/TrafficViewer/EntryDetailed.tsx
index 827efc951..7d6aadbb8 100644
--- a/ui/src/components/EntryDetailed.tsx
+++ b/ui-common/src/components/TrafficViewer/EntryDetailed.tsx
@@ -2,13 +2,15 @@ import React, {useEffect, useState} from "react";
import EntryViewer from "./EntryDetailed/EntryViewer";
import {EntryItem} from "./EntryListItem/EntryListItem";
import {makeStyles} from "@material-ui/core";
-import Protocol from "./UI/Protocol"
-import Queryable from "./UI/Queryable";
+import Protocol from "../UI/Protocol"
+import Queryable from "../UI/Queryable";
import {toast} from "react-toastify";
-import {useRecoilValue} from "recoil";
-import focusedEntryIdAtom from "../recoil/focusedEntryId";
-import Api from "../helpers/api";
-import queryAtom from "../recoil/query";
+import {RecoilState, useRecoilState, useRecoilValue} from "recoil";
+import focusedEntryIdAtom from "../../recoil/focusedEntryId";
+import trafficViewerApi from "../../recoil/TrafficViewerApi";
+import TrafficViewerApi from "./TrafficViewerApi";
+import TrafficViewerApiAtom from "../../recoil/TrafficViewerApi/atom";
+import queryAtom from "../../recoil/query/atom";
const useStyles = makeStyles(() => ({
entryTitle: {
@@ -78,12 +80,14 @@ const EntrySummary: React.FC
@@ -124,7 +124,7 @@ export const EntriesList: React.FC = ({listEntryREF, onSnapBro
title="Fetch old records"
className={`${styles.btnOld} ${!scrollbarVisible && leftOffTop > 0 ? styles.showButton : styles.hideButton}`}
onClick={(_) => {
- ws.close();
+ trafficViewerApi.webSocket.close()
getOldEntries();
}}>
@@ -152,5 +152,5 @@ export const EntriesList: React.FC = ({listEntryREF, onSnapBro
{startTime !== 0 &&
Started listening at {Moment(truncatedTimestamp ? truncatedTimestamp : startTime).utc().format('MM/DD/YYYY, h:mm:ss.SSS A')}
}
| Key: | {rule.Key} |
| Value: | {rule.Value} |
= ({entry, style, headingMode}) =>
+
+
+ default:
+ return
+
+
+ }
+ }
+
+ const getConnectionTitle = () => {
+ switch (wsConnection) {
+ case WsConnectionStatus.Connected:
+ return "streaming live traffic"
+ default:
+ return "streaming paused";
+ }
+ }
+
+ const onSnapBrokenEvent = () => {
+ setIsSnappedToBottom(false);
+ if (wsConnection === WsConnectionStatus.Connected) {
+ trafficViewerApiProp.webSocket.close()
+ }
+ }
+
+ return (
+
+ {tappingStatus && isShowStatusBar &&
+ );
+};
+
+const MemoiedTrafficViewer = React.memo(TrafficViewer)
+const TrafficViewerContainer: React.FC
+
+ {
+ 
+ 
+
+ {actionButtons}
+
+ {getConnectionTitle()}
+ {getConnectionIndicator()}
+
+
+
}
+
+
+
+
+
+ {focusedEntryId &&
+
+ onToggle(event.target.checked)}/>
+
+ );
+};
+
+export default Checkbox;
diff --git a/ui/src/components/UI/CollapsibleContainer.tsx b/ui-common/src/components/UI/CollapsibleContainer.tsx
similarity index 58%
rename from ui/src/components/UI/CollapsibleContainer.tsx
rename to ui-common/src/components/UI/CollapsibleContainer.tsx
index c59fcb6be..7a1ca1819 100644
--- a/ui/src/components/UI/CollapsibleContainer.tsx
+++ b/ui-common/src/components/UI/CollapsibleContainer.tsx
@@ -1,7 +1,7 @@
import React from "react";
-import collapsedImg from "../assets/collapsed.svg";
-import expandedImg from "../assets/expanded.svg";
-import "./style/CollapsibleContainer.sass";
+import collapsedImg from "assets/collapsed.svg";
+import expandedImg from "assets/expanded.svg";
+import styles from "./style/CollapsibleContainer.module.sass";
interface Props {
title: string | React.ReactNode,
@@ -12,22 +12,21 @@ interface Props {
}
const CollapsibleContainer: React.FC
+ className={`${styles.CollapsibleContainerHeader} ${stickyHeader ? `${styles.CollapsibleContainerHeaderSticky}` : ""}
+ ${expanded ? `${styles.CollapsibleContainerHeaderExpanded}` : ""}`}>
{
React.isValidElement(title)?
{title} :
- 
diff --git a/ui-common/src/components/UI/CustomModal.tsx b/ui-common/src/components/UI/CustomModal.tsx
new file mode 100644
index 000000000..7c523a68b
--- /dev/null
+++ b/ui-common/src/components/UI/CustomModal.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { makeStyles, Modal, Backdrop, Fade, Box } from '@material-ui/core';
+import {useCommonStyles} from "../../helpers/commonStyle";
+
+const useStyles = makeStyles({
+ modal: {
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center"
+ },
+ modalContents: {
+ borderRadius: "5px",
+ outline: "none",
+ minWidth: "300px",
+ backgroundColor: "rgb(255, 255, 255)",
+ },
+ modalBackdrop :{
+ background : "rgba(24, 51, 121, 0.8)"
+ }
+});
+
+export interface CustomModalProps {
+ open: boolean;
+ children: React.ReactElement | React.ReactElement[];
+ disableBackdropClick?: boolean;
+ onClose?: () => void;
+ className?: string;
+ isPadding?: boolean;
+ isWide? :boolean;
+}
+
+const CustomModal: React.FunctionComponent = ({ open = false, onClose, disableBackdropClick = false, children, className}) => {
+ const classes = useStyles({});
+ const globals = useCommonStyles().modal
+
+
+ const onModalClose = (reason) => {
+ if(reason === 'backdropClick' && disableBackdropClick)
+ return;
+ onClose();
+ }
+
+ return onModalClose(reason)}
+ className={`${classes.modal}`}
+ closeAfterTransition
+ BackdropComponent={Backdrop}
+ BackdropProps={{
+ timeout: 500,
+ className:`${classes.modalBackdrop}`
+ }}>
+
+}
+
+export default CustomModal;
\ No newline at end of file
diff --git a/ui/src/components/UI/FancyTextDisplay.tsx b/ui-common/src/components/UI/FancyTextDisplay.tsx
similarity index 73%
rename from ui/src/components/UI/FancyTextDisplay.tsx
rename to ui-common/src/components/UI/FancyTextDisplay.tsx
index 10dc49f1c..23802f4ef 100644
--- a/ui/src/components/UI/FancyTextDisplay.tsx
+++ b/ui-common/src/components/UI/FancyTextDisplay.tsx
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
-import duplicateImg from "../assets/duplicate.svg";
-import './style/FancyTextDisplay.sass';
+import duplicateImg from "assets/duplicate.svg";
+import styles from './style/FancyTextDisplay.module.sass';
interface Props {
text: string | number,
@@ -33,21 +33,21 @@ const FancyTextDisplay: React.FC = ({text, className, isPossibleToCopy =
return () => clearTimeout(timer);
}, [showCopiedNotification]);
- const textElement = {text};
+ const textElement = {text};
const copyButton = isPossibleToCopy && text ?
- {showCopiedNotification && Copied}
+ {showCopiedNotification && Copied}
: null;
return (
= ({delay}) => {
setTimeout(() => {
if(isRelevant)
setIsVisible(true);
- }, delay ?? SpinnerShowDelayMs);
+ }, delay || SpinnerShowDelayMs);
return () => isRelevant = false;
}, [delay]);
- return
{title}
+ {title}
+
+
+ {children}
+
+
+
+ setShowTooltip(true)}
onMouseLeave={ e => setShowTooltip(false)}
@@ -55,7 +55,7 @@ const FancyTextDisplay: React.FC
-
+ return
+
};
diff --git a/ui/src/components/UI/Protocol.tsx b/ui-common/src/components/UI/Protocol.tsx
similarity index 100%
rename from ui/src/components/UI/Protocol.tsx
rename to ui-common/src/components/UI/Protocol.tsx
diff --git a/ui/src/components/UI/Queryable.tsx b/ui-common/src/components/UI/Queryable.tsx
similarity index 68%
rename from ui/src/components/UI/Queryable.tsx
rename to ui-common/src/components/UI/Queryable.tsx
index 778428a9e..a420eaeee 100644
--- a/ui/src/components/UI/Queryable.tsx
+++ b/ui-common/src/components/UI/Queryable.tsx
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import AddCircleIcon from '@material-ui/icons/AddCircle';
-import './style/Queryable.sass';
+import QueryableStyle from './style/Queryable.module.sass';
import {useRecoilState} from "recoil";
import queryAtom from "../../recoil/query";
@@ -39,26 +39,21 @@ const Queryable: React.FC = ({query, style, iconStyle, className, useTool
const addButton = query ?
+ style={iconStyle}>
: null;
return (
-
setShowTooltip(true)}
- onMouseLeave={ e => setShowTooltip(false)}
- >
- {flipped && addButton}
- {children}
- {!flipped && addButton}
- {useTooltip && showTooltip && {query}}
+ = ({
label,
value,
- onChange,
+ onChangeCb,
transformDisplay,
ellipsis = true,
multiple,
@@ -53,9 +53,9 @@ export const Select: React.FC = ({
}) => {
let _value = value;
- const _onChange = (_, item) => {
+ const _onChange = ( item: { props: { value: any; }; }) => {
const value = item.props.value;
- value === ALL_KEY ? onChange(ALL_KEY) : onChange(value);
+ value === ALL_KEY ? onChangeCb(ALL_KEY) : onChangeCb(value);
}
if (multiple && (!_value || _value.length === 0)) _value = [ALL_KEY];
@@ -78,7 +78,7 @@ export const Select: React.FC = ({
value: _value,
renderValue,
multiple,
- onChange: _onChange,
+ onChange: (e,data) => _onChange(data),
})}
>
{multiple && }
diff --git a/ui/src/components/UI/StatusBar.tsx b/ui-common/src/components/UI/StatusBar.tsx
similarity index 75%
rename from ui/src/components/UI/StatusBar.tsx
rename to ui-common/src/components/UI/StatusBar.tsx
index 092f565c4..4e6265d08 100644
--- a/ui/src/components/UI/StatusBar.tsx
+++ b/ui-common/src/components/UI/StatusBar.tsx
@@ -1,8 +1,8 @@
-import './style/StatusBar.sass';
+import style from './style/StatusBar.module.sass';
import React, {useState} from "react";
-import warningIcon from '../assets/warning_icon.svg';
-import failIcon from '../assets/failed.svg';
-import successIcon from '../assets/success.svg';
+import warningIcon from 'assets/warning_icon.svg';
+import failIcon from 'assets/failed.svg';
+import successIcon from 'assets/success.svg';
import {useRecoilValue} from "recoil";
import tappingStatusAtom, {tappingStatusDetails} from "../../recoil/tappingStatus";
@@ -16,10 +16,10 @@ export const StatusBar = () => {
const [expandedBar, setExpandedBar] = useState(false);
const {uniqueNamespaces, amountOfPods, amountOfTappedPods, amountOfUntappedPods} = useRecoilValue(tappingStatusDetails);
- return
setShowTooltip(true)} onMouseLeave={ e => setShowTooltip(false)}>
+ {flipped && addButton}
+ {children}
+ {!flipped && addButton}
+ {useTooltip && showTooltip && {query}}
);
};
diff --git a/ui/src/components/UI/Select.tsx b/ui-common/src/components/UI/Select.tsx
similarity index 87%
rename from ui/src/components/UI/Select.tsx
rename to ui-common/src/components/UI/Select.tsx
index dd5e9e822..de1a8eebe 100644
--- a/ui/src/components/UI/Select.tsx
+++ b/ui-common/src/components/UI/Select.tsx
@@ -1,4 +1,4 @@
-import {ReactComponent as DefaultIconDown} from '../assets/default_icon_down.svg';
+import {ReactComponent as DefaultIconDown} from './assets/default_icon_down.svg';
import {MenuItem, Select as MUISelect} from '@material-ui/core';
import React from 'react';
import {SelectProps as MUISelectProps} from '@material-ui/core/Select/Select';
@@ -27,20 +27,20 @@ const defaultProps = {
};
export interface SelectProps extends MUISelectProps {
- onChange: (string) => void;
+ onChangeCb: (arg0: string) => void;
value: string | string[];
ellipsis?: boolean;
labelOnTop?: boolean;
className?: string;
labelClassName?: string;
trimItemsWhenMultiple?: boolean;
- transformDisplay?: (string) => string;
+ transformDisplay?: (arg0: string) => string;
}
export const Select: React.FC setExpandedBar(true)} onMouseLeave={() => setExpandedBar(false)}>
-
- {tappingStatus.some(pod => !pod.isTapped) && 
}
-
+ return }>
- ;
-}
-
-export default AppChooser;
diff --git a/ui/src/EntApp.tsx b/ui/src/EntApp.tsx
deleted file mode 100644
index 3419ce228..000000000
--- a/ui/src/EntApp.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import './App.sass';
-import AppSwitchRoutes from "./components/AppSwitchRoutes";
-import {BrowserRouter} from "react-router-dom";
-
-const EntApp = () => {
-
- return (
- = ({analyzeStatus}) =>
return (
- }>
- } />
- } /> {/*todo: set settings component*/}
-
- setIsFirstLogin(true)}/>}/>
-
-}
-
-export default AppSwitchRoutes;
diff --git a/ui/src/components/Header/EntHeader.tsx b/ui/src/components/Header/EntHeader.tsx
deleted file mode 100644
index 3f79225a2..000000000
--- a/ui/src/components/Header/EntHeader.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, {useEffect, useState} from "react";
-import logo from '../assets/MizuEntLogo.svg';
-import './Header.sass';
-import userImg from '../assets/user-circle.svg';
-import settingImg from '../assets/settings.svg';
-import {Menu, MenuItem} from "@material-ui/core";
-import PopupState, {bindMenu, bindTrigger} from "material-ui-popup-state";
-import logoutIcon from '../assets/logout.png';
-import {SettingsModal} from "../SettingsModal/SettingModal";
-import Api from "../../helpers/api";
-import {toast} from "react-toastify";
-import {useSetRecoilState} from "recoil";
-import entPageAtom, {Page} from "../../recoil/entPage";
-import {useNavigate} from "react-router-dom";
-
-const api = Api.getInstance();
-
-interface EntHeaderProps {
- isFirstLogin: boolean;
- setIsFirstLogin: (flag: boolean) => void
-}
-
-export const EntHeader: React.FC = ({isFirstLogin, setIsFirstLogin}) => {
- const navigate = useNavigate();
- const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
-
- useEffect(() => {
- if(isFirstLogin) {
- setIsSettingsModalOpen(true)
- }
- }, [isFirstLogin])
-
- const onSettingsModalClose = () => {
- setIsSettingsModalOpen(false);
- setIsFirstLogin(false);
- }
-
- return
- {(popupState) => (
-
- 
-
-
- )}
- );
-}
diff --git a/ui/src/components/Header/Header.tsx b/ui/src/components/Header/Header.tsx
index 84f0ccd3c..784721cda 100644
--- a/ui/src/components/Header/Header.tsx
+++ b/ui/src/components/Header/Header.tsx
@@ -1,6 +1,6 @@
import React from "react";
import {AuthPresentation} from "../AuthPresentation/AuthPresentation";
-import {AnalyzeButton} from "../AnalyzeButton/AnalyzeButton";
+import {AnalyzeButton} from "@up9/mizu-common"
import logo from '../assets/Mizu-logo.svg';
import './Header.sass';
diff --git a/ui/src/components/OasModal/redocThemeOptions.ts b/ui/src/components/OasModal/redocThemeOptions.ts
deleted file mode 100644
index 2c6580609..000000000
--- a/ui/src/components/OasModal/redocThemeOptions.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-export const redocThemeOptions = {
- theme:{
- codeBlock:{
- backgroundColor:"#11171a",
- },
- colors:{
- responses:{
- error:{
- tabTextColor:"#1b1b29"
- },
- info:{
- tabTextColor:"#1b1b29",
- },
- success:{
- tabTextColor:"#0c0b1a"
- },
- },
- text:{
- primary:"#1b1b29",
- secondary:"#4d4d4d"
- }
- },
- rightPanel:{
- backgroundColor:"#253237",
- },
- sidebar:{
- backgroundColor:"#ffffff"
- },
- typography:{
- code:{
- color:"#0c0b1a"
- }
- }
- }
- }
\ No newline at end of file
diff --git a/ui/src/components/Pages/AuthPage/AuthBasePage.sass b/ui/src/components/Pages/AuthPage/AuthBasePage.sass
deleted file mode 100644
index 9407a42d1..000000000
--- a/ui/src/components/Pages/AuthPage/AuthBasePage.sass
+++ /dev/null
@@ -1,59 +0,0 @@
-@import "src/variables.module"
-
-.authContainer
- height: 100vh
- width: 100vw
- background-size: cover
- float: left
- display: flex
- align-items: center
- flex-flow: column
-
- .authHeader
- margin: 80px 0 120px 0
- width: 100%
- display: flex
- align-items: center
- justify-content: center
-
- .authFooter
- margin-top: 3%
-
-.centeredForm
- background-color: $main-background-color
- border-radius: 5px
- box-shadow: 0 0 20px -4px $light-blue-color
-
- padding: 35px
- max-width: 350px
- text-align: center
- display: flex
- flex-direction: column
- margin: 0 auto
-
-.form-button
- margin-top: 25px !important
- padding: 14px 0 !important
- .MuiButton-label
- text-transform: none !important
-
-.form-input
- margin-top: 20px !important
- input
- width: 100%
- box-sizing: border-box
- label
- float: left
- font-size: 12px
- opacity: 0.7
- margin-bottom: 4px
-
-.form-title
- font-size: 28px
- color: $blue-gray
- font-weight: 600
- text-align: left
-
-.form-subtitle
- text-align: left
- margin: 4% 0
diff --git a/ui/src/components/Pages/AuthPage/AuthPageBase.tsx b/ui/src/components/Pages/AuthPage/AuthPageBase.tsx
deleted file mode 100644
index d44a660e7..000000000
--- a/ui/src/components/Pages/AuthPage/AuthPageBase.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-import background from "../../assets/authBackground.png";
-import logo from '../../assets/MizuEntLogoNoPowBy.svg';
-import poweredBy from '../../assets/powered-by.svg'
-import "./AuthBasePage.sass";
-
-
-export const AuthPageBase: React.FC = ({children}) => {
- return = ({onFirstLogin}) => {
-
- const formRef = useRef(null);
- const classes = useCommonStyles();
- const [isLoading, setIsLoading] = useState(false);
- const [password, setPassword] = useState("");
- const [passwordConfirm, setPasswordConfirm] = useState("");
-
- const setEntPage = useSetRecoilState(entPageAtom);
-
- const onFormSubmit = async () => {
- if (password.length < 4) {
- toast.error("Password must be at least 4 characters long");
- return;
- } else if (password !== passwordConfirm) {
- toast.error("Passwords do not match");
- return;
- }
-
- try {
- setIsLoading(true);
- await api.setupAdminUser(password);
- if (!await api.isAuthenticationNeeded()) {
- setEntPage(Page.Traffic);
- onFirstLogin();
- }
- } catch (e) {
- if (e.type === FormValidationErrorType) {
- for (const messages of Object.values(e.messages) as any[]) {
- for (const message of messages) {
- toast.error(message.text);
- }
- }
- } else {
- toast.error("An unknown error has occured");
- }
- console.error(e);
- } finally {
- setIsLoading(false);
- }
-
- }
-
- useKeyPress(shortcutsKeyboard.enter, onFormSubmit, formRef.current);
-
- return setServiceMapModalOpen(true)}
- onClose={() => setServiceMapModalOpen(false)}
- />}
-
-}
-
-export default SystemViewer;
diff --git a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx
index e6c997ace..a881ae37b 100644
--- a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx
+++ b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx
@@ -1,49 +1,15 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Filters } from "../../Filters";
-import { EntriesList } from "../../EntriesList";
-import { makeStyles, Button } from "@material-ui/core";
-import "./TrafficPage.sass";
-import styles from '../../style/EntriesList.module.sass';
-import {EntryDetailed} from "../../EntryDetailed";
-import playIcon from '../../assets/run.svg';
-import pauseIcon from '../../assets/pause.svg';
-import variables from '../../../variables.module.scss';
-import {StatusBar} from "../../UI/StatusBar";
-import Api, {MizuWebsocketURL} from "../../../helpers/api";
-import { toast } from 'react-toastify';
+import React, { useEffect } from "react";
+import { Button } from "@material-ui/core";
+import Api, {getWebsocketUrl} from "../../../helpers/api";
import debounce from 'lodash/debounce';
-import {useRecoilState, useRecoilValue, useSetRecoilState} from "recoil";
-import tappingStatusAtom from "../../../recoil/tappingStatus";
-import entriesAtom from "../../../recoil/entries";
-import focusedEntryIdAtom from "../../../recoil/focusedEntryId";
-import websocketConnectionAtom, {WsConnectionStatus} from "../../../recoil/wsConnection";
-import queryAtom from "../../../recoil/query";
+import {useSetRecoilState, useRecoilState} from "recoil";
import {useCommonStyles} from "../../../helpers/commonStyle"
-import {TLSWarning} from "../../TLSWarning/TLSWarning";
import serviceMapModalOpenAtom from "../../../recoil/serviceMapModalOpen";
-import serviceMap from "../../assets/serviceMap.svg";
-import services from "../../assets/services.svg";
+import TrafficViewer ,{useWS,DEFAULT_QUERY} from "@up9/mizu-common"
+import "@up9/mizu-common/dist/index.css"
import oasModalOpenAtom from "../../../recoil/oasModalOpen/atom";
-
-const useLayoutStyles = makeStyles(() => ({
- details: {
- flex: "0 0 50%",
- width: "45vw",
- padding: "12px 24px",
- borderRadius: 4,
- marginTop: 15,
- background: variables.headerBackgroundColor,
- },
-
- viewer: {
- display: "flex",
- overflowY: "auto",
- height: "calc(100% - 70px)",
- padding: 5,
- paddingBottom: 0,
- overflow: "auto",
- },
-}));
+import serviceMap from "../../assets/serviceMap.svg";
+import services from "../../assets/services.svg";
interface TrafficPageProps {
setAnalyzeStatus?: (status: any) => void;
@@ -52,299 +18,56 @@ interface TrafficPageProps {
const api = Api.getInstance();
export const TrafficPage: React.FC = ({setAnalyzeStatus}) => {
- const commonClasses = useCommonStyles();
- const classes = useLayoutStyles();
- const [tappingStatus, setTappingStatus] = useRecoilState(tappingStatusAtom);
- const [entries, setEntries] = useRecoilState(entriesAtom);
- const [focusedEntryId, setFocusedEntryId] = useRecoilState(focusedEntryIdAtom);
- const [wsConnection, setWsConnection] = useRecoilState(websocketConnectionAtom);
- const setServiceMapModalOpen = useSetRecoilState(serviceMapModalOpenAtom);
- const [openOasModal, setOpenOasModal] = useRecoilState(oasModalOpenAtom);
- const query = useRecoilValue(queryAtom);
+ const commonClasses = useCommonStyles();
+ const setServiceMapModalOpen = useSetRecoilState(serviceMapModalOpenAtom);
+ const [openOasModal, setOpenOasModal] = useRecoilState(oasModalOpenAtom);
- const [noMoreDataTop, setNoMoreDataTop] = useState(false);
- const [isSnappedToBottom, setIsSnappedToBottom] = useState(true);
+ const {message,error,isOpen, openSocket, closeSocket, sendQuery} = useWS(getWebsocketUrl())
+ const trafficViewerApi = {...api, webSocket:{open : openSocket, close: closeSocket, sendQuery: sendQuery}}
- const [queryBackgroundColor, setQueryBackgroundColor] = useState("#f5f5f5");
+ const handleOpenOasModal = () => {
+ closeSocket()
+ setOpenOasModal(true);
+ }
- const [queriedCurrent, setQueriedCurrent] = useState(0);
- const [queriedTotal, setQueriedTotal] = useState(0);
- const [leftOffBottom, setLeftOffBottom] = useState(0);
- const [leftOffTop, setLeftOffTop] = useState(null);
- const [truncatedTimestamp, setTruncatedTimestamp] = useState(0);
+ const openServiceMapModalDebounce = debounce(() => {
+ setServiceMapModalOpen(true)
+ }, 500);
- const [startTime, setStartTime] = useState(0);
- const scrollableRef = useRef(null);
+ const actionButtons = (window["isOasEnabled"] || window["isServiceMapEnabled"]) &&
+ ());
+ sendQuery(DEFAULT_QUERY);
- const handleQueryChange = useMemo(
- () =>
- debounce(async (query: string) => {
- if (!query) {
- setQueryBackgroundColor("#f5f5f5");
- } else {
- const data = await api.validateQuery(query);
- if (!data) {
- return;
- }
- if (data.valid) {
- setQueryBackgroundColor("#d2fad2");
- } else {
- setQueryBackgroundColor("#fad6dc");
- }
- }
- }, 500),
- []
- ) as (query: string) => void;
-
- useEffect(() => {
- handleQueryChange(query);
- }, [query, handleQueryChange]);
-
- const ws = useRef(null);
-
- const listEntry = useRef(null);
- const openWebSocket = (query: string, resetEntries: boolean) => {
- if (resetEntries) {
- setFocusedEntryId(null);
- setEntries([]);
- setQueriedCurrent(0);
- setLeftOffTop(null);
- setNoMoreDataTop(false);
- }
- ws.current = new WebSocket(MizuWebsocketURL);
- ws.current.onopen = () => {
- setWsConnection(WsConnectionStatus.Connected);
- ws.current.send(JSON.stringify({"query": query, "enableFullEntries": false}));
- }
- ws.current.onclose = () => {
- setWsConnection(WsConnectionStatus.Closed);
- }
- ws.current.onerror = (event) => {
- console.error("WebSocket error:", event);
- if (query) {
- openWebSocket(`(${query}) and leftOff(${leftOffBottom})`, false);
- } else {
- openWebSocket(`leftOff(${leftOffBottom})`, false);
- }
- }
+ useEffect(() => {
+ return () => {
+ closeSocket()
}
+ },[])
- if (ws.current) {
- ws.current.onmessage = (e) => {
- if (!e?.data) return;
- const message = JSON.parse(e.data);
- switch (message.messageType) {
- case "entry":
- const entry = message.data;
- if (!focusedEntryId) setFocusedEntryId(entry.id.toString());
- const newEntries = [...entries, entry];
- if (newEntries.length === 10001) {
- setLeftOffTop(newEntries[0].entry.id);
- newEntries.shift();
- setNoMoreDataTop(false);
- }
- setEntries(newEntries);
- break;
- case "status":
- setTappingStatus(message.tappingStatus);
- break;
- case "analyzeStatus":
- setAnalyzeStatus(message.analyzeStatus);
- break;
- case "outboundLink":
- onTLSDetected(message.Data.DstIP);
- break;
- case "toast":
- toast[message.data.type](message.data.text, {
- position: "bottom-right",
- theme: "colored",
- autoClose: message.data.autoClose,
- hideProgressBar: false,
- closeOnClick: true,
- pauseOnHover: true,
- draggable: true,
- progress: undefined,
- });
- break;
- case "queryMetadata":
- setQueriedCurrent(queriedCurrent + message.data.current);
- setQueriedTotal(message.data.total);
- setLeftOffBottom(message.data.leftOff);
- setTruncatedTimestamp(message.data.truncatedTimestamp);
- if (leftOffTop === null) {
- setLeftOffTop(message.data.leftOff - 1);
- }
- break;
- case "startTime":
- setStartTime(message.data);
- break;
- default:
- console.error(
- `unsupported websocket message type, Got: ${message.messageType}`
- );
- }
- };
- }
-
- useEffect(() => {
- (async () => {
- openWebSocket("leftOff(-1)", true);
- try{
- const tapStatusResponse = await api.tapStatus();
- setTappingStatus(tapStatusResponse);
- if(setAnalyzeStatus) {
- const analyzeStatusResponse = await api.analyzeStatus();
- setAnalyzeStatus(analyzeStatusResponse);
- }
- } catch (error) {
- console.error(error);
- }
- })()
- // eslint-disable-next-line
- }, []);
-
- const toggleConnection = () => {
- ws.current.close();
- if (wsConnection !== WsConnectionStatus.Connected) {
- if (query) {
- openWebSocket(`(${query}) and leftOff(-1)`, true);
- } else {
- openWebSocket(`leftOff(-1)`, true);
- }
- scrollableRef.current.jumpToBottom();
- setIsSnappedToBottom(true);
- }
- }
-
- const onTLSDetected = (destAddress: string) => {
- addressesWithTLS.add(destAddress);
- setAddressesWithTLS(new Set(addressesWithTLS));
-
- if (!userDismissedTLSWarning) {
- setShowTLSWarning(true);
- }
- };
-
- const getConnectionStatusClass = (isContainer) => {
- const container = isContainer ? "Container" : "";
- switch (wsConnection) {
- case WsConnectionStatus.Connected:
- return "greenIndicator" + container;
- default:
- return "redIndicator" + container;
- }
- }
-
- const getConnectionTitle = () => {
- switch (wsConnection) {
- case WsConnectionStatus.Connected:
- return "streaming live traffic"
- default:
- return "streaming paused";
- }
- }
-
- const onSnapBrokenEvent = () => {
- setIsSnappedToBottom(false);
- if (wsConnection === WsConnectionStatus.Connected) {
- ws.current.close();
- }
- }
-
- const handleOpenOasModal = () => {
- ws.current.close();
- setOpenOasModal(true);
- }
-
- const openServiceMapModalDebounce = debounce(() => {
- ws.current.close();
- setServiceMapModalOpen(true);
- }, 500);
-
- return (
-
+
);
-};
+};
\ No newline at end of file
diff --git a/ui/src/components/ServiceMapModal/ServiceMapModal.sass b/ui/src/components/ServiceMapModal/ServiceMapModal.sass
index de7995eaa..973bbee11 100644
--- a/ui/src/components/ServiceMapModal/ServiceMapModal.sass
+++ b/ui/src/components/ServiceMapModal/ServiceMapModal.sass
@@ -1,6 +1,5 @@
@import "../../variables.module"
-
.legend-scale ul
margin-top: -29px
margin-left: -27px
diff --git a/ui/src/components/SettingsModal/SettingModal.tsx b/ui/src/components/SettingsModal/SettingModal.tsx
deleted file mode 100644
index 504342a8d..000000000
--- a/ui/src/components/SettingsModal/SettingModal.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import React, {useEffect, useMemo, useState} from "react";
-import {Modal, Backdrop, Fade, Box, Button} from "@material-ui/core";
-import {modalStyle} from "../Filters";
-import Checkbox from "../UI/Checkbox";
-import './SettingsModal.sass';
-import Api from "../../helpers/api";
-import spinner from "../assets/spinner.svg";
-import {useCommonStyles} from "../../helpers/commonStyle";
-import {toast} from "react-toastify";
-
-interface SettingsModalProps {
- isOpen: boolean
- onClose: () => void
- isFirstLogin: boolean
-}
-
-const api = Api.getInstance();
-
-export const SettingsModal: React.FC = ({isOpen, onClose, isFirstLogin}) => {
-
- const classes = useCommonStyles();
- const [namespaces, setNamespaces] = useState({});
- const [isLoading, setIsLoading] = useState(false);
- const [searchValue, setSearchValue] = useState("");
-
- useEffect(() => {
- if(!isOpen) return;
- (async () => {
- try {
- setSearchValue("");
- setIsLoading(true);
- const tapConfig = await api.getTapConfig()
- if(isFirstLogin) {
- const namespacesObj = {...tapConfig?.tappedNamespaces}
- Object.keys(tapConfig?.tappedNamespaces ?? {}).forEach(namespace => {
- namespacesObj[namespace] = true;
- })
- setNamespaces(namespacesObj);
- } else {
- setNamespaces(tapConfig?.tappedNamespaces);
- }
- } catch (e) {
- console.error(e);
- } finally {
- setIsLoading(false);
- }
- })()
- }, [isFirstLogin, isOpen])
-
- const setAllNamespacesTappedValue = (isTap: boolean) => {
- const newNamespaces = {};
- Object.keys(namespaces).forEach(key => {
- newNamespaces[key] = isTap;
- })
- setNamespaces(newNamespaces);
- }
-
- const updateTappingSettings = async () => {
- try {
- await api.setTapConfig(namespaces);
- onClose();
- toast.success("Saved successfully");
- } catch (e) {
- console.error(e);
- toast.error("Something went wrong, changes may not have been saved.")
- }
- }
-
- const toggleTapNamespace = (namespace) => {
- const newNamespaces = {...namespaces};
- newNamespaces[namespace] = !namespaces[namespace]
- setNamespaces(newNamespaces);
- }
-
- const toggleAll = () => {
- const isChecked = Object.values(namespaces).every(tap => tap === true);
- setAllNamespacesTappedValue(!isChecked);
- }
-
- const filteredNamespaces = useMemo(() => {
- return Object.keys(namespaces).filter((namespace) => namespace.includes(searchValue));
- },[namespaces, searchValue])
-
- const buildNamespacesTable = () => {
- return
-
-
- }
-
- const onModalClose = (reason) => {
- if(reason === 'backdropClick' && isFirstLogin) return;
- onClose();
- }
-
- return onModalClose(reason)}
- closeAfterTransition
- BackdropComponent={Backdrop}
- BackdropProps={{
- timeout: 500,
- }}
- style={{overflow: 'auto'}}
- >
-
-
-
-
-
-}
diff --git a/ui/src/components/SettingsModal/SettingsModal.sass b/ui/src/components/SettingsModal/SettingsModal.sass
deleted file mode 100644
index 863262638..000000000
--- a/ui/src/components/SettingsModal/SettingsModal.sass
+++ /dev/null
@@ -1,54 +0,0 @@
-@import "../../variables.module"
-
-.settingsTitle
- font-size: 28px
- color: $blue-gray
- font-weight: 600
-
-.settingsSubtitle
- font-size: 14px
- color: $light-gray
- margin-top: 20px
- line-height: 20px
-
-.namespacesSettingsContainer
- border-radius: 4px
- padding: 20px 0
-
- .searchNamespace
- width: 300px
- max-width: calc(40vw - 85px)
-
-.settingsActionsContainer
- display: flex
- justify-content: flex-end
- padding: 20px
- border-top: 2px $data-background-color solid
-
-.namespacesTable
- table
- width: 100%
- margin-top: 20px
-
- tbody
- max-height: calc(70vh - 355px)
- overflow-y: auto
- display: block
-
- th
- color: $blue-gray
- text-align: left
- padding: 10px
-
- tr
- border-bottom-width: 1px
- border-bottom-color: $data-background-color
- border-bottom-style: solid
- display: table
- table-layout: fixed
- width: 100%
-
- td
- color: $light-gray
- padding: 10px
- font-size: 16px
diff --git a/ui/src/components/UI/Checkbox.tsx b/ui/src/components/UI/Checkbox.tsx
deleted file mode 100644
index 84f8bfab7..000000000
--- a/ui/src/components/UI/Checkbox.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-
-export interface Props {
- checked: boolean;
- onToggle: (checked:boolean) => any;
-}
-
-const Checkbox: React.FC = ({checked, onToggle}) => {
-
- return (
-
-
setExpandedBar(true)} onMouseLeave={() => setExpandedBar(false)}>
+ = (props) => {
const classes = useStyles(props.variant);
- const variant = props.variant ?? 'default';
+ const variant = props.variant || 'default';
const backgroundClass = isSimple ? "" : "noBackground"
@@ -41,7 +41,7 @@ const Tooltip: React.FC = (props) => {
TransitionComponent={Fade}
{..._props}
>
- {props.children ?? }
+ {props.children || }
);
};
diff --git a/ui-common/src/components/UI/assets/collapsed.svg b/ui-common/src/components/UI/assets/collapsed.svg
new file mode 100644
index 000000000..4b0b9bd2f
--- /dev/null
+++ b/ui-common/src/components/UI/assets/collapsed.svg
@@ -0,0 +1,14 @@
+
diff --git a/ui-common/src/components/UI/assets/default_icon_down.svg b/ui-common/src/components/UI/assets/default_icon_down.svg
new file mode 100644
index 000000000..52aac5735
--- /dev/null
+++ b/ui-common/src/components/UI/assets/default_icon_down.svg
@@ -0,0 +1,3 @@
+
diff --git a/ui-common/src/components/UI/assets/duplicate.svg b/ui-common/src/components/UI/assets/duplicate.svg
new file mode 100644
index 000000000..d3ba4d439
--- /dev/null
+++ b/ui-common/src/components/UI/assets/duplicate.svg
@@ -0,0 +1,20 @@
+
diff --git a/ui-common/src/components/UI/assets/expanded.svg b/ui-common/src/components/UI/assets/expanded.svg
new file mode 100644
index 000000000..696e91972
--- /dev/null
+++ b/ui-common/src/components/UI/assets/expanded.svg
@@ -0,0 +1,3 @@
+
diff --git a/ui-common/src/components/UI/assets/failed.svg b/ui-common/src/components/UI/assets/failed.svg
new file mode 100644
index 000000000..bab53af12
--- /dev/null
+++ b/ui-common/src/components/UI/assets/failed.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/ui-common/src/components/UI/assets/success.svg b/ui-common/src/components/UI/assets/success.svg
new file mode 100644
index 000000000..f8fe3aa64
--- /dev/null
+++ b/ui-common/src/components/UI/assets/success.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/ui-common/src/components/UI/assets/warning_icon.svg b/ui-common/src/components/UI/assets/warning_icon.svg
new file mode 100644
index 000000000..7ef6ba5a2
--- /dev/null
+++ b/ui-common/src/components/UI/assets/warning_icon.svg
@@ -0,0 +1,34 @@
+
diff --git a/ui-common/src/components/UI/index.ts b/ui-common/src/components/UI/index.ts
new file mode 100644
index 000000000..6d201bd30
--- /dev/null
+++ b/ui-common/src/components/UI/index.ts
@@ -0,0 +1,11 @@
+import LoadingOverlay from "./LoadingOverlay";
+import { Select } from "./Select";
+import Tabs from "./Tabs";
+import Tooltip from "./Tooltip";
+import Checkbox from "./Checkbox"
+import { StatusBar } from "./StatusBar";
+import CustomModal from "./CustomModal";
+
+
+export {LoadingOverlay,Select,Tabs,Tooltip,Checkbox,CustomModal}
+export {StatusBar}
\ No newline at end of file
diff --git a/ui/src/components/UI/style/CollapsibleContainer.sass b/ui-common/src/components/UI/style/CollapsibleContainer.module.sass
similarity index 55%
rename from ui/src/components/UI/style/CollapsibleContainer.sass
rename to ui-common/src/components/UI/style/CollapsibleContainer.module.sass
index 0a473da8c..f8a33bbcc 100644
--- a/ui/src/components/UI/style/CollapsibleContainer.sass
+++ b/ui-common/src/components/UI/style/CollapsibleContainer.module.sass
@@ -1,33 +1,33 @@
-.CollapsibleContainer-Header
+.CollapsibleContainerHeader
display: flex
align-items: center
cursor: pointer
min-height: 40px
-.CollapsibleContainer-Header-Sticky
+.CollapsibleContainerHeaderSticky
background: #1f253f
position: sticky
top: 0
z-index: 1
-.CollapsibleContainer-Bigger
+.CollapsibleContainerBigger
padding: 10px
font-size: 14px !important
-.CollapsibleContainer-ExpandCollapseButton
+.CollapsibleContainerExpandCollapseButton
margin-left: auto
padding-right: 2%
-.CollapsibleContainer-Expanded
+.CollapsibleContainerExpanded
min-height: 40px
-.CollapsibleContainer-Title
+.CollapsibleContainerTitle
font-weight: 600
font-family: 'Source Sans Pro', sans-serif
font-size: 12px
-.CollapsibleContainer-Expanded .CollapsibleContainer-Title
+.CollapsibleContainerExpanded .CollapsibleContainerTitle
color: rgba(186, 199, 255, 1)
-.CollapsibleContainer-Collapsed .CollapsibleContainer-Title
+.CollapsibleContainerCollapsed .CollapsibleContainerTitle
color: rgba(186, 199, 255, 0.75)
\ No newline at end of file
diff --git a/ui/src/components/UI/style/FancyTextDisplay.sass b/ui-common/src/components/UI/style/FancyTextDisplay.module.sass
similarity index 74%
rename from ui/src/components/UI/style/FancyTextDisplay.sass
rename to ui-common/src/components/UI/style/FancyTextDisplay.module.sass
index c95a3d123..392337486 100644
--- a/ui/src/components/UI/style/FancyTextDisplay.sass
+++ b/ui-common/src/components/UI/style/FancyTextDisplay.module.sass
@@ -1,18 +1,18 @@
-.FancyTextDisplay-Container
+.FancyTextDisplayContainer
display: flex
align-items: center
&.displayIconOnMouseOver
- .FancyTextDisplay-Icon
+ .FancyTextDisplayIcon
opacity: 0
pointer-events: none
&:hover
- .FancyTextDisplay-Icon
+ .FancyTextDisplayIcon
opacity: 1
pointer-events: all
- .FancyTextDisplay-Icon
+ .FancyTextDisplayIcon
height: 22px
width: 22px
cursor: pointer
@@ -22,20 +22,19 @@
background-color: rgba(255, 255, 255, 0.06)
border-radius: 4px
- &.FancyTextDisplay-ContainerEllipsis
- .FancyTextDisplay-Text
+ &.FancyTextDisplayContainerEllipsis
+ .FancyTextDisplayText
text-align: left
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
width: calc(100% - 30px)
- .FancyTextDisplay-CopyNotifier
+ .FancyTextDisplayCopyNotifier
background-color: #4252a5
padding: 2px 5px
border-radius: 4px
position: absolute
transform: translate(0, -80%)
color: white
- z-index: 1000
-
+ z-index: 1000
\ No newline at end of file
diff --git a/ui/src/components/UI/style/FilterSelect.module.sass b/ui-common/src/components/UI/style/FilterSelect.module.sass
similarity index 100%
rename from ui/src/components/UI/style/FilterSelect.module.sass
rename to ui-common/src/components/UI/style/FilterSelect.module.sass
diff --git a/ui/src/components/UI/style/Protocol.module.sass b/ui-common/src/components/UI/style/Protocol.module.sass
similarity index 100%
rename from ui/src/components/UI/style/Protocol.module.sass
rename to ui-common/src/components/UI/style/Protocol.module.sass
diff --git a/ui/src/components/UI/style/Queryable.sass b/ui-common/src/components/UI/style/Queryable.module.sass
similarity index 84%
rename from ui/src/components/UI/style/Queryable.sass
rename to ui-common/src/components/UI/style/Queryable.module.sass
index f045f2183..070ae9b86 100644
--- a/ui/src/components/UI/style/Queryable.sass
+++ b/ui-common/src/components/UI/style/Queryable.module.sass
@@ -1,19 +1,19 @@
-.Queryable-Container
+.QueryableContainer
display: flex
align-items: center
&.displayIconOnMouseOver
- .Queryable-Icon
+ .QueryableIcon
opacity: 0
width: 0px
pointer-events: none
&:hover
- .Queryable-Icon
+ .QueryableIcon
opacity: 1
pointer-events: all
- .Queryable-Icon
+ .QueryableIcon
height: 22px
width: 22px
cursor: pointer
@@ -24,7 +24,7 @@
border-radius: 4px
color: #1E884B
- .Queryable-AddNotifier
+ .QueryableAddNotifier
background-color: #1E884B
font-weight: normal
padding: 2px 5px
@@ -35,7 +35,7 @@
z-index: 1000
font-size: 11px
- .Queryable-Tooltip
+ .QueryableTooltip
background-color: #1E884B
font-weight: normal
padding: 2px 5px
@@ -44,5 +44,4 @@
transform: translate(0, -80%)
color: white
z-index: 1000
- font-size: 11px
-
+ font-size: 11px
\ No newline at end of file
diff --git a/ui/src/components/UI/style/Select.module.sass b/ui-common/src/components/UI/style/Select.module.sass
similarity index 60%
rename from ui/src/components/UI/style/Select.module.sass
rename to ui-common/src/components/UI/style/Select.module.sass
index d576e2c42..7195c0a16 100644
--- a/ui/src/components/UI/style/Select.module.sass
+++ b/ui-common/src/components/UI/style/Select.module.sass
@@ -2,4 +2,4 @@
fill: #627ef7
.list
- margin-top: 8px
\ No newline at end of file
+ margin-top: 8px
diff --git a/ui/src/components/UI/style/StatusBar.sass b/ui-common/src/components/UI/style/StatusBar.module.sass
similarity index 98%
rename from ui/src/components/UI/style/StatusBar.sass
rename to ui-common/src/components/UI/style/StatusBar.module.sass
index 1c4965c47..20c8535c6 100644
--- a/ui/src/components/UI/style/StatusBar.sass
+++ b/ui-common/src/components/UI/style/StatusBar.module.sass
@@ -24,12 +24,13 @@
justify-content: center
font-weight: 600
- .pods-count-text
+ .podsCountText
width: 100%
max-width: 100%
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
+
img
margin-right: 10px
height: 22px
diff --git a/ui/src/components/UI/style/StatusCode.module.sass b/ui-common/src/components/UI/style/StatusCode.module.sass
similarity index 100%
rename from ui/src/components/UI/style/StatusCode.module.sass
rename to ui-common/src/components/UI/style/StatusCode.module.sass
diff --git a/ui/src/components/UI/style/Summary.module.sass b/ui-common/src/components/UI/style/Summary.module.sass
similarity index 100%
rename from ui/src/components/UI/style/Summary.module.sass
rename to ui-common/src/components/UI/style/Summary.module.sass
diff --git a/ui/src/components/UI/style/misc.module.sass b/ui-common/src/components/UI/style/misc.module.sass
similarity index 100%
rename from ui/src/components/UI/style/misc.module.sass
rename to ui-common/src/components/UI/style/misc.module.sass
diff --git a/ui-common/src/components/assets/authBackground.png b/ui-common/src/components/assets/authBackground.png
new file mode 100644
index 000000000..f67800313
Binary files /dev/null and b/ui-common/src/components/assets/authBackground.png differ
diff --git a/ui-common/src/components/assets/icon-next.svg b/ui-common/src/components/assets/icon-next.svg
new file mode 100644
index 000000000..96ad8ab8d
--- /dev/null
+++ b/ui-common/src/components/assets/icon-next.svg
@@ -0,0 +1,5 @@
+
diff --git a/ui-common/src/components/assets/icon-prev.svg b/ui-common/src/components/assets/icon-prev.svg
new file mode 100644
index 000000000..4b93e6704
--- /dev/null
+++ b/ui-common/src/components/assets/icon-prev.svg
@@ -0,0 +1,5 @@
+
diff --git a/ui/src/components/style/EntriesList.module.sass b/ui-common/src/components/style/EntriesList.module.sass
similarity index 100%
rename from ui/src/components/style/EntriesList.module.sass
rename to ui-common/src/components/style/EntriesList.module.sass
diff --git a/ui/src/components/style/Filters.module.sass b/ui-common/src/components/style/Filters.module.sass
similarity index 100%
rename from ui/src/components/style/Filters.module.sass
rename to ui-common/src/components/style/Filters.module.sass
diff --git a/ui/src/components/style/LoadingOverlay.sass b/ui-common/src/components/style/LoadingOverlay.module.sass
similarity index 95%
rename from ui/src/components/style/LoadingOverlay.sass
rename to ui-common/src/components/style/LoadingOverlay.module.sass
index 26af44cab..2fd08b3bc 100644
--- a/ui/src/components/style/LoadingOverlay.sass
+++ b/ui-common/src/components/style/LoadingOverlay.module.sass
@@ -1,4 +1,4 @@
-.loading-overlay-container
+.loadingOverlayContainer
position: absolute
display: flex
width: 100%
@@ -9,7 +9,7 @@
justify-content: center
background-color: rgba(25, 25, 25, 0.5)
-.loading-overlay-spinner
+.loadingOverlaySpinner
width: 60px
height: 60px
top: 50%
diff --git a/ui-common/src/components/style/Spinner.module.sass b/ui-common/src/components/style/Spinner.module.sass
new file mode 100644
index 000000000..3f689dc41
--- /dev/null
+++ b/ui-common/src/components/style/Spinner.module.sass
@@ -0,0 +1,7 @@
+@import "../../variables.module"
+
+.spinnerContainer
+ display: flex
+ justify-content: center
+ margin-bottom: 10px
+
\ No newline at end of file
diff --git a/ui-common/src/configs/shortcutsKeyboard.ts b/ui-common/src/configs/shortcutsKeyboard.ts
new file mode 100644
index 000000000..b5f8fcad0
--- /dev/null
+++ b/ui-common/src/configs/shortcutsKeyboard.ts
@@ -0,0 +1,7 @@
+const dictionary = {
+ ctrlEnter : [{metaKey : true, code:"Enter"}, {ctrlKey:true, code:"Enter"}], // support Ctrl/command
+ enter : [{code:"Enter"}]
+};
+
+
+export default dictionary;
\ No newline at end of file
diff --git a/ui-common/src/helpers/commonStyle.ts b/ui-common/src/helpers/commonStyle.ts
new file mode 100644
index 000000000..ed0df460d
--- /dev/null
+++ b/ui-common/src/helpers/commonStyle.ts
@@ -0,0 +1,62 @@
+import {makeStyles} from "@material-ui/core";
+
+// @ts-ignore
+export const useCommonStyles = makeStyles(() => ({
+ button: {
+ backgroundColor: "#205cf5",
+ color: "white",
+ fontWeight: "600 !important",
+ fontSize: 12,
+ padding: "9px 12px",
+ borderRadius: "6px ! important",
+
+ "&:hover": {
+ backgroundColor: "#205cf5",
+ },
+ "&:disabled":{
+ backgroundColor: "rgba(0, 0, 0, 0.26)"
+ }
+ },
+ outlinedButton: {
+ backgroundColor: "transparent",
+ color: "#205cf5",
+ fontWeight: "600 !important",
+ fontSize: 12,
+ padding: "8px 12px",
+ border: "1px #205cf5 solid",
+ borderRadius: "6px ! important",
+
+ "&:hover": {
+ backgroundColor: "transparent",
+ },
+ },
+
+ imagedButton: {
+ padding: "1px 14px"
+ },
+
+ textField: {
+ outline: 0,
+ background: "white",
+ borderRadius: "4px",
+ padding: "8px 10px",
+ border: "1px #9D9D9D solid",
+ fontSize: "14px",
+ color: "#494677",
+ height: "30px",
+ boxSizing: "border-box"
+ },
+ modal :{
+ position: 'absolute',
+ top: '40%',
+ left: '50%',
+ transform: 'translate(-50%, -40%)',
+ width: "CLAMP(600px,50%, 800px)",
+ bgcolor: 'background.paper',
+ borderRadius: '5px',
+ boxShadow: 24,
+ outline: "none",
+ p: 4,
+ color: '#000',
+ }
+}));
diff --git a/ui-common/src/hooks/useKeyPress.ts b/ui-common/src/hooks/useKeyPress.ts
new file mode 100644
index 000000000..20554adf5
--- /dev/null
+++ b/ui-common/src/hooks/useKeyPress.ts
@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
+
+const useKeyPress = (eventConfigs, callback, node = null) => {
+ // implement the callback ref pattern
+ const callbackRef = useRef(callback);
+ useLayoutEffect(() => {
+ callbackRef.current = callback;
+ });
+
+ // 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);
+ }
+ },
+ [eventConfigs]
+ );
+
+ useEffect(() => {
+ // target is either the provided node or the document
+ const targetNode = node || document;
+ // attach the event listener
+ targetNode &&
+ targetNode.addEventListener("keydown", handleKeyPress);
+
+ // remove the event listener
+ return () =>
+ targetNode &&
+ targetNode.removeEventListener("keydown", handleKeyPress);
+ }, [handleKeyPress, node]);
+};
+
+export default useKeyPress;
\ No newline at end of file
diff --git a/ui-common/src/hooks/useWS.tsx b/ui-common/src/hooks/useWS.tsx
new file mode 100644
index 000000000..49c03b40a
--- /dev/null
+++ b/ui-common/src/hooks/useWS.tsx
@@ -0,0 +1,48 @@
+import { useState, useRef } from "react";
+
+enum WebSocketReadyState {
+ CONNECTING,
+ OPEN,
+ CLOSING,
+ CLOSED
+}
+
+export const DEFAULT_QUERY = "leftOff(-1)";
+
+const useWS = (wsUrl: string) => {
+ const [message, setMessage] = useState(null);
+ const [error, setError] = useState(null);
+ const [isOpen, setisOpen] = useState(false);
+ const ws = useRef(null);
+
+ const onMessage = (e) => { setMessage(e) }
+ const onError = (e) => setError(e)
+ const onOpen = () => { setisOpen(true) }
+ const onClose = () => setisOpen(false)
+
+ const openSocket = () => {
+ ws.current = new WebSocket(wsUrl)
+ ws.current.addEventListener("message", onMessage)
+ ws.current.addEventListener("error", onError)
+ ws.current.addEventListener("open", onOpen)
+ ws.current.addEventListener("close", onClose)
+ }
+
+ const closeSocket = () => {
+ ws.current.readyState === WebSocketReadyState.OPEN && ws.current.close();
+ ws.current.removeEventListener("message", onMessage)
+ ws.current.removeEventListener("error", onError)
+ ws.current.removeEventListener("open", onOpen)
+ ws.current.removeEventListener("close", onClose)
+ }
+
+ const sendQuery = (query: string) => {
+ if (ws.current && (ws.current.readyState === WebSocketReadyState.OPEN)) {
+ ws.current.send(JSON.stringify({ "query": query, "enableFullEntries": false }));
+ }
+ }
+
+ return { message, error, isOpen, openSocket, closeSocket, sendQuery }
+}
+
+export default useWS
\ No newline at end of file
diff --git a/ui-common/src/index.tsx b/ui-common/src/index.tsx
new file mode 100644
index 000000000..6fc55ffa4
--- /dev/null
+++ b/ui-common/src/index.tsx
@@ -0,0 +1,10 @@
+import TrafficViewer from './components/TrafficViewer/TrafficViewer';
+import * as UI from "./components/UI"
+import { StatusBar } from './components/UI';
+import useWS,{DEFAULT_QUERY} from './hooks/useWS';
+import {AnalyzeButton} from "./components/AnalyzeButton/AnalyzeButton"
+import OasModal from './components/OasModal/OasModal';
+
+export {UI,AnalyzeButton, StatusBar, OasModal}
+export { useWS, DEFAULT_QUERY}
+export default TrafficViewer;
diff --git a/ui-common/src/react-app-env.d.ts b/ui-common/src/react-app-env.d.ts
new file mode 100644
index 000000000..6431bc5fc
--- /dev/null
+++ b/ui-common/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// setOasModalOpen(false)}
+ />}
+
);
}
diff --git a/ui/src/AppChooser.tsx b/ui/src/AppChooser.tsx
deleted file mode 100644
index 3d6b66fa3..000000000
--- a/ui/src/AppChooser.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, {Suspense} from 'react';
-import LoadingOverlay from "./components/LoadingOverlay";
-
-const AppChooser = () => {
-
- let MainComponent;
- if (process.env.REACT_APP_OVERRIDE_IS_ENTERPRISE === "true") {
- MainComponent = React.lazy(() => import('./EntApp'));
- } else {
- MainComponent = React.lazy(() => import('./App'));
- }
-
- return
+ {tappingStatus.some(pod => !pod.isTapped) && }
+
{`Tapping ${amountOfUntappedPods > 0 ? amountOfTappedPods + " / " + amountOfPods : amountOfPods} ${pluralize('pod', amountOfPods)} in ${pluralize('namespace', uniqueNamespaces.length)} ${uniqueNamespaces.join(", ")}`}
diff --git a/ui/src/components/UI/StatusCode.tsx b/ui-common/src/components/UI/StatusCode.tsx
similarity index 98%
rename from ui/src/components/UI/StatusCode.tsx
rename to ui-common/src/components/UI/StatusCode.tsx
index 469df3ef6..64140982f 100644
--- a/ui/src/components/UI/StatusCode.tsx
+++ b/ui-common/src/components/UI/StatusCode.tsx
@@ -9,7 +9,7 @@ export enum StatusCodeClassification {
}
interface EntryProps {
- statusCode: number
+ statusCode: number,
statusQuery: string
}
diff --git a/ui/src/components/UI/Summary.tsx b/ui-common/src/components/UI/Summary.tsx
similarity index 100%
rename from ui/src/components/UI/Summary.tsx
rename to ui-common/src/components/UI/Summary.tsx
diff --git a/ui/src/components/UI/SyntaxHighlighter/index.scss b/ui-common/src/components/UI/SyntaxHighlighter/index.scss
similarity index 100%
rename from ui/src/components/UI/SyntaxHighlighter/index.scss
rename to ui-common/src/components/UI/SyntaxHighlighter/index.scss
diff --git a/ui/src/components/UI/SyntaxHighlighter/index.tsx b/ui-common/src/components/UI/SyntaxHighlighter/index.tsx
similarity index 100%
rename from ui/src/components/UI/SyntaxHighlighter/index.tsx
rename to ui-common/src/components/UI/SyntaxHighlighter/index.tsx
diff --git a/ui/src/components/UI/Tabs.tsx b/ui-common/src/components/UI/Tabs.tsx
similarity index 93%
rename from ui/src/components/UI/Tabs.tsx
rename to ui-common/src/components/UI/Tabs.tsx
index c46ad33c6..573650f9b 100644
--- a/ui/src/components/UI/Tabs.tsx
+++ b/ui-common/src/components/UI/Tabs.tsx
@@ -1,7 +1,8 @@
import Tooltip from "./Tooltip";
import React from "react";
-import {makeStyles} from '@material-ui/core/styles';
+import { makeStyles, Theme,createStyles } from '@material-ui/core/styles';
import variables from '../../variables.module.scss';
+
interface Tab {
tab: string,
disabled?: boolean,
@@ -20,13 +21,12 @@ interface Props {
dark?: boolean,
}
-const useTabsStyles = makeStyles((theme) => ({
-
+const useTabsStyles = makeStyles((theme : Theme) => createStyles({
root: {
height: 40,
paddingTop: 15
},
-
+
tab: {
display: 'inline-block',
textTransform: 'uppercase',
@@ -39,7 +39,7 @@ const useTabsStyles = makeStyles((theme) => ({
},
active: {
- fontWeight: 600,
+ fontWeight: 400,
color: variables.fontColor,
cursor: 'unset',
borderBottom: "2px solid " + variables.fontColor,
@@ -67,7 +67,6 @@ const useTabsStyles = makeStyles((theme) => ({
margin: '0 20px',
cursor: 'unset',
}
-
}));
diff --git a/ui/src/components/UI/Tooltip.tsx b/ui-common/src/components/UI/Tooltip.tsx
similarity index 93%
rename from ui/src/components/UI/Tooltip.tsx
rename to ui-common/src/components/UI/Tooltip.tsx
index c17467853..535c58676 100644
--- a/ui/src/components/UI/Tooltip.tsx
+++ b/ui-common/src/components/UI/Tooltip.tsx
@@ -29,7 +29,7 @@ const Tooltip: React.FC
-
- {window["isServiceMapEnabled"] &&
+ {window["isServiceMapEnabled"] && setServiceMapModalOpen(true)}
onClose={() => setServiceMapModalOpen(false)}
/>}
- {window["isOasEnabled"] && setOasModalOpen(false)}
- />}
-
+ {window["isOasEnabled"] &&
-
-
-
- );
-}
-
-export default EntApp;
diff --git a/ui/src/components/AnalyzeButton/AnalyzeButton.tsx b/ui/src/components/AnalyzeButton/AnalyzeButton.tsx
index 4f6e0f45b..01f021e22 100644
--- a/ui/src/components/AnalyzeButton/AnalyzeButton.tsx
+++ b/ui/src/components/AnalyzeButton/AnalyzeButton.tsx
@@ -1,6 +1,6 @@
import {Button} from "@material-ui/core";
import React from "react";
-import Tooltip from "../UI/Tooltip";
+import {UI} from "@up9/mizu-common";
import logo_up9 from "../assets/logo_up9.svg";
import {makeStyles} from "@material-ui/core/styles";
@@ -63,7 +63,7 @@ export const AnalyzeButton: React.FC
-
+
-
+
);
}
diff --git a/ui/src/components/AppSwitchRoutes.tsx b/ui/src/components/AppSwitchRoutes.tsx
deleted file mode 100644
index 29f623b1a..000000000
--- a/ui/src/components/AppSwitchRoutes.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, {useCallback, useEffect, useState} from "react";
-import {Route, Routes, useNavigate} from "react-router-dom";
-import {RouterRoutes} from "../helpers/routes";
-import {useRecoilState} from "recoil";
-import entPageAtom, {Page} from "../recoil/entPage";
-import {toast} from "react-toastify";
-import AuthPageBase from "./Pages/AuthPage/AuthPageBase";
-import InstallPage from "./Pages/AuthPage/InstallPage";
-import LoginPage from "./Pages/AuthPage/LoginPage";
-import LoadingOverlay from "./LoadingOverlay";
-import SystemViewer from "./Pages/SystemViewer/SystemViewer";
-import Api from "../helpers/api";
-import {TrafficPage} from "./Pages/TrafficPage/TrafficPage";
-
-const api = Api.getInstance();
-
-const AppSwitchRoutes = () => {
-
- const navigate = useNavigate();
-
- const [isLoading, setIsLoading] = useState(true);
- const [entPage, setEntPage] = useRecoilState(entPageAtom);
- const [isFirstLogin, setIsFirstLogin] = useState(false);
-
- const determinePage = useCallback(async () => {
- try {
- const isInstallNeeded = await api.isInstallNeeded();
- if (isInstallNeeded) {
- setEntPage(Page.Setup);
- } else {
- const isAuthNeeded = await api.isAuthenticationNeeded();
- if(isAuthNeeded) {
- setEntPage(Page.Login);
- }
- }
- } catch (e) {
- toast.error("Error occured while checking Mizu API status, see console for mode details");
- console.error(e);
- } finally {
- setIsLoading(false);
- }
- },[setEntPage]);
-
- useEffect(() => {
- determinePage();
- }, [determinePage]);
-
- useEffect(() => {
- switch (entPage) {
- case Page.Traffic:
- navigate("/");
- break;
- case Page.Setup:
- navigate(RouterRoutes.SETUP);
- break;
- case Page.Login:
- navigate(RouterRoutes.LOGIN);
- break;
- default:
- navigate(RouterRoutes.LOGIN);
- }
- // eslint-disable-next-line
- },[entPage])
-
-
- if (isLoading) {
- return
-
-
;
-}
-
-const ProfileButton = () => {
-
- const setEntPage = useSetRecoilState(entPageAtom);
-
- const logout = async (popupState) => {
- try {
- await api.logout();
- setEntPage(Page.Login);
- } catch (e) {
- toast.error("Something went wrong, please check the console");
- console.error(e);
- }
- popupState.close();
- }
-
- return (
-
-
- 
navigate("/")}/>
-
-
- 
setIsSettingsModalOpen(true)}/>
-
-
-
;
-};
-
-export default AuthPageBase;
diff --git a/ui/src/components/Pages/AuthPage/InstallPage.tsx b/ui/src/components/Pages/AuthPage/InstallPage.tsx
deleted file mode 100644
index a777d5341..000000000
--- a/ui/src/components/Pages/AuthPage/InstallPage.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Button } from "@material-ui/core";
-import React, { useState,useRef } from "react";
-import { adminUsername } from "../../../consts";
-import Api, { FormValidationErrorType } from "../../../helpers/api";
-import { toast } from 'react-toastify';
-import LoadingOverlay from "../../LoadingOverlay";
-import { useCommonStyles } from "../../../helpers/commonStyle";
-import {useSetRecoilState} from "recoil";
-import entPageAtom, {Page} from "../../../recoil/entPage";
-import useKeyPress from "../../../hooks/useKeyPress"
-import shortcutsKeyboard from "../../../configs/shortcutsKeyboard"
-
-
-const api = Api.getInstance();
-
-interface InstallPageProps {
- onFirstLogin: () => void;
-}
-
-export const InstallPage: React.FC
- 
-
- {children}
-
- 
-
-
- {isLoading &&
;
-};
-
-export default InstallPage;
diff --git a/ui/src/components/Pages/AuthPage/LoginPage.tsx b/ui/src/components/Pages/AuthPage/LoginPage.tsx
deleted file mode 100644
index b7a3c96bd..000000000
--- a/ui/src/components/Pages/AuthPage/LoginPage.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Button } from "@material-ui/core";
-import React, { useState,useRef } from "react";
-import { toast } from "react-toastify";
-import Api from "../../../helpers/api";
-import { useCommonStyles } from "../../../helpers/commonStyle";
-import LoadingOverlay from "../../LoadingOverlay";
-import entPageAtom, {Page} from "../../../recoil/entPage";
-import {useSetRecoilState} from "recoil";
-import useKeyPress from "../../../hooks/useKeyPress"
-import shortcutsKeyboard from "../../../configs/shortcutsKeyboard"
-
-
-const api = Api.getInstance();
-
-const LoginPage: React.FC = () => {
-
- const classes = useCommonStyles();
- const [isLoading, setIsLoading] = useState(false);
- const [username, setUsername] = useState("");
- const [password, setPassword] = useState("");
- const formRef = useRef(null);
-
- const setEntPage = useSetRecoilState(entPageAtom);
-
- const onFormSubmit = async () => {
- setIsLoading(true);
-
- try {
- await api.login(username, password);
- if (!await api.isAuthenticationNeeded()) {
- setEntPage(Page.Traffic);
- } else {
- toast.error("Invalid credentials");
- }
- } catch (e) {
- toast.error("Invalid credentials");
- console.error(e);
- } finally {
- setIsLoading(false);
- }
- }
-
- useKeyPress(shortcutsKeyboard.enter, onFormSubmit, formRef.current);
-
- return Setup
- Welcome to Mizu, please set up the admin user to continue
-
-
-
-
-
-
- setPassword(event.target.value)}/>
-
-
-
- setPasswordConfirm(event.target.value)}/>
-
-
-
- {isLoading &&
;
-};
-
-export default LoginPage
diff --git a/ui/src/components/Pages/SystemViewer/SystemViewer.tsx b/ui/src/components/Pages/SystemViewer/SystemViewer.tsx
deleted file mode 100644
index 84cbdda8b..000000000
--- a/ui/src/components/Pages/SystemViewer/SystemViewer.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-import {Outlet} from "react-router-dom";
-import {ServiceMapModal} from "../../ServiceMapModal/ServiceMapModal";
-import {EntHeader} from "../../Header/EntHeader";
-import {useRecoilState} from "recoil";
-import serviceMapModalOpenAtom from "../../../recoil/serviceMapModalOpen";
-
-const SystemViewer = ({isFirstLogin, setIsFirstLogin}) => {
-
- const [serviceMapModalOpen, setServiceMapModalOpen] = useRecoilState(serviceMapModalOpenAtom);
-
- return <>
- Login
-
-
- setUsername(event.target.value)}/>
-
-
-
- setPassword(event.target.value)}/>
-
-
-
-
+ {window["isOasEnabled"] && }
+ {window["isServiceMapEnabled"] && }
+
- const [showTLSWarning, setShowTLSWarning] = useState(false);
- const [userDismissedTLSWarning, setUserDismissedTLSWarning] = useState(false);
- const [addressesWithTLS, setAddressesWithTLS] = useState(new Set
-
+ return (
+ <>
+
-
- {
-
-
-
-
- {getConnectionTitle()}
-
-
-
-
-
- {window["isOasEnabled"] && }
- {window["isServiceMapEnabled"] && }
-
-
-
}
- {tappingStatus && !openOasModal &&
-
-
-
-
- {focusedEntryId &&
- | Namespace | -|
|---|---|
|
- |
- {namespace} | -
-
- Tapping Settings
-
- Please choose from below the namespaces for tapping, traffic for namespaces selected will be displayed
-
- {isLoading ?
- 
-
: <>
-
-
- }
-
- setSearchValue(event.target.value)}/>
-
- {buildNamespacesTable()}
-
-
- {!isFirstLogin &&
- }
-
-
-
- onToggle(event.target.checked)}/>
-
- );
-};
-
-export default Checkbox;
diff --git a/ui/src/components/assets/close.svg b/ui/src/components/assets/close.svg
index 1221c0331..c86a4928a 100644
--- a/ui/src/components/assets/close.svg
+++ b/ui/src/components/assets/close.svg
@@ -1,4 +1,4 @@
+
\ No newline at end of file
diff --git a/ui/src/components/assets/refresh.svg b/ui/src/components/assets/refresh.svg
index de0615856..a8a2aa489 100644
--- a/ui/src/components/assets/refresh.svg
+++ b/ui/src/components/assets/refresh.svg
@@ -1,3 +1,3 @@
+
\ No newline at end of file
diff --git a/ui/src/components/assets/serviceMap.svg b/ui/src/components/assets/serviceMap.svg
index 2fbc1f7e8..a75b917fa 100644
--- a/ui/src/components/assets/serviceMap.svg
+++ b/ui/src/components/assets/serviceMap.svg
@@ -12,4 +12,4 @@