From e41488ef3eb2a473e4421615ab1a752d25408f9c Mon Sep 17 00:00:00 2001
From: lirazyehezkel <61656597+lirazyehezkel@users.noreply.github.com>
Date: Sun, 12 Jun 2022 11:20:47 +0300
Subject: [PATCH] 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
---
 .../EntriesList.module.sass                   |   0
 .../EntriesList.tsx                           |  10 +++----
 .../EntryDetailed.tsx                         |  12 ++++----
 .../EntrySections}/EntrySections.module.sass  |   0
 .../EntrySections}/EntrySections.tsx          |  10 +++----
 .../EntryViewer}/EntryViewer.module.sass      |   0
 .../EntryViewer}/EntryViewer.tsx              |   4 +--
 .../EntryListItem/EntryListItem.module.sass   |   2 +-
 .../EntryListItem/EntryListItem.tsx           |  26 +++++++++---------
 .../assets/ingoing-traffic-failure.svg        |   0
 .../assets/ingoing-traffic-neutral.svg        |   0
 .../assets/ingoing-traffic-success.svg        |   0
 .../EntryListItem/assets/lock.svg             |   0
 .../assets/outgoing-traffic-failure.svg       |   0
 .../assets/outgoing-traffic-neutral.svg       |   0
 .../assets/outgoing-traffic-success.svg       |   0
 .../{style => Filters}/Filters.module.sass    |   0
 .../{TrafficViewer => Filters}/Filters.tsx    |   8 +++---
 .../TrafficViewer/TrafficViewer.module.sass   |   2 +-
 .../TrafficViewer/TrafficViewer.tsx           |  12 ++++----
 .../TrafficViewer/assets/spinner.svg          |   6 ----
 .../components/UI/{ => Checkbox}/Checkbox.tsx |   0
 .../CollapsibleContainer.module.sass          |   0
 .../CollapsibleContainer.tsx                  |   6 ++--
 .../UI/{ => CustomModal}/CustomModal.tsx      |  14 +++++-----
 .../FancyTextDisplay.module.sass              |   0
 .../FancyTextDisplay.tsx                      |   4 +--
 .../InformationIcon.module.sass               |   0
 .../{ => InformationIcon}/InformationIcon.tsx |   4 +--
 .../LoadingOverlay.module.sass                |   0
 .../{ => LoadingOverlay}/LoadingOverlay.tsx   |   2 +-
 .../NoDataMessage.module.sass                 |   0
 .../UI/{ => NoDataMessage}/NoDataMessage.tsx  |   6 ++--
 .../{style => Protocol}/Protocol.module.sass  |   0
 .../components/UI/{ => Protocol}/Protocol.tsx |   4 +--
 .../Queryable.module.sass                     |   0
 .../UI/{ => Queryable}/Queryable.tsx          |   4 +--
 .../src/components/UI/{ => Radio}/Radio.tsx   |   0
 .../Resizeable.module.sass                    |   0
 .../UI/{ => Resizeable}/Resizeable.tsx        |   4 +--
 .../UI/{style => Select}/Select.module.sass   |   0
 .../src/components/UI/{ => Select}/Select.tsx |   4 +--
 .../SelectList.module.sass                    |   0
 .../UI/{ => SelectList}/SelectList.tsx        |  12 ++++----
 .../StatusBar.module.sass                     |   0
 .../UI/{ => StatusBar}/StatusBar.tsx          |  12 ++++----
 .../StatusCode.module.sass                    |   0
 .../UI/{ => StatusCode}/StatusCode.tsx        |   4 +--
 .../UI/{style => Summary}/Summary.module.sass |   0
 .../components/UI/{ => Summary}/Summary.tsx   |   6 ++--
 .../UI/{style => Summary}/misc.module.sass    |   0
 .../src/components/UI/{ => Tabs}/Tabs.tsx     |   4 +--
 .../components/UI/{ => Tooltip}/Tooltip.tsx   |   0
 ui-common/src/components/UI/index.ts          |  20 +++++++-------
 .../UI/style/FilterSelect.module.sass         |   3 --
 .../components/UI/style/Spinner.module.sass   |   6 ----
 .../{TrafficViewer => }/assets/downImg.svg    |   0
 .../{ServiceMapModal => }/assets/spinner.svg  |   0
 .../OasModal/OasModal.module.sass             |   2 +-
 .../{ => modals}/OasModal/OasModal.tsx        |  10 +++----
 .../OasModal/assets/closeIcon.svg             |   0
 .../OasModal/assets/openApiLogo.png           | Bin
 .../OasModal/redocThemeOptions.ts             |   0
 .../ServiceMapModal.module.sass               |   9 ++++--
 .../ServiceMapModal/ServiceMapModal.tsx       |  23 ++++++++--------
 .../ServiceMapModal/ServiceMapModalTypes.ts   |   0
 .../ServiceMapModal/ServiceMapOptions.ts      |   0
 .../ServiceMapModal/assets/close.svg          |   0
 .../assets/filter-icon-clicked.svg            |   0
 .../ServiceMapModal/assets/filter-icon.svg    |   0
 .../ServiceMapModal/assets/refresh.svg        |   0
 ui-common/src/index.tsx                       |   6 ++--
 72 files changed, 125 insertions(+), 136 deletions(-)
 rename ui-common/src/components/{style => EntriesList}/EntriesList.module.sass (100%)
 rename ui-common/src/components/{TrafficViewer => EntriesList}/EntriesList.tsx (97%)
 rename ui-common/src/components/{TrafficViewer => EntryDetailed}/EntryDetailed.tsx (94%)
 rename ui-common/src/components/{TrafficViewer/EntryDetailed => EntryDetailed/EntrySections}/EntrySections.module.sass (100%)
 rename ui-common/src/components/{TrafficViewer/EntryDetailed => EntryDetailed/EntrySections}/EntrySections.tsx (97%)
 rename ui-common/src/components/{TrafficViewer/EntryDetailed => EntryDetailed/EntryViewer}/EntryViewer.module.sass (100%)
 rename ui-common/src/components/{TrafficViewer/EntryDetailed => EntryDetailed/EntryViewer}/EntryViewer.tsx (97%)
 rename ui-common/src/components/{TrafficViewer => }/EntryListItem/EntryListItem.module.sass (98%)
 rename ui-common/src/components/{TrafficViewer => }/EntryListItem/EntryListItem.tsx (94%)
 rename ui-common/src/components/{TrafficViewer => }/EntryListItem/assets/ingoing-traffic-failure.svg (100%)
 rename ui-common/src/components/{TrafficViewer => }/EntryListItem/assets/ingoing-traffic-neutral.svg (100%)
 rename ui-common/src/components/{TrafficViewer => }/EntryListItem/assets/ingoing-traffic-success.svg (100%)
 rename ui-common/src/components/{TrafficViewer => }/EntryListItem/assets/lock.svg (100%)
 rename ui-common/src/components/{TrafficViewer => }/EntryListItem/assets/outgoing-traffic-failure.svg (100%)
 rename ui-common/src/components/{TrafficViewer => }/EntryListItem/assets/outgoing-traffic-neutral.svg (100%)
 rename ui-common/src/components/{TrafficViewer => }/EntryListItem/assets/outgoing-traffic-success.svg (100%)
 rename ui-common/src/components/{style => Filters}/Filters.module.sass (100%)
 rename ui-common/src/components/{TrafficViewer => Filters}/Filters.tsx (98%)
 delete mode 100644 ui-common/src/components/TrafficViewer/assets/spinner.svg
 rename ui-common/src/components/UI/{ => Checkbox}/Checkbox.tsx (100%)
 rename ui-common/src/components/UI/{style => CollapsibleContainer}/CollapsibleContainer.module.sass (100%)
 rename ui-common/src/components/UI/{ => CollapsibleContainer}/CollapsibleContainer.tsx (91%)
 rename ui-common/src/components/UI/{ => CustomModal}/CustomModal.tsx (86%)
 rename ui-common/src/components/UI/{style => FancyTextDisplay}/FancyTextDisplay.module.sass (100%)
 rename ui-common/src/components/UI/{ => FancyTextDisplay}/FancyTextDisplay.tsx (95%)
 rename ui-common/src/components/UI/{style => InformationIcon}/InformationIcon.module.sass (100%)
 rename ui-common/src/components/UI/{ => InformationIcon}/InformationIcon.tsx (90%)
 rename ui-common/src/components/{style => UI/LoadingOverlay}/LoadingOverlay.module.sass (100%)
 rename ui-common/src/components/UI/{ => LoadingOverlay}/LoadingOverlay.tsx (92%)
 rename ui-common/src/components/UI/{style => NoDataMessage}/NoDataMessage.module.sass (100%)
 rename ui-common/src/components/UI/{ => NoDataMessage}/NoDataMessage.tsx (73%)
 rename ui-common/src/components/UI/{style => Protocol}/Protocol.module.sass (100%)
 rename ui-common/src/components/UI/{ => Protocol}/Protocol.tsx (95%)
 rename ui-common/src/components/UI/{style => Queryable}/Queryable.module.sass (100%)
 rename ui-common/src/components/UI/{ => Queryable}/Queryable.tsx (95%)
 rename ui-common/src/components/UI/{ => Radio}/Radio.tsx (100%)
 rename ui-common/src/components/UI/{style => Resizeable}/Resizeable.module.sass (100%)
 rename ui-common/src/components/UI/{ => Resizeable}/Resizeable.tsx (96%)
 rename ui-common/src/components/UI/{style => Select}/Select.module.sass (100%)
 rename ui-common/src/components/UI/{ => Select}/Select.tsx (96%)
 rename ui-common/src/components/UI/{style => SelectList}/SelectList.module.sass (100%)
 rename ui-common/src/components/UI/{ => SelectList}/SelectList.tsx (93%)
 rename ui-common/src/components/UI/{style => StatusBar}/StatusBar.module.sass (100%)
 rename ui-common/src/components/UI/{ => StatusBar}/StatusBar.tsx (88%)
 rename ui-common/src/components/UI/{style => StatusCode}/StatusCode.module.sass (100%)
 rename ui-common/src/components/UI/{ => StatusCode}/StatusCode.tsx (92%)
 rename ui-common/src/components/UI/{style => Summary}/Summary.module.sass (100%)
 rename ui-common/src/components/UI/{ => Summary}/Summary.tsx (88%)
 rename ui-common/src/components/UI/{style => Summary}/misc.module.sass (100%)
 rename ui-common/src/components/UI/{ => Tabs}/Tabs.tsx (96%)
 rename ui-common/src/components/UI/{ => Tooltip}/Tooltip.tsx (100%)
 delete mode 100644 ui-common/src/components/UI/style/FilterSelect.module.sass
 delete mode 100644 ui-common/src/components/UI/style/Spinner.module.sass
 rename ui-common/src/components/{TrafficViewer => }/assets/downImg.svg (100%)
 rename ui-common/src/components/{ServiceMapModal => }/assets/spinner.svg (100%)
 rename ui-common/src/components/{ => modals}/OasModal/OasModal.module.sass (95%)
 rename ui-common/src/components/{ => modals}/OasModal/OasModal.tsx (92%)
 rename ui-common/src/components/{ => modals}/OasModal/assets/closeIcon.svg (100%)
 rename ui-common/src/components/{ => modals}/OasModal/assets/openApiLogo.png (100%)
 rename ui-common/src/components/{ => modals}/OasModal/redocThemeOptions.ts (100%)
 rename ui-common/src/components/{ => modals}/ServiceMapModal/ServiceMapModal.module.sass (91%)
 rename ui-common/src/components/{ => modals}/ServiceMapModal/ServiceMapModal.tsx (94%)
 rename ui-common/src/components/{ => modals}/ServiceMapModal/ServiceMapModalTypes.ts (100%)
 rename ui-common/src/components/{ => modals}/ServiceMapModal/ServiceMapOptions.ts (100%)
 rename ui-common/src/components/{ => modals}/ServiceMapModal/assets/close.svg (100%)
 rename ui-common/src/components/{ => modals}/ServiceMapModal/assets/filter-icon-clicked.svg (100%)
 rename ui-common/src/components/{ => modals}/ServiceMapModal/assets/filter-icon.svg (100%)
 rename ui-common/src/components/{ => modals}/ServiceMapModal/assets/refresh.svg (100%)

