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

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

@@ -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 {EntryItem} from "../EntryListItem/EntryListItem";
-import down from "assets/downImg.svg";
+import down from "../assets/downImg.svg";
-import spinner from 'assets/spinner.svg';
+import spinner from '../assets/spinner.svg';
 import {RecoilState, useRecoilState, useRecoilValue, useSetRecoilState} from "recoil";
 import entriesAtom from "../../recoil/entries";
 import queryAtom from "../../recoil/query";
 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";

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

@@ -1,18 +1,18 @@
 import React, { useEffect, useState } from "react";
-import EntryViewer from "./EntryDetailed/EntryViewer";
+import EntryViewer from "./EntryViewer/EntryViewer";
-import { EntryItem } from "./EntryListItem/EntryListItem";
+import { EntryItem } from "../EntryListItem/EntryListItem";
 import makeStyles from '@mui/styles/makeStyles';
-import Protocol from "../UI/Protocol"
+import Protocol from "../UI/Protocol/Protocol"
-import Queryable from "../UI/Queryable";
+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: {

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

@@ -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 { SyntaxHighlighter } from "../../UI/SyntaxHighlighter";
-import CollapsibleContainer from "../../UI/CollapsibleContainer";
+import CollapsibleContainer from "../../UI/CollapsibleContainer/CollapsibleContainer";
-import FancyTextDisplay from "../../UI/FancyTextDisplay";
+import FancyTextDisplay from "../../UI/FancyTextDisplay/FancyTextDisplay";
-import Queryable from "../../UI/Queryable";
+import Queryable from "../../UI/Queryable/Queryable";
-import Checkbox from "../../UI/Checkbox";
+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";

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

@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 import styles from './EntryViewer.module.sass';
-import Tabs from "../../UI/Tabs";
+import Tabs from "../../UI/Tabs/Tabs";
-import {EntryTableSection, EntryBodySection, EntryTablePolicySection, EntryContractSection} from "./EntrySections";
+import {EntryTableSection, EntryBodySection, EntryTablePolicySection, EntryContractSection} from "../EntrySections/EntrySections";
 
 enum SectionTypes {
     SectionTable = "table",

ui-common/src/components/EntryListItem/EntryListItem.module.sass

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

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

@@ -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 StatusCode, {getClassification, StatusCodeClassification} from "../UI/StatusCode/StatusCode";
-import Protocol, {ProtocolInterface} from "../../UI/Protocol"
+import Protocol, {ProtocolInterface} from "../UI/Protocol/Protocol"
-import eBPFLogo from 'assets/lock.svg';
+import eBPFLogo from './assets/lock.svg';
-import {Summary} from "../../UI/Summary";
+import {Summary} from "../UI/Summary/Summary";
-import Queryable from "../../UI/Queryable";
+import Queryable from "../UI/Queryable/Queryable";
-import ingoingIconSuccess from "assets/ingoing-traffic-success.svg"
+import ingoingIconSuccess from "./assets/ingoing-traffic-success.svg"
-import ingoingIconFailure from "assets/ingoing-traffic-failure.svg"
+import ingoingIconFailure from "./assets/ingoing-traffic-failure.svg"
-import ingoingIconNeutral from "assets/ingoing-traffic-neutral.svg"
+import ingoingIconNeutral from "./assets/ingoing-traffic-neutral.svg"
-import outgoingIconSuccess from "assets/outgoing-traffic-success.svg"
+import outgoingIconSuccess from "./assets/outgoing-traffic-success.svg"
-import outgoingIconFailure from "assets/outgoing-traffic-failure.svg"
+import outgoingIconFailure from "./assets/outgoing-traffic-failure.svg"
-import outgoingIconNeutral from "assets/outgoing-traffic-neutral.svg"
+import outgoingIconNeutral from "./assets/outgoing-traffic-neutral.svg"
 import {useRecoilState} from "recoil";
-import focusedEntryIdAtom from "../../../recoil/focusedEntryId";
+import focusedEntryIdAtom from "../../recoil/focusedEntryId";
-import queryAtom from "../../../recoil/query";
+import queryAtom from "../../recoil/query";
 
 interface TCPInterface {
     ip: string

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

@@ -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 { SyntaxHighlighter } from "../UI/SyntaxHighlighter";
-import filterUIExample1 from "assets/filter-ui-example-1.png"
+import filterUIExample1 from "../TrafficViewer/assets/filter-ui-example-1.png"
-import filterUIExample2 from "assets/filter-ui-example-2.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";

ui-common/src/components/TrafficViewer/TrafficViewer.module.sass

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

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

@@ -1,10 +1,10 @@
-import React, {useEffect, useRef, useState} from "react";
+import React, { useEffect, useRef, useState } from "react";
-import {Filters} from "./Filters";
+import { Filters } from "../Filters/Filters";
-import {EntriesList} from "./EntriesList";
+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 styles from '../EntriesList/EntriesList.module.sass';
-import { EntryDetailed } from "./EntryDetailed";
+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";

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

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

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

@@ -1,7 +1,7 @@
 import React from "react";
-import collapsedImg from "assets/collapsed.svg";
+import collapsedImg from "../assets/collapsed.svg";
-import expandedImg from "assets/expanded.svg";
+import expandedImg from "../assets/expanded.svg";
-import styles from "./style/CollapsibleContainer.module.sass";
+import styles from "./CollapsibleContainer.module.sass";
 
 interface Props {
     title: string | React.ReactNode,

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

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

ui-common/src/components/UI/FancyTextDisplay/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 duplicateImg from "../assets/duplicate.svg";
-import styles from './style/FancyTextDisplay.module.sass';
+import styles from './FancyTextDisplay.module.sass';
 
 interface Props {
     text: string | number,

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

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

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

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

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

@@ -1,6 +1,6 @@
 import React from "react";
-import circleImg from 'assets/dotted-circle.svg';
+import circleImg from '../assets/dotted-circle.svg';
-import styles from './style/NoDataMessage.module.sass'
+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>

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

@@ -1,6 +1,6 @@
 import React from "react";
-import styles from './style/Protocol.module.sass';
+import styles from './Protocol.module.sass';
-import Queryable from "./Queryable";
+import Queryable from "../Queryable/Queryable";
 
 export interface ProtocolInterface {
     name: string

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

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

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

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

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

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

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

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import Radio from "./Radio";
+import Radio from "../Radio/Radio";
-import styles from './style/SelectList.module.sass'
+import styles from './SelectList.module.sass'
-import NoDataMessage from "./NoDataMessage";
+import NoDataMessage from "../NoDataMessage/NoDataMessage";
-import Checkbox from "./Checkbox";
+import Checkbox from "../Checkbox/Checkbox";
-import { useCommonStyles } from "../../helpers/commonStyle";
+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)
 

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

@@ -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 warningIcon from '../assets/warning_icon.svg';
-import failIcon from 'assets/failed.svg';
+import failIcon from '../assets/failed.svg';
-import successIcon from 'assets/success.svg';
+import successIcon from '../assets/success.svg';
 import {useRecoilValue} from "recoil";
-import tappingStatusAtom, {tappingStatusDetails} from "../../recoil/tappingStatus";
+import tappingStatusAtom, {tappingStatusDetails} from "../../../recoil/tappingStatus";
-import Tooltip from "./Tooltip";
+import Tooltip from "../Tooltip/Tooltip";
 
 const pluralize = (noun: string, amount: number) => {
     return `${noun}${amount !== 1 ? 's' : ''}`

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

@@ -1,6 +1,6 @@
 import React from "react";
-import styles from './style/StatusCode.module.sass';
+import styles from './StatusCode.module.sass';
-import Queryable from "./Queryable";
+import Queryable from "../Queryable/Queryable";
 
 export enum StatusCodeClassification {
     SUCCESS = "success",

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

@@ -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 styles from './Summary.module.sass';
-import Queryable from "./Queryable";
+import Queryable from "../Queryable/Queryable";
 
 interface SummaryProps {
     method: string

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

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

ui-common/src/components/UI/index.ts

@@ -1,13 +1,13 @@
-import LoadingOverlay from "./LoadingOverlay";
+import LoadingOverlay from "./LoadingOverlay/LoadingOverlay";
-import { Select } from "./Select";
+import { Select } from "./Select/Select";
-import Tabs from "./Tabs";
+import Tabs from "./Tabs/Tabs";
-import Tooltip from "./Tooltip";
+import Tooltip from "./Tooltip/Tooltip";
-import Checkbox from "./Checkbox"
+import Checkbox from "./Checkbox/Checkbox"
-import { StatusBar } from "./StatusBar";
+import { StatusBar } from "./StatusBar/StatusBar";
-import CustomModal from "./CustomModal";
+import CustomModal from "./CustomModal/CustomModal";
-import { InformationIcon, Link } from "./InformationIcon";
+import { InformationIcon, Link } from "./InformationIcon/InformationIcon";
-import SelectList from "./SelectList";
+import SelectList from "./SelectList/SelectList";
-import NoDataMessage from "./NoDataMessage";
+import NoDataMessage from "./NoDataMessage/NoDataMessage";
 
 export { LoadingOverlay, Select, Tabs, Tooltip, Checkbox, CustomModal, InformationIcon, SelectList, NoDataMessage, Link };
 export { StatusBar }

ui-common/src/components/UI/style/FilterSelect.module.sass

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

ui-common/src/components/UI/style/Spinner.module.sass

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

ui-common/src/components/modals/OasModal/OasModal.module.sass

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

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

@@ -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 { TOAST_CONTAINER_ID } from "../../../configs/Consts";
-import SearchableDropdown from "../UI/SearchableDropdown/SearchableDropdown";
+import SearchableDropdown from "../../UI/SearchableDropdown/SearchableDropdown";
 
 
 const modalStyle = {
@@ -112,4 +112,4 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
   );
 };
 
-export default OasModal;
+export default OasModal;

ui-common/src/components/modals/ServiceMapModal/ServiceMapModal.module.sass

@@ -1,5 +1,5 @@
-@import "../../variables.module"
+@import "../../../variables.module"
-@import "../../components"
+@import "../../../components"
 
 .closeIcon
   position: absolute
@@ -94,3 +94,8 @@
 
 .servicesFilterList
   height: calc(100% - 30px - 52px)
+
+.spinnerContainer
+  display: flex
+  justify-content: center
+  margin-bottom: 10px

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

@@ -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 { useCommonStyles } from "../../../helpers/commonStyle";
-import refreshIcon from "assets/refresh.svg";
+import refreshIcon from "./assets/refresh.svg";
-import filterIcon from "assets/filter-icon.svg";
+import filterIcon from "./assets/filter-icon.svg";
-import filterIconClicked from "assets/filter-icon-clicked.svg";
+import filterIconClicked from "./assets/filter-icon-clicked.svg";
-import closeIcon from "assets/close.svg"
+import closeIcon from "./assets/close.svg"
 import styles from './ServiceMapModal.module.sass'
-import SelectList from "../UI/SelectList";
+import SelectList from "../../UI/SelectList/SelectList";
 import { GraphData, ServiceMapGraph } from "./ServiceMapModalTypes"
-import { Utils } from "../../helpers/Utils";
+import { Utils } from "../../../helpers/Utils";
-import { TOAST_CONTAINER_ID } from "../../configs/Consts";
+import { TOAST_CONTAINER_ID } from "../../../configs/Consts";
-import Resizeable from "../UI/Resizeable"
+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%" }}>

ui-common/src/index.tsx

@@ -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 OasModal from './components/modals/OasModal/OasModal';
-import { ServiceMapModal } from './components/ServiceMapModal/ServiceMapModal';
+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;