redux-connected-devtools 1.0.3 → 1.0.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/DevInspector/DevInspector.js +12 -0
- package/{src/components/DevInspector/DevInspector.style.tsx → dist/components/DevInspector/DevInspector.style.js} +1 -2
- package/dist/components/DevList/DevList.js +24 -0
- package/{src/components/DevList/DevList.style.tsx → dist/components/DevList/DevList.style.js} +2 -4
- package/dist/components/DevMenu/DevMenu.js +25 -0
- package/{src/components/DevMenu/DevMenu.style.tsx → dist/components/DevMenu/DevMenu.style.js} +7 -14
- package/{src/components/DevPanel/DevPanel.tsx → dist/components/DevPanel/DevPanel.js} +7 -27
- package/{src/components/DevPanel/DevPanel.style.tsx → dist/components/DevPanel/DevPanel.style.js} +3 -6
- package/dist/components/DevtoolsApp/DevtoolsApp.js +17 -0
- package/{src/components/DevtoolsApp/DevtoolsApp.style.tsx → dist/components/DevtoolsApp/DevtoolsApp.style.js} +1 -2
- package/dist/components/Icon/AllIcons.js +18 -0
- package/dist/components/Icon/Icon.js +9 -0
- package/{src/components/Icon/Icon.style.tsx → dist/components/Icon/Icon.style.js} +1 -2
- package/{src/components/JourneyRow/JourneyRow.tsx → dist/components/JourneyRow/JourneyRow.js} +7 -32
- package/{src/components/JourneyRow/JourneyRow.style.tsx → dist/components/JourneyRow/JourneyRow.style.js} +5 -10
- package/dist/components/JsonViewer/JsonViewer.js +7 -0
- package/{src/components/JsonViewer/JsonViewer.style.tsx → dist/components/JsonViewer/JsonViewer.style.js} +1 -2
- package/dist/components/Lifecycle/Lifecycle.js +15 -0
- package/{src/components/Lifecycle/Lifecycle.style.tsx → dist/components/Lifecycle/Lifecycle.style.js} +1 -2
- package/dist/components/RequestDetails/RequestDetails.js +10 -0
- package/{src/components/RequestDetails/RequestDetails.style.tsx → dist/components/RequestDetails/RequestDetails.style.js} +4 -8
- package/dist/components/RequestJourney/RequestJourney.js +14 -0
- package/{src/components/RequestJourney/RequestJourney.style.tsx → dist/components/RequestJourney/RequestJourney.style.js} +1 -2
- package/dist/components/RequestRow/RequestRow.js +9 -0
- package/{src/components/RequestRow/RequestRow.style.tsx → dist/components/RequestRow/RequestRow.style.js} +5 -10
- package/dist/components/Size/Size.js +10 -0
- package/{src/components/Size/Size.style.tsx → dist/components/Size/Size.style.js} +1 -2
- package/{src/components/Time/Time.tsx → dist/components/Time/Time.js} +3 -17
- package/{src/components/Time/Time.style.tsx → dist/components/Time/Time.style.js} +3 -6
- package/dist/containers/DevMenuContainer.js +11 -0
- package/dist/containers/DevPanelContainer.js +6 -0
- package/{src/containers/DevtoolsAppContainer.tsx → dist/containers/DevtoolsAppContainer.js} +3 -21
- package/{src/containers/EndpointConfigsContainer.tsx → dist/containers/EndpointConfigsContainer.js} +2 -5
- package/{src/containers/EndpointStatusContainer.tsx → dist/containers/EndpointStatusContainer.js} +2 -5
- package/{src/containers/GlobalSettingsContainer.tsx → dist/containers/GlobalSettingsContainer.js} +2 -5
- package/{src/containers/GlobalStatsContainer.tsx → dist/containers/GlobalStatsContainer.js} +2 -5
- package/{src/containers/LifecycleApiErrorContainer.tsx → dist/containers/LifecycleApiErrorContainer.js} +2 -4
- package/{src/containers/LifecycleFailedContainer.tsx → dist/containers/LifecycleFailedContainer.js} +2 -4
- package/{src/containers/LifecycleGeneralErrorContainer.tsx → dist/containers/LifecycleGeneralErrorContainer.js} +2 -4
- package/{src/containers/LifecycleInQueueContainer.tsx → dist/containers/LifecycleInQueueContainer.js} +2 -4
- package/{src/containers/LifecyclePendingApiContainer.tsx → dist/containers/LifecyclePendingApiContainer.js} +2 -4
- package/{src/containers/LifecyclePostActionContainer.tsx → dist/containers/LifecyclePostActionContainer.js} +2 -4
- package/{src/containers/LifecycleReceivedContainer.tsx → dist/containers/LifecycleReceivedContainer.js} +2 -4
- package/{src/data/devComponents.tsx → dist/data/devComponents.js} +1 -4
- package/{src/data/devRoutes.ts → dist/data/devRoutes.js} +4 -16
- package/dist/dts/components/DevInspector/DevInspector.d.ts +7 -0
- package/dist/dts/components/DevInspector/DevInspector.style.d.ts +1 -0
- package/dist/dts/components/DevList/DevList.d.ts +9 -0
- package/dist/dts/components/DevList/DevList.style.d.ts +2 -0
- package/dist/dts/components/DevMenu/DevMenu.d.ts +12 -0
- package/dist/dts/components/DevMenu/DevMenu.style.d.ts +7 -0
- package/dist/dts/components/DevPanel/DevPanel.d.ts +6 -0
- package/dist/dts/components/DevPanel/DevPanel.style.d.ts +3 -0
- package/dist/dts/components/DevtoolsApp/DevtoolsApp.d.ts +10 -0
- package/dist/dts/components/DevtoolsApp/DevtoolsApp.style.d.ts +1 -0
- package/dist/dts/components/Icon/AllIcons.d.ts +8 -0
- package/dist/dts/components/Icon/Icon.d.ts +10 -0
- package/dist/dts/components/Icon/Icon.style.d.ts +3 -0
- package/dist/dts/components/JourneyRow/JourneyRow.d.ts +7 -0
- package/dist/dts/components/JourneyRow/JourneyRow.style.d.ts +5 -0
- package/dist/dts/components/JsonViewer/JsonViewer.d.ts +7 -0
- package/dist/dts/components/JsonViewer/JsonViewer.style.d.ts +3 -0
- package/dist/dts/components/Lifecycle/Lifecycle.d.ts +7 -0
- package/dist/dts/components/Lifecycle/Lifecycle.style.d.ts +1 -0
- package/dist/dts/components/RequestDetails/RequestDetails.d.ts +7 -0
- package/dist/dts/components/RequestDetails/RequestDetails.style.d.ts +4 -0
- package/dist/dts/components/RequestJourney/RequestJourney.d.ts +7 -0
- package/dist/dts/components/RequestJourney/RequestJourney.style.d.ts +1 -0
- package/dist/dts/components/RequestRow/RequestRow.d.ts +11 -0
- package/dist/dts/components/RequestRow/RequestRow.style.d.ts +6 -0
- package/dist/dts/components/Size/Size.d.ts +6 -0
- package/dist/dts/components/Size/Size.style.d.ts +1 -0
- package/dist/dts/components/Time/Time.d.ts +6 -0
- package/dist/dts/components/Time/Time.style.d.ts +3 -0
- package/dist/dts/containers/DevMenuContainer.d.ts +8 -0
- package/dist/dts/containers/DevPanelContainer.d.ts +6 -0
- package/dist/dts/containers/DevtoolsAppContainer.d.ts +7 -0
- package/dist/dts/containers/EndpointConfigsContainer.d.ts +3 -0
- package/dist/dts/containers/EndpointStatusContainer.d.ts +3 -0
- package/dist/dts/containers/GlobalSettingsContainer.d.ts +3 -0
- package/dist/dts/containers/GlobalStatsContainer.d.ts +3 -0
- package/dist/dts/containers/LifecycleApiErrorContainer.d.ts +3 -0
- package/dist/dts/containers/LifecycleFailedContainer.d.ts +3 -0
- package/dist/dts/containers/LifecycleGeneralErrorContainer.d.ts +3 -0
- package/dist/dts/containers/LifecycleInQueueContainer.d.ts +3 -0
- package/dist/dts/containers/LifecyclePendingApiContainer.d.ts +3 -0
- package/dist/dts/containers/LifecyclePostActionContainer.d.ts +3 -0
- package/dist/dts/containers/LifecycleReceivedContainer.d.ts +3 -0
- package/dist/dts/data/devComponents.d.ts +4 -0
- package/dist/dts/data/devRoutes.d.ts +8 -0
- package/dist/dts/hooks/useStoreSize.d.ts +7 -0
- package/{src/index.ts → dist/dts/index.d.ts} +0 -0
- package/dist/dts/store/selectors.d.ts +2235 -0
- package/dist/dts/types.d.ts +0 -0
- package/dist/dts/utils/date.d.ts +4 -0
- package/dist/dts/utils/download.d.ts +1 -0
- package/{src/hooks/useStoreSize.ts → dist/hooks/useStoreSize.js} +2 -13
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/redux-connected-devtools.es.js +992 -0
- package/dist/redux-connected-devtools.es.js.map +1 -0
- package/dist/redux-connected-devtools.umd.js +247 -0
- package/dist/redux-connected-devtools.umd.js.map +1 -0
- package/dist/store/selectors.js +143 -0
- package/dist/types.js +1 -0
- package/{src/utils/date.ts → dist/utils/date.js} +0 -3
- package/{src/utils/download.ts → dist/utils/download.js} +3 -3
- package/package.json +5 -3
- package/.env +0 -2
- package/.prettierrc.js +0 -10
- package/index.html +0 -58
- package/jest.config.js +0 -8
- package/src/__tests__/sum.ts +0 -9
- package/src/components/DevInspector/DevInspector.scss +0 -2
- package/src/components/DevInspector/DevInspector.tsx +0 -34
- package/src/components/DevList/DevList.scss +0 -2
- package/src/components/DevList/DevList.tsx +0 -65
- package/src/components/DevMenu/DevMenu.scss +0 -2
- package/src/components/DevMenu/DevMenu.tsx +0 -77
- package/src/components/DevPanel/DevPanel.scss +0 -2
- package/src/components/DevtoolsApp/DevtoolsApp.scss +0 -2
- package/src/components/DevtoolsApp/DevtoolsApp.tsx +0 -45
- package/src/components/Icon/AllIcons.tsx +0 -66
- package/src/components/Icon/Icon.scss +0 -2
- package/src/components/Icon/Icon.tsx +0 -28
- package/src/components/JourneyRow/JourneyRow.scss +0 -2
- package/src/components/JsonViewer/JsonViewer.scss +0 -2
- package/src/components/JsonViewer/JsonViewer.tsx +0 -23
- package/src/components/Lifecycle/Lifecycle.scss +0 -2
- package/src/components/Lifecycle/Lifecycle.tsx +0 -36
- package/src/components/LogsViewer/LogsViewer.scss +0 -2
- package/src/components/LogsViewer/LogsViewer.style.tsx +0 -5
- package/src/components/LogsViewer/LogsViewer.tsx +0 -14
- package/src/components/RequestDetails/RequestDetails.scss +0 -2
- package/src/components/RequestDetails/RequestDetails.tsx +0 -60
- package/src/components/RequestJourney/RequestJourney.scss +0 -2
- package/src/components/RequestJourney/RequestJourney.tsx +0 -33
- package/src/components/RequestRow/RequestRow.scss +0 -2
- package/src/components/RequestRow/RequestRow.tsx +0 -37
- package/src/components/Size/Size.scss +0 -2
- package/src/components/Size/Size.tsx +0 -21
- package/src/components/StateViewer/StateViewer.scss +0 -2
- package/src/components/StateViewer/StateViewer.style.tsx +0 -5
- package/src/components/StateViewer/StateViewer.tsx +0 -17
- package/src/components/Time/Time.scss +0 -2
- package/src/containers/DevMenuContainer.tsx +0 -28
- package/src/containers/DevPanelContainer.tsx +0 -12
- package/src/containers/JsonViewerContainer.tsx +0 -8
- package/src/containers/LifecycleContainer.tsx +0 -12
- package/src/containers/LogsViewerContainer.tsx +0 -8
- package/src/containers/StateViewerContainer.tsx +0 -8
- package/src/data/devRouter.ts +0 -107
- package/src/store/initialState.ts +0 -42
- package/src/store/selectors.ts +0 -220
- package/src/types.ts +0 -1
- package/tsconfig.json +0 -18
- package/vite.config.ts +0 -27
@@ -0,0 +1,12 @@
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
+
import { Container } from './DevInspector.style';
|
3
|
+
import RequestJourney from '../RequestJourney/RequestJourney';
|
4
|
+
import RequestDetails from '../RequestDetails/RequestDetails';
|
5
|
+
export function DevInspector(props) {
|
6
|
+
const { item } = props;
|
7
|
+
if (!item) {
|
8
|
+
return (_jsx(Container, { className: 'DevInspector-container', "data-testid": 'DevInspector-container' }));
|
9
|
+
}
|
10
|
+
return (_jsxs(Container, { className: 'DevInspector-container', "data-testid": 'DevInspector-container', children: [_jsx(RequestDetails, { item: item }), _jsx(RequestJourney, { item: item })] }));
|
11
|
+
}
|
12
|
+
export default DevInspector;
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
+
import { Container, Empty } from './DevList.style';
|
3
|
+
import { FixedSizeList as List } from 'react-window';
|
4
|
+
import classnames from 'classnames';
|
5
|
+
export function DevList(props) {
|
6
|
+
const { row: Cmp, items, selectedRow } = props;
|
7
|
+
const Item = (rowInfo) => {
|
8
|
+
const { index, style } = rowInfo;
|
9
|
+
const item = items[index];
|
10
|
+
const className = classnames({ selected: item.id === selectedRow?.id });
|
11
|
+
return (_jsx(Cmp, { onClick: props.onClick, className: className, index: index, style: style, item: item }));
|
12
|
+
};
|
13
|
+
function renderEmpty() {
|
14
|
+
return _jsx(Empty, { children: "Empty list" });
|
15
|
+
}
|
16
|
+
function renderList() {
|
17
|
+
if (items.length === 0) {
|
18
|
+
return renderEmpty();
|
19
|
+
}
|
20
|
+
return (_jsx(List, { height: 850, itemCount: items.length, itemSize: 68, width: 350, className: 'list', children: Item }));
|
21
|
+
}
|
22
|
+
return (_jsx(Container, { className: 'DevList-container', "data-testid": 'DevList-container', children: renderList() }));
|
23
|
+
}
|
24
|
+
export default DevList;
|
package/{src/components/DevList/DevList.style.tsx → dist/components/DevList/DevList.style.js}
RENAMED
@@ -1,6 +1,5 @@
|
|
1
1
|
import styled from 'styled-components';
|
2
|
-
|
3
|
-
export const Container = styled.div`
|
2
|
+
export const Container = styled.div `
|
4
3
|
flex: 1;
|
5
4
|
|
6
5
|
.list {
|
@@ -24,8 +23,7 @@ export const Container = styled.div`
|
|
24
23
|
}
|
25
24
|
}
|
26
25
|
`;
|
27
|
-
|
28
|
-
export const Empty = styled.div`
|
26
|
+
export const Empty = styled.div `
|
29
27
|
color: #456;
|
30
28
|
margin: 30px;
|
31
29
|
font-size: 17px;
|
@@ -0,0 +1,25 @@
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
+
import { Container, MenuGroup, MenuGroupTitle, MenuItem, Title, Badge, BadgeTotal, } from './DevMenu.style';
|
3
|
+
import classnames from 'classnames';
|
4
|
+
export function DevMenu(props) {
|
5
|
+
const { groups, items, selectedId, badges, badgesTotal } = props;
|
6
|
+
function renderItem(item) {
|
7
|
+
const { title, id } = item;
|
8
|
+
const selected = id === selectedId;
|
9
|
+
const badge = badges[id];
|
10
|
+
const badgeTotal = badgesTotal[id];
|
11
|
+
return (_jsxs(MenuItem, { className: classnames({ selected }), onClick: () => props.onClick(item), children: [_jsx(Title, { children: title }), badgeTotal > 0 && badgeTotal !== badge && (_jsx(BadgeTotal, { children: badgeTotal })), badge > 0 && _jsx(Badge, { children: badge })] }, item.id));
|
12
|
+
}
|
13
|
+
function renderItems(groupItems) {
|
14
|
+
return groupItems.map((item) => renderItem(item));
|
15
|
+
}
|
16
|
+
function renderGroup(group) {
|
17
|
+
const groupItems = items.filter((item) => item.group === group);
|
18
|
+
return (_jsxs(MenuGroup, { children: [_jsx(MenuGroupTitle, { children: group }), renderItems(groupItems)] }, group));
|
19
|
+
}
|
20
|
+
function renderGroups() {
|
21
|
+
return groups.map((group) => renderGroup(group));
|
22
|
+
}
|
23
|
+
return (_jsx(Container, { className: 'DevMenu-container', "data-testid": 'DevMenu-container', children: renderGroups() }));
|
24
|
+
}
|
25
|
+
export default DevMenu;
|
package/{src/components/DevMenu/DevMenu.style.tsx → dist/components/DevMenu/DevMenu.style.js}
RENAMED
@@ -1,24 +1,20 @@
|
|
1
1
|
import styled from 'styled-components';
|
2
|
-
|
3
|
-
export const Container = styled.div`
|
2
|
+
export const Container = styled.div `
|
4
3
|
width: 190px;
|
5
4
|
${(props) => props.theme.borderRight('1px solid rgba(255, 255, 255, 0.2)')}
|
6
5
|
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
|
7
6
|
`;
|
8
|
-
|
9
|
-
export const MenuGroup = styled.div`
|
7
|
+
export const MenuGroup = styled.div `
|
10
8
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
11
9
|
`;
|
12
|
-
|
13
|
-
export const MenuGroupTitle = styled.div`
|
10
|
+
export const MenuGroupTitle = styled.div `
|
14
11
|
font-size: 13px;
|
15
12
|
padding: 5px 10px;
|
16
13
|
color: rgba(255, 255, 255, 0.5);
|
17
14
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
18
15
|
background-color: rgba(0, 0, 0, 0.1);
|
19
16
|
`;
|
20
|
-
|
21
|
-
export const MenuItem = styled.div`
|
17
|
+
export const MenuItem = styled.div `
|
22
18
|
display: flex;
|
23
19
|
flex-direction: row;
|
24
20
|
align-items: center;
|
@@ -37,12 +33,10 @@ export const MenuItem = styled.div`
|
|
37
33
|
cursor: pointer;
|
38
34
|
}
|
39
35
|
`;
|
40
|
-
|
41
|
-
export const Title = styled.div`
|
36
|
+
export const Title = styled.div `
|
42
37
|
flex: 1;
|
43
38
|
`;
|
44
|
-
|
45
|
-
export const Badge = styled.div`
|
39
|
+
export const Badge = styled.div `
|
46
40
|
background-color: rgba(0, 0, 80, 0.3);
|
47
41
|
padding: 0 4px;
|
48
42
|
font-size: 12px;
|
@@ -50,7 +44,6 @@ export const Badge = styled.div`
|
|
50
44
|
border: 1px solid #334;
|
51
45
|
color: cyan;
|
52
46
|
`;
|
53
|
-
|
54
|
-
export const BadgeTotal = styled(Badge)`
|
47
|
+
export const BadgeTotal = styled(Badge) `
|
55
48
|
color: #555;
|
56
49
|
`;
|
@@ -1,36 +1,17 @@
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
1
2
|
import DevMenu from '../../containers/DevMenuContainer';
|
2
|
-
import
|
3
|
+
import { useState } from 'react';
|
3
4
|
import { Actions, Container, Content } from './DevPanel.style';
|
4
5
|
import { devComponents } from '../../data/devComponents';
|
5
|
-
import { devRoutes
|
6
|
-
|
7
|
-
|
8
|
-
children: JSX.Element | JSX.Element[];
|
9
|
-
};
|
10
|
-
|
11
|
-
export function DevPanel(props: DevPanelProps) {
|
12
|
-
const [route, setRoute] = useState<IDevRoute>(devRoutes[0]);
|
13
|
-
|
6
|
+
import { devRoutes } from '../../data/devRoutes';
|
7
|
+
export function DevPanel(props) {
|
8
|
+
const [route, setRoute] = useState(devRoutes[0]);
|
14
9
|
function renderRoute() {
|
15
10
|
const Cmp = devComponents[route.componentId];
|
16
|
-
return
|
11
|
+
return _jsx(Cmp, {}, route.id);
|
17
12
|
}
|
18
|
-
|
19
|
-
return (
|
20
|
-
<Container
|
21
|
-
className='DevPanel-container'
|
22
|
-
data-testid='DevPanel-container'
|
23
|
-
>
|
24
|
-
<DevMenu
|
25
|
-
selectedId={route.id}
|
26
|
-
onClick={(item: IDevRoute) => setRoute(item)}
|
27
|
-
/>
|
28
|
-
<Actions>{props.children}</Actions>
|
29
|
-
<Content>{renderRoute()}</Content>
|
30
|
-
</Container>
|
31
|
-
);
|
13
|
+
return (_jsxs(Container, { className: 'DevPanel-container', "data-testid": 'DevPanel-container', children: [_jsx(DevMenu, { selectedId: route.id, onClick: (item) => setRoute(item) }), _jsx(Actions, { children: props.children }), _jsx(Content, { children: renderRoute() })] }));
|
32
14
|
}
|
33
|
-
|
34
15
|
/*
|
35
16
|
for the chrome extension devtools panel
|
36
17
|
TODO: find another way to encapsulate this
|
@@ -54,5 +35,4 @@ if (chrome) {
|
|
54
35
|
init(tabId);
|
55
36
|
}
|
56
37
|
*/
|
57
|
-
|
58
38
|
export default DevPanel;
|
package/{src/components/DevPanel/DevPanel.style.tsx → dist/components/DevPanel/DevPanel.style.js}
RENAMED
@@ -1,21 +1,18 @@
|
|
1
1
|
import styled from 'styled-components';
|
2
|
-
|
3
|
-
export const Container = styled.div`
|
2
|
+
export const Container = styled.div `
|
4
3
|
flex: 1;
|
5
4
|
color: #eee;
|
6
5
|
background-color: #232332;
|
7
6
|
display: flex;
|
8
7
|
flex-direction: row;
|
9
8
|
`;
|
10
|
-
|
11
|
-
export const Content = styled.div`
|
9
|
+
export const Content = styled.div `
|
12
10
|
flex: 1;
|
13
11
|
background-color: rgba(0, 0, 0, 0.15);
|
14
12
|
display: flex;
|
15
13
|
flex-direction: column;
|
16
14
|
`;
|
17
|
-
|
18
|
-
export const Actions = styled.div`
|
15
|
+
export const Actions = styled.div `
|
19
16
|
position: absolute;
|
20
17
|
bottom: 5px;
|
21
18
|
${(props) => props.theme.left('10px')}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
+
import Icon from '../Icon/Icon';
|
3
|
+
import { useRef } from 'react';
|
4
|
+
import { Container } from './DevtoolsApp.style';
|
5
|
+
import { DevPanelContainer } from '../../containers/DevPanelContainer';
|
6
|
+
import { Provider } from 'react-redux';
|
7
|
+
import Size from '../Size/Size';
|
8
|
+
import classnames from 'classnames';
|
9
|
+
export function DevtoolsApp(props) {
|
10
|
+
const { connectedStore, storeSizeInBytes, isDarkMode } = props;
|
11
|
+
const ref = useRef(null);
|
12
|
+
const className = classnames('DevtoolsApp-container', {
|
13
|
+
darkMode: isDarkMode,
|
14
|
+
});
|
15
|
+
return (_jsx(Container, { ref: ref, className: className, "data-testid": 'DevtoolsApp-container', children: _jsx(Provider, { store: connectedStore, children: _jsxs(DevPanelContainer, { children: [_jsx(Size, { size: storeSizeInBytes }), _jsx(Icon, { name: 'clearAll', onClick: () => props.clearRequests() }), _jsx(Icon, { name: 'download', onClick: props.downloadState })] }) }) }));
|
16
|
+
}
|
17
|
+
export default DevtoolsApp;
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
+
const Download = (props) => {
|
3
|
+
const { size = 24 } = props;
|
4
|
+
return (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: `${size}px`, height: `${size}px`, fill: 'currentColor', children: [_jsx("path", { d: 'M0 0h24v24H0z', fill: 'none' }), _jsx("path", { d: 'M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z' })] }));
|
5
|
+
};
|
6
|
+
const Close = (props) => {
|
7
|
+
const { size = 24 } = props;
|
8
|
+
return (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: `${size}px`, height: `${size}px`, fill: 'currentColor', children: [_jsx("path", { d: 'M0 0h24v24H0z', fill: 'none' }), _jsx("path", { d: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z' })] }));
|
9
|
+
};
|
10
|
+
const ClearAll = (props) => {
|
11
|
+
const { size = 24 } = props;
|
12
|
+
return (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: `${size}px`, height: `${size}px`, fill: 'currentColor', children: [_jsx("path", { d: 'M0 0h24v24H0z', fill: 'none' }), _jsx("path", { d: 'M5 13h14v-2H5v2zm-2 4h14v-2H3v2zM7 7v2h14V7H7z' })] }));
|
13
|
+
};
|
14
|
+
export const allIcons = {
|
15
|
+
close: Close,
|
16
|
+
clearAll: ClearAll,
|
17
|
+
download: Download,
|
18
|
+
};
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
+
import { allIcons } from './AllIcons';
|
3
|
+
import { Container } from './Icon.style';
|
4
|
+
export function Icon(props) {
|
5
|
+
const { name, size = 20, color } = props;
|
6
|
+
const Cmp = allIcons[name];
|
7
|
+
return (_jsx(Container, { className: 'Icon-container', "data-testid": 'Icon-container', color: color, onClick: props.onClick, children: _jsx(Cmp, { size: size }) }));
|
8
|
+
}
|
9
|
+
export default Icon;
|
package/{src/components/JourneyRow/JourneyRow.tsx → dist/components/JourneyRow/JourneyRow.js}
RENAMED
@@ -1,13 +1,8 @@
|
|
1
|
-
import
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
2
|
import Time from '../Time/Time';
|
3
3
|
import { Container, Status, DataIcon, Delta, Flex } from './JourneyRow.style';
|
4
|
-
import {
|
5
|
-
|
6
|
-
export type JourneyRowProps = {
|
7
|
-
point: JourneyPoint;
|
8
|
-
};
|
9
|
-
|
10
|
-
const statusMap: Record<LifecycleStatus, string> = {
|
4
|
+
import { LifecycleStatus } from 'redux-connected';
|
5
|
+
const statusMap = {
|
11
6
|
[LifecycleStatus.RECEIVED]: 'Received',
|
12
7
|
[LifecycleStatus.POST_ACTION_OPTIMISTIC]: 'Post action (optimistic)',
|
13
8
|
[LifecycleStatus.IN_QUEUE]: 'In queue',
|
@@ -17,44 +12,24 @@ const statusMap: Record<LifecycleStatus, string> = {
|
|
17
12
|
[LifecycleStatus.POST_ACTION]: 'Post action',
|
18
13
|
[LifecycleStatus.FAILED]: 'Failed',
|
19
14
|
};
|
20
|
-
|
21
|
-
export function JourneyRow(props: JourneyRowProps) {
|
15
|
+
export function JourneyRow(props) {
|
22
16
|
const { point } = props;
|
23
17
|
const { status, timestamp, data, delta = '' } = point;
|
24
|
-
|
25
18
|
function printPoint() {
|
26
19
|
console.log(data);
|
27
20
|
}
|
28
|
-
|
29
21
|
function renderDataIcon() {
|
30
22
|
if (!data) {
|
31
23
|
return null;
|
32
24
|
}
|
33
|
-
|
34
|
-
return <DataIcon>D</DataIcon>;
|
25
|
+
return _jsx(DataIcon, { children: "D" });
|
35
26
|
}
|
36
|
-
|
37
27
|
function renderDelta() {
|
38
28
|
if (!delta) {
|
39
29
|
return null;
|
40
30
|
}
|
41
|
-
|
42
|
-
return <Delta>+{delta.toLocaleString()}</Delta>;
|
31
|
+
return _jsxs(Delta, { children: ["+", delta.toLocaleString()] });
|
43
32
|
}
|
44
|
-
|
45
|
-
return (
|
46
|
-
<Container
|
47
|
-
className='JourneyRow-container'
|
48
|
-
data-testid='JourneyRow-container'
|
49
|
-
onClick={printPoint}
|
50
|
-
>
|
51
|
-
<Status>{statusMap[status]}</Status>
|
52
|
-
{renderDataIcon()}
|
53
|
-
<Flex />
|
54
|
-
{renderDelta()}
|
55
|
-
<Time value={timestamp} />
|
56
|
-
</Container>
|
57
|
-
);
|
33
|
+
return (_jsxs(Container, { className: 'JourneyRow-container', "data-testid": 'JourneyRow-container', onClick: printPoint, children: [_jsx(Status, { children: statusMap[status] }), renderDataIcon(), _jsx(Flex, {}), renderDelta(), _jsx(Time, { value: timestamp })] }));
|
58
34
|
}
|
59
|
-
|
60
35
|
export default JourneyRow;
|
@@ -1,6 +1,5 @@
|
|
1
1
|
import styled from 'styled-components';
|
2
|
-
|
3
|
-
export const Container = styled.div`
|
2
|
+
export const Container = styled.div `
|
4
3
|
flex: 1;
|
5
4
|
display: flex;
|
6
5
|
flex-direction: row;
|
@@ -16,12 +15,10 @@ export const Container = styled.div`
|
|
16
15
|
cursor: pointer;
|
17
16
|
}
|
18
17
|
`;
|
19
|
-
|
20
|
-
export const Status = styled.div`
|
18
|
+
export const Status = styled.div `
|
21
19
|
color: #aaa;
|
22
20
|
`;
|
23
|
-
|
24
|
-
export const DataIcon = styled.div`
|
21
|
+
export const DataIcon = styled.div `
|
25
22
|
background-color: #000;
|
26
23
|
padding: 3px 7px;
|
27
24
|
font-size: 13px;
|
@@ -30,8 +27,7 @@ export const DataIcon = styled.div`
|
|
30
27
|
border-radius: 5px;
|
31
28
|
${(props) => props.theme.marginLeft('10px')}
|
32
29
|
`;
|
33
|
-
|
34
|
-
export const Delta = styled.div`
|
30
|
+
export const Delta = styled.div `
|
35
31
|
font-size: 13px;
|
36
32
|
width: 60px;
|
37
33
|
font-weight: bold;
|
@@ -40,7 +36,6 @@ export const Delta = styled.div`
|
|
40
36
|
text-align: center;
|
41
37
|
font-family: monospace;
|
42
38
|
`;
|
43
|
-
|
44
|
-
export const Flex = styled.div`
|
39
|
+
export const Flex = styled.div `
|
45
40
|
flex: 1;
|
46
41
|
`;
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
+
import { Container } from './JsonViewer.style';
|
3
|
+
export function JsonViewer(props) {
|
4
|
+
const { json, width } = props;
|
5
|
+
return (_jsx(Container, { className: 'JsonViewer-container', "data-testid": 'JsonViewer-container', width: width, children: _jsx("pre", { children: JSON.stringify(json, null, 4) }) }));
|
6
|
+
}
|
7
|
+
export default JsonViewer;
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
+
import DevInspector from '../DevInspector/DevInspector';
|
3
|
+
import DevList from '../DevList/DevList';
|
4
|
+
import { useState } from 'react';
|
5
|
+
import RequestRow from '../RequestRow/RequestRow';
|
6
|
+
import { Container } from './Lifecycle.style';
|
7
|
+
export function Lifecycle(props) {
|
8
|
+
const { requests } = props;
|
9
|
+
const [item, setItem] = useState();
|
10
|
+
function onClick(newItem) {
|
11
|
+
setItem(newItem);
|
12
|
+
}
|
13
|
+
return (_jsxs(Container, { className: 'Lifecycle-container', "data-testid": 'Lifecycle-container', children: [_jsx(DevList, { items: requests, row: RequestRow, onClick: onClick, selectedRow: item }), _jsx(DevInspector, { item: item })] }));
|
14
|
+
}
|
15
|
+
export default Lifecycle;
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
+
import { Container, Table, Tr, Td } from './RequestDetails.style';
|
3
|
+
import JsonViewer from '../JsonViewer/JsonViewer';
|
4
|
+
import bytes from 'bytes';
|
5
|
+
export function RequestDetails(props) {
|
6
|
+
const { item } = props;
|
7
|
+
return (_jsxs(Container, { className: 'RequestDetails-container', "data-testid": 'RequestDetails-container', children: [_jsx(Table, { children: _jsxs("tbody", { children: [_jsxs(Tr, { children: [_jsx(Td, { children: "sequence" }), _jsx(Td, { children: item.sequence })] }), _jsxs(Tr, { children: [_jsx(Td, { children: "id" }), _jsx(Td, { children: item.shortId })] }), _jsxs(Tr, { children: [_jsx(Td, { children: "apiVerb" }), _jsx(Td, { children: item.argsApiVerb })] }), _jsxs(Tr, { children: [_jsx(Td, { children: "connection" }), _jsx(Td, { children: item.argsConnectionType })] }), _jsxs(Tr, { children: [_jsx(Td, { children: "duration" }), _jsx(Td, { children: item.apiDuration })] }), _jsxs(Tr, { children: [_jsx(Td, { children: "nodeName" }), _jsx(Td, { children: item.argsNodeName })] }), _jsxs(Tr, { children: [_jsx(Td, { children: "responseSize" }), _jsx(Td, { children: item.apiResponseSize &&
|
8
|
+
bytes(item.apiResponseSize) })] })] }) }), _jsx(JsonViewer, { width: 290, json: item.originalAction })] }));
|
9
|
+
}
|
10
|
+
export default RequestDetails;
|
@@ -1,15 +1,11 @@
|
|
1
1
|
import styled from 'styled-components';
|
2
|
-
|
3
|
-
export const Container = styled.div`
|
2
|
+
export const Container = styled.div `
|
4
3
|
flex: 1;
|
5
4
|
padding: 20px;
|
6
5
|
`;
|
7
|
-
|
8
|
-
export const
|
9
|
-
|
10
|
-
export const Tr = styled.tr``;
|
11
|
-
|
12
|
-
export const Td = styled.td`
|
6
|
+
export const Table = styled.table ``;
|
7
|
+
export const Tr = styled.tr ``;
|
8
|
+
export const Td = styled.td `
|
13
9
|
color: goldenrod;
|
14
10
|
|
15
11
|
&:first-child {
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
+
import { Container } from './RequestJourney.style';
|
3
|
+
import JourneyRow from '../JourneyRow/JourneyRow';
|
4
|
+
export function RequestJourney(props) {
|
5
|
+
const { item } = props;
|
6
|
+
function renderItem(point, index) {
|
7
|
+
return _jsx(JourneyRow, { point: point }, index);
|
8
|
+
}
|
9
|
+
function renderItems() {
|
10
|
+
return item.items.map((point, index) => renderItem(point, index));
|
11
|
+
}
|
12
|
+
return (_jsx(Container, { className: 'RequestJourney-container', "data-testid": 'RequestJourney-container', children: renderItems() }));
|
13
|
+
}
|
14
|
+
export default RequestJourney;
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
+
import { Container, Col, Id, Type } from './RequestRow.style';
|
3
|
+
import Time from '../Time/Time';
|
4
|
+
export function RequestRow(props) {
|
5
|
+
const { index, style, item, className } = props;
|
6
|
+
const { sequence, createdTS } = item;
|
7
|
+
return (_jsxs(Container, { className: `DevListRow-container ${className}`, "data-testid": 'DevListRow-container', style: style, index: index, onClick: () => props.onClick(item), children: [_jsxs(Col, { children: [_jsx(Id, { children: sequence }), _jsx(Type, { children: item.originalAction?.type })] }), _jsx(Col, { children: _jsx(Time, { value: createdTS }) })] }));
|
8
|
+
}
|
9
|
+
export default RequestRow;
|
@@ -1,32 +1,27 @@
|
|
1
1
|
import styled from 'styled-components';
|
2
|
-
|
3
|
-
export const Container = styled.div<{ index: number }>`
|
2
|
+
export const Container = styled.div `
|
4
3
|
flex: 1;
|
5
4
|
display: flex;
|
6
5
|
flex-direction: row;
|
7
6
|
align-items: center;
|
8
7
|
padding: 10px;
|
9
8
|
max-width: 90%;
|
10
|
-
background-color: ${(props) =>
|
11
|
-
props.index % 2 === 1 ? 'rgba(0, 0, 0, 0.2)' : 'transparent'};
|
9
|
+
background-color: ${(props) => props.index % 2 === 1 ? 'rgba(0, 0, 0, 0.2)' : 'transparent'};
|
12
10
|
|
13
11
|
&:hover {
|
14
12
|
background-color: rgba(0, 0, 0, 0.7);
|
15
13
|
cursor: pointer;
|
16
14
|
}
|
17
15
|
`;
|
18
|
-
|
19
|
-
export const Col = styled.div`
|
16
|
+
export const Col = styled.div `
|
20
17
|
&:first-child {
|
21
18
|
flex: 1;
|
22
19
|
}
|
23
20
|
`;
|
24
|
-
|
25
|
-
export const Id = styled.div`
|
21
|
+
export const Id = styled.div `
|
26
22
|
color: goldenrod;
|
27
23
|
font-size: 16px;
|
28
24
|
`;
|
29
|
-
|
30
|
-
export const Type = styled.div`
|
25
|
+
export const Type = styled.div `
|
31
26
|
color: brown;
|
32
27
|
`;
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
+
import { Container } from './Size.style';
|
3
|
+
import bytes from 'bytes';
|
4
|
+
import { useMemo } from 'react';
|
5
|
+
export function Size(props) {
|
6
|
+
const { size = 0 } = props;
|
7
|
+
const sizeText = useMemo(() => bytes(size), [size]);
|
8
|
+
return (_jsx(Container, { className: 'Size-container', "data-testid": 'Size-container', children: !size ? '-' : sizeText }));
|
9
|
+
}
|
10
|
+
export default Size;
|
@@ -1,25 +1,11 @@
|
|
1
|
-
import
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
2
|
import { startOfTime } from '../../utils/date';
|
3
3
|
import { Container, Full, Fraction } from './Time.style';
|
4
|
-
|
5
|
-
export type TimeProps = {
|
6
|
-
value: number;
|
7
|
-
};
|
8
|
-
|
9
|
-
export function Time(props: TimeProps) {
|
4
|
+
export function Time(props) {
|
10
5
|
const { value } = props;
|
11
|
-
|
12
6
|
const relativeValue = (value - startOfTime) / 1000;
|
13
|
-
|
14
7
|
const full = Math.floor(relativeValue);
|
15
8
|
const fraction = (relativeValue - full).toFixed(3).split('.').pop();
|
16
|
-
|
17
|
-
return (
|
18
|
-
<Container className='Time-container' data-testid='Time-container'>
|
19
|
-
<Full>{full}</Full>
|
20
|
-
<Fraction>{fraction}</Fraction>
|
21
|
-
</Container>
|
22
|
-
);
|
9
|
+
return (_jsxs(Container, { className: 'Time-container', "data-testid": 'Time-container', children: [_jsx(Full, { children: full }), _jsx(Fraction, { children: fraction })] }));
|
23
10
|
}
|
24
|
-
|
25
11
|
export default Time;
|
@@ -1,17 +1,14 @@
|
|
1
1
|
import styled from 'styled-components';
|
2
|
-
|
3
|
-
export const Container = styled.div`
|
2
|
+
export const Container = styled.div `
|
4
3
|
display: flex;
|
5
4
|
flex-direction: row;
|
6
5
|
align-items: flex-start;
|
7
6
|
font-family: monospace;
|
8
7
|
color: #99a;
|
9
8
|
`;
|
10
|
-
|
11
|
-
export const Full = styled.div`
|
9
|
+
export const Full = styled.div `
|
12
10
|
font-size: 24px;
|
13
11
|
`;
|
14
|
-
|
15
|
-
export const Fraction = styled.div`
|
12
|
+
export const Fraction = styled.div `
|
16
13
|
font-size: 12px;
|
17
14
|
`;
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
+
import { useSelector } from 'react-redux';
|
3
|
+
import DevMenu from '../components/DevMenu/DevMenu';
|
4
|
+
import { devGroups, devRoutes } from '../data/devRoutes';
|
5
|
+
import { $menuBadges, $menuBadgesTotal } from '../store/selectors';
|
6
|
+
export function DevMenuContainer(props) {
|
7
|
+
const badges = useSelector($menuBadges);
|
8
|
+
const badgesTotal = useSelector($menuBadgesTotal);
|
9
|
+
return (_jsx(DevMenu, { groups: devGroups, items: devRoutes, badges: badges, badgesTotal: badgesTotal, selectedId: props.selectedId, onClick: props.onClick }));
|
10
|
+
}
|
11
|
+
export default DevMenuContainer;
|