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),
},
};
}