) => {
91 | setSelectedRadio(e.target.value);
92 | setEndpointForGraphiql(e.target.value);
93 | };
94 |
95 | return (
96 |
97 |
141 |
142 | {loadingEndpoint ? (
143 | <>
144 |
150 |
166 |
167 | ) : (
168 |
173 | )}
174 |
173 | this.clearDefaultQueryState(queryEdit)}
177 | explorerIsOpen={this.state.explorerIsOpen}
178 | onToggleExplorer={this.handleToggleExplorer}
179 | />{' '}
180 | {
187 | this.clearDefaultQueryState(queryOnEdit);
188 | }}
189 | onEditVariables={() => {
190 | this.clearDefaultQueryState();
191 | }}
192 | variables={this.state.variables}
193 | ref={r => {
194 | this.graphiql = r;
195 | }}>
196 |
197 |
213 | */}{' '}
229 | {' '}
230 | {' '}
231 |
232 | );
233 |
234 | return {graphiql}
;
235 | }
236 | }
237 |
238 | export default GraphiQLPlugin;
239 |
--------------------------------------------------------------------------------
/src/app/Panel/MainDrawer.tsx:
--------------------------------------------------------------------------------
1 | import React, {useState} from 'react';
2 |
3 | import clsx from 'clsx';
4 | import {
5 | createStyles,
6 | makeStyles,
7 | useTheme,
8 | Theme,
9 | } from '@material-ui/core/styles';
10 | import AppBar from '@material-ui/core/AppBar';
11 | import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
12 | import ChevronRightIcon from '@material-ui/icons/ChevronRight';
13 | import CssBaseline from '@material-ui/core/CssBaseline';
14 | import Divider from '@material-ui/core/Divider';
15 | import Drawer from '@material-ui/core/Drawer';
16 | import FormControlLabel from '@material-ui/core/FormControlLabel';
17 | import IconButton from '@material-ui/core/IconButton';
18 | import List from '@material-ui/core/List';
19 | import ListItem from '@material-ui/core/ListItem';
20 | import ListItemIcon from '@material-ui/core/ListItemIcon';
21 | import ListItemText from '@material-ui/core/ListItemText';
22 | import HttpIcon from '@material-ui/icons/Http';
23 | import StorageIcon from '@material-ui/icons/Storage';
24 | import BarChartIcon from '@material-ui/icons/BarChart';
25 | import Popper, {PopperPlacementType} from '@material-ui/core/Popper';
26 | import Fade from '@material-ui/core/Fade';
27 | import Paper from '@material-ui/core/Paper';
28 | import MenuIcon from '@material-ui/icons/Menu';
29 | import SwitchUI from '@material-ui/core/Switch';
30 | import Toolbar from '@material-ui/core/Toolbar';
31 | import Typography from '@material-ui/core/Typography';
32 |
33 | import ApolloTabResponsive from '../Events_Tab/ApolloTabResponsive';
34 | import {Apollo11ThemeContext} from './themes/ThemeProvider';
35 | import GraphiQL from '../GraphiQL_Tab/GraphiQLPage';
36 | import {MainDrawerProps} from '../utils/managedlog/lib/eventLogNode';
37 | import Performance from '../Performance_Tab/Performance_v2';
38 |
39 | const drawerWidth = 200;
40 |
41 | const useStyles = makeStyles((theme: Theme) =>
42 | createStyles({
43 | root: {
44 | display: 'flex',
45 | },
46 | appBar: {
47 | zIndex: theme.zIndex.drawer + 1,
48 | transition: theme.transitions.create(['width', 'margin'], {
49 | easing: theme.transitions.easing.sharp,
50 | duration: theme.transitions.duration.leavingScreen,
51 | }),
52 | },
53 | appBarShift: {
54 | marginLeft: drawerWidth,
55 | width: `calc(100% - ${drawerWidth}px)`,
56 | transition: theme.transitions.create(['width', 'margin'], {
57 | easing: theme.transitions.easing.sharp,
58 | duration: theme.transitions.duration.enteringScreen,
59 | }),
60 | },
61 | content: {
62 | flexGrow: 1,
63 | padding: theme.spacing(0),
64 | },
65 | drawer: {
66 | width: drawerWidth,
67 | flexShrink: 0,
68 | whiteSpace: 'nowrap',
69 | },
70 | drawerOpen: {
71 | width: drawerWidth,
72 | transition: theme.transitions.create('width', {
73 | easing: theme.transitions.easing.sharp,
74 | duration: theme.transitions.duration.enteringScreen,
75 | }),
76 | },
77 | drawerClose: {
78 | transition: theme.transitions.create('width', {
79 | easing: theme.transitions.easing.sharp,
80 | duration: theme.transitions.duration.leavingScreen,
81 | }),
82 | overflowX: 'hidden',
83 | width: theme.spacing(7) + 1,
84 | [theme.breakpoints.up('sm')]: {
85 | width: theme.spacing(9) + 1,
86 | },
87 | },
88 | hide: {
89 | display: 'none',
90 | },
91 | labelPlacementStart: {
92 | justifyContent: 'space-between',
93 | },
94 | menuButton: {
95 | marginRight: 36,
96 | },
97 | toolbar: {
98 | display: 'flex',
99 | alignItems: 'center',
100 | justifyContent: 'flex-end',
101 | padding: theme.spacing(0, 1),
102 | // necessary for content to be below app bar
103 | ...theme.mixins.toolbar,
104 | },
105 | popperText: {
106 | padding: theme.spacing(2),
107 | },
108 | popperPaper: {
109 | opacity: 1,
110 | },
111 | switchDiv: {
112 | marginLeft: '20px',
113 | },
114 | }),
115 | );
116 |
117 | export default function MainDrawer({
118 | endpointURI,
119 | events,
120 | networkEvents,
121 | networkURI,
122 | }: MainDrawerProps) {
123 | const classes = useStyles();
124 | const theme = useTheme();
125 | const [open, setOpen] = useState(false);
126 | const [activeTab, setActiveTab] = useState('GraphiQL');
127 |
128 | // Hooks for the Popper on hover
129 | const [anchorEl, setAnchorEl] = React.useState(null);
130 | const [openPopper, setOpenPopper] = React.useState(false);
131 | const [placement, setPlacement] = React.useState();
132 | const [popperContent, setPopperContent] = React.useState('');
133 | const {setTheme, isDark} = React.useContext(Apollo11ThemeContext);
134 |
135 | const handleThemeChange = event => {
136 | const {checked} = event.target;
137 | if (checked) {
138 | setTheme('dark');
139 | } else {
140 | setTheme('normal');
141 | }
142 | };
143 |
144 | const handleDrawerOpen = () => {
145 | setOpen(true);
146 | };
147 |
148 | const handleDrawerClose = () => {
149 | setOpen(false);
150 | };
151 |
152 | const handlePopper = (newPlacement: PopperPlacementType, text: string) => (
153 | event: React.MouseEvent,
154 | ) => {
155 | setPopperContent(text);
156 | setAnchorEl(event.currentTarget);
157 | setOpenPopper(prev => placement !== newPlacement || !prev);
158 | setPlacement(newPlacement);
159 | };
160 |
161 | const closePopper = () => {
162 | setOpenPopper(false);
163 | };
164 |
165 | /**
166 | *
167 | * @param tab Current Selected Tab as String
168 | * Returns and renders Selected Tab's component as a react Element
169 | */
170 | const renderTab = (tab: string): React.ReactElement => {
171 | switch (tab) {
172 | case 'GraphiQL':
173 | return
185 |
191 | {({TransitionProps}) => (
192 | // eslint-disable-next-line react/jsx-props-no-spreading
193 |
194 |
195 |
196 | {popperContent}
197 |
198 |
199 |
200 | )}
201 |
202 |
203 |
204 |
209 |
210 |
218 |
220 |
221 | ApolloDevQL
222 |
223 |
234 | {isDark ? 'Light Mode' : 'Dark Mode'}
235 |
236 | }
237 | classes={{
238 | labelPlacementStart: classes.labelPlacementStart,
239 | }}
240 | />
241 |
242 |
243 |
255 |
256 |
257 | {theme.direction === 'rtl' ? (
258 |
263 |
264 |
266 | {['GraphiQL', 'Events & Cache', 'Performance'].map((text, index) => (
267 | {
271 | setActiveTab(`${text}`);
272 | }}
273 | onMouseEnter={handlePopper('right', text)}
274 | onMouseLeave={handlePopper('right', text)}>
275 |
276 | {index === 0 ?
280 |
282 | ))}
283 |
284 |
285 |
286 |
287 | {/* Should add a loading spinner */}
288 | {renderTab(activeTab) || (
289 | Loading App....Please wait....
290 | )}
291 |
292 |
(() =>
20 | EventList.getDataStore(),
21 | );
22 | const [networkEvents, setNetworkEvents] = useState({});
23 |
24 | // need to use a UseRef to resolve ths linting situation
25 | // React Hook useEffect has a missing dependency: 'EventList'. Either include it or remove the dependency array
26 | const useEffectListeners = React.useRef();
27 |
28 | useEffectListeners.current = {
29 | setupApolloClientListener() {
30 | // Event listener to obtain the GraphQL server endpoint (URI)
31 | // and the cache from the Apollo Client
32 | createApolloClientListener(setApolloURI, EventList, setEvents);
33 | },
34 | setupApolloClient() {
35 | // Initial load of the App, so send a message to the contentScript to get the cache
36 | getApolloClient();
37 | },
38 | setupNetworkEventListener() {
39 | // Listen for network events
40 | createNetworkEventListener(setNetworkURI, setNetworkEvents);
41 | },
42 | };
43 |
44 | // Only create the listener when the App is initially mounted
45 | useEffect(() => {
46 | useEffectListeners.current.setupApolloClientListener();
47 | useEffectListeners.current.setupApolloClient();
48 | useEffectListeners.current.setupNetworkEventListener();
49 | }, []);
50 |
51 | return (
52 |
53 |
60 | );
61 | };
62 |
63 | export default App;
64 |
--------------------------------------------------------------------------------
/src/app/Panel/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 |
4 | height: 100vh;
5 | }
6 |
7 | main {
8 | height: 100vh;
9 | }
10 |
11 | .graphiql_wrapper {
12 | height: 100vh;
13 | }
14 |
15 | .wrapper-mainql {
16 | height: 100vh;
17 | }
18 |
19 | .graphiql-container {
20 | height: 100vh;
21 | }
22 |
23 | .logo {
24 | height: 50px;
25 | }
26 |
27 | .endpoint-row {
28 | width: 100%;
29 | display: flex;
30 | justify-content: flex-start;
31 | }
32 |
33 | .gridc {
34 | display: flex;
35 | flex-direction: row;
36 | }
37 | .grid {
38 | width: 58%;
39 | margin-left: 1%;
40 | margin-right: 1%;
41 | box-shadow: 1px 1px 1px #fff;
42 | border-radius: 3px;
43 | }
44 |
--------------------------------------------------------------------------------
/src/app/Panel/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './app';
4 | import Apollo11ThemeProvider from './themes/ThemeProvider';
5 |
6 | ReactDOM.render(
7 |
8 | ,
10 | document.getElementById('root'),
11 | );
12 |
--------------------------------------------------------------------------------
/src/app/Panel/themes/ThemeProvider.tsx:
--------------------------------------------------------------------------------
1 | import React, {useState} from 'react';
2 | import {ThemeProvider} from '@material-ui/core/styles';
3 |
4 | import {Apollo11ThemeContextType} from '../../utils/managedlog/lib/eventLogNode';
5 | import getTheme from './base';
6 |
7 | export const Apollo11ThemeContext = React.createContext<
8 | Apollo11ThemeContextType | undefined
9 | >(undefined);
10 |
11 | type Props = {
12 | children: React.ReactNode;
13 | };
14 |
15 | const Apollo11ThemeProvider = ({children}: Props) => {
16 | let theme;
17 | let isDark;
18 | // State to hold the selected theme name
19 | const [themeName, _setThemeName] = useState(() => {
20 | // Read current theme from localStorage or maybe from an api
21 | const currentTheme = localStorage.getItem('apollo11AppTheme') || 'normal';
22 | // Retrieve the theme object of theme name from localStorage once context is rendered
23 |
24 | theme = getTheme(currentTheme);
25 | isDark = Boolean(currentTheme === 'dark');
26 | return currentTheme;
27 | });
28 |
29 | // Retrieve the theme object by theme name as safety check
30 | theme = getTheme(themeName || 'normal');
31 | isDark = Boolean(themeName === 'dark');
32 | // Wrap _setThemeName to store new theme names in localStorage
33 | const setThemeName = themename => {
34 | localStorage.setItem('apollo11AppTheme', themename);
35 | _setThemeName(themename);
36 | };
37 |
38 | const themeContext = {
39 | currentTheme: themeName,
40 | setTheme: setThemeName,
41 | isDark,
42 | };
43 |
44 | return (
45 |
46 | {children}
47 |
48 | );
49 | };
50 |
51 | export default Apollo11ThemeProvider;
52 |
--------------------------------------------------------------------------------
/src/app/Panel/themes/base.ts:
--------------------------------------------------------------------------------
1 | import normal from './normal';
2 | import dark from './dark';
3 |
4 | const themes = {
5 | normal,
6 | dark,
7 | };
8 |
9 | export default function getTheme(theme) {
10 | return themes[theme];
11 | }
12 |
--------------------------------------------------------------------------------
/src/app/Panel/themes/dark.ts:
--------------------------------------------------------------------------------
1 | import {createMuiTheme} from '@material-ui/core/styles';
2 | import {red} from '@material-ui/core/colors';
3 |
4 | const theme = createMuiTheme({
5 | palette: {
6 | type: 'dark',
7 | primary: {
8 | main: '#26292C',
9 | light: 'rgb(81, 91, 95)',
10 | dark: 'rgb(26, 35, 39)',
11 | contrastText: '#ffffff',
12 | },
13 | secondary: {
14 | main: '#FFB74D',
15 | light: 'rgb(255, 197, 112)',
16 | dark: 'rgb(200, 147, 89)',
17 | contrastText: 'rgba(0, 0, 0, 0.87)',
18 | },
19 | error: {
20 | main: red.A400,
21 | },
22 | },
23 | });
24 |
25 | export default theme;
26 |
--------------------------------------------------------------------------------
/src/app/Panel/themes/normal.ts:
--------------------------------------------------------------------------------
1 | import {createMuiTheme} from '@material-ui/core/styles';
2 | import {red} from '@material-ui/core/colors';
3 |
4 | const theme = createMuiTheme({
5 | palette: {
6 | primary: {
7 | main: '#556cd6',
8 | },
9 | secondary: {
10 | main: '#cc4444',
11 | },
12 | error: {
13 | main: red.A400,
14 | },
15 | background: {
16 | default: '#f5f5f5',
17 | },
18 | },
19 | });
20 |
21 | export default theme;
22 |
--------------------------------------------------------------------------------
/src/app/Performance_Tab/ArrowChip.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ArrowBackIcon from '@material-ui/icons/ArrowBack';
3 | import Avatar from '@material-ui/core/Avatar';
4 | import Chip from '@material-ui/core/Chip';
5 | import {makeStyles, createStyles, Theme} from '@material-ui/core/styles';
6 | import {Apollo11ThemeContext} from '../Panel/themes/ThemeProvider';
7 |
8 | // style for alerts
9 | const useStyles = makeStyles((theme: Theme) =>
10 | createStyles({
11 | chipDiv: {
12 | display: 'flex',
13 | flexDirection: 'row',
14 | justifyContent: 'center',
15 | marginTop: theme.spacing(2),
16 | marginBottom: theme.spacing(2),
17 | },
18 | chip: () => ({
19 | // props: any
20 | backgroundColor: 'white',
21 | color: 'black',
22 | }),
23 | }),
24 | );
25 |
26 | const ArrowChip = () => {
27 | const {isDark} = React.useContext(Apollo11ThemeContext);
28 | const classes = useStyles({isDark});
29 |
30 | return (
31 |
32 |
37 | ;
36 | compactType: string;
37 | preventCollision: boolean;
38 | autoSize: boolean;
39 | margin: [number, number];
40 | }
41 |
42 | interface ITimings {
43 | duration: any;
44 | endTime?: any;
45 | key?: any;
46 | startTime?: any;
47 | resolvers?: {[num: number]: any};
48 | traceInfo: string;
49 | }
50 |
51 | // create event progress bar
52 | const BorderLinearProgress = progressBarStyle('#1876D2');
53 |
54 | // for the react-spinner
55 | const override = css`
56 | display: block;
57 | margin: 0 auto;
58 | border-color: red;
59 | `;
60 |
61 | // setup component class hook
62 | const useStyles: any = makeStyles((theme: Theme) =>
63 | createStyles({
64 | root: {
65 | flexGrow: 1,
66 | },
67 | itemCSS: {
68 | flexGrow: 1,
69 | },
70 | paper: {
71 | padding: theme.spacing(0),
72 | textAlign: 'center',
73 | color: theme.palette.text.primary,
74 | },
75 | titles: {
76 | textAlign: 'center',
77 | marginTop: '2px',
78 | marginBottom: '2px',
79 | },
80 | grid: {
81 | 'overflow-x': 'hidden',
82 | 'overflow-y': 'auto',
83 | border: '1px solid lightgrey',
84 | borderRadius: '5px',
85 | },
86 | }),
87 | );
88 |
89 | const Performance = ({
90 | networkEvents,
91 | isDraggable,
92 | isResizable,
93 | items,
94 | rowHeight,
95 | cols,
96 | verticalCompact,
97 | resizeHandles,
98 | compactType,
99 | preventCollision,
100 | autoSize,
101 | margin,
102 | }: IPerformanceData) => {
103 | const componentClass = useStyles();
104 | const [selectedIndex, setSelectedIndex] = React.useState(() => 0);
105 | const [isAnEventSelected, setIsAnEventSelected] = React.useState(false);
106 | const [maxEventTime, setMaxEventTime] = React.useState(
107 | getMaxEventTime(networkEvents),
108 | );
109 | const [tracingInfo, setTracingInfo] = React.useState(
110 | (): ITimings => ({
111 | duration: '',
112 | resolvers: {},
113 | traceInfo: '',
114 | }),
115 | );
116 |
117 | // layout is an array of objects
118 | const layoutArray = [
119 | {i: '1', x: 0, y: 0, w: 3, h: 22},
120 | {i: '2', x: 3, y: 0, w: 9, h: 22},
121 | ];
122 |
123 | useEffect(() => {
124 | console.log('events', networkEvents);
125 | setMaxEventTime(getMaxEventTime(networkEvents));
126 | }, [networkEvents]);
127 |
128 | const handleListItemClick = (event: any, index: number, key: string) => {
129 | if (networkEvents[key]) {
130 | const payload = networkEvents[key];
131 | if (payload && payload.response && payload.response.content) {
132 | // first level safety check
133 |
134 | // using destructured assignment
135 | const {
136 | response: {content},
137 | } = payload;
138 | if (!(content && content.extensions && content.extensions.tracing)) {
139 | // let use know they need to activate Tracing Data when ApolloServer was instantiated on their server
140 | // payload.time
141 | // setTimingsInfo({duration: payload.time})
142 | setTracingInfo({
143 | duration: payload.time,
144 | resolvers: {},
145 | traceInfo:
146 | 'Please enabled tracing and cache in your Apollo Server initialization to show further network/tracing visualization',
147 | });
148 | } else {
149 | // const {duration, endTime, startTime} = payload.extensions.tracing;
150 | // extract from content using destructured assignment construct
151 | const {
152 | extensions: {
153 | tracing: {
154 | duration,
155 | endTime,
156 | startTime,
157 | execution: {resolvers},
158 | },
159 | },
160 | } = content;
161 | // need to transform resolvers in Array
162 | const tracingData = {
163 | key,
164 | duration,
165 | endTime,
166 | startTime,
167 | resolvers: transformTimingData(resolvers, duration),
168 | traceInfo: '',
169 | };
170 |
171 | // need to transform resolvers in Array
172 | // TODO: Transform resolvers ordering by startOffset and hopeful format to show in the details list on a waterfall model
173 |
174 | tracingData.traceInfo =
175 | Object.keys(tracingData.resolvers).length === 0
176 | ? 'There is no tracing info available for this operation'
177 | : '';
178 | // this should be sent to the hook - tracingData
179 | console.log('Tracing Data :: ', tracingData);
180 |
181 | setTracingInfo(tracingData);
182 | }
183 | }
184 | }
185 | setIsAnEventSelected(true);
186 | setSelectedIndex(index);
187 | };
188 |
189 | return (
190 |
205 | {/* generateDOM() */}
206 |
210 | {/*
Network Events */}
211 |
212 |
213 |
217 | Network Events
218 |
219 |
220 |
221 |
222 | {Object.entries(networkEvents)
223 | .filter(([, obj]: any) => obj && (obj.response || obj.request))
224 | .map(([key, obj]: any, k: number) => {
225 | const newobj = {
226 | operation:
227 | obj &&
228 | obj.request &&
229 | obj.request.operation &&
230 | obj.request.operation.operationName
231 | ? obj.request.operation.operationName
232 | : extractOperationName(obj),
233 | time: obj.time,
234 | };
235 |
236 | return (
237 |
238 | handleListItemClick(event, k, key)}>
243 |
249 |
254 | );
255 | })}
256 |
262 |
268 | {/*
Resolver Times */}
269 |
270 |
271 |
275 | Resolver Times
276 |
277 |
278 |
279 |
283 |
285 | );
286 | };
287 |
288 | Performance.defaultProps = {
289 | isDraggable: true,
290 | isResizable: true,
291 | items: 2,
292 |
293 | rowHeight: 22,
294 |
295 | cols: 12,
296 | verticalCompact: true,
297 | resizeHandles: ['e', 'ne', 'se'],
298 | autoSize: true,
299 | compactType: 'vertical',
300 | preventCollision: false,
301 | margin: [10, 10],
302 | };
303 |
304 | export default Performance;
305 |
--------------------------------------------------------------------------------
/src/app/Performance_Tab/TracingDetails.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | // material UI components
4 | import Alert from '@material-ui/lab/Alert';
5 | import AppBar from '@material-ui/core/AppBar';
6 | import Card from '@material-ui/core/Card';
7 | import CardContent from '@material-ui/core/CardContent';
8 | import Divider from '@material-ui/core/Divider';
9 | import {createStyles, makeStyles, Theme} from '@material-ui/core/styles';
10 | import List from '@material-ui/core/List';
11 | import ListItem from '@material-ui/core/ListItem';
12 | import ListItemText from '@material-ui/core/ListItemText';
13 | import Toolbar from '@material-ui/core/Toolbar';
14 | import Typography from '@material-ui/core/Typography';
15 |
16 | // project files
17 | import ArrowChip from './ArrowChip';
18 | import {
19 | createResolversArray,
20 | filterSortResolvers,
21 | formatTime,
22 | formatTimeForProgressBar,
23 | // TimeMagnitude,
24 | } from '../utils/tracingTimeFormating';
25 | import progressBarStyle from './progressBar';
26 | import {Apollo11ThemeContext} from '../Panel/themes/ThemeProvider';
27 |
28 | // styles for each progress bar color
29 | // const BorderLinearProgress = progressBarStyle('#1876D2');
30 | const BordereLinearProgressTotal = progressBarStyle('#4BAF50');
31 | const BorderLinearProgressLongest = progressBarStyle('#F44335');
32 | const BorderLinearProgressMedium = progressBarStyle('#FF9800');
33 | const BorderLinearProgressShortest = progressBarStyle('#2296F3');
34 |
35 | // style for alerts
36 | const useStyles = makeStyles((theme: Theme) =>
37 | createStyles({
38 | alerts: {
39 | width: '100%',
40 | '& > * + *': {
41 | marginTop: theme.spacing(2),
42 | },
43 | },
44 |
45 | topAlert: {
46 | width: '100%',
47 | paddingLeft: '5px',
48 | paddingRight: '5px',
49 | '& > * + *': {
50 | marginTop: theme.spacing(2),
51 | },
52 | },
53 |
54 | titles: {
55 | textAlign: 'center',
56 | marginTop: '2px',
57 | marginBottom: '2px',
58 | },
59 | cards: (props: any) => ({
60 | backgroundColor: props.isDark ? '#2C137C' : '#F7E4CE',
61 | color: props.isDark ? 'white' : 'black',
62 | marginLeft: '5px',
63 | marginRight: '5px',
64 | marginTop: '15px',
65 | marginBottom: '15px',
66 | }),
67 |
68 | divider: {
69 | margin: '10px',
70 | },
71 | defaultStateTopSection: {
72 | display: 'flex',
73 | flexDirection: 'row',
74 | justifyContent: 'center',
75 | marginTop: theme.spacing(0),
76 | marginBottom: theme.spacing(2),
77 | },
78 | }),
79 | );
80 |
81 | type TracingDetailProps = {
82 | tracing: any;
83 | eventSelected: boolean;
84 | };
85 |
86 | // Start of component
87 | const TracingDetails = ({tracing, eventSelected}: TracingDetailProps) => {
88 | const {isDark} = React.useContext(Apollo11ThemeContext);
89 | const classes = useStyles({isDark});
90 |
91 | const resolversArray = createResolversArray(tracing);
92 |
93 | // Create list of Reducers for each magnitude of time
94 | const nsResolvers = filterSortResolvers(resolversArray, 'ns');
95 | const µsResolvers = filterSortResolvers(resolversArray, 'µs');
96 | const msResolvers = filterSortResolvers(resolversArray, 'ms');
97 |
98 | // Find max of each Magnitude
99 | const nsResolversMax =
100 | nsResolvers.length > 0
101 | ? nsResolvers.reduce((acc, curr) => {
102 | if (acc < curr.duration) {
103 | return curr.duration;
104 | }
105 |
106 | return acc;
107 | }, 0)
108 | : null;
109 |
110 | const µsResolversMax =
111 | µsResolvers.length > 0
112 | ? µsResolvers.reduce((acc, curr) => {
113 | if (acc < curr.duration) {
114 | return curr.duration;
115 | }
116 |
117 | return acc;
118 | }, 0)
119 | : null;
120 |
121 | const msResolversMax =
122 | msResolvers.length > 0
123 | ? msResolvers.reduce((acc, curr) => {
124 | if (acc < curr.duration) {
125 | return curr.duration;
126 | }
127 |
128 | return acc;
129 | }, 0)
130 | : null;
131 |
132 | return (
133 |
134 |
135 |
136 | {eventSelected ? (
137 |
138 |
139 | Total Resolver Time:
140 |
141 |
142 |
143 |
147 |
148 |
150 |
155 |
156 |
157 | {/*
158 | Individual Resolver Times
159 | */}
160 |
161 |
162 |
166 | Individual Resolver Times
167 |
168 |
169 |
170 |
174 |
175 |
176 |
177 | Longest: Millisecond Resolvers 10^−3
178 |
179 |
184 |
185 |
191 |
197 | 1
198 | ? (formatTimeForProgressBar(resolver.duration) /
199 | formatTimeForProgressBar(msResolversMax)) *
200 | 100
201 | : 1
202 | }
203 | />
204 |
205 | );
206 | })
207 | ) : (
208 |
211 |
212 | {/*
214 |
215 |
216 |
217 | Medium: Microsecond Resolvers 10^−6
218 |
219 |
224 |
225 |
231 |
237 | 1
238 | ? (formatTimeForProgressBar(resolver.duration) /
239 | formatTimeForProgressBar(µsResolversMax)) *
240 | 100
241 | : 1
242 | }
243 | />
244 |
245 | );
246 | })
247 | ) : (
248 |
251 |
252 | {/*
254 |
255 |
256 |
257 | Shortest: Nanosecond Resolvers 10^−9
258 |
259 |
264 |
265 |
271 |
277 | 1
278 | ? (formatTimeForProgressBar(resolver.duration) /
279 | formatTimeForProgressBar(nsResolversMax)) *
280 | 100
281 | : 0.5
282 | }
283 | />
284 |
285 | );
286 | })
287 | ) : (
288 |
291 |
292 |
293 | ) : null}
294 |
295 | );
296 | };
297 |
298 | export default TracingDetails;
299 |
--------------------------------------------------------------------------------
/src/app/Performance_Tab/__tests__/Performance_test.js:
--------------------------------------------------------------------------------
1 | // https://www.smashingmagazine.com/2020/06/practical-guide-testing-react-applications-jest/
2 | import React from 'react';
3 | import {configure} from 'enzyme';
4 | import Adapter from 'enzyme-adapter-react-16';
5 |
6 | // Project Files
7 | import Performance from '../Performance_v2';
8 | import mountWithTheme from '../../../../__mocks__/themeMock';
9 | import fakeNetworkEvents from '../../../../__mocks__/fakeNetworkEvent';
10 |
11 | configure({
12 | adapter: new Adapter(),
13 | });
14 |
15 | describe('snapshot tests', () => {
16 | const networkEvents = {};
17 | let wrapper;
18 |
19 | it('should mount the app', () => {
20 | wrapper = mountWithTheme((
26 | inputArray: Array,
27 | position: DIRECTION = 0,
28 | defaultValue: T | undefined,
29 | ): T | undefined {
30 | return inputArray && inputArray.length
31 | ? inputArray[position === DIRECTION.FRONT ? 0 : inputArray.length - 1]
32 | : defaultValue;
33 | }
34 |
35 | /**
36 | * Extract the name of a query request or mutation using the query passed to the grapqql server
37 | * @param operation The request operation object from the network request object
38 | * Returns a string or null if not avaialable and in some cases a null if the request object has no query passed
39 | */
40 | export function extractOperationName(operation: any): string {
41 | const operate =
42 | operation &&
43 | operation.request &&
44 | operation.request.operation &&
45 | operation.request.operation.query
46 | ? pluck(operation.request.operation.query.split('(')) // pluck the first item from the array after the query is split using '(' as teh delimter
47 | : null;
48 | if (!operate) return 'Query'; // return a constant response 'Query' if the when the query was split, there was no item(s) in the array
49 | return pluck(operate.split(' '), DIRECTION.END, ''); // pluck the last item from the 'operate' array, this will definitely be the name of the operation form the query passed to the graphql server
50 | }
51 |
52 | // declare global {
53 | // interface Array {
54 | // groupBy(groupKey: string): Array;
55 | // }
56 | // }
57 |
58 | /**
59 | *
60 | * @param {*} key the property/key to use for grouping
61 | * this returns an object with keys being the values for which the groups are summarized
62 | * and the values, an array of the timing data
63 | *
64 | * An error could occur here, right click and choose "declare 'groupBy'" from the contenxt menu
65 | */
66 | // Array.prototype.groupBy = function (key: string): Array {
67 | // return (>this).reduce((summary: any, timingData: T): Array => {
68 | // return {
69 | // ...summary,
70 | // [timingData[key]]: summary[timingData[key]]
71 | // ? [...summary[timingData[key]], timingData]
72 | // : [timingData],
73 | // };
74 | // }, {});
75 | // };
76 |
77 | /**
78 | *
79 | * @param inputArray the array to be grouped
80 | * @param key the property/key to use for grouping
81 | * this returns an object with keys being the values for which the groups are summarized
82 | * and the values, an array of the timing data
83 | */
84 | const groupResolverTimingBy = (inputArray: any[], key: string): any[] => {
85 | return inputArray.reduce((summary: any, timingData: any): any => {
86 | // exisitng key in summary summary[timingData[key]]
87 | // the value is the Array stored IN summary[timingData[key]] and a the new timingData
88 | return {
89 | ...summary,
90 | [timingData[key]]: summary[timingData[key]]
91 | ? [...summary[timingData[key]], timingData]
92 | : [timingData],
93 | };
94 | }, {});
95 | };
96 |
97 | /**
98 | * This function returns a number given 'timing' that is a fraction of totalDuration and a ratio of the totalScale
99 | * @param timing the resolver's timeline
100 | * @param totalDuration the response's total duration
101 | * @param totalScale a numeric scale that underscores the length of the graph to be rendered default 100
102 | */
103 | const timeToScale = (
104 | timing: number,
105 | totalDuration: number,
106 | totalScale: number,
107 | ): number => {
108 | return (timing / totalDuration) * totalScale;
109 | };
110 |
111 | /**
112 | *
113 | * @param resolverTimings a grouped array of resolver timmings from the response property/key event log
114 | * @param totalDuration the total duration of the entire response
115 | * @param totalScale a numeric scale that underscores the length of the graph to be rendered default 100
116 | */
117 | const scaleResolverTiming = (
118 | resolverTimings: any,
119 | totalDuration: number,
120 | totalScale: number,
121 | ): any => {
122 | return Object.keys(resolverTimings).reduce(
123 | (resolvedTimings: any, timingSet: string): any => ({
124 | ...resolvedTimings,
125 | [timingSet]: resolverTimings[timingSet].map(timing => ({
126 | ...timing,
127 | durationScale: timeToScale(
128 | timing.durationScale,
129 | totalDuration,
130 | totalScale,
131 | ),
132 | startOffset: timeToScale(timing.startOffset, totalDuration, totalScale),
133 | })),
134 | }),
135 | {},
136 | );
137 | };
138 |
139 | /**
140 | *
141 | * @param resolverTimings an array of resolver timmings from the response property/key event log
142 | * @param groupPropertyKey a property/key to be used to group the initial resolver timing data received from response of event log
143 | * @param totalDuration the total duration of the entire response
144 | * @param totalScale a numeric scale that underscores the length of the graph to be rendered default 100
145 | */
146 | export function transformTimingData(
147 | resolverTimings: Array,
148 | totalDuration: number,
149 | groupPropertyKey: string = 'startOffset',
150 | totalScale: number = 100,
151 | ): Array {
152 | return scaleResolverTiming(
153 | groupResolverTimingBy(
154 | resolverTimings
155 | .map((timing: any) => {
156 | const {path, startOffset, duration} = timing;
157 | return {
158 | durationScale: duration,
159 | duration,
160 | startOffset,
161 | path: path.join('.'),
162 | };
163 | })
164 | .sort(
165 | (timingA: any, timingB: any) =>
166 | timingA.startOffset - timingB.startOffset,
167 | ),
168 | groupPropertyKey,
169 | ),
170 | // .groupBy(groupPropertyKey),
171 | totalDuration,
172 | totalScale,
173 | );
174 | }
175 |
--------------------------------------------------------------------------------
/src/app/utils/managedlog/eventObject.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {EventBase, MutationStoreValue} from './lib/apollo11types';
3 | import eventLogIsDifferent, {validateOperationName} from './lib/objectDifference';
4 | import EventLogDataObject from './lib/eventLogData';
5 | import EventNode from './lib/eventLogNode';
6 |
7 | export type EventLogStore = {
8 | eventId: string;
9 | queryManager: {
10 | mutationStore: Object;
11 | queriesStore: Object;
12 | };
13 | cache?: Object;
14 | queries?: Object;
15 | mutations?: Object;
16 | };
17 |
18 | export class EventLogContainer {
19 | _eventsBase: EventBase | undefined;
20 |
21 | _eventLogData: EventLogDataObject | undefined;
22 |
23 | constructor(srceObj?: EventLogDataObject) {
24 | this._eventLogData = srceObj;
25 | this._eventsBase = {
26 | mutation: {},
27 | query: {},
28 | };
29 | }
30 |
31 | logEvent(
32 | eventNode: EventNode,
33 | baseId: string,
34 | setEvents?: React.Dispatch>,
35 | ) {
36 | this._eventLogData.addEventLog(eventNode);
37 | this._eventsBase[eventNode.content.type][baseId] = eventNode.content.event;
38 | if (setEvents) {
39 | // perform the State Hook
40 | setEvents(() => {
41 | // preEvents: EventLogDataObject
42 | return this._eventLogData;
43 | });
44 | }
45 | }
46 |
47 | adjustEventId(evtId, entNum) {
48 | return `${evtId}.${'0'.repeat(3 - (entNum - 1).toString().length)}${(
49 | entNum - 1
50 | ).toString()}`;
51 | }
52 |
53 | sequenceApolloLog(
54 | eventLog: EventLogStore,
55 | setEvents?: React.Dispatch>,
56 | ) {
57 | // console.log('Query Log :: ', eventLog);
58 | const {
59 | queryManager: {mutationStore, queriesStore},
60 | eventId,
61 | cache,
62 | queries, mutations
63 | } = eventLog;
64 | let evtNum = 0;
65 | // perform queriesStore Check
66 | Object.keys(queriesStore).forEach(storeKey => {
67 | const proposedQry: EventNode = new EventNode({
68 | event: {
69 | ...queriesStore[storeKey],
70 | 'variables': queriesStore[storeKey].variables ? queriesStore[storeKey].variables : queries && queries.hasOwnProperty(storeKey) && queries[storeKey].variables ? queries[storeKey].variables : {},
71 | request: {
72 | operation: {
73 | operationName:
74 | validateOperationName(queriesStore[storeKey].document.definitions, 'Query'),
75 | query: queriesStore[storeKey].document.loc.source.body,
76 | },
77 | },
78 | response: {},
79 | },
80 | type: 'query',
81 | eventId: this.adjustEventId(eventId, (evtNum += 1)),
82 | cache,
83 | });
84 | // console.log('Proposed Query Snapshot :: ', proposedQry);
85 | if (!this._eventsBase.query[storeKey]) {
86 | this.logEvent(proposedQry, storeKey, setEvents);
87 | } else {
88 | // perform the diff
89 | if (
90 | !eventLogIsDifferent(
91 | {
92 | document: this._eventsBase.query[storeKey].document,
93 | variables: this._eventsBase.query[storeKey].variables,
94 | // diff: null, //this.eventsBase.query[storeKey].diff,
95 | },
96 | {
97 | document: queriesStore[storeKey].document,
98 | variables: queriesStore[storeKey].variables ? queriesStore[storeKey].variables : queries && queries.hasOwnProperty(storeKey) && queries[storeKey].variables ? queries[storeKey].variables : {},
99 | // diff: null, //queriesStore[storeKey].diff,
100 | },
101 | )
102 | ) {
103 | this.logEvent(proposedQry, storeKey, setEvents);
104 | }
105 | }
106 | });
107 | // perform mutationStore Check
108 | Object.keys(mutationStore).forEach(storeKey => {
109 | // console.log('Mutation Snapshot :: ', mutationStore[storeKey]);
110 | const proposedMutate: EventNode = new EventNode({
111 | event: {
112 | ...mutationStore[storeKey],
113 | 'variables': mutationStore[storeKey].variables ? mutationStore[storeKey].variables : mutations && mutations.hasOwnProperty(storeKey) && mutations[storeKey].variables ? mutations[storeKey].variables : {},
114 | 'loading': mutationStore[storeKey].loading ? mutationStore[storeKey].loading : mutations && mutations.hasOwnProperty(storeKey) && mutations[storeKey].loading ? mutations[storeKey].loading : {},
115 | 'error': mutationStore[storeKey].variables ? mutationStore[storeKey].error : mutations && mutations.hasOwnProperty(storeKey) && mutations[storeKey].error ? mutations[storeKey].error : {},
116 | request: {
117 | operation: {
118 | operationName:
119 | validateOperationName(mutationStore[storeKey].mutation.definitions, 'Mutation'),
120 | query: mutationStore[storeKey].mutation.loc.source.body,
121 | },
122 | },
123 | response: {},
124 | },
125 | type: 'mutation',
126 | eventId: this.adjustEventId(eventId, (evtNum += 1)),
127 | cache,
128 | });
129 | // console.log('Proposed Mutation Snapshot :: ', proposedMutate);
130 | if ((proposedMutate.content.event as MutationStoreValue).loading) {
131 | return;
132 | }
133 | if (!this._eventsBase.mutation[storeKey]) {
134 | this.logEvent(proposedMutate, storeKey, setEvents);
135 | } else {
136 | // perform the diff
137 | if (
138 | !eventLogIsDifferent(
139 | {
140 | mutation: this._eventsBase.mutation[storeKey].mutation,
141 | variables: this._eventsBase.mutation[storeKey].variables,
142 | loading: this._eventsBase.mutation[storeKey].loading,
143 | error: this._eventsBase.mutation[storeKey].error,
144 | // diff: null, //this.eventsBase.mutation[storeKey].diff,
145 | },
146 | {
147 | mutation: mutationStore[storeKey].mutation,
148 | variables: mutationStore[storeKey].variables ? mutationStore[storeKey].variables : mutations && mutations.hasOwnProperty(storeKey) && mutations[storeKey].variables ? mutations[storeKey].variables : {},
149 | loading: mutationStore[storeKey].loading ? mutationStore[storeKey].loading : mutations && mutations.hasOwnProperty(storeKey) && mutations[storeKey].loading ? mutations[storeKey].loading : {},
150 | error: mutationStore[storeKey].error ? mutationStore[storeKey].error : mutations && mutations.hasOwnProperty(storeKey) && mutations[storeKey].error ? mutations[storeKey].error : {},
151 | // diff: null, //mutationStore[storeKey].diff,
152 | },
153 | )
154 | ) {
155 | this.logEvent(proposedMutate, storeKey, setEvents);
156 | }
157 | }
158 | });
159 | }
160 |
161 | getDataStore() {
162 | return this._eventLogData;
163 | }
164 |
165 | getTempStore() {
166 | return this._eventsBase;
167 | }
168 | }
169 |
170 | // export default new EventLogContainer(new eventLogDataObject());
171 |
172 | export default (LogObject: EventLogDataObject): EventLogContainer => {
173 | return new EventLogContainer(LogObject);
174 | };
175 |
--------------------------------------------------------------------------------
/src/app/utils/managedlog/index.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/ApolloDevQL/2c579086ce1934bede9e50e2e1e2d236018adc8a/src/app/utils/managedlog/index.ts
--------------------------------------------------------------------------------
/src/app/utils/managedlog/lib/apollo11types.ts:
--------------------------------------------------------------------------------
1 | import {DocumentNode, GraphQLError} from 'graphql';
2 | import {NetworkStatus} from './networkStatus';
3 |
4 | export interface MutationStoreValue {
5 | mutation: DocumentNode;
6 | variables?: Object;
7 | loading?: boolean;
8 | error?: Error | null;
9 | request?: Record;
10 | response?: Record;
11 | }
12 |
13 | export interface QueryStoreValue {
14 | document: DocumentNode | null;
15 | variables?: Record;
16 | networkStatus?: NetworkStatus;
17 | networkError?: Error | null;
18 | graphQLErrors?: ReadonlyArray;
19 | request?: Record;
20 | response?: Record;
21 | }
22 |
23 | // interface EventDesc {
24 | // [k: string]: number | string | undefined | any[] | EventDesc;
25 | // }
26 |
27 | // export interface EventObject {
28 | // [k: string]: QueryStoreValue | MutationStoreValue;
29 | // }
30 |
31 | export interface EventLogObject {
32 | eventId: string;
33 | type: string;
34 | event: QueryStoreValue | MutationStoreValue;
35 | cache?: Object;
36 | }
37 |
38 | export interface EventBase {
39 | mutation: {
40 | [k: string]: {
41 | mutation: MutationStoreValue;
42 | diff?: any;
43 | variables?: Record | Object;
44 | loading?: boolean;
45 | error?: Error | null;
46 | };
47 | };
48 | query: {
49 | [k: string]: {
50 | document: QueryStoreValue;
51 | diff?: any;
52 | variables?: Record | Object;
53 | };
54 | };
55 | }
56 |
57 | export interface EventStore {
58 | [k: string]: Record | string;
59 | lastEventId?: string;
60 | }
61 |
62 | let eventStore: EventStore = {
63 | lastEventId: '1601084356248',
64 | 1601084335409: {action: {}, cache: {}, queryManager: {}},
65 | 1601084356248: {
66 | action: {},
67 | cache: {},
68 | queryManager: {mutationIdCounter: 3, mutationStore: {}, queriesStore: {}},
69 | },
70 | };
71 |
72 | const storeIdx = eventStore.lastEventId;
73 |
74 | const aStore = {
75 | queryManager: (eventStore[storeIdx] as any).queryManager,
76 | eventId: eventStore.lastEventId,
77 | cache: (eventStore[storeIdx] as any).cache,
78 | };
79 |
80 | // console.log('aStore :: ', aStore);
81 |
82 | // export type Record = {
83 | // [P in K]: T;
84 | // };
85 |
86 | // export interface ReadonlyArray {
87 | // /**
88 | // * Determines whether an array includes a certain element, returning true or false as appropriate.
89 | // * @param searchElement The element to search for.
90 | // * @param fromIndex The position in this array at which to begin searching for searchElement.
91 | // */
92 | // includes(searchElement: T, fromIndex?: number): boolean;
93 | // }
94 |
--------------------------------------------------------------------------------
/src/app/utils/managedlog/lib/eventLogData.ts:
--------------------------------------------------------------------------------
1 | import EventNode from './eventLogNode';
2 | import {EventLogObject} from './apollo11types';
3 | import eventLogIsDifferent from './objectDifference';
4 |
5 | export default class EventLogDataObject {
6 | eventHead: EventNode | null;
7 |
8 | eventTail: EventNode | null;
9 |
10 | eventLength: number;
11 |
12 | constructor() {
13 | this.eventHead = null;
14 | this.eventTail = null;
15 | this.eventLength = 0;
16 | }
17 |
18 | setEventHead(content: EventNode) {
19 | if (this.eventHead === null) {
20 | this.eventHead = content;
21 | this.eventTail = content;
22 | } else {
23 | this.insertEventLogBefore(this.eventHead, content);
24 | }
25 | }
26 |
27 | addEventLog(content: EventNode) {
28 | if (this.eventHead === null) {
29 | this.setEventHead(content);
30 | } else {
31 | this.insertEventLogAfter(this.eventTail, content);
32 | }
33 | this.eventLength += 1;
34 | // return this;
35 | }
36 |
37 | insertEventLogBefore(content: EventNode, nodeToInsert: EventNode) {
38 | if (this.isNodeTailAndHead(nodeToInsert)) return;
39 | const [insertContent, insertNode] = [content, nodeToInsert]; // make a copy of mutable argument
40 | insertNode.prev = insertContent.prev;
41 | insertNode.next = insertContent;
42 | if (insertContent.prev === null) {
43 | this.eventHead = insertNode;
44 | } else {
45 | insertContent.prev.next = insertNode;
46 | }
47 | insertContent.prev = insertNode;
48 | }
49 |
50 | insertEventLogAfter(content: EventNode, nodeToInsert: EventNode) {
51 | if (this.isNodeTailAndHead(nodeToInsert)) return;
52 | const [insertContent, insertNode] = [content, nodeToInsert]; // make a copy of mutable argument
53 | insertNode.prev = insertContent;
54 | insertNode.next = insertContent.next;
55 | if (insertContent.next === null) {
56 | insertContent.next = insertNode;
57 | this.eventTail = insertNode;
58 | } else {
59 | insertContent.next = insertNode;
60 | }
61 | // return this;
62 | }
63 |
64 | insertEventLogAtPosition(position: number, nodeToInsert: EventNode) {
65 | if (position === 1) {
66 | this.setEventHead(nodeToInsert);
67 | this.eventLength += 1;
68 | } else {
69 | let eNode = this.eventHead;
70 | let currentPosition = 1;
71 | while (eNode !== null && currentPosition !== position) {
72 | eNode = eNode.next;
73 | currentPosition += 1;
74 | }
75 | if (eNode !== null) {
76 | this.insertEventLogBefore(eNode, nodeToInsert);
77 | this.eventLength += 1;
78 | } else {
79 | this.addEventLog(nodeToInsert);
80 | }
81 | }
82 | }
83 |
84 | removeEventLogNodesWithContent(content: EventLogObject) {
85 | let eNode = this.eventHead;
86 | while (eNode !== null) {
87 | const proposedToRemove = eNode;
88 | eNode = eNode.next;
89 | if (eventLogIsDifferent(eNode.content, content))
90 | this.removeEventLogNode(proposedToRemove);
91 | }
92 | }
93 |
94 | removeEventLogNode(content: EventNode) {
95 | if (content === this.eventHead) this.eventHead = this.eventHead.next;
96 | if (content === this.eventTail) this.eventTail = this.eventTail.prev;
97 | // cleanup removed EventNode pointers
98 | this.removeEventNodePointers(content);
99 | this.eventLength -= 1;
100 | }
101 |
102 | containsEventNodeWithContent(content: EventLogObject) {
103 | if (!content) {
104 | let eNode = this.eventHead;
105 | while (eNode !== null && !eventLogIsDifferent(eNode.content, content)) {
106 | eNode = eNode.next;
107 | }
108 | return eNode === null;
109 | }
110 | return false;
111 | }
112 |
113 | append(targetObj: EventLogDataObject) {
114 | const tgtObject = targetObj;
115 | if (this.eventHead === null) {
116 | if (tgtObject && tgtObject.eventHead) {
117 | this.eventHead = tgtObject.eventHead;
118 | }
119 | if (tgtObject && tgtObject.eventTail) {
120 | this.eventTail = tgtObject.eventTail;
121 | }
122 | } else if (this.eventHead && tgtObject.eventHead) {
123 | tgtObject.eventHead.prev = this.eventTail;
124 | this.eventTail.next = tgtObject.eventHead;
125 | this.eventTail = tgtObject.eventTail;
126 |
127 | // nDe.head.prev = this.tail;
128 | // this.tail.next = nDe.head;
129 | // this.tail = nDe.tail;
130 | }
131 | this.eventLength += tgtObject.eventLength;
132 | }
133 |
134 | debugPrint(): boolean {
135 | if (this.eventHead === null && this.eventTail === null) {
136 | // console.log('Empty EventLog Object');
137 | return false;
138 | }
139 | let temp = this.eventHead;
140 | while (temp !== null) {
141 | process.stdout.write(String(temp.content.eventId));
142 | process.stdout.write(' <-> ');
143 | temp = temp.next;
144 | }
145 | return true;
146 | }
147 |
148 | reverseDebugPrint(): boolean {
149 | if (this.eventTail === null) {
150 | // console.log('Empty EventLog Object');
151 | return false;
152 | }
153 | let temp = this.eventTail;
154 | while (temp != null) {
155 | process.stdout.write(String(temp.content.eventId));
156 | process.stdout.write(' <-> ');
157 | temp = temp.prev;
158 | }
159 | return true;
160 | }
161 |
162 | isNodeTailAndHead(nodeToInsert: EventNode) {
163 | return nodeToInsert === this.eventHead && nodeToInsert === this.eventTail;
164 | }
165 |
166 | removeEventNodePointers(content: EventNode) {
167 | const removeNode = content;
168 | if (removeNode.prev !== null) removeNode.prev.next = removeNode.next;
169 | if (removeNode.next !== null) removeNode.next.prev = removeNode.prev;
170 | removeNode.prev = null;
171 | removeNode.next = null;
172 | // line to shut linter
173 | console.debug(this.eventLength);
174 | }
175 |
176 | map(decorator): any[] {
177 | const _extractList = [];
178 | let curr = this.eventHead;
179 | while (curr) {
180 | _extractList.push(decorator(curr));
181 | curr = curr.next;
182 | }
183 | return _extractList;
184 | }
185 | }
186 |
187 | export type EventLogProps = {
188 | eventLog: EventLogDataObject;
189 | handleEventChange: any;
190 | };
191 |
192 | export type ApolloTabProps = {
193 | eventLog: EventLogDataObject;
194 | };
195 |
196 | export type ApolloResponsiveTabProps = {
197 | eventLog: EventLogDataObject;
198 |
199 | isDraggable: boolean;
200 | isResizable: boolean;
201 | items: number;
202 | rowHeight: number;
203 | // onLayoutChange: function () {},
204 | cols: number;
205 | verticalCompact: boolean;
206 | resizeHandles: Array;
207 | compactType: string;
208 | preventCollision: boolean;
209 | autoSize: boolean;
210 | margin: [number, number];
211 | };
212 |
--------------------------------------------------------------------------------
/src/app/utils/managedlog/lib/eventLogNode.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {EventLogObject} from './apollo11types';
3 |
4 | export default class EventNode {
5 | content: EventLogObject;
6 |
7 | prev: EventNode | null;
8 |
9 | next: EventNode | null;
10 |
11 | constructor(content: EventLogObject) {
12 | this.content = content;
13 | this.prev = null;
14 | this.next = null;
15 | }
16 | }
17 |
18 | export type Apollo11ThemeContextType = {
19 | currentTheme: string;
20 | setTheme: (value: string) => void;
21 | isDark: boolean;
22 | };
23 |
24 | export type CacheDetailsProps = {
25 | activeEvent?: EventNode;
26 | activeCache: any;
27 | };
28 |
29 | export type CacheProps = {
30 | activeEvent?: EventNode;
31 | toggleCacheDetails?: any;
32 | handleCacheChange: any;
33 | cacheDetailsVisible?: boolean;
34 | };
35 |
36 | export type EventDetailsProps = {
37 | activeEvent?: EventNode;
38 | };
39 |
40 | export type EventPanelType = {
41 | children: React.ReactNode;
42 | panelValue: number;
43 | panelIndex: number;
44 | };
45 |
46 | export type MainDrawerProps = {
47 | endpointURI: string;
48 | events: any;
49 | networkEvents: any;
50 | networkURI: string;
51 | };
52 |
--------------------------------------------------------------------------------
/src/app/utils/managedlog/lib/networkStatus.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * The current status of a query’s execution in our system.
3 | */
4 | export enum NetworkStatus {
5 | /**
6 | * The query has never been run before and the query is now currently running. A query will still
7 | * have this network status even if a partial data result was returned from the cache, but a
8 | * query was dispatched anyway.
9 | */
10 | Loading = 1,
11 |
12 | /**
13 | * If `setVariables` was called and a query was fired because of that then the network status
14 | * will be `setVariables` until the result of that query comes back.
15 | */
16 | SetVariables = 2,
17 |
18 | /**
19 | * Indicates that `fetchMore` was called on this query and that the query created is currently in
20 | * flight.
21 | */
22 | FetchMore = 3,
23 |
24 | /**
25 | * Similar to the `setVariables` network status. It means that `refetch` was called on a query
26 | * and the refetch request is currently in flight.
27 | */
28 | Refetch = 4,
29 |
30 | /**
31 | * Indicates that a polling query is currently in flight. So for example if you are polling a
32 | * query every 10 seconds then the network status will switch to `poll` every 10 seconds whenever
33 | * a poll request has been sent but not resolved.
34 | */
35 | Poll = 6,
36 |
37 | /**
38 | * No request is in flight for this query, and no errors happened. Everything is OK.
39 | */
40 | Ready = 7,
41 |
42 | /**
43 | * No request is in flight for this query, but one or more errors were detected.
44 | */
45 | Error = 8,
46 | }
47 |
48 | /**
49 | * Returns true if there is currently a network request in flight according to a given network
50 | * status.
51 | */
52 | export function isNetworkRequestInFlight(
53 | networkStatus?: NetworkStatus,
54 | ): boolean {
55 | return networkStatus ? networkStatus < 7 : false;
56 | }
57 |
--------------------------------------------------------------------------------
/src/app/utils/managedlog/lib/objectDifference.ts:
--------------------------------------------------------------------------------
1 | // import {equal} from '@wry/equality';
2 |
3 | const isLogValuePrimitive = (val: any): boolean => {
4 | return val == null || /^[sbn]/.test(typeof val);
5 | };
6 |
7 | const eventLogIsDifferent = (a: any, b: any): boolean => {
8 | // return equal(a, b);
9 | return (
10 | a &&
11 | b &&
12 | Object.keys(b).every(bKey => {
13 | const bVal = b[bKey];
14 | const aVal = a[bKey];
15 | if (typeof bVal === 'function') {
16 | return bVal(aVal);
17 | }
18 | return isLogValuePrimitive(bVal)
19 | ? bVal === aVal
20 | : eventLogIsDifferent(aVal, bVal);
21 | })
22 | );
23 | };
24 |
25 | /**
26 | * @param objStore : ReadonlyArray>
27 | * @param objType : string
28 | * Desc:: processes the document.definitions or mutation.definitions of the query/mutation operation
29 | * this was necessary as some clients do not have a name.value on the document/mutation object
30 | * especially then having to get the operations names form the list of sections that make up the operation
31 | * Returns the operation name of the query or mutation
32 | */
33 | export const validateOperationName = (objStore: ReadonlyArray>, objType: string,): string => {
34 | if (objStore.length) {
35 | if (objStore[0].name) {
36 | return objStore[0].name.value;
37 | } else {
38 | if (objStore[0].selectionSet && objStore[0].selectionSet.selections) {
39 | if (objStore[0].selectionSet.selections.length) {
40 | return objStore[0].selectionSet.selections.reduce((operationName, selection) => {
41 | // reduce selectionSet.selections Array's name.value to an array of name values
42 | return selection && selection.name && selection.name.value ? [...operationName, selection.name.value.toLowerCase()] : operationName;
43 | }, []).reduce((opera: string, curr: string): string => {
44 | // reduce array of names values to a string padding front and back with ( & ) respectively
45 | if (curr.toLowerCase().trim().length > 0) {
46 | if (opera === objType.toLowerCase()) {
47 | return `${opera} (${curr.toLowerCase().trim()})`;
48 | } else {
49 | return `${opera.substr(0, opera.length - 1)}, ${curr.toLowerCase().trim()})`;
50 | }
51 | }
52 | return opera;
53 | }, `${objType.toLowerCase()}`);
54 | }
55 | }
56 | }
57 | }
58 | return objType.toLowerCase();
59 | }
60 |
61 | export default eventLogIsDifferent;
62 |
--------------------------------------------------------------------------------
/src/app/utils/managedlog/other/dll.ts:
--------------------------------------------------------------------------------
1 | import EventNode from '../lib/eventLogNode';
2 | import EventLogDataObject from '../lib/eventLogData';
3 | import {EventLogObject} from '../lib/apollo11types';
4 |
5 | const dllStructure = new EventLogDataObject();
6 | const dllStructure2 = new EventLogDataObject();
7 |
8 | const evtNode1: EventLogObject = {
9 | event: {
10 | mutation: {
11 | kind: 'Document',
12 | definitions: [],
13 | },
14 | variables: {},
15 | loading: false,
16 | error: null,
17 | },
18 | type: 'query',
19 | eventId: '099087779',
20 | };
21 | const eventNode1 = new EventNode(evtNode1);
22 |
23 | const evtNode2: EventLogObject = {
24 | event: {
25 | mutation: {
26 | kind: 'Document',
27 | definitions: [
28 | {
29 | kind: 'OperationDefinition',
30 | operation: 'mutation',
31 | name: {kind: 'Name', value: 'newBookTrips'},
32 | variableDefinitions: [],
33 | directives: [],
34 | selectionSet: {
35 | kind: 'SelectionSet',
36 | selections: [
37 | {
38 | kind: 'Field',
39 | name: {kind: 'Name', value: 'newbookTrips'},
40 | arguments: [
41 | {
42 | kind: 'Argument',
43 | name: {kind: 'Name', value: 'newlaunchIds'},
44 | value: {
45 | kind: 'Variable',
46 | name: {kind: 'Name', value: 'newlaunchIds'},
47 | },
48 | },
49 | ],
50 | directives: [],
51 | selectionSet: {
52 | kind: 'SelectionSet',
53 | selections: [
54 | {
55 | kind: 'Field',
56 | name: {kind: 'Name', value: 'success'},
57 | arguments: [],
58 | directives: [],
59 | },
60 | {
61 | kind: 'Field',
62 | name: {kind: 'Name', value: 'message'},
63 | arguments: [],
64 | directives: [],
65 | },
66 | {
67 | kind: 'Field',
68 | name: {kind: 'Name', value: 'launches'},
69 | arguments: [],
70 | directives: [],
71 | selectionSet: {
72 | kind: 'SelectionSet',
73 | selections: [
74 | {
75 | kind: 'Field',
76 | name: {kind: 'Name', value: 'id'},
77 | arguments: [],
78 | directives: [],
79 | },
80 | {
81 | kind: 'Field',
82 | name: {kind: 'Name', value: 'isBooked'},
83 | arguments: [],
84 | directives: [],
85 | },
86 | {
87 | kind: 'Field',
88 | name: {kind: 'Name', value: '__typename'},
89 | },
90 | ],
91 | },
92 | },
93 | {
94 | kind: 'Field',
95 | name: {kind: 'Name', value: '__typename'},
96 | },
97 | ],
98 | },
99 | },
100 | ],
101 | },
102 | },
103 | ],
104 | // loc: {start: 0, end: 173},
105 | },
106 | variables: {launchIds: ['100']},
107 | loading: false,
108 | error: null,
109 | },
110 | type: 'mutation',
111 | eventId: '099087780',
112 | };
113 | const eventNode2 = new EventNode(evtNode2);
114 |
115 | const evtNode3: EventLogObject = {
116 | event: {
117 | mutation: {
118 | kind: 'Document',
119 | definitions: [
120 | {
121 | kind: 'OperationDefinition',
122 | operation: 'mutation',
123 | name: {kind: 'Name', value: 'cancel'},
124 | variableDefinitions: [
125 | {
126 | kind: 'VariableDefinition',
127 | variable: {
128 | kind: 'Variable',
129 | name: {kind: 'Name', value: 'launchId'},
130 | },
131 | type: {
132 | kind: 'NonNullType',
133 | type: {
134 | kind: 'NamedType',
135 | name: {kind: 'Name', value: 'ID'},
136 | },
137 | },
138 | directives: [],
139 | },
140 | ],
141 | directives: [],
142 | selectionSet: {
143 | kind: 'SelectionSet',
144 | selections: [
145 | {
146 | kind: 'Field',
147 | name: {kind: 'Name', value: 'cancelTrip'},
148 | arguments: [
149 | {
150 | kind: 'Argument',
151 | name: {kind: 'Name', value: 'launchId'},
152 | value: {
153 | kind: 'Variable',
154 | name: {kind: 'Name', value: 'launchId'},
155 | },
156 | },
157 | ],
158 | directives: [],
159 | selectionSet: {
160 | kind: 'SelectionSet',
161 | selections: [
162 | {
163 | kind: 'Field',
164 | name: {kind: 'Name', value: 'success'},
165 | arguments: [],
166 | directives: [],
167 | },
168 | {
169 | kind: 'Field',
170 | name: {kind: 'Name', value: 'message'},
171 | arguments: [],
172 | directives: [],
173 | },
174 | {
175 | kind: 'Field',
176 | name: {kind: 'Name', value: 'launches'},
177 | arguments: [],
178 | directives: [],
179 | selectionSet: {
180 | kind: 'SelectionSet',
181 | selections: [
182 | {
183 | kind: 'Field',
184 | name: {kind: 'Name', value: 'id'},
185 | arguments: [],
186 | directives: [],
187 | },
188 | {
189 | kind: 'Field',
190 | name: {kind: 'Name', value: 'isBooked'},
191 | arguments: [],
192 | directives: [],
193 | },
194 | {
195 | kind: 'Field',
196 | name: {kind: 'Name', value: '__typename'},
197 | },
198 | ],
199 | },
200 | },
201 | {
202 | kind: 'Field',
203 | name: {kind: 'Name', value: '__typename'},
204 | },
205 | ],
206 | },
207 | },
208 | ],
209 | },
210 | },
211 | ],
212 | },
213 | variables: {launchId: '101'},
214 | loading: true,
215 | error: null,
216 | },
217 | type: 'mutation',
218 | eventId: '099087787',
219 | };
220 | const eventNode3 = new EventNode(evtNode3);
221 |
222 | const evtNode4: EventLogObject = {
223 | event: {
224 | mutation: {
225 | kind: 'Document',
226 | definitions: [],
227 | },
228 | variables: {},
229 | loading: false,
230 | error: null,
231 | },
232 | type: 'query',
233 | eventId: '099087793',
234 | };
235 | const eventNode4 = new EventNode(evtNode4);
236 |
237 | const evtNode5: EventLogObject = {
238 | event: {
239 | mutation: {
240 | kind: 'Document',
241 | definitions: [
242 | {
243 | kind: 'OperationDefinition',
244 | operation: 'mutation',
245 | name: {kind: 'Name', value: 'newBookTrips'},
246 | variableDefinitions: [],
247 | directives: [],
248 | selectionSet: {
249 | kind: 'SelectionSet',
250 | selections: [
251 | {
252 | kind: 'Field',
253 | name: {kind: 'Name', value: 'newbookTrips'},
254 | arguments: [
255 | {
256 | kind: 'Argument',
257 | name: {kind: 'Name', value: 'newlaunchIds'},
258 | value: {
259 | kind: 'Variable',
260 | name: {kind: 'Name', value: 'newlaunchIds'},
261 | },
262 | },
263 | ],
264 | directives: [],
265 | selectionSet: {
266 | kind: 'SelectionSet',
267 | selections: [
268 | {
269 | kind: 'Field',
270 | name: {kind: 'Name', value: 'success'},
271 | arguments: [],
272 | directives: [],
273 | },
274 | {
275 | kind: 'Field',
276 | name: {kind: 'Name', value: 'message'},
277 | arguments: [],
278 | directives: [],
279 | },
280 | {
281 | kind: 'Field',
282 | name: {kind: 'Name', value: 'launches'},
283 | arguments: [],
284 | directives: [],
285 | selectionSet: {
286 | kind: 'SelectionSet',
287 | selections: [
288 | {
289 | kind: 'Field',
290 | name: {kind: 'Name', value: 'id'},
291 | arguments: [],
292 | directives: [],
293 | },
294 | {
295 | kind: 'Field',
296 | name: {kind: 'Name', value: 'isBooked'},
297 | arguments: [],
298 | directives: [],
299 | },
300 | {
301 | kind: 'Field',
302 | name: {kind: 'Name', value: '__typename'},
303 | },
304 | ],
305 | },
306 | },
307 | {
308 | kind: 'Field',
309 | name: {kind: 'Name', value: '__typename'},
310 | },
311 | ],
312 | },
313 | },
314 | ],
315 | },
316 | },
317 | ],
318 | // loc: {start: 0, end: 173},
319 | },
320 | variables: {launchIds: ['100']},
321 | loading: false,
322 | error: null,
323 | },
324 | type: 'mutation',
325 | eventId: '099087796',
326 | };
327 | const eventNode5 = new EventNode(evtNode5);
328 |
329 | dllStructure.addEventLog(eventNode1);
330 | // console.log(dllStructure);
331 | dllStructure.addEventLog(eventNode2);
332 | // console.log(dllStructure);
333 | dllStructure.addEventLog(eventNode3);
334 | // console.log(dllStructure);
335 | // console.log(dllStructure.map(e => e));
336 |
337 | dllStructure2.addEventLog(eventNode4);
338 | dllStructure2.addEventLog(eventNode5);
339 |
340 | // eventNode1: '099087779',
341 | // eventNode2: '099087780',
342 | // eventNode3: '099087787',
343 | // eventNode4: '099087793',
344 | // eventNode5: '099087796',
345 |
346 | console.log('First DLL ::', dllStructure);
347 | console.log(dllStructure.debugPrint());
348 | console.log(dllStructure.reverseDebugPrint());
349 | console.log('Second DLL ::', dllStructure2);
350 | console.log(dllStructure2.debugPrint());
351 | console.log(dllStructure2.reverseDebugPrint());
352 |
353 | dllStructure.append(dllStructure2);
354 | console.log('New DLL ::', dllStructure);
355 | console.log(dllStructure.debugPrint());
356 | console.log(dllStructure.reverseDebugPrint());
357 |
358 | // const allStructures = dllStructure.addEventLog(dllStructure2.eventHead);
359 | // const allStructures = dllStructure.insertEventLogAfter(
360 | // dllStructure.eventTail,
361 | // dllStructure2.eventHead,
362 | // );
363 | // console.log('Addition of BOTH');
364 | // console.log(allStructures);
365 |
366 | // let nde = allStructures.eventHead;
367 | // while (nde) {
368 | // console.log('NDE :: ', nde);
369 | // console.log(nde.content.eventId);
370 | // nde = nde.next;
371 | // }
372 |
--------------------------------------------------------------------------------
/src/app/utils/managedlog/other/index.ts:
--------------------------------------------------------------------------------
1 | // import {EventStore} from '../lib/apollo11types';
2 | import EventLogDataObject from '../lib/eventLogData';
3 | import EventLogTreeContainer, {EventLogStore} from '../eventObject';
4 | // import eventLogIsDifferent from '../lib/objectDifference';
5 |
6 | // TESTS
7 | const testobj = EventLogTreeContainer(new EventLogDataObject());
8 | // const testEvtLog: EventBase = {
9 | // mutation: {3: {}, 4: {}},
10 | // query: {1: {}, 2: {}},
11 | // };
12 | const testStore: EventLogStore = {
13 | queryManager: {
14 | mutationStore: {3: {}, 4: {}},
15 | queriesStore: {1: {}, 2: {}},
16 | },
17 | eventId: '1600905405018',
18 | };
19 | console.log('===== EventContainer Object ====');
20 | console.log(testobj);
21 | console.log('===== Sample EventLog to Sequence ====');
22 | console.log(testobj.sequenceApolloLog(testStore));
23 | console.log('===== EventContainer DataStore ====');
24 | console.log(testobj.getDataStore());
25 | console.log('===== EventBase Local Container Store ====');
26 | console.log(testobj.getTempStore());
27 |
--------------------------------------------------------------------------------
/src/app/utils/messaging.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {EventLogContainer} from './managedlog/eventObject';
3 |
4 | // Listen for messages from the contentScript
5 | // The contentScript will send to the App:
6 | // - Apollo Client URI
7 | // - Apollo Client cache
8 | export default function createApolloClientListener(
9 | setApolloURI: React.Dispatch>,
10 | eventList: EventLogContainer,
11 | setEvents: React.Dispatch>,
12 | ) {
13 | chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
14 | const {tabId} = chrome.devtools.inspectedWindow;
15 |
16 | // Ignore any messages from contentScripts that aren't on the same tab
17 | // as the currently open Apollo devtools tab
18 | if (tabId !== sender.tab.id) {
19 | // sendResponse(`App on ${tabId} ignoring message from ${sender.tab.id}`);
20 | return;
21 | }
22 |
23 | sendResponse(`App on ${tabId} accepting message from ${sender.tab.id}`);
24 |
25 | if (request.type === 'INITIAL') {
26 | setApolloURI(request.apolloURI);
27 | }
28 |
29 | // Check if this is the initial message sent by the contentScript
30 | // i.e., received without a pre-generated eventId,
31 | // so set eventId to zero so it is the smallest value key in the events object
32 | // This keeps the first cache sent to be chronologically the first one in the events object
33 | let {eventId} = request;
34 | if (eventId === 'null') {
35 | eventId = '0';
36 | }
37 | const {cache, queryManager, queries, mutations} = request;
38 | eventList.sequenceApolloLog({queryManager, eventId, cache, queries, mutations}, setEvents);
39 | });
40 | }
41 |
42 | // Send a message to the contentScript to get the Apollo Client cache
43 | // Need to pass it the pre-generated eventId so it can correlate the cache + data
44 | // with its corresponding network request
45 | export function getApolloClient() {
46 | // Get the active tab and send a message to the contentScript to get the cache
47 | chrome.tabs.query({active: true}, function getClientData(tabs) {
48 | if (tabs.length) {
49 | chrome.tabs.sendMessage(tabs[0].id, {
50 | type: 'GET_APOLLO_CLIENT',
51 | });
52 | }
53 | });
54 | }
55 |
--------------------------------------------------------------------------------
/src/app/utils/networking.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | // Parses the network request to find a potentially valid GraphQL operation
4 | // Currently only supports HTTP POST and GET methods
5 | const getGraphQLOperation = (httpReq: any) => {
6 | const {request} = httpReq;
7 | let operation;
8 |
9 | if (
10 | request.method === 'POST' &&
11 | request.postData &&
12 | request.postData.text &&
13 | request.postData.mimeType &&
14 | request.postData.mimeType.includes('json')
15 | ) {
16 | operation = JSON.parse(request.postData.text);
17 |
18 | // In some cases, the operation field is an Array
19 | if (Array.isArray(operation)) {
20 | [operation] = operation;
21 | }
22 |
23 | if (operation) {
24 | if (!operation.query) {
25 | // console.log('Operation has no query object');
26 | operation = null;
27 | }
28 |
29 | // Previously we required these keywords in the query but now we
30 | // relaxed that restriction and simply log it if we don't see it
31 | // if (
32 | // !operation.query.startsWith('query') &&
33 | // !operation.query.startsWith('mutation') &&
34 | // !operation.query.startsWith('fragment')
35 | // ) {
36 | // console.log('Operation does not start with keyword');
37 | // }
38 | }
39 | }
40 |
41 | if (request.method === 'GET' && request.queryString) {
42 | if (Array.isArray(request.queryString)) {
43 | operation = {};
44 | request.queryString.forEach(item => {
45 | operation[item.name] = decodeURIComponent(item.value);
46 | });
47 | const keys = Object.keys(operation);
48 | if (keys.includes('operationName') || keys.includes('query')) {
49 | // console.log('graphQL GET operation', operation, 'for URL', request.url);
50 | } else {
51 | // console.log('graphQL GET has no operationName or query', operation);
52 | operation = null;
53 | }
54 | }
55 | }
56 |
57 | // For debugging only -- log the network request if we can't parse it
58 | // properly but there's a 'graphql' string in the URL.
59 | // if (
60 | // !operation &&
61 | // request.url.includes('graphql') &&
62 | // request.method !== 'OPTIONS'
63 | // ) {
64 | // console.log('Ignoring potential graphql request', request);
65 | // }
66 |
67 | return operation;
68 | };
69 |
70 | // Listens for network events and filters them only for GraphQL requests
71 | // Currently only looks for queries and mutations
72 | export default function createNetworkEventListener(
73 | setNetworkURI: React.Dispatch>,
74 | setNetworkEvents: React.Dispatch>,
75 | ) {
76 | chrome.devtools.network.onRequestFinished.addListener((httpReq: any) => {
77 | const operation = getGraphQLOperation(httpReq);
78 |
79 | if (!operation) return;
80 |
81 | const searchIndex = httpReq.request.url.indexOf('?');
82 | const baseURL =
83 | searchIndex !== -1
84 | ? httpReq.request.url.slice(0, searchIndex)
85 | : httpReq.request.url;
86 | const {startedDateTime, time, timings} = httpReq;
87 | const request = {
88 | bodySize: httpReq.request.bodySize,
89 | headersSize: httpReq.request.headersSize,
90 | method: httpReq.request.method,
91 | operation,
92 | url: baseURL,
93 | };
94 | const response = {
95 | bodySize: httpReq.response.bodySize,
96 | headersSize: httpReq.response.headersSize,
97 | };
98 |
99 | // The eventId will store the Unix epoch time of the GraphQL network request
100 | // It will act as the key in the Events object where the cache and
101 | // related data will be stored
102 | const requestId = new Date(startedDateTime).getTime().toString();
103 | const eventId = new Date().getTime().toString();
104 |
105 | if (httpReq.request.method === 'POST') {
106 | // console.log('httpReq.request.url :>> ', httpReq.request.url);
107 | setNetworkURI(httpReq.request.url);
108 | }
109 |
110 | // The response from the GraphQL request is not immediately available
111 | // Have to invoke the getContent() method to obtain this
112 | httpReq.getContent((content: string) => {
113 | const event: any = {};
114 | event.requestId = requestId;
115 | event.eventId = eventId;
116 | event.request = request;
117 | event.response = response;
118 | event.response.content = JSON.parse(content);
119 | if (httpReq.response.content.size) {
120 | event.response.content.size = httpReq.response.content.size;
121 | } else {
122 | // console.log(
123 | // 'httpReq.getContent has no content.size for event :>>',
124 | // event,
125 | // );
126 | }
127 | event.startedDateTime = startedDateTime;
128 | event.time = time;
129 | event.timings = timings;
130 |
131 | setNetworkEvents(prevNetworkEvents => {
132 | const newNetworkEvents = {...prevNetworkEvents};
133 |
134 | if (!newNetworkEvents[eventId]) {
135 | newNetworkEvents[eventId] = {};
136 | }
137 |
138 | newNetworkEvents[eventId] = {...prevNetworkEvents[eventId], ...event};
139 |
140 | return newNetworkEvents;
141 | });
142 | });
143 | });
144 | }
145 |
--------------------------------------------------------------------------------
/src/app/utils/performanceMetricsCalcs.tsx:
--------------------------------------------------------------------------------
1 | // find the max time btw events that have been tracked so far by Apollo
2 | const getMaxEventTime = (eventsObj: any): number => {
3 | // console.log('in get MaxEventTime');
4 | // make events into an array of key, value pairs
5 | const eventsObjDuple: Array = Object.entries(eventsObj);
6 |
7 | const eventsArray = eventsObjDuple.map(el => el[1]);
8 |
9 | let max = 0;
10 |
11 | // if there are events
12 | if (eventsArray.length > 0) {
13 | // find max time
14 | max = eventsArray.reduce((acc, curr) => {
15 | if (acc < curr.time) {
16 | return curr.time;
17 | }
18 |
19 | return acc;
20 |
21 | // start acc at 0
22 | }, 0);
23 | }
24 | return max;
25 | };
26 |
27 | export default getMaxEventTime;
28 |
--------------------------------------------------------------------------------
/src/app/utils/tracingTimeFormating.tsx:
--------------------------------------------------------------------------------
1 | const formatTime = (time: number) => {
2 | let formattedTime = time;
3 | if (formattedTime < 1000) return `${formattedTime} ns`;
4 |
5 | formattedTime = Math.floor(formattedTime / 1000);
6 | if (formattedTime < 1000) return `${formattedTime} µs`;
7 |
8 | formattedTime = Math.floor(formattedTime / 1000);
9 | return `${formattedTime} ms`;
10 | };
11 |
12 | const formatTimeForProgressBar = (time: number): number => {
13 | let formattedTime = time;
14 | if (formattedTime < 1000) return formattedTime;
15 |
16 | formattedTime = Math.floor(formattedTime / 1000);
17 | if (formattedTime < 1000) return formattedTime;
18 |
19 | formattedTime = Math.floor(formattedTime / 1000);
20 | return formattedTime;
21 | };
22 |
23 | const TimeMagnitude = (time: number): string => {
24 | let formattedTime = time;
25 | if (formattedTime < 1000) return 'ns';
26 |
27 | formattedTime = Math.floor(formattedTime / 1000);
28 | if (formattedTime < 1000) return 'µs';
29 |
30 | formattedTime = Math.floor(formattedTime / 1000);
31 | return 'ms';
32 | };
33 |
34 | const filterSortResolvers = (resolversArray: Array, magnitude: string) => {
35 | if (resolversArray.length === 0) return [];
36 |
37 | const output = resolversArray
38 | .filter(resolver => TimeMagnitude(resolver.duration) === magnitude)
39 | .sort((a, b) => b.duration - a.duration);
40 |
41 | return output;
42 | };
43 |
44 | const createResolversArray = (timingInfo: any) => {
45 | const output = [];
46 |
47 | // console.log('timingInfo in create Array1', timingInfo);
48 |
49 | if (!timingInfo.resolvers) return [];
50 |
51 | // console.log('timingInfo in create Array2', timingInfo);
52 |
53 | const resolverObj = timingInfo.resolvers;
54 | const keysArray = Object.keys(resolverObj);
55 |
56 | keysArray.forEach(key => {
57 | resolverObj[key].forEach(resolver => {
58 | output.push(resolver);
59 | });
60 | });
61 |
62 | // console.log('output', output);
63 |
64 | return output;
65 | };
66 |
67 | export {
68 | formatTime,
69 | formatTimeForProgressBar,
70 | TimeMagnitude,
71 | filterSortResolvers,
72 | createResolversArray,
73 | };
74 |
--------------------------------------------------------------------------------
/src/app/utils/useClientEventlogs.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | // interface IApolloEventLog {
4 | // [key: string]: any;
5 | // }
6 |
7 | // import React, {createContext, FC, useContext, useEffect, useState} from 'react';
8 |
9 | // interface IViewport {
10 | // width: number;
11 | // }
12 |
13 | // const ViewportContext = createContext({
14 | // width: window.innerWidth,
15 | // });
16 |
17 | // // export const ViewportProvider: FC = ({ children }) => {
18 | // type Props = {
19 | // children: React.ReactNode;
20 | // };
21 | // export const ViewportProvider = ({children}: Props) => {
22 | // const [width, setWidth] = useState(window.innerWidth);
23 |
24 | // const handleResize = () => setWidth(window.innerWidth);
25 |
26 | // useEffect(() => {
27 | // window.addEventListener('resize', handleResize);
28 | // return () => window.removeEventListener('resize', handleResize);
29 | // }, []);
30 |
31 | // return (
32 | //
33 | // {children}
34 | //
35 | // );
36 | // };
37 |
38 | // export function useViewport() {
39 | // return useContext(ViewportContext);
40 | // }
41 |
42 | // const defaultTheme = 'white';
43 | // const ThemeContext = React.createContext(defaultTheme);
44 | // type Props = {
45 | // children: React.ReactNode;
46 | // };
47 | // export const ThemeProvider = ({children}: Props) => {
48 | // const [theme, setTheme] = React.useState(defaultTheme);
49 |
50 | // React.useEffect(() => {
51 | // // We'd get the theme from a web API / local storage in a real app
52 | // // We've hardcoded the theme in our example
53 | // const currentTheme = 'lightblue';
54 | // setTheme(currentTheme);
55 | // }, []);
56 |
57 | // return (
58 | // {children}
59 | // );
60 | // };
61 |
62 | const useClientEventlogs = () => {
63 | const [eventLogs, updateEventLogs] = React.useState((): any => ({}));
64 | const updateLogs = (evts: any) => {
65 | // console.log('updating hook wt ', evts);
66 | updateEventLogs(() => {
67 | // console.log('Previous Events :: ', prevEvents);
68 | return evts;
69 | });
70 | };
71 | return {eventLogs, updateLogs};
72 | };
73 |
74 | export default useClientEventlogs;
75 |
--------------------------------------------------------------------------------
/src/assets/Apollo11-Events-Low.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/ApolloDevQL/2c579086ce1934bede9e50e2e1e2d236018adc8a/src/assets/Apollo11-Events-Low.gif
--------------------------------------------------------------------------------
/src/assets/Apollo11-GraphiQL-Low.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/ApolloDevQL/2c579086ce1934bede9e50e2e1e2d236018adc8a/src/assets/Apollo11-GraphiQL-Low.gif
--------------------------------------------------------------------------------
/src/assets/Apollo11-Performance-Low.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/ApolloDevQL/2c579086ce1934bede9e50e2e1e2d236018adc8a/src/assets/Apollo11-Performance-Low.gif
--------------------------------------------------------------------------------
/src/assets/ApolloDevQL-01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/ApolloDevQL/2c579086ce1934bede9e50e2e1e2d236018adc8a/src/assets/ApolloDevQL-01.png
--------------------------------------------------------------------------------
/src/assets/ApolloDevQL-02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/ApolloDevQL/2c579086ce1934bede9e50e2e1e2d236018adc8a/src/assets/ApolloDevQL-02.png
--------------------------------------------------------------------------------
/src/extension/background.ts:
--------------------------------------------------------------------------------
1 | // console.log('this is background.ts');
2 |
--------------------------------------------------------------------------------
/src/extension/build/devtools.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | ⚛ ApolloDevQL
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/extension/build/devtools.ts:
--------------------------------------------------------------------------------
1 | // The initial script that loads the extension into the DevTools panel.
2 | chrome.devtools.panels.create(
3 | 'ApolloDevQL', // title of devtool panel
4 | '../assets/covalent-recoil-logo.jpg', // icon of devtool panel
5 | 'panel.html', // html of devtool panel
6 | );
7 |
--------------------------------------------------------------------------------
/src/extension/build/diff.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/ApolloDevQL/2c579086ce1934bede9e50e2e1e2d236018adc8a/src/extension/build/diff.css
--------------------------------------------------------------------------------
/src/extension/build/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ApolloDevQL",
3 | "version": "1.0.0",
4 | "devtools_page": "devtools.html",
5 | "description": "ApolloDevQL",
6 | "manifest_version": 2,
7 | "content_security_policy": "script-src 'self' 'unsafe-eval' ; object-src 'self'",
8 | "permissions": ["tabs", "activeTab", "storage"],
9 | "background": {
10 | "scripts": ["bundles/background.bundle.js"],
11 | "persistent": false
12 | },
13 | "web_accessible_resources": ["bundles/apollo.bundle.js"],
14 | "content_scripts": [
15 | {
16 | "matches": ["http://*/*", "https://*/*"],
17 | "js": ["bundles/content.bundle.js"]
18 | }
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/src/extension/build/panel.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/src/extension/build/stylesheet.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/ApolloDevQL/2c579086ce1934bede9e50e2e1e2d236018adc8a/src/extension/build/stylesheet.css
--------------------------------------------------------------------------------
/src/extension/contentScript.ts:
--------------------------------------------------------------------------------
1 | // console.log('Executing contentScript.ts...');
2 |
3 | // Need to inject our script as an IIFE into the DOM
4 | // This will allow us to obtain the __APOLLO_CLIENT__ object
5 | // on the application's window object.
6 | // https://stackoverflow.com/questions/12395722/can-the-window-object-be-modified-from-a-chrome-extension
7 | const injectScript = () => {
8 | if (document instanceof HTMLDocument) {
9 | const s = document.createElement('script');
10 | s.setAttribute('data-version', chrome.runtime.getManifest().version);
11 | s.src = chrome.extension.getURL('bundles/apollo.bundle.js');
12 | document.body.appendChild(s);
13 | }
14 | };
15 |
16 | // Listen for messages from the App
17 | // If a message to get the cache is received, it will inject the detection code
18 | chrome.runtime.onMessage.addListener(request => {
19 | if (request && request.type && request.type === 'GET_APOLLO_CLIENT') {
20 | injectScript();
21 | }
22 | });
23 |
24 | // Listen for messages from the injected script
25 | // Once a message is received, it will send a message to the App
26 | // with the Apollo Client URI and cache
27 | window.addEventListener(
28 | 'message',
29 | function sendClientData(event) {
30 | // We only accept messages from ourselves
31 | if (event.source !== window) {
32 | return;
33 | }
34 |
35 | if (!event.data.type || !event.data.eventId) {
36 | return;
37 | }
38 |
39 | const apolloClient = {
40 | type: event.data.type,
41 | eventId: event.data.eventId,
42 | apolloURI: event.data.apolloURI,
43 | cache: event.data.cache,
44 | action: event.data.action,
45 | inspector: event.data.inspector,
46 | queries: event.data.queries,
47 | mutations: event.data.mutations,
48 | queryManager: event.data.queryManager,
49 | };
50 | chrome.runtime.sendMessage(apolloClient);
51 | },
52 | false,
53 | );
54 |
55 | // Immediately inject the detection code once the contentScript is loaded every time
56 | // we navigate to a new website
57 | // This mitigates issues where the App panel has already mounted and sent its initial
58 | // requests for the URI and cache, but there isn't any website loaded yet (i.e. empty tab)
59 | injectScript();
60 |
--------------------------------------------------------------------------------
/src/extension/hook/apollo.ts:
--------------------------------------------------------------------------------
1 | // This callback is injected into the Apollo Client and will be invoked whenever
2 | // there is a query or mutation operation
3 | //
4 | // When invoked, it will collect the Apollo Client cache and related stores to
5 | // send to the contentScript for further processing in our extension
6 | function apollo11Callback(
7 | win: any,
8 | action: any,
9 | queries: any,
10 | mutations: any,
11 | inspector: any,
12 | initial: boolean = false,
13 | ) {
14 | // If the callback is invoked with a special HEARTBEAT action,
15 | // it will simply return the HEARTBEAT to show that it is still
16 | // "alive" -- i.e., injected in the Apollo Client
17 | if (action === 'HEARTBEAT') {
18 | return 'APOLLO11_CALLBACK_HEARTBEAT';
19 | }
20 |
21 | const queryManager: any = {};
22 |
23 | const apolloCache = win.__APOLLO_CLIENT__.cache;
24 | let cache: any = {};
25 | if (apolloCache && apolloCache.data && apolloCache.data.data) {
26 | cache = apolloCache.data.data;
27 | }
28 |
29 | const apolloQM = win.__APOLLO_CLIENT__.queryManager;
30 | if (apolloQM) {
31 | const store: any = {};
32 | if (apolloQM.queries instanceof Map) {
33 | apolloQM.queries.forEach((info: any, queryId: any) => {
34 | store[queryId] = {
35 | variables: info.variables,
36 | networkStatus: info.networkStatus,
37 | networkError: info.networkError,
38 | graphQLErrors: info.graphQLErrors,
39 | document: info.document,
40 | diff: info.diff,
41 | };
42 | });
43 | }
44 |
45 | queryManager.queriesStore = store;
46 | queryManager.mutationStore = apolloQM.mutationStore.store;
47 |
48 | // The counters below were being used to determine when new queries
49 | // or mutations were handled in the Apollo Client. They're no longer
50 | // used as we are now diffing the object structure but are still
51 | // being sent for the time being
52 |
53 | // v3 counters
54 | queryManager.requestIdCounter = apolloQM.requestIdCounter;
55 | queryManager.queryIdCounter = apolloQM.queryIdCounter;
56 | queryManager.mutationIdCounter = apolloQM.mutationIdCounter;
57 |
58 | // v2 counter
59 | queryManager.idCounter = apolloQM.idCounter;
60 | }
61 |
62 | const {link} = win.__APOLLO_CLIENT__;
63 | let apolloURI = '';
64 | if (link && link.options && link.options.uri) {
65 | apolloURI = link.options.uri;
66 | }
67 |
68 | // If this is the very first (i.e. INITIAL) invocation of the callback,
69 | // set the eventId to 0 so that the app knows how to handle the very first
70 | // cache in the client, which might be empty
71 | const type = initial ? 'INITIAL' : 'APOLLO_CLIENT';
72 | const eventId = initial ? '0' : new Date().getTime().toString();
73 | const apolloClient = {
74 | type,
75 | eventId,
76 | apolloURI,
77 | cache,
78 | action,
79 | inspector,
80 | queries,
81 | mutations,
82 | queryManager,
83 | };
84 |
85 | win.postMessage(apolloClient);
86 | return undefined;
87 | }
88 |
89 | // Injects our callback into the Apollo Client by invoking the built-in hook
90 | // It does not preserve any other callback that might have been injected into
91 | // it previously
92 | const injectApollo11Callback = (win: any) => {
93 | if (win.__APOLLO_CLIENT__) {
94 | win.__APOLLO_CLIENT__.__actionHookForDevTools(
95 | ({
96 | action,
97 | state: {queries, mutations},
98 | dataWithOptimisticResults: inspector,
99 | }) => {
100 | const heartbeat = apollo11Callback(
101 | win,
102 | action,
103 | queries,
104 | mutations,
105 | inspector,
106 | );
107 | return heartbeat;
108 | },
109 | );
110 | }
111 | };
112 |
113 | // This HEARTBEAT "listener" will invoke our injected callback and if it
114 | // doesn't get a HEARTBEAT response, it means our callback has been
115 | // overwritten by another extension.
116 | //
117 | // It will the attempt to re-inject our callback into the devToolsHookCb
118 | const heartbeatListener = () => {
119 | const win: any = window;
120 | const options = {
121 | action: 'HEARTBEAT',
122 | state: {queries: {}, mutations: {}},
123 | dataWithOptimisticResults: {},
124 | };
125 | const heartbeat = win.__APOLLO_CLIENT__.devToolsHookCb(options);
126 | if (heartbeat !== 'APOLLO11_CALLBACK_HEARTBEAT') {
127 | injectApollo11Callback(win);
128 | }
129 | };
130 |
131 | // This IIFE will be invoked by the contentScript whenever the user navigates
132 | // to a new website. It will set up an interval timer that will wait for the
133 | // presence of an __APOLLO_CLIENT__ object on the window.
134 | // If it finds it, it will invoke and inject our callback into the Apollo Client
135 | // and clear the interval timer previously set.
136 | // Once injected, it will also set up a HEARTBEAT listener to ensure that our
137 | // callback has not been removed or overwritten by another extension.
138 | (function hooked(win: any) {
139 | // eslint-disable-next-line no-undef
140 | let detectionInterval: NodeJS.Timeout;
141 | const findApolloClient = () => {
142 | if (win.__APOLLO_CLIENT__) {
143 | clearInterval(detectionInterval);
144 |
145 | // Immediately invoke the callback to retrieve the initial state of the
146 | // Apollo Client cache
147 | apollo11Callback(win, null, null, null, null, true);
148 | injectApollo11Callback(win);
149 | setInterval(heartbeatListener, 1000);
150 | }
151 | };
152 | detectionInterval = global.setInterval(findApolloClient, 1000);
153 | })(window);
154 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "./build",
4 | "module": "commonjs",
5 | "pretty": true,
6 | "noImplicitAny": false,
7 | "removeComments": true,
8 | "preserveConstEnums": true,
9 | "sourceMap": true,
10 | "allowJs": true,
11 | "jsx": "react",
12 | "target": "esnext",
13 | "esModuleInterop": true,
14 | "lib": ["es2015", "esnext.asynciterable", "dom"]
15 | },
16 | "include": ["./src/app/**/*", "./index.d.ts", "./src/custom.d.ts"],
17 | "exclude": ["node_modules", ".vscode", "__tests__"]
18 | }
19 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const ChromeExtensionReloader = require('webpack-chrome-extension-reloader');
3 |
4 | const config = {
5 | entry: {
6 | app: './src/app/Panel/index.tsx',
7 | background: './src/extension/background.ts',
8 | content: './src/extension/contentScript.ts',
9 | apollo: './src/extension/hook/apollo.ts',
10 | },
11 | output: {
12 | path: path.resolve(__dirname, 'src/extension/build/bundles'),
13 | filename: '[name].bundle.js',
14 | },
15 | module: {
16 | rules: [
17 | {
18 | test: /\.tsx?$/,
19 | use: 'ts-loader',
20 | exclude: [/node_modules/, /__tests__/, /__mocks__/],
21 | resolve: {
22 | extensions: ['.ts', '.tsx', '.js', '.jsx'],
23 | },
24 | },
25 | {
26 | test: /\.jsx?/,
27 | exclude: [/node_modules/, /__tests__/, /__mocks__/],
28 | resolve: {
29 | extensions: ['.js', '.jsx'],
30 | },
31 | use: {
32 | loader: 'babel-loader',
33 | options: {
34 | presets: ['@babel/preset-env', '@babel/preset-react'],
35 | },
36 | },
37 | },
38 | {
39 | test: /\.scss$/,
40 | use: ['style-loader', 'css-loader', 'sass-loader'],
41 | },
42 | {
43 | test: /\.css$/,
44 | use: ['style-loader', 'css-loader'],
45 | },
46 | {
47 | test: /\.mjs$/,
48 | include: /node_modules/,
49 | type: 'javascript/auto',
50 | },
51 | ],
52 | },
53 | resolve: {
54 | extensions: ['.mjs', '.tsx', '.ts', '.js', '.jsx'],
55 | },
56 | plugins: [],
57 | };
58 |
59 | module.exports = (env, argv) => {
60 | if (argv.mode === 'development') {
61 | config.plugins.push(
62 | new ChromeExtensionReloader({
63 | entries: {
64 | contentScript: ['app', 'content'],
65 | background: ['background'],
66 | },
67 | }),
68 | );
69 | }
70 | return config;
71 | };
72 |
--------------------------------------------------------------------------------
3 | 
37 | 
47 | 
57 |