summaryrefslogtreecommitdiffstats
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/App/App.module.scss56
-rw-r--r--src/components/App/App.tsx118
-rw-r--r--src/components/Content/Content.tsx74
-rw-r--r--src/components/Details/Details.tsx254
-rw-r--r--src/components/RequestSummary/RequestSummary.tsx49
5 files changed, 362 insertions, 189 deletions
diff --git a/src/components/App/App.module.scss b/src/components/App/App.module.scss
index 2036eb9..9837cdf 100644
--- a/src/components/App/App.module.scss
+++ b/src/components/App/App.module.scss
@@ -1,55 +1,3 @@
1.app { 1.content {
2 display: flex; 2 flex: 1 0 auto;
3 flex-flow: column nowrap;
4 grid-template-rows: auto 1fr;
5 height: 100vh;
6 overflow: hidden;
7}
8
9.main {
10 display: flex;
11 flex-flow: row nowrap;
12 flex-grow: 1;
13 overflow: hidden;
14}
15
16.header {
17 font-size: 1.2em;
18 display: flex;
19 flex-flow: row nowrap;
20 align-items: center;
21 justify-content: space-between;
22 background: black;
23 color: white;
24 padding: 1em;
25
26 a {
27 color: white;
28 }
29}
30
31.sidebar {
32 width: calc((6 / 16) * 100%);
33 height: 100%;
34 grid-area: sidebar;
35 border-right: 1px solid black;
36 overflow-y: auto;
37
38 li {
39 border-bottom: 1px solid gray;
40 }
41}
42
43.details {
44 width: calc((10 / 16) * 100%);
45 overflow: hidden;
46 height: 100%;
47}
48
49.noRequest, .noRequestSelected {
50 width: 100%;
51 height: 100%;
52 display: flex;
53 justify-content: center;
54 align-items: center;
55} 3}
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index e361aa5..61f88f6 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -6,6 +6,8 @@ import styles from './App.module.scss';
6import Details from "../Details/Details"; 6import Details from "../Details/Details";
7import RequestSummary from "../RequestSummary/RequestSummary"; 7import RequestSummary from "../RequestSummary/RequestSummary";
8import {getHost} from "../../utils"; 8import {getHost} from "../../utils";
9import {Container, Navbar, Col, Row, Nav, ListGroup} from "react-bootstrap";
10import classNames from "classnames";
9 11
10interface Config { 12interface Config {
11 url: string 13 url: string
@@ -50,29 +52,59 @@ export default function App() {
50 ), [selectedRequestIndex, calls]); 52 ), [selectedRequestIndex, calls]);
51 53
52 return config && ( 54 return config && (
53 <div className={styles.app}> 55 <>
54 <header className={styles.header}> 56 <Navbar
55 {statusMap[readyState]} TTUN 57 bg="dark"
56 <a href={config.url} target="_blank">{config.url}</a> 58 variant="dark"
57 </header> 59 expand
58 <main className={styles.main}> 60 >
59 <ul className={styles.sidebar}> 61 <Container fluid>
60 { 62 <Navbar.Brand>
61 calls.length > 0 63 {statusMap[readyState]} TTUN
62 ? calls.slice(0).reverse().map((requestResponse, index) => ( 64 </Navbar.Brand>
63 <li onClick={() => setSelectedRequestIndex(calls.length - index - 1)} key={`request-${index}`}> 65 <Navbar.Text>
64 <RequestSummary requestResponse={requestResponse} /> 66 <a href={config.url} target="_blank">{config.url}</a>
65 </li> 67 </Navbar.Text>
66 )) 68 </Container>
67 : ( 69 </Navbar>
68 <div className={styles.noRequest}> 70 <Container>
69 <p>No requests</p>
70 </div>
71 )
72 }
73 </ul>
74 71
75 <div className={styles.details}> 72 </Container>
73 <Row className={classNames(styles.content, 'gx-0', 'overflow-hidden')}>
74 <Col className='border-end overflow-auto' xs={4}>
75 <ListGroup variant='flush'>
76 {
77 calls.length > 0
78 ? (
79 calls.slice(0).reverse().map((requestResponse, index) => {
80 const selected = selectedRequestIndex === calls.length - index - 1;
81 return (
82 <ListGroup.Item
83 onClick={() => setSelectedRequestIndex(calls.length - index - 1)}
84 key={`request-${index}`}
85 className={classNames({
86 'bg-primary': selected,
87 'text-light': selected,
88 'border-bottom': true
89 })}
90 >
91 <RequestSummary
92 requestResponse={requestResponse}
93 selected={selected}
94 />
95 </ListGroup.Item>
96 )
97 })
98 )
99 : (
100 <div className={styles.noRequest}>
101 <p>No requests</p>
102 </div>
103 )
104 }
105 </ListGroup>
106 </Col>
107 <Col xs={8} className=''>
76 { 108 {
77 selectedRequest !== null 109 selectedRequest !== null
78 ? ( 110 ? (
@@ -83,8 +115,44 @@ export default function App() {
83 </div> 115 </div>
84 ) 116 )
85 } 117 }
86 </div> 118 </Col>
87 </main> 119 </Row>
88 </div> 120 </>
121 // <div className={styles.app}>
122 // <header className={styles.header}>
123 // {statusMap[readyState]} TTUN
124 // <a href={config.url} target="_blank">{config.url}</a>
125 // </header>
126 // <main className={styles.main}>
127 // <ul className={styles.sidebar}>
128 // {
129 // calls.length > 0
130 // ? calls.slice(0).reverse().map((requestResponse, index) => (
131 // <li onClick={() => setSelectedRequestIndex(calls.length - index - 1)} key={`request-${index}`}>
132 // <RequestSummary requestResponse={requestResponse} />
133 // </li>
134 // ))
135 // : (
136 // <div className={styles.noRequest}>
137 // <p>No requests</p>
138 // </div>
139 // )
140 // }
141 // </ul>
142 //
143 // <div className={styles.details}>
144 // {
145 // selectedRequest !== null
146 // ? (
147 // <Details requestResponse={selectedRequest} />
148 // ) : (
149 // <div className={styles.noRequestSelected}>
150 // <p>Select a request to inspect it</p>
151 // </div>
152 // )
153 // }
154 // </div>
155 // </main>
156 // </div>
89 ); 157 );
90} 158}
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index a7b5949..cb5e6bc 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -13,6 +13,21 @@ import {
13} from "react"; 13} from "react";
14import ReactJson from 'react-json-view'; 14import ReactJson from 'react-json-view';
15import styles from './Content.module.scss'; 15import styles from './Content.module.scss';
16import {Col, Container, Row} from "react-bootstrap";
17
18function getHeader(headers: { [key: string]: string }, key: string, unit?: string): string | null {
19 console.log(headers, key)
20 try {
21 const [_, value] = Object
22 .entries(headers)
23 .find(([headerKey]) => headerKey.toLowerCase() === key.toLowerCase())
24 return unit !== undefined
25 ? `${value}${unit}`
26 : value
27 } catch {
28 return null;
29 }
30}
16 31
17interface ContentProps { 32interface ContentProps {
18 data: RequestPayload | ResponsePayload 33 data: RequestPayload | ResponsePayload
@@ -20,17 +35,29 @@ interface ContentProps {
20 raw?: boolean 35 raw?: boolean
21} 36}
22 37
23export default function Content({ raw, setRaw, ...props }: ContentProps): JSX.Element { 38export default function Content({ raw, setRaw, data