+
+ ;
+};
diff --git a/traffic-viewer/src/components/EntryDetailed.tsx b/traffic-viewer/src/components/EntryDetailed.tsx
new file mode 100644
index 000000000..ac9106a8c
--- /dev/null
+++ b/traffic-viewer/src/components/EntryDetailed.tsx
@@ -0,0 +1,135 @@
+import React, {useEffect, useState} from "react";
+import EntryViewer from "./EntryDetailed/EntryViewer";
+import {EntryItem} from "./EntryListItem/EntryListItem";
+import {makeStyles} from "@material-ui/core";
+import Protocol from "./UI/Protocol"
+import Queryable from "./UI/Queryable";
+import {toast} from "react-toastify";
+import {useRecoilValue} from "recoil";
+import focusedEntryIdAtom from "../recoil/focusedEntryId";
+import Api from "../helpers/api";
+
+const useStyles = makeStyles(() => ({
+ entryTitle: {
+ display: 'flex',
+ minHeight: 20,
+ maxHeight: 46,
+ alignItems: 'center',
+ marginBottom: 4,
+ marginLeft: 6,
+ padding: 2,
+ paddingBottom: 0
+ },
+ entrySummary: {
+ display: 'flex',
+ minHeight: 36,
+ maxHeight: 46,
+ alignItems: 'center',
+ marginBottom: 4,
+ padding: 5,
+ paddingBottom: 0
+ }
+}));
+
+export const formatSize = (n: number) => n > 1000 ? `${Math.round(n / 1000)}KB` : `${n} B`;
+
+const EntryTitle: React.FC
+ {isLoadingTop &&
+ {false /* It's because the first child is ignored by ScrollableFeedVirtualized */}
+ {memoizedEntries.map(entry =>
+
+
+
+
+
+ 
+
}
+ {noMoreDataTop && No more data available
}
+
+
+ Displaying {entries?.length} results out of {queriedTotal} total
+ {startTime !== 0 && Started listening at {Moment(truncatedTimestamp ? truncatedTimestamp : startTime).utc().format('MM/DD/YYYY, h:mm:ss.SSS A')}
}
+
+
+
;
+};
+
+const EntrySummary: React.FC
+ {response &&
+ }
+ {response && = ${elapsedTime}`}
+ style={{marginRight: 18}}
+ displayIconOnMouseOver={true}
+ >
+ }
+
+
+ {formatSize(bodySize)}
+
+
+ {Math.round(elapsedTime)}ms
+
+
+
+ {title}
+
+
+}
+
+interface EntrySectionContainerProps {
+ title: string,
+ color: string,
+ query?: string,
+}
+
+export const EntrySectionContainer: React.FC {
+ setExpanded(!expanded)
+ }}
+ >
+ {expanded ? '-' : '+'}
+
+
+ {supportsPrettying &&
+
+
+ {setIsPretty(!isPretty)}}/>
+
}
+ {supportsPrettying && Pretty}
+
+
+ {setShowLineNumbers(!showLineNumbers)}}/>
+
+ Line numbers
+
+ {isBase64Encoding &&
+ {setDecodeBase64(!decodeBase64)}}/>
+
}
+ {isBase64Encoding && Decode Base64}
+
+ {
+ setExpanded(!expanded)
+ }}
+ >
+ {expanded ? '-' : '+'}
+
+
+
+ {label}
+ {matched}
+
+
+
+}
+
+interface EntryPolicySectionContainerProps {
+ label: string;
+ matched: string;
+ children?: any;
+}
+
+export const EntryPolicySectionContainer: React.FC| Key: | {rule.Key} |
| Response Time: | {rule.ResponseTime} |
| Method: | {rule.Method} |
| Path: | {rule.Path} |
| Service: | {rule.Service} |
| Type: | {rule.Type} |
| Value: | {rule.Value} |
+ {
;
+}
+
+interface Props {
+ representation: any;
+ isRulesEnabled: boolean;
+ rulesMatched: any;
+ contractStatus: number;
+ requestReason: string;
+ responseReason: string;
+ contractContent: string;
+ color: string;
+ elapsedTime: number;
+}
+
+const EntryViewer: React.FC
+
+
+ }
+ {response && currentTab === TABS[responseTabIndex].tab &&
+
+ }
+ {isRulesEnabled && currentTab === TABS[rulesTabIndex].tab &&
+ }
+ {contractStatus !== 0 && contractContent && currentTab === TABS[contractTabIndex].tab &&
+
+ }
+
}
+
+
+ {currentTab === TABS[0].tab && {
+ if (!setFocusedEntryId) return;
+ setFocusedEntryId(entry.id.toString());
+ }}
+ style={{
+ border: isSelected && !headingMode ? `1px ${entry.proto.backgroundColor} solid` : "1px transparent solid",
+ position: !headingMode ? "absolute" : "unset",
+ top: style['top'],
+ marginTop: !headingMode ? style['marginTop'] : "10px",
+ width: !headingMode ? "calc(100% - 25px)" : "calc(100% - 18px)",
+ }}
+ >
+ {!headingMode ?
+
+
+}
diff --git a/traffic-viewer/src/components/Filters/Filters.module.sass b/traffic-viewer/src/components/Filters/Filters.module.sass
new file mode 100644
index 000000000..05ca06971
--- /dev/null
+++ b/traffic-viewer/src/components/Filters/Filters.module.sass
@@ -0,0 +1,44 @@
+@import "../../variables.module"
+
+.container
+ display: flex
+ flex-direction: row
+ align-items: center
+ padding: .5rem 0
+ border-bottom: 1px solid #BCC6DD
+ margin-right: 20px
+
+.filterLabel
+ color: #8f9bb2
+ margin-right: 6px
+ font-size: 11px
+ margin-bottom: 4px
+
+.icon
+ fill: #627ef7
+
+.filterContainer
+ padding-right: 14px
+ display: flex
+ flex-direction: column
+
+.filterText
+ input
+ padding: 4px 12px
+ background: $main-background-color
+ border-radius: 4px
+ font-size: 14px
+ border: 1px solid #BCC6DD
+ fieldset
+ border: none
+
+$divider-breakpoint-1: 1055px
+$divider-breakpoint-2: 1453px
+
+@media (max-width: $divider-breakpoint-1)
+ .divider1
+ display: none
+
+@media (max-width: $divider-breakpoint-2)
+ .divider2
+ display: none
diff --git a/traffic-viewer/src/components/Filters/Filters.tsx b/traffic-viewer/src/components/Filters/Filters.tsx
new file mode 100644
index 000000000..8796bf7e9
--- /dev/null
+++ b/traffic-viewer/src/components/Filters/Filters.tsx
@@ -0,0 +1,318 @@
+import React, {useRef, useState} from "react";
+import styles from './style/Filters.module.sass';
+import {Button, Grid, Modal, Box, Typography, Backdrop, Fade, Divider} from "@material-ui/core";
+import CodeEditor from '@uiw/react-textarea-code-editor';
+import MenuBookIcon from '@material-ui/icons/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 variables from '../variables.module.scss';
+import {useRecoilState} from "recoil";
+import queryAtom from "../recoil/query";
+import useKeyPress from "../hooks/useKeyPress"
+import shortcutsKeyboard from "../configs/shortcutsKeyboard"
+
+interface FiltersProps {
+ backgroundColor: string
+ ws: any
+ openWebSocket: (query: string, resetEntries: boolean) => void;
+}
+
+export const Filters: React.FC
+
+
}
+
+
+
+ {
+ rule ?
+
+
+
+ {entry.src.name ? entry.src.name : "[Unresolved]"}
+
+
+
+
+ {entry.dst.name ? entry.dst.name : "[Unresolved]"}
+
+
+
+
+ {`Rules (${numberOfRules})`}
+
+ : ""
+ }
+ {
+ contractEnabled ?
+
+ {contractText}
+
+ : ""
+ }
+
+
+
+ {entry.src.ip}
+
+
+ {entry.src.port ? ":" : ""}
+
+
+ {entry.src.port}
+
+
+ {entry.isOutgoing ?
+
+ 
+
+ :
+
+ 
{
+ const query = `outgoing == false`;
+ setQuery(queryState ? `${queryState} and ${query}` : query);
+ }}
+ />
+
+ }
+
+
+ {entry.dst.ip}
+
+
+ :
+
+
+ {entry.dst.port}
+
+
+
+
+ = datetime("${Moment(+entry.timestamp)?.utc().format('MM/DD/YYYY, h:mm:ss.SSS A')}")`}
+ displayIconOnMouseOver={true}
+ flipped={false}
+ >
+
+ {Moment(+entry.timestamp)?.utc().format('MM/DD/YYYY, h:mm:ss.SSS A')}
+
+
+
+
+
;
+};
+
+interface QueryFormProps {
+ backgroundColor: string
+ ws: any
+ openWebSocket: (query: string, resetEntries: boolean) => void;
+}
+
+export const modalStyle = {
+ position: 'absolute',
+ top: '10%',
+ left: '50%',
+ transform: 'translate(-50%, 0%)',
+ width: '80vw',
+ bgcolor: 'background.paper',
+ borderRadius: '5px',
+ boxShadow: 24,
+ outline: "none",
+ p: 4,
+ color: '#000',
+};
+
+export const QueryForm: React.FCMizu has a rich filtering syntax that let's you query the results both flexibly and efficiently.
+Here are some examples that you can try;
++
endsWith, contains) the string:
+ +
- {Array.from(addressesWithTLS, address =>
- {address} )}
+
+ );
+};
diff --git a/traffic-viewer/src/components/UI/CollapsibleContainer.sass b/traffic-viewer/src/components/UI/CollapsibleContainer.sass
new file mode 100644
index 000000000..0a473da8c
--- /dev/null
+++ b/traffic-viewer/src/components/UI/CollapsibleContainer.sass
@@ -0,0 +1,33 @@
+.CollapsibleContainer-Header
+ display: flex
+ align-items: center
+ cursor: pointer
+ min-height: 40px
+
+.CollapsibleContainer-Header-Sticky
+ background: #1f253f
+ position: sticky
+ top: 0
+ z-index: 1
+
+.CollapsibleContainer-Bigger
+ padding: 10px
+ font-size: 14px !important
+
+.CollapsibleContainer-ExpandCollapseButton
+ margin-left: auto
+ padding-right: 2%
+
+.CollapsibleContainer-Expanded
+ min-height: 40px
+
+.CollapsibleContainer-Title
+ font-weight: 600
+ font-family: 'Source Sans Pro', sans-serif
+ font-size: 12px
+
+.CollapsibleContainer-Expanded .CollapsibleContainer-Title
+ color: rgba(186, 199, 255, 1)
+
+.CollapsibleContainer-Collapsed .CollapsibleContainer-Title
+ color: rgba(186, 199, 255, 0.75)
\ No newline at end of file
diff --git a/traffic-viewer/src/components/UI/CollapsibleContainer.tsx b/traffic-viewer/src/components/UI/CollapsibleContainer.tsx
new file mode 100644
index 000000000..8f77a8cf8
--- /dev/null
+++ b/traffic-viewer/src/components/UI/CollapsibleContainer.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import collapsedImg from "../../assets/collapsed.svg";
+import expandedImg from "../../assets/expanded.svg";
+import "./CollapsibleContainer.sass";
+
+interface Props {
+ title: string | React.ReactNode,
+ expanded: boolean,
+ titleClassName?: string,
+ className?: string,
+ stickyHeader?: boolean,
+}
+
+const CollapsibleContainer: React.FC
+
+ {
+ 
+ 
+
+
+ {getConnectionTitle()}
+
+
+
+
+
+
}
+ {tappingStatus &&
+
+
+
+
+ {focusedEntryId &&
+
+ {
+ React.isValidElement(title)?
+ {title} :
+
+ 
+
+ }
+
+ {expanded ? children : null}
+ {title}
+ {content}
;
+};
+
+export default CollapsibleContainer;
diff --git a/traffic-viewer/src/components/UI/FancyTextDisplay.sass b/traffic-viewer/src/components/UI/FancyTextDisplay.sass
new file mode 100644
index 000000000..c95a3d123
--- /dev/null
+++ b/traffic-viewer/src/components/UI/FancyTextDisplay.sass
@@ -0,0 +1,41 @@
+.FancyTextDisplay-Container
+ display: flex
+ align-items: center
+
+ &.displayIconOnMouseOver
+ .FancyTextDisplay-Icon
+ opacity: 0
+ pointer-events: none
+ &:hover
+ .FancyTextDisplay-Icon
+ opacity: 1
+ pointer-events: all
+
+
+ .FancyTextDisplay-Icon
+ height: 22px
+ width: 22px
+ cursor: pointer
+ margin-right: 3px
+
+ &:hover
+ background-color: rgba(255, 255, 255, 0.06)
+ border-radius: 4px
+
+ &.FancyTextDisplay-ContainerEllipsis
+ .FancyTextDisplay-Text
+ text-align: left
+ text-overflow: ellipsis
+ overflow: hidden
+ white-space: nowrap
+ width: calc(100% - 30px)
+
+ .FancyTextDisplay-CopyNotifier
+ background-color: #4252a5
+ padding: 2px 5px
+ border-radius: 4px
+ position: absolute
+ transform: translate(0, -80%)
+ color: white
+ z-index: 1000
+
diff --git a/traffic-viewer/src/components/UI/FancyTextDisplay.tsx b/traffic-viewer/src/components/UI/FancyTextDisplay.tsx
new file mode 100644
index 000000000..29238b804
--- /dev/null
+++ b/traffic-viewer/src/components/UI/FancyTextDisplay.tsx
@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import duplicateImg from "../../assets/duplicate.svg";
+import './FancyTextDisplay.sass';
+
+interface Props {
+ text: string | number,
+ className?: string,
+ isPossibleToCopy?: boolean,
+ applyTextEllipsis?: boolean,
+ flipped?: boolean,
+ useTooltip?: boolean,
+ displayIconOnMouseOver?: boolean,
+ buttonOnly?: boolean,
+}
+
+const FancyTextDisplay: React.FCsetShowTooltip(true)} + onMouseLeave={ e => setShowTooltip(false)} + > + {!buttonOnly && flipped && textElement} + {copyButton} + {!buttonOnly && !flipped && textElement} + {useTooltip && showTooltip && {text}} +
+ ); +}; + +export default FancyTextDisplay; diff --git a/traffic-viewer/src/components/UI/Protocol.module.sass b/traffic-viewer/src/components/UI/Protocol.module.sass new file mode 100644 index 000000000..9ffeaab14 --- /dev/null +++ b/traffic-viewer/src/components/UI/Protocol.module.sass @@ -0,0 +1,24 @@ +.base + display: inline-block + text-align: center + font-size: 10px + font-weight: 600 + background-color: #000 + color: #fff + margin-left: -8px + +.vertical + line-height: 22px + letter-spacing: 0.5px + width: 22px + height: 48px + border-radius: 0px 4px 4px 0 + writing-mode: vertical-lr + transform: rotate(-180deg) + text-orientation: mixed + +.horizontal + border-radius: 4px + font-size: 22px + padding: 5px 10px + font-weight: 600 diff --git a/traffic-viewer/src/components/UI/Protocol.tsx b/traffic-viewer/src/components/UI/Protocol.tsx new file mode 100644 index 000000000..75f153065 --- /dev/null +++ b/traffic-viewer/src/components/UI/Protocol.tsx @@ -0,0 +1,66 @@ +import React from "react"; +import styles from './Protocol.module.sass'; +import Queryable from "./Queryable"; + +export interface ProtocolInterface { + name: string + longName: string + abbr: string + macro: string + backgroundColor: string + foregroundColor: string + fontSize: number + referenceLink: string + ports: string[] + inbound_ports: string +} + +interface ProtocolProps { + protocol: ProtocolInterface + horizontal: boolean +} + +const Protocol: React.FC setShowTooltip(true)}
+ onMouseLeave={ e => setShowTooltip(false)}
+ >
+ {flipped && addButton}
+ {children}
+ {!flipped && addButton}
+ {useTooltip && showTooltip && {query}}
+
+ );
+};
+
+export default Queryable;
diff --git a/traffic-viewer/src/components/UI/StatusBar.sass b/traffic-viewer/src/components/UI/StatusBar.sass
new file mode 100644
index 000000000..043a8b2e7
--- /dev/null
+++ b/traffic-viewer/src/components/UI/StatusBar.sass
@@ -0,0 +1,51 @@
+@import '../../../variables.module'
+
+.statusBar
+ position: absolute
+ transform: translate(-50%, -3px)
+ left: 50%
+ z-index: 9999
+ min-width: 200px
+ background: $blue-color
+ color: rgba(255,255,255,0.75)
+ border-bottom-left-radius: 8px
+ border-bottom-right-radius: 8px
+ top: 0
+ padding: 10px
+ font-size: 14px
+ transition: max-height 2s ease-out
+ width: auto
+ max-height: 32px
+ overflow: hidden
+
+ .podsCount
+ display: flex
+ justify-content: center
+ font-weight: 600
+
+ img
+ margin-right: 10px
+ height: 22px
+
+ table
+ width: 100%
+ margin-top: 20px
+
+ tbody
+ max-height: 70vh
+ overflow-y: auto
+ display: block
+ tr
+ display: table
+ table-layout: fixed
+ width: 100%
+ th
+ text-align: left
+ padding-right: 5%
+ td
+ text-align: left
+ padding-right: 5%
+
+.expandedStatusBar
+ max-height: 100vh
+ padding-bottom: 15px
diff --git a/traffic-viewer/src/components/UI/StatusBar.tsx b/traffic-viewer/src/components/UI/StatusBar.tsx
new file mode 100644
index 000000000..4c1fa5fd2
--- /dev/null
+++ b/traffic-viewer/src/components/UI/StatusBar.tsx
@@ -0,0 +1,42 @@
+import './style/StatusBar.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 {useRecoilValue} from "recoil";
+import tappingStatusAtom, {tappingStatusDetails} from "../../recoil/tappingStatus";
+
+const pluralize = (noun: string, amount: number) => {
+ return `${noun}${amount !== 1 ? 's' : ''}`
+}
+
+export const StatusBar = () => {
+
+ const tappingStatus = useRecoilValue(tappingStatusAtom);
+ const [expandedBar, setExpandedBar] = useState(false);
+ const {uniqueNamespaces, amountOfPods, amountOfTappedPods, amountOfUntappedPods} = useRecoilValue(tappingStatusDetails);
+
+ return setExpandedBar(true)} onMouseLeave={() => setExpandedBar(false)}>
+
;
+}
diff --git a/traffic-viewer/src/components/UI/Summary.module.sass b/traffic-viewer/src/components/UI/Summary.module.sass
new file mode 100644
index 000000000..2bce9af67
--- /dev/null
+++ b/traffic-viewer/src/components/UI/Summary.module.sass
@@ -0,0 +1,6 @@
+.container
+ display: flex
+ align-items: center
+
+.summary
+ white-space: nowrap
diff --git a/traffic-viewer/src/components/UI/Summary.tsx b/traffic-viewer/src/components/UI/Summary.tsx
new file mode 100644
index 000000000..7358f83c4
--- /dev/null
+++ b/traffic-viewer/src/components/UI/Summary.tsx
@@ -0,0 +1,39 @@
+import miscStyles from "./misc.module.sass";
+import React from "react";
+import styles from './Summary.module.sass';
+import Queryable from "./Queryable";
+
+interface SummaryProps {
+ method: string
+ summary: string
+}
+
+export const Summary: React.FC
+ {tappingStatus.some(pod => !pod.isTapped) && 
}
+ {`Tapping ${amountOfUntappedPods > 0 ? amountOfTappedPods + " / " + amountOfPods : amountOfPods} ${pluralize('pod', amountOfPods)} in ${pluralize('namespace', uniqueNamespaces.length)} ${uniqueNamespaces.join(", ")}`}
+ {expandedBar &&
+
+
+
+
}
+ | Pod name | +Namespace | +Tapping | +
|---|---|---|
| {pod.name} | +{pod.namespace} | +
+ {method &&
+
+ {method}
+
+ }
+ {summary &&
+ }
+
+};
diff --git a/traffic-viewer/src/components/UI/SyntaxHighlighter/index.scss b/traffic-viewer/src/components/UI/SyntaxHighlighter/index.scss
new file mode 100644
index 000000000..d735e6fe6
--- /dev/null
+++ b/traffic-viewer/src/components/UI/SyntaxHighlighter/index.scss
@@ -0,0 +1,49 @@
+.highlighterContainer {
+ &.fitScreen {
+ pre {
+ max-height: 90vh;
+ overflow: auto;
+ }
+ }
+
+ pre {
+ code {
+ font-size: 0.75rem;
+
+ &:first-child {
+ margin-right: 0.75rem;
+ background: #F7F9FC;
+
+ .react-syntax-highlighter-line-number {
+ color: rgb(98, 126, 247);
+ }
+ }
+
+ &:last-child {
+ display: block;
+ }
+ }
+ }
+}
+
+code.hljs {
+ white-space: pre-wrap;
+}
+
+code.hljs:before {
+ counter-reset: listing;
+}
+
+code.hljs .hljs-marker-line {
+ counter-increment: listing;
+}
+
+code.hljs .hljs-marker-line:before {
+ content: counter(listing) " ";
+ display: inline-block;
+ width: 3rem;
+ padding-left: auto;
+ margin-left: auto;
+ text-align: right;
+ opacity: .5;
+}
diff --git a/traffic-viewer/src/components/UI/SyntaxHighlighter/index.tsx b/traffic-viewer/src/components/UI/SyntaxHighlighter/index.tsx
new file mode 100644
index 000000000..313971bbf
--- /dev/null
+++ b/traffic-viewer/src/components/UI/SyntaxHighlighter/index.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import Lowlight from 'react-lowlight'
+import 'highlight.js/styles/atom-one-light.css'
+import './index.scss';
+
+import xml from 'highlight.js/lib/languages/xml'
+import json from 'highlight.js/lib/languages/json'
+import protobuf from 'highlight.js/lib/languages/protobuf'
+import javascript from 'highlight.js/lib/languages/javascript'
+import actionscript from 'highlight.js/lib/languages/actionscript'
+import wasm from 'highlight.js/lib/languages/wasm'
+import handlebars from 'highlight.js/lib/languages/handlebars'
+import yaml from 'highlight.js/lib/languages/yaml'
+import python from 'highlight.js/lib/languages/python'
+
+Lowlight.registerLanguage('python', python);
+Lowlight.registerLanguage('xml', xml);
+Lowlight.registerLanguage('json', json);
+Lowlight.registerLanguage('yaml', yaml);
+Lowlight.registerLanguage('protobuf', protobuf);
+Lowlight.registerLanguage('javascript', javascript);
+Lowlight.registerLanguage('actionscript', actionscript);
+Lowlight.registerLanguage('wasm', wasm);
+Lowlight.registerLanguage('handlebars', handlebars);
+
+interface Props {
+ code: string;
+ showLineNumbers?: boolean;
+ language?: string;
+}
+
+export const SyntaxHighlighter: React.FC
+ {summary}
+
+