redux-devtools/packages/redux-devtools-app
Fabrizio Vitale 7d92a5e186
[feat][monitor] Add rkt-query-inspector-monitor - feat/rtk query monitor (#750)
* chore: copy rtk-query example from toolkit

* feat(rtk-query): complete initial setup of rtk-query

* feat: complete inspector layout and add initial JSONTree setup

* fix: unintentional removal of tsconfig

* feat(search): add search logic and refactor monitor state shape

* fix: inverted monitor theme inside  devtoop-app

Othetr changes:

* simplify monitor integration

* fix: rtk monitor reducer not working in  app

* refactor(rtk-query): simplify theme config

* feat(rtk-query-monitor): add query preview tabs

* fix: wip

* refactor(examples): add rtk-query-polling to workspace

Other changes:

* docs(rtk-query-polling): add README.md

* chore(rtk-query-inspector): add demo to monorepo

Other changes:

chore: increase isWideScreen polling interval to 300

refactor: add subscription as root node in QueryPreviewSubscriptions

* feat(rtk-query): add multiple filter options

* chore(rtk-queery): rename demo build script and add SKIP_PREFLIGHT_CHECK=true

* feat(rtk-query): display status flags in QueryPreviewInfo

* chore(rtk-query): update typescript versions in rkt-inspector-monitor & its demo

* docs(rtk-query): add proper README

Other changes:

* fix examples/rtk-query-poilling

* docs(rtk-query): improve rtk-query-inspector-monitor demo gif

* docs(rtk-query): clean up demo

* fix(rtk-query): clear button not updating redux state

* docs(rtk-query): add link to rtk-query-inspector-monitor demo site

* chore(rtk-query): run prettier after prettier upgrade (55e2284)

* docs(rtk.query): clean up readme add features, todo and development section

* docs(rtk-query): fix link href

* chore(rtk-query): clean up rtk-query-imspector-monitor-demo and add post example

* feat(rtk-query): add counters on tags & subs tab buttons

* fix(rtk-query): layering issue between queryPreview tabList and select

Other changes:

* clean up demo styles

* run prettier

* fix: revert accidental changes packages/redux-devtools-serialize/tsconfig.json

* chore: change QueryComparators.fulfilledTimeStamp label

* feat(rtk-query): display api stats

* refactor: remove rtk-query-polling example from monorepo

* chore: regenerate lock file and add @types/react as monorepo devDep

* chore: display apiState

Other changes:

* fix close button overflow

* minor responsive style tweaks

* display reducerPath in query tab

* fix(rtk-query): resolve CI errors

- fix(prettier:check): unformatted file
- fix(lint:all): fix accidentallly removed .eslintignore

* chore(rtk-query): rename package to '@redux-devtools/rtk-query-monitor'

* fix(rtk-query): lint:all error

https://github.com/reduxjs/redux-devtools/runs/2869729048?check_suite_focus=true

* feat(rtk-query): add fallback message if there are no rtk-query apis

* refactor(rtk-query): move Inspector & Monitor to containers clean up typings

Other changes:

* chore: improved type coverage

* chore: do not lint packages/redux-devtools-rtk-query-monitor/demo folder

* refactor: put sort order buttons inside a component

* chore: hopefully resolve mockServiceWorker formatting issues

* fix(rtk-query): incorrect link color

Other changes:

* fix: add missing anchor property value noopener

* refactor(rtk-query): simplify sort order control

* feat(rtk-query): add timings to apiStats sections

* feat(rtk-query): add slowest and fastest in timings section

* feat(rtk-query): improve formatting of timings and display average loading time

* fix(rtk-query): rtk-query imports

* refactor(rtk-query): reduce selector computations

Other changes:

* simplify TreeView props

* feat(rtk-query): add actions tab

* refactor(rtk-query): add custom logic for TreeView shouldExpandNode

Other changes:

* feat: added duration in QueryPreviewInfo tab

* refactor: TreeView component

* chore(rtk-query): improve demo visibility on small devices

* feat(rtk-query): do not display tree node preview

Other changes:

* improve visibility of demo devTools on small devices

* tweak QueryPreviewInfo labels

* chore(rtk-query): improve responsiveness

* refactor(rtk-query): move preview to containers remove unnecessary computation

* feat(rtk-query): display median of timings

Other changes:

* improved shouldExpandNode logic of QueryPreviewActions

* tweaked mean logic

* refactor(rtk-query-monitor): conform demo setup to repo standards

* chore(rtk-query-monitor): add option to select active devtools

* chore(rtk-query-monitor): remove redux-devtools/examples/rtk-query-polling

* refactor(rtk-query): improve UI of api tab

* feat(rtk-query): add regex search

* feat(rtk-query): display mutations in queryList

* refactor(rtk-query): track all fulfilled requests using actions

Other changes:

* refactor(rtk-query): rename tally properties

* chore(rtk-query): update @redux-devtools/rtk-query-monitor dependencies

* fix(rtk-query): demo build failing caused by a typing error
2021-08-26 15:33:06 -04:00
..
assets chore(*): move redux-devtools-app to scoped package (#693) 2020-12-22 12:02:14 -05:00
demo chore(*): move redux-devtools-app to scoped package (#693) 2020-12-22 12:02:14 -05:00
src [feat][monitor] Add rkt-query-inspector-monitor - feat/rtk query monitor (#750) 2021-08-26 15:33:06 -04:00
test chore(*): move redux-devtools-app to scoped package (#693) 2020-12-22 12:02:14 -05:00
.babelrc chore(*): move redux-devtools-app to scoped package (#693) 2020-12-22 12:02:14 -05:00
.eslintignore chore(*): move redux-devtools-app to scoped package (#693) 2020-12-22 12:02:14 -05:00
.eslintrc.js chore(*): move redux-devtools-app to scoped package (#693) 2020-12-22 12:02:14 -05:00
CHANGELOG.md chore(*): run prettier 2021-06-10 23:42:46 -04:00
jest.config.js chore(*): move redux-devtools-app to scoped package (#693) 2020-12-22 12:02:14 -05:00
LICENSE.md chore(*): move redux-devtools-app to scoped package (#693) 2020-12-22 12:02:14 -05:00
package.json [feat][monitor] Add rkt-query-inspector-monitor - feat/rtk query monitor (#750) 2021-08-26 15:33:06 -04:00
README.md chore(*): move redux-devtools-app to scoped package (#693) 2020-12-22 12:02:14 -05:00
tsconfig.json chore(*): move redux-devtools-app to scoped package (#693) 2020-12-22 12:02:14 -05:00
tsconfig.webpack.json chore(*): move redux-devtools-app to scoped package (#693) 2020-12-22 12:02:14 -05:00
webpack.config.ts chore(*): move redux-devtools-app to scoped package (#693) 2020-12-22 12:02:14 -05:00
webpack.config.umd.ts chore(*): move redux-devtools-app to scoped package (#693) 2020-12-22 12:02:14 -05:00

Redux DevTools monitor app

Demo

Web, Electron and Chrome app for monitoring remote-redux-devtools. Can be accessed on remotedev.io.

Also it's a react component you can use to build amazing monitor applications like:

Usage

import React from 'react';
import ReactDom from 'react-dom';
import DevToolsApp from '@redux-devtools/app';

ReactDom.render(<App />, document.getElementById('root'));

Parameters

  • socketOptions - object used to specify predefined options for the connection:
    • hostname - string
    • port - number or string
    • autoReconnect - boolean
    • secure - boolean.
  • monitorOptions - object used to specify predefined monitor options:
    • selected - string - which monitor is selected by default. One of the following values: LogMonitor, InspectorMonitor, ChartMonitor.
  • testTemplates - array of strings representing predefined test templates.
  • noSettings - boolean set to true in order to hide settings button and dialog.

License

MIT