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
This commit is contained in:
lirazyehezkel 2022-06-12 11:20:47 +03:00 committed by GitHub
parent 533fb71bf4
commit e41488ef3e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
72 changed files with 125 additions and 136 deletions

View File

@ -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";

View File

@ -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: {

View File

@ -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";

View File

@ -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",

View File

@ -1,4 +1,4 @@
@import '../../../variables.module'
@import '../../variables.module'
.row
display: flex

View File

@ -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

View File

Before

Width:  |  Height:  |  Size: 959 B

After

Width:  |  Height:  |  Size: 959 B

View File

@ -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";

View File

@ -1,4 +1,4 @@
@import 'src/variables.module'
@import '../../variables.module'
.TrafficPage
width: 100%

View File

@ -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";

View File

@ -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

View File

@ -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,

View File

@ -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;

View File

@ -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,

View File

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

View File

@ -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;

View File

@ -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>

View File

@ -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

View File

@ -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,

View File

@ -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;

View File

@ -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';

View File

@ -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)

View File

@ -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' : ''}`

View File

@ -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",

View File

@ -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

View File

@ -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,

View File

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

View File

@ -1,3 +0,0 @@
.SelectLabel
color: #8f9bb2
font-size: 11px

View File

@ -1,6 +0,0 @@
@import "../../../variables.module"
.spinnerContainer
display: flex
justify-content: center
margin-bottom: 10px

View File

Before

Width:  |  Height:  |  Size: 301 B

After

Width:  |  Height:  |  Size: 301 B

View File

Before

Width:  |  Height:  |  Size: 673 B

After

Width:  |  Height:  |  Size: 673 B

View File

@ -1,4 +1,4 @@
@import '../../variables.module.scss'
@import '../../../variables.module'
.closeIcon
cursor: pointer

View File

@ -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;

View File

Before

Width:  |  Height:  |  Size: 588 B

After

Width:  |  Height:  |  Size: 588 B

View File

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 66 KiB

View File

@ -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

View File

@ -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%" }}>

View File

Before

Width:  |  Height:  |  Size: 588 B

After

Width:  |  Height:  |  Size: 588 B

View File

Before

Width:  |  Height:  |  Size: 184 B

After

Width:  |  Height:  |  Size: 184 B

View File

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -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;