diff --git a/ui-common/src/components/style/EntriesList.module.sass b/ui-common/src/components/EntriesList/EntriesList.module.sass
similarity index 100%
rename from ui-common/src/components/style/EntriesList.module.sass
rename to ui-common/src/components/EntriesList/EntriesList.module.sass
diff --git a/ui-common/src/components/TrafficViewer/EntriesList.tsx b/ui-common/src/components/EntriesList/EntriesList.tsx
similarity index 97%
rename from ui-common/src/components/TrafficViewer/EntriesList.tsx
rename to ui-common/src/components/EntriesList/EntriesList.tsx
index 9c03cc58b..1bbbdd26c 100644
--- a/ui-common/src/components/TrafficViewer/EntriesList.tsx
+++ b/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 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";
diff --git a/ui-common/src/components/TrafficViewer/EntryDetailed.tsx b/ui-common/src/components/EntryDetailed/EntryDetailed.tsx
similarity index 94%
rename from ui-common/src/components/TrafficViewer/EntryDetailed.tsx
rename to ui-common/src/components/EntryDetailed/EntryDetailed.tsx
index 989bef24c..c7b1a9cfd 100644
--- a/ui-common/src/components/TrafficViewer/EntryDetailed.tsx
+++ b/ui-common/src/components/EntryDetailed/EntryDetailed.tsx
@@ -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: {
diff --git a/ui-common/src/components/TrafficViewer/EntryDetailed/EntrySections.module.sass b/ui-common/src/components/EntryDetailed/EntrySections/EntrySections.module.sass
similarity index 100%
rename from ui-common/src/components/TrafficViewer/EntryDetailed/EntrySections.module.sass
rename to ui-common/src/components/EntryDetailed/EntrySections/EntrySections.module.sass
diff --git a/ui-common/src/components/TrafficViewer/EntryDetailed/EntrySections.tsx b/ui-common/src/components/EntryDetailed/EntrySections/EntrySections.tsx
similarity index 97%
rename from ui-common/src/components/TrafficViewer/EntryDetailed/EntrySections.tsx
rename to ui-common/src/components/EntryDetailed/EntrySections/EntrySections.tsx
index 7cbeb5fb3..0b306c121 100644
--- a/ui-common/src/components/TrafficViewer/EntryDetailed/EntrySections.tsx
+++ b/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 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";
diff --git a/ui-common/src/components/TrafficViewer/EntryDetailed/EntryViewer.module.sass b/ui-common/src/components/EntryDetailed/EntryViewer/EntryViewer.module.sass
similarity index 100%
rename from ui-common/src/components/TrafficViewer/EntryDetailed/EntryViewer.module.sass
rename to ui-common/src/components/EntryDetailed/EntryViewer/EntryViewer.module.sass
diff --git a/ui-common/src/components/TrafficViewer/EntryDetailed/EntryViewer.tsx b/ui-common/src/components/EntryDetailed/EntryViewer/EntryViewer.tsx
similarity index 97%
rename from ui-common/src/components/TrafficViewer/EntryDetailed/EntryViewer.tsx
rename to ui-common/src/components/EntryDetailed/EntryViewer/EntryViewer.tsx
index f1a86ddfe..ae11511e1 100644
--- a/ui-common/src/components/TrafficViewer/EntryDetailed/EntryViewer.tsx
+++ b/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 {EntryTableSection, EntryBodySection, EntryTablePolicySection, EntryContractSection} from "./EntrySections";
+import Tabs from "../../UI/Tabs/Tabs";
+import {EntryTableSection, EntryBodySection, EntryTablePolicySection, EntryContractSection} from "../EntrySections/EntrySections";
 
 enum SectionTypes {
     SectionTable = "table",
diff --git a/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.module.sass b/ui-common/src/components/EntryListItem/EntryListItem.module.sass
similarity index 98%
rename from ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.module.sass
rename to ui-common/src/components/EntryListItem/EntryListItem.module.sass
index 199749224..dd22fbd4e 100644
--- a/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.module.sass
+++ b/ui-common/src/components/EntryListItem/EntryListItem.module.sass
@@ -1,4 +1,4 @@
-@import '../../../variables.module'
+@import '../../variables.module'
 
 .row
   display: flex
diff --git a/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.tsx b/ui-common/src/components/EntryListItem/EntryListItem.tsx
similarity index 94%
rename from ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.tsx
rename to ui-common/src/components/EntryListItem/EntryListItem.tsx
index 58e981584..be9f85452 100644
--- a/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.tsx
+++ b/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 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
diff --git a/ui-common/src/components/TrafficViewer/EntryListItem/assets/ingoing-traffic-failure.svg b/ui-common/src/components/EntryListItem/assets/ingoing-traffic-failure.svg
similarity index 100%
rename from ui-common/src/components/TrafficViewer/EntryListItem/assets/ingoing-traffic-failure.svg
rename to ui-common/src/components/EntryListItem/assets/ingoing-traffic-failure.svg
diff --git a/ui-common/src/components/TrafficViewer/EntryListItem/assets/ingoing-traffic-neutral.svg b/ui-common/src/components/EntryListItem/assets/ingoing-traffic-neutral.svg
similarity index 100%
rename from ui-common/src/components/TrafficViewer/EntryListItem/assets/ingoing-traffic-neutral.svg
rename to ui-common/src/components/EntryListItem/assets/ingoing-traffic-neutral.svg
diff --git a/ui-common/src/components/TrafficViewer/EntryListItem/assets/ingoing-traffic-success.svg b/ui-common/src/components/EntryListItem/assets/ingoing-traffic-success.svg
similarity index 100%
rename from ui-common/src/components/TrafficViewer/EntryListItem/assets/ingoing-traffic-success.svg
rename to ui-common/src/components/EntryListItem/assets/ingoing-traffic-success.svg
diff --git a/ui-common/src/components/TrafficViewer/EntryListItem/assets/lock.svg b/ui-common/src/components/EntryListItem/assets/lock.svg
similarity index 100%
rename from ui-common/src/components/TrafficViewer/EntryListItem/assets/lock.svg
rename to ui-common/src/components/EntryListItem/assets/lock.svg
diff --git a/ui-common/src/components/TrafficViewer/EntryListItem/assets/outgoing-traffic-failure.svg b/ui-common/src/components/EntryListItem/assets/outgoing-traffic-failure.svg
similarity index 100%
rename from ui-common/src/components/TrafficViewer/EntryListItem/assets/outgoing-traffic-failure.svg
rename to ui-common/src/components/EntryListItem/assets/outgoing-traffic-failure.svg
diff --git a/ui-common/src/components/TrafficViewer/EntryListItem/assets/outgoing-traffic-neutral.svg b/ui-common/src/components/EntryListItem/assets/outgoing-traffic-neutral.svg
similarity index 100%
rename from ui-common/src/components/TrafficViewer/EntryListItem/assets/outgoing-traffic-neutral.svg
rename to ui-common/src/components/EntryListItem/assets/outgoing-traffic-neutral.svg
diff --git a/ui-common/src/components/TrafficViewer/EntryListItem/assets/outgoing-traffic-success.svg b/ui-common/src/components/EntryListItem/assets/outgoing-traffic-success.svg
similarity index 100%
rename from ui-common/src/components/TrafficViewer/EntryListItem/assets/outgoing-traffic-success.svg
rename to ui-common/src/components/EntryListItem/assets/outgoing-traffic-success.svg
diff --git a/ui-common/src/components/style/Filters.module.sass b/ui-common/src/components/Filters/Filters.module.sass
similarity index 100%
rename from ui-common/src/components/style/Filters.module.sass
rename to ui-common/src/components/Filters/Filters.module.sass
diff --git a/ui-common/src/components/TrafficViewer/Filters.tsx b/ui-common/src/components/Filters/Filters.tsx
similarity index 98%
rename from ui-common/src/components/TrafficViewer/Filters.tsx
rename to ui-common/src/components/Filters/Filters.tsx
index ed41f8447..81c5cc2f2 100644
--- a/ui-common/src/components/TrafficViewer/Filters.tsx
+++ b/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 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";
diff --git a/ui-common/src/components/TrafficViewer/TrafficViewer.module.sass b/ui-common/src/components/TrafficViewer/TrafficViewer.module.sass
index a2730ab88..4857b5495 100644
--- a/ui-common/src/components/TrafficViewer/TrafficViewer.module.sass
+++ b/ui-common/src/components/TrafficViewer/TrafficViewer.module.sass
@@ -1,4 +1,4 @@
-@import 'src/variables.module'
+@import '../../variables.module'
 
 .TrafficPage
     width: 100%
diff --git a/ui-common/src/components/TrafficViewer/TrafficViewer.tsx b/ui-common/src/components/TrafficViewer/TrafficViewer.tsx
index 46964378e..1888b4218 100644
--- a/ui-common/src/components/TrafficViewer/TrafficViewer.tsx
+++ b/ui-common/src/components/TrafficViewer/TrafficViewer.tsx
@@ -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";
diff --git a/ui-common/src/components/TrafficViewer/assets/spinner.svg b/ui-common/src/components/TrafficViewer/assets/spinner.svg
deleted file mode 100644
index 16ac582fa..000000000
--- a/ui-common/src/components/TrafficViewer/assets/spinner.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/ui-common/src/components/UI/Checkbox.tsx b/ui-common/src/components/UI/Checkbox/Checkbox.tsx
similarity index 100%
rename from ui-common/src/components/UI/Checkbox.tsx
rename to ui-common/src/components/UI/Checkbox/Checkbox.tsx
diff --git a/ui-common/src/components/UI/style/CollapsibleContainer.module.sass b/ui-common/src/components/UI/CollapsibleContainer/CollapsibleContainer.module.sass
similarity index 100%
rename from ui-common/src/components/UI/style/CollapsibleContainer.module.sass
rename to ui-common/src/components/UI/CollapsibleContainer/CollapsibleContainer.module.sass
diff --git a/ui-common/src/components/UI/CollapsibleContainer.tsx b/ui-common/src/components/UI/CollapsibleContainer/CollapsibleContainer.tsx
similarity index 91%
rename from ui-common/src/components/UI/CollapsibleContainer.tsx
rename to ui-common/src/components/UI/CollapsibleContainer/CollapsibleContainer.tsx
index 7a1ca1819..c73bcd341 100644
--- a/ui-common/src/components/UI/CollapsibleContainer.tsx
+++ b/ui-common/src/components/UI/CollapsibleContainer/CollapsibleContainer.tsx
@@ -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,
diff --git a/ui-common/src/components/UI/CustomModal.tsx b/ui-common/src/components/UI/CustomModal/CustomModal.tsx
similarity index 86%
rename from ui-common/src/components/UI/CustomModal.tsx
rename to ui-common/src/components/UI/CustomModal/CustomModal.tsx
index 6d3348f61..0d6b68095 100644
--- a/ui-common/src/components/UI/CustomModal.tsx
+++ b/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;
\ No newline at end of file
+export default CustomModal;
diff --git a/ui-common/src/components/UI/style/FancyTextDisplay.module.sass b/ui-common/src/components/UI/FancyTextDisplay/FancyTextDisplay.module.sass
similarity index 100%
rename from ui-common/src/components/UI/style/FancyTextDisplay.module.sass
rename to ui-common/src/components/UI/FancyTextDisplay/FancyTextDisplay.module.sass
diff --git a/ui-common/src/components/UI/FancyTextDisplay.tsx b/ui-common/src/components/UI/FancyTextDisplay/FancyTextDisplay.tsx
similarity index 95%
rename from ui-common/src/components/UI/FancyTextDisplay.tsx
rename to ui-common/src/components/UI/FancyTextDisplay/FancyTextDisplay.tsx
index 23802f4ef..048d33798 100644
--- a/ui-common/src/components/UI/FancyTextDisplay.tsx
+++ b/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 styles from './style/FancyTextDisplay.module.sass';
+import duplicateImg from "../assets/duplicate.svg";
+import styles from './FancyTextDisplay.module.sass';
 
 interface Props {
     text: string | number,
diff --git a/ui-common/src/components/UI/style/InformationIcon.module.sass b/ui-common/src/components/UI/InformationIcon/InformationIcon.module.sass
similarity index 100%
rename from ui-common/src/components/UI/style/InformationIcon.module.sass
rename to ui-common/src/components/UI/InformationIcon/InformationIcon.module.sass
diff --git a/ui-common/src/components/UI/InformationIcon.tsx b/ui-common/src/components/UI/InformationIcon/InformationIcon.tsx
similarity index 90%
rename from ui-common/src/components/UI/InformationIcon.tsx
rename to ui-common/src/components/UI/InformationIcon/InformationIcon.tsx
index 7bbb90137..8f43025fb 100644
--- a/ui-common/src/components/UI/InformationIcon.tsx
+++ b/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>
-}
\ No newline at end of file
+}
diff --git a/ui-common/src/components/style/LoadingOverlay.module.sass b/ui-common/src/components/UI/LoadingOverlay/LoadingOverlay.module.sass
similarity index 100%
rename from ui-common/src/components/style/LoadingOverlay.module.sass
rename to ui-common/src/components/UI/LoadingOverlay/LoadingOverlay.module.sass
diff --git a/ui-common/src/components/UI/LoadingOverlay.tsx b/ui-common/src/components/UI/LoadingOverlay/LoadingOverlay.tsx
similarity index 92%
rename from ui-common/src/components/UI/LoadingOverlay.tsx
rename to ui-common/src/components/UI/LoadingOverlay/LoadingOverlay.tsx
index 36b5a26a5..9a0561aae 100644
--- a/ui-common/src/components/UI/LoadingOverlay.tsx
+++ b/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;
 
diff --git a/ui-common/src/components/UI/style/NoDataMessage.module.sass b/ui-common/src/components/UI/NoDataMessage/NoDataMessage.module.sass
similarity index 100%
rename from ui-common/src/components/UI/style/NoDataMessage.module.sass
rename to ui-common/src/components/UI/NoDataMessage/NoDataMessage.module.sass
diff --git a/ui-common/src/components/UI/NoDataMessage.tsx b/ui-common/src/components/UI/NoDataMessage/NoDataMessage.tsx
similarity index 73%
rename from ui-common/src/components/UI/NoDataMessage.tsx
rename to ui-common/src/components/UI/NoDataMessage/NoDataMessage.tsx
index c12d302fa..5ee4bbb3f 100644
--- a/ui-common/src/components/UI/NoDataMessage.tsx
+++ b/ui-common/src/components/UI/NoDataMessage/NoDataMessage.tsx
@@ -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>
diff --git a/ui-common/src/components/UI/style/Protocol.module.sass b/ui-common/src/components/UI/Protocol/Protocol.module.sass
similarity index 100%
rename from ui-common/src/components/UI/style/Protocol.module.sass
rename to ui-common/src/components/UI/Protocol/Protocol.module.sass
diff --git a/ui-common/src/components/UI/Protocol.tsx b/ui-common/src/components/UI/Protocol/Protocol.tsx
similarity index 95%
rename from ui-common/src/components/UI/Protocol.tsx
rename to ui-common/src/components/UI/Protocol/Protocol.tsx
index 0e78fc44a..f8a98aacc 100644
--- a/ui-common/src/components/UI/Protocol.tsx
+++ b/ui-common/src/components/UI/Protocol/Protocol.tsx
@@ -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
diff --git a/ui-common/src/components/UI/style/Queryable.module.sass b/ui-common/src/components/UI/Queryable/Queryable.module.sass
similarity index 100%
rename from ui-common/src/components/UI/style/Queryable.module.sass
rename to ui-common/src/components/UI/Queryable/Queryable.module.sass
diff --git a/ui-common/src/components/UI/Queryable.tsx b/ui-common/src/components/UI/Queryable/Queryable.tsx
similarity index 95%
rename from ui-common/src/components/UI/Queryable.tsx
rename to ui-common/src/components/UI/Queryable/Queryable.tsx
index f98309475..0b5960b28 100644
--- a/ui-common/src/components/UI/Queryable.tsx
+++ b/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,
diff --git a/ui-common/src/components/UI/Radio.tsx b/ui-common/src/components/UI/Radio/Radio.tsx
similarity index 100%
rename from ui-common/src/components/UI/Radio.tsx
rename to ui-common/src/components/UI/Radio/Radio.tsx
diff --git a/ui-common/src/components/UI/style/Resizeable.module.sass b/ui-common/src/components/UI/Resizeable/Resizeable.module.sass
similarity index 100%
rename from ui-common/src/components/UI/style/Resizeable.module.sass
rename to ui-common/src/components/UI/Resizeable/Resizeable.module.sass
diff --git a/ui-common/src/components/UI/Resizeable.tsx b/ui-common/src/components/UI/Resizeable/Resizeable.tsx
similarity index 96%
rename from ui-common/src/components/UI/Resizeable.tsx
rename to ui-common/src/components/UI/Resizeable/Resizeable.tsx
index c72992f52..56544a657 100644
--- a/ui-common/src/components/UI/Resizeable.tsx
+++ b/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;
\ No newline at end of file
+export default Resizeable;
diff --git a/ui-common/src/components/UI/style/Select.module.sass b/ui-common/src/components/UI/Select/Select.module.sass
similarity index 100%
rename from ui-common/src/components/UI/style/Select.module.sass
rename to ui-common/src/components/UI/Select/Select.module.sass
diff --git a/ui-common/src/components/UI/Select.tsx b/ui-common/src/components/UI/Select/Select.tsx
similarity index 96%
rename from ui-common/src/components/UI/Select.tsx
rename to ui-common/src/components/UI/Select/Select.tsx
index 8d8c47c90..d52cd759a 100644
--- a/ui-common/src/components/UI/Select.tsx
+++ b/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';
 
diff --git a/ui-common/src/components/UI/style/SelectList.module.sass b/ui-common/src/components/UI/SelectList/SelectList.module.sass
similarity index 100%
rename from ui-common/src/components/UI/style/SelectList.module.sass
rename to ui-common/src/components/UI/SelectList/SelectList.module.sass
diff --git a/ui-common/src/components/UI/SelectList.tsx b/ui-common/src/components/UI/SelectList/SelectList.tsx
similarity index 93%
rename from ui-common/src/components/UI/SelectList.tsx
rename to ui-common/src/components/UI/SelectList/SelectList.tsx
index 0c431b284..f71dd8b5e 100644
--- a/ui-common/src/components/UI/SelectList.tsx
+++ b/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 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)
 
