From 6a87019cb763780e1dbf31149c0347c4572b8ab9 Mon Sep 17 00:00:00 2001 From: FaberVitale Date: Sat, 31 Jul 2021 22:42:43 +0200 Subject: [PATCH] refactor(rtk-query): improve UI of api tab --- .../demo/src/App.tsx | 6 +- .../demo/src/index.css | 21 ------ .../src/components/QueryPreviewApi.tsx | 71 ++++++++++++++----- .../src/components/UList.tsx | 12 ++++ .../src/styles/createStylingFromTheme.ts | 41 ++++++++++- .../src/types.ts | 8 +-- .../src/utils/rtk-query.ts | 44 ++++++------ 7 files changed, 135 insertions(+), 68 deletions(-) create mode 100644 packages/redux-devtools-rtk-query-monitor/src/components/UList.tsx diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/App.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/App.tsx index 4674896d..9a468add 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/src/App.tsx +++ b/packages/redux-devtools-rtk-query-monitor/demo/src/App.tsx @@ -8,8 +8,8 @@ import { DevToolsSelector } from 'features/DevTools/DevToolsSelector'; export function App() { return ( -
- +
+ RTK Query inspector monitor demo @@ -66,6 +66,6 @@ export function App() { -
+ ); } diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/index.css b/packages/redux-devtools-rtk-query-monitor/demo/src/index.css index ae605301..53bb5dd2 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/src/index.css +++ b/packages/redux-devtools-rtk-query-monitor/demo/src/index.css @@ -12,27 +12,6 @@ code { monospace; } -h1 { - font-weight: 700; - font-size: 1.4em; -} - -h2 { - font-size: 1.2em; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - text-align: left; - font-family: inherit; - padding: 0.5em; - margin: 0; -} - section { display: block; max-width: 65%; diff --git a/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewApi.tsx b/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewApi.tsx index 6f902d70..d6e01492 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewApi.tsx +++ b/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewApi.tsx @@ -1,6 +1,6 @@ -import { createSelector } from '@reduxjs/toolkit'; import React, { ReactNode, PureComponent } from 'react'; import { ApiStats, RtkQueryApiState } from '../types'; +import { StyleUtilsContext } from '../styles/createStylingFromTheme'; import { TreeView } from './TreeView'; export interface QueryPreviewApiProps { @@ -10,24 +10,63 @@ export interface QueryPreviewApiProps { } export class QueryPreviewApi extends PureComponent { - selectData = createSelector( - [ - ({ apiState }: QueryPreviewApiProps) => apiState, - ({ apiStats }: QueryPreviewApiProps) => apiStats, - ], - (apiState, apiStats) => ({ - reducerPath: apiState?.config?.reducerPath ?? null, - apiState: apiState, - stats: apiStats, - }) - ); + shouldExpandApiStateNode = ( + keyPath: (string | number)[], + value: unknown, + layer: number + ): boolean => { + const lastKey = keyPath[keyPath.length - 1]; + + return layer <= 1 && lastKey !== 'config'; + }; render(): ReactNode { + const { apiStats, isWideLayout, apiState } = this.props; + + if (!apiState) { + return null; + } + + const hasMutations = Object.keys(apiState.mutations).length > 0; + const hasQueries = Object.keys(apiState.queries).length > 0; + return ( - + + {({ styling }) => ( +
+

{apiState.config.reducerPath}

+ State} + data={apiState} + shouldExpandNode={this.shouldExpandApiStateNode} + isWideLayout={isWideLayout} + /> + {apiStats && ( + <> + Tally} + data={apiStats.tally} + isWideLayout={isWideLayout} + /> + {hasQueries && ( + Queries Timings} + data={apiStats.timings.queries} + isWideLayout={isWideLayout} + /> + )} + {hasMutations && ( + Mutations Timings} + data={apiStats.timings.mutations} + isWideLayout={isWideLayout} + /> + )} + + )} +
+ )} + ); } } diff --git a/packages/redux-devtools-rtk-query-monitor/src/components/UList.tsx b/packages/redux-devtools-rtk-query-monitor/src/components/UList.tsx new file mode 100644 index 00000000..60f5e0c0 --- /dev/null +++ b/packages/redux-devtools-rtk-query-monitor/src/components/UList.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; +import { StyleUtilsContext } from '../styles/createStylingFromTheme'; + +export type UListProps = React.HTMLAttributes; + +export function UList(props: UListProps): JSX.Element { + return ( + + {({ styling }) =>
    } + + ); +} diff --git a/packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts b/packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts index 0390a62c..73dc5efc 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts +++ b/packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts @@ -39,6 +39,10 @@ export const colorMap = (theme: reduxThemes.Base16Theme) => LINK_COLOR: rgba(theme.base0E, 90), LINK_HOVER_COLOR: theme.base0E, ERROR_COLOR: theme.base08, + ULIST_DISC_COLOR: theme.base0D, + ULIST_COLOR: rgba(theme.base06, 60), + ULIST_STRONG_COLOR: theme.base0B, + TAB_CONTENT_COLOR: rgba(theme.base06, 60), } as const); type Color = keyof ReturnType; @@ -400,7 +404,42 @@ const getSheetFromColorMap = (map: ColorMap) => { treeWrapper: { overflowX: 'auto', overflowY: 'auto', - padding: '1em', + padding: '0.5em 1em', + }, + + tabContent: { + display: 'block', + overflowY: 'auto', + padding: '0.5em 0', + color: map.TAB_CONTENT_COLOR, + '& h2': { + color: map.ULIST_STRONG_COLOR, + padding: '0.5em 1em', + fontWeight: 700, + }, + '& h3': { + color: map.ULIST_STRONG_COLOR, + }, + }, + + uList: { + listStyle: 'none', + padding: '0 0 0 1em', + color: map.ULIST_COLOR, + '& > li': { + listStyle: 'none', + }, + '& > li::before': { + content: '"\\2022"', + display: 'inline-block', + paddingRight: '0.5em', + color: map.ULIST_DISC_COLOR, + fontSize: '0.8em', + }, + + '& strong': { + color: map.ULIST_STRONG_COLOR, + }, }, }; }; diff --git a/packages/redux-devtools-rtk-query-monitor/src/types.ts b/packages/redux-devtools-rtk-query-monitor/src/types.ts index 6960eadb..899298ae 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/types.ts +++ b/packages/redux-devtools-rtk-query-monitor/src/types.ts @@ -112,8 +112,8 @@ export type QueryTally = { Tally; export interface QueryTimings { - readonly oldestFetch: { key: string; at: string } | null; - readonly latestFetch: { key: string; at: string } | null; + readonly oldest: { key: string; at: string } | null; + readonly latest: { key: string; at: string } | null; readonly slowest: { key: string; duration: string } | null; readonly fastest: { key: string; duration: string } | null; readonly average: string; @@ -128,9 +128,9 @@ export interface ApiTimings { export interface ApiStats { readonly timings: ApiTimings; readonly tally: Readonly<{ - subscriptions: Tally; + subscriptions: number; queries: QueryTally; - tagTypes: Tally; + tagTypes: number; mutations: QueryTally; }>; } diff --git a/packages/redux-devtools-rtk-query-monitor/src/utils/rtk-query.ts b/packages/redux-devtools-rtk-query-monitor/src/utils/rtk-query.ts index c3845988..a83f07e8 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/utils/rtk-query.ts +++ b/packages/redux-devtools-rtk-query-monitor/src/utils/rtk-query.ts @@ -179,18 +179,16 @@ function computeQueryTallyOf( function tallySubscriptions( subsState: RtkQueryApiState['subscriptions'] -): ApiStats['tally']['subscriptions'] { +): number { const subsOfQueries = Object.values(subsState); - const output: ApiStats['tally']['subscriptions'] = { - count: 0, - }; + let output = 0; for (let i = 0, len = subsOfQueries.length; i < len; i++) { const subsOfQuery = subsOfQueries[i]; if (subsOfQuery) { - output.count += Object.keys(subsOfQuery).length; + output += Object.keys(subsOfQuery).length; } } @@ -204,8 +202,8 @@ function computeQueryApiTimings( ): QueryTimings { type SpeedReport = { key: string | null; at: string | number }; type DurationReport = { key: string | null; duration: string | number }; - let latestFetch: null | SpeedReport = { key: null, at: -1 }; - let oldestFetch: null | SpeedReport = { + let latest: null | SpeedReport = { key: null, at: -1 }; + let oldest: null | SpeedReport = { key: null, at: Number.MAX_SAFE_INTEGER, }; @@ -227,14 +225,14 @@ function computeQueryApiTimings( const startedTimeStamp = query?.startedTimeStamp; if (typeof fulfilledTimeStamp === 'number') { - if (fulfilledTimeStamp > latestFetch.at) { - latestFetch.key = queryKey; - latestFetch.at = fulfilledTimeStamp; + if (fulfilledTimeStamp > latest.at) { + latest.key = queryKey; + latest.at = fulfilledTimeStamp; } - if (fulfilledTimeStamp < oldestFetch.at) { - oldestFetch.key = queryKey; - oldestFetch.at = fulfilledTimeStamp; + if (fulfilledTimeStamp < oldest.at) { + oldest.key = queryKey; + oldest.at = fulfilledTimeStamp; } if ( @@ -258,16 +256,16 @@ function computeQueryApiTimings( } } - if (latestFetch.key !== null) { - latestFetch.at = new Date(latestFetch.at).toISOString(); + if (latest.key !== null) { + latest.at = new Date(latest.at).toISOString(); } else { - latestFetch = null; + latest = null; } - if (oldestFetch.key !== null) { - oldestFetch.at = new Date(oldestFetch.at).toISOString(); + if (oldest.key !== null) { + oldest.at = new Date(oldest.at).toISOString(); } else { - oldestFetch = null; + oldest = null; } if (slowest.key !== null) { @@ -293,8 +291,8 @@ function computeQueryApiTimings( : '-'; return { - latestFetch, - oldestFetch, + latest, + oldest, slowest, fastest, average, @@ -319,10 +317,10 @@ export function generateApiStatsOfCurrentQuery( return { timings: computeApiTimings(api), tally: { - subscriptions: tallySubscriptions(api.subscriptions), queries: computeQueryTallyOf(api.queries), - tagTypes: { count: Object.keys(api.provided).length }, mutations: computeQueryTallyOf(api.mutations), + tagTypes: Object.keys(api.provided).length, + subscriptions: tallySubscriptions(api.subscriptions), }, }; }