TRA-4276 Folder structure refactor (#1131)
* mizu-common folder structure refactor * no message * change images import from absolute to relative * relative sass imports * no message * remove tgz * spinner style
@ -1,15 +1,15 @@
|
||||
import React, {useCallback, useEffect, useMemo, useState} from "react";
|
||||
import styles from '../style/EntriesList.module.sass';
|
||||
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 spinner from 'assets/spinner.svg';
|
||||
import {EntryItem} from "../EntryListItem/EntryListItem";
|
||||
import down from "../assets/downImg.svg";
|
||||
import spinner from '../assets/spinner.svg';
|
||||
import {RecoilState, useRecoilState, useRecoilValue, useSetRecoilState} from "recoil";
|
||||
import entriesAtom from "../../recoil/entries";
|
||||
import queryAtom from "../../recoil/query";
|
||||
import TrafficViewerApiAtom from "../../recoil/TrafficViewerApi";
|
||||
import TrafficViewerApi from "./TrafficViewerApi";
|
||||
import TrafficViewerApi from "../TrafficViewer/TrafficViewerApi";
|
||||
import focusedEntryIdAtom from "../../recoil/focusedEntryId";
|
||||
import {toast} from "react-toastify";
|
||||
import {MAX_ENTRIES, TOAST_CONTAINER_ID} from "../../configs/Consts";
|
@ -1,18 +1,18 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import EntryViewer from "./EntryDetailed/EntryViewer";
|
||||
import { EntryItem } from "./EntryListItem/EntryListItem";
|
||||
import EntryViewer from "./EntryViewer/EntryViewer";
|
||||
import { EntryItem } from "../EntryListItem/EntryListItem";
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
import Protocol from "../UI/Protocol"
|
||||
import Queryable from "../UI/Queryable";
|
||||
import Protocol from "../UI/Protocol/Protocol"
|
||||
import Queryable from "../UI/Queryable/Queryable";
|
||||
import { toast } from "react-toastify";
|
||||
import { RecoilState, useRecoilValue } from "recoil";
|
||||
import focusedEntryIdAtom from "../../recoil/focusedEntryId";
|
||||
import TrafficViewerApi from "./TrafficViewerApi";
|
||||
import TrafficViewerApi from "../TrafficViewer/TrafficViewerApi";
|
||||
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: {
|
@ -1,10 +1,10 @@
|
||||
import styles from "./EntrySections.module.sass";
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { SyntaxHighlighter } from "../../UI/SyntaxHighlighter/index";
|
||||
import CollapsibleContainer from "../../UI/CollapsibleContainer";
|
||||
import FancyTextDisplay from "../../UI/FancyTextDisplay";
|
||||
import Queryable from "../../UI/Queryable";
|
||||
import Checkbox from "../../UI/Checkbox";
|
||||
import { SyntaxHighlighter } from "../../UI/SyntaxHighlighter";
|
||||
import CollapsibleContainer from "../../UI/CollapsibleContainer/CollapsibleContainer";
|
||||
import FancyTextDisplay from "../../UI/FancyTextDisplay/FancyTextDisplay";
|
||||
import Queryable from "../../UI/Queryable/Queryable";
|
||||
import Checkbox from "../../UI/Checkbox/Checkbox";
|
||||
import ProtobufDecoder from "protobuf-decoder";
|
||||
import { default as jsonBeautify } from "json-beautify";
|
||||
import { default as xmlBeautify } from "xml-formatter";
|
@ -1,7 +1,7 @@
|
||||
import React, {useState} from 'react';
|
||||
import styles from './EntryViewer.module.sass';
|
||||
import Tabs from "../../UI/Tabs";
|
||||
import {EntryTableSection, EntryBodySection, EntryTablePolicySection, EntryContractSection} from "./EntrySections";
|
||||
import Tabs from "../../UI/Tabs/Tabs";
|
||||
import {EntryTableSection, EntryBodySection, EntryTablePolicySection, EntryContractSection} from "../EntrySections/EntrySections";
|
||||
|
||||
enum SectionTypes {
|
||||
SectionTable = "table",
|
@ -1,4 +1,4 @@
|
||||
@import '../../../variables.module'
|
||||
@import '../../variables.module'
|
||||
|
||||
.row
|
||||
display: flex
|
@ -2,20 +2,20 @@ import React from "react";
|
||||
import Moment from 'moment';
|
||||
import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
|
||||
import styles from './EntryListItem.module.sass';
|
||||
import StatusCode, {getClassification, StatusCodeClassification} from "../../UI/StatusCode";
|
||||
import Protocol, {ProtocolInterface} from "../../UI/Protocol"
|
||||
import eBPFLogo from 'assets/lock.svg';
|
||||
import {Summary} from "../../UI/Summary";
|
||||
import Queryable from "../../UI/Queryable";
|
||||
import ingoingIconSuccess from "assets/ingoing-traffic-success.svg"
|
||||
import ingoingIconFailure from "assets/ingoing-traffic-failure.svg"
|
||||
import ingoingIconNeutral from "assets/ingoing-traffic-neutral.svg"
|
||||
import outgoingIconSuccess from "assets/outgoing-traffic-success.svg"
|
||||
import outgoingIconFailure from "assets/outgoing-traffic-failure.svg"
|
||||
import outgoingIconNeutral from "assets/outgoing-traffic-neutral.svg"
|
||||
import StatusCode, {getClassification, StatusCodeClassification} from "../UI/StatusCode/StatusCode";
|
||||
import Protocol, {ProtocolInterface} from "../UI/Protocol/Protocol"
|
||||
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 ingoingIconFailure from "./assets/ingoing-traffic-failure.svg"
|
||||
import ingoingIconNeutral from "./assets/ingoing-traffic-neutral.svg"
|
||||
import outgoingIconSuccess from "./assets/outgoing-traffic-success.svg"
|
||||
import outgoingIconFailure from "./assets/outgoing-traffic-failure.svg"
|
||||
import outgoingIconNeutral from "./assets/outgoing-traffic-neutral.svg"
|
||||
import {useRecoilState} from "recoil";
|
||||
import focusedEntryIdAtom from "../../../recoil/focusedEntryId";
|
||||
import queryAtom from "../../../recoil/query";
|
||||
import focusedEntryIdAtom from "../../recoil/focusedEntryId";
|
||||
import queryAtom from "../../recoil/query";
|
||||
|
||||
interface TCPInterface {
|
||||
ip: string
|
Before Width: | Height: | Size: 800 B After Width: | Height: | Size: 800 B |
Before Width: | Height: | Size: 794 B After Width: | Height: | Size: 794 B |
Before Width: | Height: | Size: 800 B After Width: | Height: | Size: 800 B |
Before Width: | Height: | Size: 959 B After Width: | Height: | Size: 959 B |
Before Width: | Height: | Size: 736 B After Width: | Height: | Size: 736 B |
Before Width: | Height: | Size: 730 B After Width: | Height: | Size: 730 B |
Before Width: | Height: | Size: 736 B After Width: | Height: | Size: 736 B |
@ -1,11 +1,11 @@
|
||||
import React, { FC, useEffect, useMemo, useRef, useState } from "react";
|
||||
import styles from '../style/Filters.module.sass';
|
||||
import styles from './Filters.module.sass';
|
||||
import {Button, Grid, Modal, Box, Typography, Backdrop, Fade, Divider, debounce} from "@mui/material";
|
||||
import CodeEditor from '@uiw/react-textarea-code-editor';
|
||||
import MenuBookIcon from '@mui/icons-material/MenuBook';
|
||||
import {SyntaxHighlighter} from "../UI/SyntaxHighlighter/index";
|
||||
import filterUIExample1 from "assets/filter-ui-example-1.png"
|
||||
import filterUIExample2 from "assets/filter-ui-example-2.png"
|
||||
import { SyntaxHighlighter } from "../UI/SyntaxHighlighter";
|
||||
import filterUIExample1 from "../TrafficViewer/assets/filter-ui-example-1.png"
|
||||
import filterUIExample2 from "../TrafficViewer/assets/filter-ui-example-2.png"
|
||||
import variables from '../../variables.module.scss';
|
||||
import { useRecoilState, useRecoilValue } from "recoil";
|
||||
import queryAtom from "../../recoil/query";
|
@ -1,4 +1,4 @@
|
||||
@import 'src/variables.module'
|
||||
@import '../../variables.module'
|
||||
|
||||
.TrafficPage
|
||||
width: 100%
|
||||
|
@ -1,10 +1,10 @@
|
||||
import React, {useEffect, useRef, useState} from "react";
|
||||
import {Filters} from "./Filters";
|
||||
import {EntriesList} from "./EntriesList";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { Filters } from "../Filters/Filters";
|
||||
import { EntriesList } from "../EntriesList/EntriesList";
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
import TrafficViewerStyles from "./TrafficViewer.module.sass";
|
||||
import styles from '../style/EntriesList.module.sass';
|
||||
import { EntryDetailed } from "./EntryDetailed";
|
||||
import styles from '../EntriesList/EntriesList.module.sass';
|
||||
import { EntryDetailed } from "../EntryDetailed/EntryDetailed";
|
||||
import playIcon from 'assets/run.svg';
|
||||
import pauseIcon from 'assets/pause.svg';
|
||||
import variables from '../../variables.module.scss';
|
||||
@ -15,7 +15,7 @@ import focusedEntryIdAtom from "../../recoil/focusedEntryId";
|
||||
import queryAtom from "../../recoil/query";
|
||||
import trafficViewerApiAtom from "../../recoil/TrafficViewerApi"
|
||||
import TrafficViewerApi from "./TrafficViewerApi";
|
||||
import { StatusBar } from "../UI/StatusBar";
|
||||
import { StatusBar } from "../UI/StatusBar/StatusBar";
|
||||
import tappingStatusAtom from "../../recoil/tappingStatus/atom";
|
||||
import { TOAST_CONTAINER_ID } from "../../configs/Consts";
|
||||
import leftOffTopAtom from "../../recoil/leftOffTop";
|
||||
|
@ -1,6 +0,0 @@
|
||||
<?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>
|
Before Width: | Height: | Size: 673 B |
@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import collapsedImg from "assets/collapsed.svg";
|
||||
import expandedImg from "assets/expanded.svg";
|
||||
import styles from "./style/CollapsibleContainer.module.sass";
|
||||
import collapsedImg from "../assets/collapsed.svg";
|
||||
import expandedImg from "../assets/expanded.svg";
|
||||
import styles from "./CollapsibleContainer.module.sass";
|
||||
|
||||
interface Props {
|
||||
title: string | React.ReactNode,
|
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Modal, Backdrop, Fade, Box } from '@mui/material';
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
import {useCommonStyles} from "../../helpers/commonStyle";
|
||||
import {useCommonStyles} from "../../../helpers/commonStyle";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
modal: {
|
||||
@ -10,10 +10,10 @@ const useStyles = makeStyles({
|
||||
justifyContent: "center"
|
||||
},
|
||||
modalContents: {
|
||||
borderRadius: "5px",
|
||||
borderRadius: "5px",
|
||||
outline: "none",
|
||||
minWidth: "300px",
|
||||
backgroundColor: "rgb(255, 255, 255)",
|
||||
backgroundColor: "rgb(255, 255, 255)",
|
||||
},
|
||||
modalBackdrop :{
|
||||
background : "rgba(24, 51, 121, 0.8)"
|
||||
@ -33,16 +33,16 @@ export interface CustomModalProps {
|
||||
const CustomModal: React.FunctionComponent<CustomModalProps> = ({ open = false, onClose, disableBackdropClick = false, children, className}) => {
|
||||
const classes = useStyles({});
|
||||
const globals = useCommonStyles().modal
|
||||
|
||||
|
||||
|
||||
const onModalClose = (reason) => {
|
||||
if(reason === 'backdropClick' && disableBackdropClick)
|
||||
return;
|
||||
return;
|
||||
onClose();
|
||||
}
|
||||
|
||||
return <Modal disableEnforceFocus open={open} onClose={(event, reason) => onModalClose(reason)}
|
||||
className={`${classes.modal}`}
|
||||
className={`${classes.modal}`}
|
||||
closeAfterTransition
|
||||
BackdropComponent={Backdrop}
|
||||
BackdropProps={{
|
||||
@ -59,4 +59,4 @@ const CustomModal: React.FunctionComponent<CustomModalProps> = ({ open = false,
|
||||
</Modal>
|
||||
}
|
||||
|
||||
export default CustomModal;
|
||||
export default CustomModal;
|
@ -1,7 +1,7 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
||||
import duplicateImg from "assets/duplicate.svg";
|
||||
import styles from './style/FancyTextDisplay.module.sass';
|
||||
import duplicateImg from "../assets/duplicate.svg";
|
||||
import styles from './FancyTextDisplay.module.sass';
|
||||
|
||||
interface Props {
|
||||
text: string | number,
|
@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import styles from "./style/InformationIcon.module.sass"
|
||||
import styles from "./InformationIcon.module.sass"
|
||||
|
||||
const DEFUALT_LINK = "https://getmizu.io/docs"
|
||||
|
||||
@ -19,4 +19,4 @@ export const InformationIcon: React.FC<LinkProps> = ({ className }) => {
|
||||
return <Link title="documentation" className={`${styles.linkStyle} ${className}`} link={DEFUALT_LINK}>
|
||||
<span>Docs</span>
|
||||
</Link>
|
||||
}
|
||||
}
|
@ -1,5 +1,5 @@
|
||||
import React, {useEffect, useState} from "react";
|
||||
import style from '../style/LoadingOverlay.module.sass';
|
||||
import style from './LoadingOverlay.module.sass';
|
||||
|
||||
const SpinnerShowDelayMs = 350;
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import circleImg from 'assets/dotted-circle.svg';
|
||||
import styles from './style/NoDataMessage.module.sass'
|
||||
import circleImg from '../assets/dotted-circle.svg';
|
||||
import styles from './NoDataMessage.module.sass'
|
||||
|
||||
export interface Props {
|
||||
messageText: string;
|
||||
@ -10,7 +10,7 @@ const NoDataMessage: React.FC<Props> = ({ messageText = "No data found" }) => {
|
||||
return (
|
||||
<div data-cy="noDataMessage" className={styles.messageContainer__noData}>
|
||||
<div className={styles.container}>
|
||||
<img src={circleImg} alt="No data Found"></img>
|
||||
<img src={circleImg} alt="No data Found"/>
|
||||
<div className={styles.messageContainer__noDataMessage}>{messageText}</div>
|
||||
</div>
|
||||
</div>
|
@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import styles from './style/Protocol.module.sass';
|
||||
import Queryable from "./Queryable";
|
||||
import styles from './Protocol.module.sass';
|
||||
import Queryable from "../Queryable/Queryable";
|
||||
|
||||
export interface ProtocolInterface {
|
||||
name: string
|
@ -1,9 +1,9 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
||||
import AddCircleIcon from '@mui/icons-material/AddCircle';
|
||||
import QueryableStyle from './style/Queryable.module.sass';
|
||||
import QueryableStyle from './Queryable.module.sass';
|
||||
import {useRecoilState} from "recoil";
|
||||
import queryAtom from "../../recoil/query";
|
||||
import queryAtom from "../../../recoil/query";
|
||||
|
||||
interface Props {
|
||||
query: string,
|
@ -1,6 +1,6 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
|
||||
import styles from './style/Resizeable.module.sass'
|
||||
import styles from './Resizeable.module.sass'
|
||||
|
||||
export interface Props {
|
||||
children
|
||||
@ -56,4 +56,4 @@ const Resizeable: React.FC<Props> = ({ children, minWidth, maxWidth }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Resizeable;
|
||||
export default Resizeable;
|
@ -1,7 +1,7 @@
|
||||
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, SelectProps as MUISelectProps} from '@mui/material';
|
||||
import React from 'react';
|
||||
import styles from './style/Select.module.sass';
|
||||
import styles from './Select.module.sass';
|
||||
|
||||
export const ALL_KEY= 'All';
|
||||
|
@ -1,9 +1,9 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import Radio from "./Radio";
|
||||
import styles from './style/SelectList.module.sass'
|
||||
import NoDataMessage from "./NoDataMessage";
|
||||
import Checkbox from "./Checkbox";
|
||||
import { useCommonStyles } from "../../helpers/commonStyle";
|
||||
import Radio from "../Radio/Radio";
|
||||
import styles from './SelectList.module.sass'
|
||||
import NoDataMessage from "../NoDataMessage/NoDataMessage";
|
||||
import Checkbox from "../Checkbox/Checkbox";
|
||||
import { useCommonStyles } from "../../../helpers/commonStyle";
|
||||
|
||||
|
||||
export interface Props {
|
||||
@ -21,7 +21,7 @@ export interface Props {
|
||||
const SelectList: React.FC<Props> = ({ items, tableName, checkedValues = [], multiSelect = true, setCheckedValues, tableClassName,
|
||||
checkBoxWidth = 50 ,inputSearchClass,isFilterable = true}) => {
|
||||
const commonClasses = useCommonStyles();
|
||||
const [searchValue, setSearchValue] = useState("")
|
||||
const [searchValue, setSearchValue] = useState("")
|
||||
const noItemsMessage = "No items to show";
|
||||
const [headerChecked, setHeaderChecked] = useState(false)
|
||||
|
@ -1,11 +1,11 @@
|
||||
import style from './style/StatusBar.module.sass';
|
||||
import style from './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";
|
||||
import Tooltip from "./Tooltip";
|
||||
import tappingStatusAtom, {tappingStatusDetails} from "../../../recoil/tappingStatus";
|
||||
import Tooltip from "../Tooltip/Tooltip";
|
||||
|
||||
const pluralize = (noun: string, amount: number) => {
|
||||
return `${noun}${amount !== 1 ? 's' : ''}`
|
@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import styles from './style/StatusCode.module.sass';
|
||||
import Queryable from "./Queryable";
|
||||
import styles from './StatusCode.module.sass';
|
||||
import Queryable from "../Queryable/Queryable";
|
||||
|
||||
export enum StatusCodeClassification {
|
||||
SUCCESS = "success",
|
@ -1,7 +1,7 @@
|
||||
import miscStyles from "./style/misc.module.sass";
|
||||
import miscStyles from "./misc.module.sass";
|
||||
import React from "react";
|
||||
import styles from './style/Summary.module.sass';
|
||||
import Queryable from "./Queryable";
|
||||
import styles from './Summary.module.sass';
|
||||
import Queryable from "../Queryable/Queryable";
|
||||
|
||||
interface SummaryProps {
|
||||
method: string
|
@ -1,9 +1,9 @@
|
||||
import Tooltip from "./Tooltip";
|
||||
import Tooltip from "../Tooltip/Tooltip";
|
||||
import React from "react";
|
||||
import { createStyles } from '@mui/styles';
|
||||
import { Theme } from '@mui/material/styles'
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
import variables from '../../variables.module.scss';
|
||||
import variables from '../../../variables.module.scss';
|
||||
|
||||
interface Tab {
|
||||
tab: string,
|
@ -1,13 +1,13 @@
|
||||
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";
|
||||
import { InformationIcon, Link } from "./InformationIcon";
|
||||
import SelectList from "./SelectList";
|
||||
import NoDataMessage from "./NoDataMessage";
|
||||
import LoadingOverlay from "./LoadingOverlay/LoadingOverlay";
|
||||
import { Select } from "./Select/Select";
|
||||
import Tabs from "./Tabs/Tabs";
|
||||
import Tooltip from "./Tooltip/Tooltip";
|
||||
import Checkbox from "./Checkbox/Checkbox"
|
||||
import { StatusBar } from "./StatusBar/StatusBar";
|
||||
import CustomModal from "./CustomModal/CustomModal";
|
||||
import { InformationIcon, Link } from "./InformationIcon/InformationIcon";
|
||||
import SelectList from "./SelectList/SelectList";
|
||||
import NoDataMessage from "./NoDataMessage/NoDataMessage";
|
||||
|
||||
export { LoadingOverlay, Select, Tabs, Tooltip, Checkbox, CustomModal, InformationIcon, SelectList, NoDataMessage, Link };
|
||||
export { StatusBar }
|
||||
|
@ -1,3 +0,0 @@
|
||||
.SelectLabel
|
||||
color: #8f9bb2
|
||||
font-size: 11px
|
@ -1,6 +0,0 @@
|
||||
@import "../../../variables.module"
|
||||
|
||||
.spinnerContainer
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin-bottom: 10px
|
Before Width: | Height: | Size: 301 B After Width: | Height: | Size: 301 B |
Before Width: | Height: | Size: 673 B After Width: | Height: | Size: 673 B |
@ -1,4 +1,4 @@
|
||||
@import '../../variables.module.scss'
|
||||
@import '../../../variables.module'
|
||||
|
||||
.closeIcon
|
||||
cursor: pointer
|
@ -1,14 +1,14 @@
|
||||
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";
|
||||
import SearchableDropdown from "../UI/SearchableDropdown/SearchableDropdown";
|
||||
import { TOAST_CONTAINER_ID } from "../../../configs/Consts";
|
||||
import SearchableDropdown from "../../UI/SearchableDropdown/SearchableDropdown";
|
||||
|
||||
|
||||
const modalStyle = {
|
||||
@ -112,4 +112,4 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
|
||||
);
|
||||
};
|
||||
|
||||
export default OasModal;
|
||||
export default OasModal;
|
Before Width: | Height: | Size: 588 B After Width: | Height: | Size: 588 B |
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
@ -1,5 +1,5 @@
|
||||
@import "../../variables.module"
|
||||
@import "../../components"
|
||||
@import "../../../variables.module"
|
||||
@import "../../../components"
|
||||
|
||||
.closeIcon
|
||||
position: absolute
|
||||
@ -94,3 +94,8 @@
|
||||
|
||||
.servicesFilterList
|
||||
height: calc(100% - 30px - 52px)
|
||||
|
||||
.spinnerContainer
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin-bottom: 10px
|
@ -1,22 +1,21 @@
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { Box, Fade, Modal, Backdrop, Button } from "@mui/material";
|
||||
import { toast } from "react-toastify";
|
||||
import spinnerStyle from '../UI/style/Spinner.module.sass';
|
||||
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 filterIcon from "assets/filter-icon.svg";
|
||||
import filterIconClicked from "assets/filter-icon-clicked.svg";
|
||||
import closeIcon from "assets/close.svg"
|
||||
import { useCommonStyles } from "../../../helpers/commonStyle";
|
||||
import refreshIcon from "./assets/refresh.svg";
|
||||
import filterIcon from "./assets/filter-icon.svg";
|
||||
import filterIconClicked from "./assets/filter-icon-clicked.svg";
|
||||
import closeIcon from "./assets/close.svg"
|
||||
import styles from './ServiceMapModal.module.sass'
|
||||
import SelectList from "../UI/SelectList";
|
||||
import SelectList from "../../UI/SelectList/SelectList";
|
||||
import { GraphData, ServiceMapGraph } from "./ServiceMapModalTypes"
|
||||
import { Utils } from "../../helpers/Utils";
|
||||
import { TOAST_CONTAINER_ID } from "../../configs/Consts";
|
||||
import Resizeable from "../UI/Resizeable"
|
||||
import { Utils } from "../../../helpers/Utils";
|
||||
import { TOAST_CONTAINER_ID } from "../../../configs/Consts";
|
||||
import Resizeable from "../../UI/Resizeable/Resizeable"
|
||||
|
||||
const modalStyle = {
|
||||
position: 'absolute',
|
||||
@ -244,7 +243,7 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
|
||||
<div className={styles.graphSection}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
</div>
|
||||
{isLoading && <div className={spinnerStyle.spinnerContainer}>
|
||||
{isLoading && <div className={styles.spinnerContainer}>
|
||||
<img alt="spinner" src={spinnerImg} style={{ height: 50 }} />
|
||||
</div>}
|
||||
{!isLoading && <div style={{ height: "100%", width: "100%" }}>
|
Before Width: | Height: | Size: 588 B After Width: | Height: | Size: 588 B |
Before Width: | Height: | Size: 182 B After Width: | Height: | Size: 182 B |
Before Width: | Height: | Size: 184 B After Width: | Height: | Size: 184 B |
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
@ -2,10 +2,10 @@ import TrafficViewer from './components/TrafficViewer/TrafficViewer';
|
||||
import * as UI from "./components/UI"
|
||||
import { StatusBar } from './components/UI';
|
||||
import useWS, { DEFAULT_LEFTOFF } from './hooks/useWS';
|
||||
import OasModal from './components/OasModal/OasModal';
|
||||
import { ServiceMapModal } from './components/ServiceMapModal/ServiceMapModal';
|
||||
import OasModal from './components/modals/OasModal/OasModal';
|
||||
import { ServiceMapModal } from './components/modals/ServiceMapModal/ServiceMapModal';
|
||||
|
||||
export { CodeEditorWrap as QueryForm } from './components/TrafficViewer/Filters';
|
||||
export { CodeEditorWrap as QueryForm } from './components/Filters/Filters';
|
||||
export { UI, StatusBar, OasModal, ServiceMapModal }
|
||||
export { useWS, DEFAULT_LEFTOFF }
|
||||
export default TrafficViewer;
|
||||
|