diff --git a/ui-common/src/components/UI/style/StatusBar.module.sass b/ui-common/src/components/UI/StatusBar/StatusBar.module.sass
similarity index 100%
rename from ui-common/src/components/UI/style/StatusBar.module.sass
rename to ui-common/src/components/UI/StatusBar/StatusBar.module.sass
diff --git a/ui-common/src/components/UI/StatusBar.tsx b/ui-common/src/components/UI/StatusBar/StatusBar.tsx
similarity index 88%
rename from ui-common/src/components/UI/StatusBar.tsx
rename to ui-common/src/components/UI/StatusBar/StatusBar.tsx
index 74ba8b62b..1d78253d8 100644
--- a/ui-common/src/components/UI/StatusBar.tsx
+++ b/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 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' : ''}`
diff --git a/ui-common/src/components/UI/style/StatusCode.module.sass b/ui-common/src/components/UI/StatusCode/StatusCode.module.sass
similarity index 100%
rename from ui-common/src/components/UI/style/StatusCode.module.sass
rename to ui-common/src/components/UI/StatusCode/StatusCode.module.sass
diff --git a/ui-common/src/components/UI/StatusCode.tsx b/ui-common/src/components/UI/StatusCode/StatusCode.tsx
similarity index 92%
rename from ui-common/src/components/UI/StatusCode.tsx
rename to ui-common/src/components/UI/StatusCode/StatusCode.tsx
index 5e5506d04..4d58c2431 100644
--- a/ui-common/src/components/UI/StatusCode.tsx
+++ b/ui-common/src/components/UI/StatusCode/StatusCode.tsx
@@ -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",
diff --git a/ui-common/src/components/UI/style/Summary.module.sass b/ui-common/src/components/UI/Summary/Summary.module.sass
similarity index 100%
rename from ui-common/src/components/UI/style/Summary.module.sass
rename to ui-common/src/components/UI/Summary/Summary.module.sass
diff --git a/ui-common/src/components/UI/Summary.tsx b/ui-common/src/components/UI/Summary/Summary.tsx
similarity index 88%
rename from ui-common/src/components/UI/Summary.tsx
rename to ui-common/src/components/UI/Summary/Summary.tsx
index 0a043668d..31f99a0df 100644
--- a/ui-common/src/components/UI/Summary.tsx
+++ b/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 Queryable from "./Queryable";
+import styles from './Summary.module.sass';
+import Queryable from "../Queryable/Queryable";
 
 interface SummaryProps {
     method: string
diff --git a/ui-common/src/components/UI/style/misc.module.sass b/ui-common/src/components/UI/Summary/misc.module.sass
similarity index 100%
rename from ui-common/src/components/UI/style/misc.module.sass
rename to ui-common/src/components/UI/Summary/misc.module.sass
diff --git a/ui-common/src/components/UI/Tabs.tsx b/ui-common/src/components/UI/Tabs/Tabs.tsx
similarity index 96%
rename from ui-common/src/components/UI/Tabs.tsx
rename to ui-common/src/components/UI/Tabs/Tabs.tsx
index d59ec1189..9d9bc189d 100644
--- a/ui-common/src/components/UI/Tabs.tsx
+++ b/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,
diff --git a/ui-common/src/components/UI/Tooltip.tsx b/ui-common/src/components/UI/Tooltip/Tooltip.tsx
similarity index 100%
rename from ui-common/src/components/UI/Tooltip.tsx
rename to ui-common/src/components/UI/Tooltip/Tooltip.tsx
diff --git a/ui-common/src/components/UI/index.ts b/ui-common/src/components/UI/index.ts
index 4dc123178..952753c55 100644
--- a/ui-common/src/components/UI/index.ts
+++ b/ui-common/src/components/UI/index.ts
@@ -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 }
diff --git a/ui-common/src/components/UI/style/FilterSelect.module.sass b/ui-common/src/components/UI/style/FilterSelect.module.sass
deleted file mode 100644
index 3ad0c9570..000000000
--- a/ui-common/src/components/UI/style/FilterSelect.module.sass
+++ /dev/null
@@ -1,3 +0,0 @@
-.SelectLabel
-    color: #8f9bb2
-    font-size: 11px
diff --git a/ui-common/src/components/UI/style/Spinner.module.sass b/ui-common/src/components/UI/style/Spinner.module.sass
deleted file mode 100644
index b713b6cbd..000000000
--- a/ui-common/src/components/UI/style/Spinner.module.sass
+++ /dev/null
@@ -1,6 +0,0 @@
-@import "../../../variables.module"
-
-.spinnerContainer
-  display: flex
-  justify-content: center
-  margin-bottom: 10px
diff --git a/ui-common/src/components/TrafficViewer/assets/downImg.svg b/ui-common/src/components/assets/downImg.svg
similarity index 100%
rename from ui-common/src/components/TrafficViewer/assets/downImg.svg
rename to ui-common/src/components/assets/downImg.svg
diff --git a/ui-common/src/components/ServiceMapModal/assets/spinner.svg b/ui-common/src/components/assets/spinner.svg
similarity index 100%
rename from ui-common/src/components/ServiceMapModal/assets/spinner.svg
rename to ui-common/src/components/assets/spinner.svg
diff --git a/ui-common/src/components/OasModal/OasModal.module.sass b/ui-common/src/components/modals/OasModal/OasModal.module.sass
similarity index 95%
rename from ui-common/src/components/OasModal/OasModal.module.sass
rename to ui-common/src/components/modals/OasModal/OasModal.module.sass
index 8df99938a..5426b1514 100644
--- a/ui-common/src/components/OasModal/OasModal.module.sass
+++ b/ui-common/src/components/modals/OasModal/OasModal.module.sass
@@ -1,4 +1,4 @@
-@import '../../variables.module.scss'
+@import '../../../variables.module'
 
 .closeIcon
     cursor: pointer
diff --git a/ui-common/src/components/OasModal/OasModal.tsx b/ui-common/src/components/modals/OasModal/OasModal.tsx
similarity index 92%
rename from ui-common/src/components/OasModal/OasModal.tsx
rename to ui-common/src/components/modals/OasModal/OasModal.tsx
index 473172f08..9a8e2b918 100644
--- a/ui-common/src/components/OasModal/OasModal.tsx
+++ b/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 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;
\ No newline at end of file
+export default OasModal;
diff --git a/ui-common/src/components/OasModal/assets/closeIcon.svg b/ui-common/src/components/modals/OasModal/assets/closeIcon.svg
similarity index 100%
rename from ui-common/src/components/OasModal/assets/closeIcon.svg
rename to ui-common/src/components/modals/OasModal/assets/closeIcon.svg
diff --git a/ui-common/src/components/OasModal/assets/openApiLogo.png b/ui-common/src/components/modals/OasModal/assets/openApiLogo.png
similarity index 100%
rename from ui-common/src/components/OasModal/assets/openApiLogo.png
rename to ui-common/src/components/modals/OasModal/assets/openApiLogo.png
diff --git a/ui-common/src/components/OasModal/redocThemeOptions.ts b/ui-common/src/components/modals/OasModal/redocThemeOptions.ts
similarity index 100%
rename from ui-common/src/components/OasModal/redocThemeOptions.ts
rename to ui-common/src/components/modals/OasModal/redocThemeOptions.ts
diff --git a/ui-common/src/components/ServiceMapModal/ServiceMapModal.module.sass b/ui-common/src/components/modals/ServiceMapModal/ServiceMapModal.module.sass
similarity index 91%
rename from ui-common/src/components/ServiceMapModal/ServiceMapModal.module.sass
rename to ui-common/src/components/modals/ServiceMapModal/ServiceMapModal.module.sass
index 6e496aafc..94e1eaf50 100644
--- a/ui-common/src/components/ServiceMapModal/ServiceMapModal.module.sass
+++ b/ui-common/src/components/modals/ServiceMapModal/ServiceMapModal.module.sass
@@ -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
diff --git a/ui-common/src/components/ServiceMapModal/ServiceMapModal.tsx b/ui-common/src/components/modals/ServiceMapModal/ServiceMapModal.tsx
similarity index 94%
rename from ui-common/src/components/ServiceMapModal/ServiceMapModal.tsx
rename to ui-common/src/components/modals/ServiceMapModal/ServiceMapModal.tsx
index b4ea2fd4d..1af4ef448 100644
--- a/ui-common/src/components/ServiceMapModal/ServiceMapModal.tsx
+++ b/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 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%" }}>
diff --git a/ui-common/src/components/ServiceMapModal/ServiceMapModalTypes.ts b/ui-common/src/components/modals/ServiceMapModal/ServiceMapModalTypes.ts
similarity index 100%
rename from ui-common/src/components/ServiceMapModal/ServiceMapModalTypes.ts
rename to ui-common/src/components/modals/ServiceMapModal/ServiceMapModalTypes.ts
diff --git a/ui-common/src/components/ServiceMapModal/ServiceMapOptions.ts b/ui-common/src/components/modals/ServiceMapModal/ServiceMapOptions.ts
similarity index 100%
rename from ui-common/src/components/ServiceMapModal/ServiceMapOptions.ts
rename to ui-common/src/components/modals/ServiceMapModal/ServiceMapOptions.ts
diff --git a/ui-common/src/components/ServiceMapModal/assets/close.svg b/ui-common/src/components/modals/ServiceMapModal/assets/close.svg
similarity index 100%
rename from ui-common/src/components/ServiceMapModal/assets/close.svg
rename to ui-common/src/components/modals/ServiceMapModal/assets/close.svg
diff --git a/ui-common/src/components/ServiceMapModal/assets/filter-icon-clicked.svg b/ui-common/src/components/modals/ServiceMapModal/assets/filter-icon-clicked.svg
similarity index 100%
rename from ui-common/src/components/ServiceMapModal/assets/filter-icon-clicked.svg
rename to ui-common/src/components/modals/ServiceMapModal/assets/filter-icon-clicked.svg
diff --git a/ui-common/src/components/ServiceMapModal/assets/filter-icon.svg b/ui-common/src/components/modals/ServiceMapModal/assets/filter-icon.svg
similarity index 100%
rename from ui-common/src/components/ServiceMapModal/assets/filter-icon.svg
rename to ui-common/src/components/modals/ServiceMapModal/assets/filter-icon.svg
diff --git a/ui-common/src/components/ServiceMapModal/assets/refresh.svg b/ui-common/src/components/modals/ServiceMapModal/assets/refresh.svg
similarity index 100%
rename from ui-common/src/components/ServiceMapModal/assets/refresh.svg
rename to ui-common/src/components/modals/ServiceMapModal/assets/refresh.svg
diff --git a/ui-common/src/index.tsx b/ui-common/src/index.tsx
index 0439fd03a..15cff7997 100644
--- a/ui-common/src/index.tsx
+++ b/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 { 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;