├── .github └── workflows │ └── codeql.yml ├── .gitignore ├── .npmignore ├── .prettierrc ├── CHANGELOG.md ├── LICENSE ├── README.md ├── global.d.ts ├── index.ts ├── logo.png ├── package-lock.json ├── package.json ├── screenshots ├── README.md ├── screenshot-00001.png ├── screenshot-00002.png ├── screenshot-00003.png ├── screenshot-00004.png ├── screenshot-00005.png ├── screenshot-00006.png ├── screenshot-00007.png └── screenshot-00008.png ├── src ├── client │ ├── components │ │ ├── AcknowledgedMessages │ │ │ └── AcknowledgedMessages.tsx │ │ ├── App │ │ │ ├── App.tsx │ │ │ ├── AppPage.tsx │ │ │ └── style.css │ │ ├── Consumer │ │ │ ├── Consumer.tsx │ │ │ ├── ConsumerPage.tsx │ │ │ ├── ConsumerRates.tsx │ │ │ └── ConsumerResourcesUsage.tsx │ │ ├── DeadLetteredMessages │ │ │ └── DeadLetteredMessages.tsx │ │ ├── Exchange │ │ │ ├── BindQueue │ │ │ │ ├── BindQueue.tsx │ │ │ │ └── FormModal.tsx │ │ │ ├── DeleteExchange │ │ │ │ └── DeleteExchange.tsx │ │ │ ├── Exchange.tsx │ │ │ ├── ExchangePage.tsx │ │ │ └── UnbindQueue │ │ │ │ └── UnbindQueue.tsx │ │ ├── Home │ │ │ ├── CreateExchange │ │ │ │ ├── CreateExchange.tsx │ │ │ │ └── FormModal.tsx │ │ │ ├── CreateQueue │ │ │ │ ├── CreateQueue.tsx │ │ │ │ └── FormModal.tsx │ │ │ └── Home.tsx │ │ ├── LeftPanel │ │ │ ├── Exchanges │ │ │ │ ├── Exchanges.tsx │ │ │ │ └── ExchangesPage.tsx │ │ │ ├── LeftPanel.tsx │ │ │ ├── Logo │ │ │ │ ├── Logo.tsx │ │ │ │ └── logo.png │ │ │ ├── Queues │ │ │ │ ├── Queues.tsx │ │ │ │ └── QueuesPage.tsx │ │ │ └── Scheduled │ │ │ │ ├── Scheduled.tsx │ │ │ │ └── ScheduledPage.tsx │ │ ├── PendingMessages │ │ │ └── PendingMessages.tsx │ │ ├── Queue │ │ │ ├── MessageRates.tsx │ │ │ ├── Queue.tsx │ │ │ ├── QueuePage.tsx │ │ │ └── RateLimiting │ │ │ │ ├── RateLimiting.tsx │ │ │ │ ├── RateLimitingPage.tsx │ │ │ │ └── SetRateLimit │ │ │ │ ├── FormModal.tsx │ │ │ │ └── SetRateLimit.tsx │ │ ├── QueueConsumers │ │ │ ├── QueueConsumers.tsx │ │ │ └── QueueConsumersPage.tsx │ │ ├── Queues │ │ │ ├── DeleteNamespace │ │ │ │ └── DeleteNamespace.tsx │ │ │ ├── DeleteQueue │ │ │ │ └── DeleteQueue.tsx │ │ │ ├── Queues.tsx │ │ │ └── QueuesPage.tsx │ │ ├── ScheduledMessages │ │ │ └── ScheduledMessages.tsx │ │ └── common │ │ │ ├── Breadcrumbs.tsx │ │ │ ├── ErrorBoundary.tsx │ │ │ ├── Errors │ │ │ ├── AnErrorOccurred.tsx │ │ │ ├── PageNotFound.tsx │ │ │ └── exclamation-circle-fill.svg │ │ │ ├── Footer │ │ │ ├── Footer.tsx │ │ │ ├── FooterPage.tsx │ │ │ └── style.css │ │ │ ├── Messages │ │ │ ├── MessageOptions │ │ │ │ ├── Delete.tsx │ │ │ │ ├── MessageOptions.tsx │ │ │ │ ├── Requeue.tsx │ │ │ │ └── RequeueWithPriority │ │ │ │ │ ├── FormBody.tsx │ │ │ │ │ ├── FormHandler.tsx │ │ │ │ │ └── RequeueWithPriority.tsx │ │ │ ├── Messages.tsx │ │ │ └── MessagesPage.tsx │ │ │ ├── Modal.tsx │ │ │ ├── ModalLink.tsx │ │ │ ├── Notification.tsx │ │ │ ├── Paginator.tsx │ │ │ ├── Query.tsx │ │ │ └── TimeSeriesChart │ │ │ ├── Chart.tsx │ │ │ ├── LiveTimeSeries.tsx │ │ │ ├── Navigation │ │ │ ├── Navigation.tsx │ │ │ ├── Scroll.tsx │ │ │ └── WindowSize.tsx │ │ │ ├── QueryTimeSeries.tsx │ │ │ ├── TimeSeriesChart.tsx │ │ │ └── UPlotChartEngine.tsx │ ├── hooks │ │ ├── useParams.ts │ │ ├── useQuery.ts │ │ ├── useSelector.ts │ │ ├── useUrlParams.ts │ │ └── useWebsocketSubscription.ts │ ├── index.html │ ├── index.tsx │ ├── polyfill │ │ └── polyfill.ts │ ├── routes │ │ ├── common.ts │ │ ├── index.tsx │ │ └── routes │ │ │ ├── acknowledged-messages.ts │ │ │ ├── consumer.ts │ │ │ ├── consumers.ts │ │ │ ├── dead-lettered-messages.ts │ │ │ ├── exchange.ts │ │ │ ├── home.ts │ │ │ ├── index.ts │ │ │ ├── pending-messages.ts │ │ │ ├── queue.ts │ │ │ ├── queues.ts │ │ │ └── scheduled-messages.ts │ ├── store │ │ ├── components │ │ │ ├── Exchange │ │ │ │ ├── action.ts │ │ │ │ ├── reducer.ts │ │ │ │ └── state.ts │ │ │ ├── LeftPanel │ │ │ │ ├── Exchanges │ │ │ │ │ ├── action.ts │ │ │ │ │ ├── reducer.ts │ │ │ │ │ └── state.ts │ │ │ │ ├── reducer.ts │ │ │ │ └── state.ts │ │ │ ├── reducer.ts │ │ │ └── state.ts │ │ ├── index.ts │ │ ├── notifications │ │ │ ├── action.ts │ │ │ ├── reducer.ts │ │ │ └── state.ts │ │ ├── state.ts │ │ └── websocket-main-stream │ │ │ ├── action.ts │ │ │ ├── reducer.ts │ │ │ └── state.ts │ ├── tools │ │ ├── start-monitor-server.ts │ │ └── utils.ts │ └── transport │ │ ├── endpoints.ts │ │ ├── http │ │ └── api │ │ │ ├── common │ │ │ └── IMessage.ts │ │ │ ├── delete-message.ts │ │ │ ├── delete-queue.ts │ │ │ ├── exchanges.ts │ │ │ ├── get-messages.ts │ │ │ ├── index.ts │ │ │ ├── namespaces.ts │ │ │ ├── purge-messages.ts │ │ │ ├── queue-rate-limiting.ts │ │ │ ├── requeue-message.ts │ │ │ ├── save-queue.ts │ │ │ └── time-series.ts │ │ └── websocket │ │ ├── streams │ │ ├── consumerHeartbeatStream.ts │ │ ├── mainStream.ts │ │ ├── queueConsumersStream.ts │ │ ├── queueOnlineConsumersStream.ts │ │ └── rateStream.ts │ │ └── websocket.ts └── server │ └── middleware.ts ├── tsconfig-server.json ├── tsconfig.json └── webpack.config.js /.github/workflows/codeql.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "code quality" 13 | 14 | on: 15 | push: 16 | branches: [ "master" ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ "master" ] 20 | 21 | jobs: 22 | analyze: 23 | name: Analyze 24 | runs-on: ubuntu-latest 25 | permissions: 26 | actions: read 27 | contents: read 28 | security-events: write 29 | 30 | strategy: 31 | fail-fast: false 32 | matrix: 33 | language: [ 'javascript' ] 34 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ] 35 | # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support 36 | 37 | steps: 38 | - name: Checkout repository 39 | uses: actions/checkout@v3 40 | 41 | # Initializes the CodeQL tools for scanning. 42 | - name: Initialize CodeQL 43 | uses: github/codeql-action/init@v2 44 | with: 45 | languages: ${{ matrix.language }} 46 | # If you wish to specify custom queries, you can do so here or in a config file. 47 | # By default, queries listed here will override any specified in a config file. 48 | # Prefix the list here with "+" to use these queries and those in the config file. 49 | 50 | # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs 51 | # queries: security-extended,security-and-quality 52 | 53 | 54 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 55 | # If this step fails, then you should remove it and run the build manually (see below) 56 | - name: Autobuild 57 | uses: github/codeql-action/autobuild@v2 58 | 59 | # ℹ️ Command-line programs to run using the OS shell. 60 | # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun 61 | 62 | # If the Autobuild fails above, remove it and uncomment the following three lines. 63 | # modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance. 64 | 65 | # - run: | 66 | # echo "Run, Build Application using script" 67 | # ./location_of_script_within_repo/buildscript.sh 68 | 69 | - name: Perform CodeQL Analysis 70 | uses: github/codeql-action/analyze@v2 71 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # compiled output 2 | /dist 3 | /node_modules 4 | /docs/coverage 5 | 6 | # Logs 7 | logs 8 | *.log 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | lerna-debug.log* 13 | 14 | # OS 15 | .DS_Store 16 | 17 | # Tests 18 | /coverage 19 | /.nyc_output 20 | 21 | # IDEs and editors 22 | /.idea 23 | .project 24 | .classpath 25 | .c9/ 26 | *.launch 27 | .settings/ 28 | *.sublime-workspace 29 | 30 | # IDE - VSCode 31 | .vscode/* 32 | !.vscode/settings.json 33 | !.vscode/tasks.json 34 | !.vscode/launch.json 35 | !.vscode/extensions.json -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .idea 2 | src/** 3 | .gitignore 4 | tsconfig-server.json 5 | webpack.config.js 6 | .prettierrc 7 | tsconfig.json 8 | index.ts 9 | .npmignore 10 | !types/** 11 | screenshots -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "always", 3 | "semi": true, 4 | "useTabs": false, 5 | "tabWidth": 4, 6 | "bracketSpacing": true, 7 | "singleQuote": true, 8 | "trailingComma": "none", 9 | "printWidth": 120 10 | } 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2017-2023 Weyoss 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 |

RedisSMQ

3 |

A simple high-performance Redis message queue for Node.js.

4 |
5 | 6 | > **Important Notice** 7 | > 8 | > This repository has been archived and is no longer maintained. The RedisSMQ Monitor functionality has been moved to the main [redis-smq repository](https://github.com/weyoss/redis-smq). Please refer to the main repository for the latest updates and documentation. 9 | > 10 | > **What this means:** 11 | > 12 | > - No further issues or pull requests will be accepted in this repository 13 | > - All future updates and improvements will be made in the main redis-smq repository 14 | > - Please direct all questions and contributions to the main repository 15 | 16 | # RedisSMQ Monitor Client 17 | 18 |

19 | NPM version 20 | Code quality 21 |

22 | 23 | RedisSMQ Monitor Client is a Web UI for the [RedisSMQ Monitor](https://github.com/weyoss/redis-smq-monitor) application. 24 | 25 | From your browser, it allows you to manage RedisSMQ in real-time. The Web UI is shipped with the `redis-smq-monitor` 26 | package. To start using it, you need to install and configure the [RedisSMQ Monitor](https://github.com/weyoss/redis-smq-monitor). 27 | 28 | ![RedisSMQ Monitor Client Screenshot](./screenshots/screenshot-00001.png) 29 | 30 | [More screenshots can be found here](./screenshots). 31 | 32 | ## License 33 | 34 | [MIT](https://github.com/weyoss/redis-smq-monitor-client/blob/master/LICENSE) -------------------------------------------------------------------------------- /global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.css'; 2 | declare module '*.png'; 3 | declare module '*.svg'; 4 | declare const basePath: string; 5 | -------------------------------------------------------------------------------- /index.ts: -------------------------------------------------------------------------------- 1 | export { Middleware } from './src/server/middleware'; 2 | -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weyoss/redis-smq-monitor-client/17f4bbbd280154ef4d258406fad90195583bff2d/logo.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "redis-smq-monitor-client", 3 | "description": "A Web UI for the RedisSMQ Monitor application", 4 | "version": "7.3.1", 5 | "author": "Weyoss ", 6 | "license": "MIT", 7 | "keywords": [ 8 | "redis", 9 | "message queue", 10 | "message-queue", 11 | "message", 12 | "queue", 13 | "job queue", 14 | "job-queue", 15 | "jobs", 16 | "redis-smq", 17 | "priority", 18 | "priority queue", 19 | "priority-queue", 20 | "scheduler", 21 | "broker", 22 | "message broker", 23 | "message-broker" 24 | ], 25 | "repository": { 26 | "type": "git", 27 | "url": "https://github.com/weyoss/redis-smq-monitor-client.git" 28 | }, 29 | "homepage": "https://github.com/weyoss/redis-smq-monitor-client", 30 | "bugs": { 31 | "url": "https://github.com/weyoss/redis-smq-monitor-client/issues" 32 | }, 33 | "main": "dist/index.js", 34 | "types": "dist/index.d.ts", 35 | "scripts": { 36 | "test": "echo \"Error: no test specified\" && exit 1", 37 | "start:dev": "run-p start:server start:webpack", 38 | "start:server": "TS_NODE_PROJECT='tsconfig-server.json' nodemon src/client/tools/start-monitor-server.ts", 39 | "start:webpack": "webpack serve --progress --open --mode development", 40 | "prebuild": "npm run build:clean", 41 | "build": "run-p build:client build:server", 42 | "build:clean": "rimraf ./dist && mkdir ./dist", 43 | "build:client": "NODE_ENV=production webpack --progress", 44 | "build:server": "NODE_ENV=production tsc --project tsconfig-server.json", 45 | "prepublishOnly": "npm run build" 46 | }, 47 | "devDependencies": { 48 | "@babel/core": "7.11.6", 49 | "@types/koa": "2.13.4", 50 | "@types/koa-send": "4.1.3", 51 | "@types/lodash": "4.14.176", 52 | "@types/node": "13.13.21", 53 | "@types/react": "16.14.20", 54 | "@types/react-bootstrap": "0.32.29", 55 | "@types/react-dom": "16.9.14", 56 | "@types/react-redux": "7.1.9", 57 | "@types/react-router": "5.1.8", 58 | "@types/react-router-dom": "5.1.5", 59 | "@types/redux-immutable-state-invariant": "2.1.1", 60 | "axios": "0.24.0", 61 | "babel-loader": "8.2.2", 62 | "bootstrap": "5.1.3", 63 | "clean-webpack-plugin": "4.0.0", 64 | "css-loader": "6.2.0", 65 | "file-loader": "6.2.0", 66 | "formik": "2.2.9", 67 | "html-loader": "2.1.2", 68 | "html-webpack-plugin": "5.3.2", 69 | "lodash": "4.17.21", 70 | "mini-css-extract-plugin": "2.1.0", 71 | "nodemon": "^2.0.20", 72 | "npm-run-all": "4.1.5", 73 | "prettier": "2.1.2", 74 | "query-string": "7.0.1", 75 | "react": "16.14.0", 76 | "react-bootstrap": "2.1.0", 77 | "react-dom": "16.14.0", 78 | "react-hot-loader": "4.12.21", 79 | "react-redux": "7.2.1", 80 | "react-router": "5.2.0", 81 | "react-router-dom": "5.2.0", 82 | "redux": "4.0.5", 83 | "redux-immutable-state-invariant": "2.1.0", 84 | "redux-thunk": "2.3.0", 85 | "rimraf": "3.0.2", 86 | "socket.io-client": "4.5.4", 87 | "string-replace-loader": "3.1.0", 88 | "style-loader": "1.2.1", 89 | "ts-loader": "6.2.2", 90 | "ts-node": "9.0.0", 91 | "typescript": "4.5.2", 92 | "uplot": "1.6.18", 93 | "url-loader": "4.1.0", 94 | "webpack": "5.76.3", 95 | "webpack-cli": "5.0.1", 96 | "webpack-dev-server": "4.13.1" 97 | }, 98 | "dependencies": { 99 | "@types/ejs": "3.1.0", 100 | "ejs": "3.1.7", 101 | "koa": "2.13.1", 102 | "koa-send": "5.0.1" 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /screenshots/README.md: -------------------------------------------------------------------------------- 1 | ![screenshot-00001](screenshot-00001.png) 2 | ![screenshot-00002](screenshot-00002.png) 3 | ![screenshot-00003](screenshot-00003.png) 4 | ![screenshot-00004](screenshot-00004.png) 5 | ![screenshot-00005](screenshot-00005.png) 6 | ![screenshot-00006](screenshot-00006.png) 7 | ![screenshot-00007](screenshot-00007.png) 8 | ![screenshot-00008](screenshot-00008.png) 9 | 10 | -------------------------------------------------------------------------------- /screenshots/screenshot-00001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weyoss/redis-smq-monitor-client/17f4bbbd280154ef4d258406fad90195583bff2d/screenshots/screenshot-00001.png -------------------------------------------------------------------------------- /screenshots/screenshot-00002.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weyoss/redis-smq-monitor-client/17f4bbbd280154ef4d258406fad90195583bff2d/screenshots/screenshot-00002.png -------------------------------------------------------------------------------- /screenshots/screenshot-00003.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weyoss/redis-smq-monitor-client/17f4bbbd280154ef4d258406fad90195583bff2d/screenshots/screenshot-00003.png -------------------------------------------------------------------------------- /screenshots/screenshot-00004.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weyoss/redis-smq-monitor-client/17f4bbbd280154ef4d258406fad90195583bff2d/screenshots/screenshot-00004.png -------------------------------------------------------------------------------- /screenshots/screenshot-00005.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weyoss/redis-smq-monitor-client/17f4bbbd280154ef4d258406fad90195583bff2d/screenshots/screenshot-00005.png -------------------------------------------------------------------------------- /screenshots/screenshot-00006.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weyoss/redis-smq-monitor-client/17f4bbbd280154ef4d258406fad90195583bff2d/screenshots/screenshot-00006.png -------------------------------------------------------------------------------- /screenshots/screenshot-00007.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weyoss/redis-smq-monitor-client/17f4bbbd280154ef4d258406fad90195583bff2d/screenshots/screenshot-00007.png -------------------------------------------------------------------------------- /screenshots/screenshot-00008.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weyoss/redis-smq-monitor-client/17f4bbbd280154ef4d258406fad90195583bff2d/screenshots/screenshot-00008.png -------------------------------------------------------------------------------- /src/client/components/AcknowledgedMessages/AcknowledgedMessages.tsx: -------------------------------------------------------------------------------- 1 | import { RouteComponentProps, withRouter } from 'react-router'; 2 | import React, { useCallback } from 'react'; 3 | import QueueMessages from '../common/Messages/Messages'; 4 | import { 5 | requeueAcknowledgedMessage, 6 | purgeAcknowledgedMessages, 7 | deleteQueueAcknowledgedMessage, 8 | getQueueAcknowledgedMessages 9 | } from '../../transport/http/api'; 10 | import { IQueueRouteParams } from '../../routes/routes/queue'; 11 | 12 | const AcknowledgedMessages: React.FC> = (props) => { 13 | const { namespace, queueName } = props.match.params; 14 | const FetchQueueMessagesRequestFactory = useCallback((skip: number, take: number) => { 15 | return () => getQueueAcknowledgedMessages(namespace, queueName, skip, take); 16 | }, []); 17 | const DeleteQueueMessageRequestFactory = useCallback((messageId: string, sequenceId: number) => { 18 | return () => deleteQueueAcknowledgedMessage(namespace, queueName, messageId, sequenceId); 19 | }, []); 20 | const RequeueQueueMessageRequestFactory = useCallback((messageId: string, sequenceId: number) => { 21 | return () => requeueAcknowledgedMessage(namespace, queueName, messageId, sequenceId); 22 | }, []); 23 | const deleteMessagesRequestCallback = useCallback(() => purgeAcknowledgedMessages(namespace, queueName), []); 24 | return ( 25 | <> 26 |

27 | {queueName}@{namespace} / Acknowledged messages 28 |

29 | 35 | 36 | ); 37 | }; 38 | 39 | export default withRouter(AcknowledgedMessages); 40 | -------------------------------------------------------------------------------- /src/client/components/App/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import { Socket } from 'socket.io-client'; 3 | import AppPage from './AppPage'; 4 | import Websocket from '../../transport/websocket/websocket'; 5 | import { useDispatch } from 'react-redux'; 6 | import { IStoreState } from '../../store/state'; 7 | import useSelector from '../../hooks/useSelector'; 8 | import { INotificationsState } from '../../store/notifications/state'; 9 | import { EWebsocketMainStreamStatus, IWebsocketMainStreamState } from '../../store/websocket-main-stream/state'; 10 | import { setLoadingAction, setPayloadAction } from '../../store/websocket-main-stream/action'; 11 | import { TWebsocketMainStreamPayload } from '../../transport/websocket/streams/mainStream'; 12 | 13 | const App = () => { 14 | const websocketMainStreamState = useSelector( 15 | (state) => state.websocketMainStream 16 | ); 17 | const notificationsState = useSelector((state) => state.notifications); 18 | const dispatch = useDispatch(); 19 | useEffect(() => { 20 | if (websocketMainStreamState.status === EWebsocketMainStreamStatus.INIT) { 21 | dispatch(setLoadingAction()); 22 | Websocket() 23 | .then((socket: Socket) => { 24 | socket.on('streamMain', (payload: TWebsocketMainStreamPayload) => { 25 | dispatch(setPayloadAction(payload)); 26 | }); 27 | }) 28 | .catch((e: Error) => { 29 | throw e; 30 | }); 31 | } 32 | }, []); 33 | return ; 34 | }; 35 | 36 | export default App; 37 | -------------------------------------------------------------------------------- /src/client/components/App/AppPage.tsx: -------------------------------------------------------------------------------- 1 | import 'bootstrap/dist/css/bootstrap.min.css'; 2 | import './style.css'; 3 | 4 | import React from 'react'; 5 | import Footer from '../common/Footer/Footer'; 6 | import Routes from '../../routes'; 7 | import { BrowserRouter } from 'react-router-dom'; 8 | import { Spinner } from 'react-bootstrap'; 9 | import { INotificationsState } from '../../store/notifications/state'; 10 | import Notification from '../common/Notification'; 11 | import { EWebsocketMainStreamStatus, IWebsocketMainStreamState } from '../../store/websocket-main-stream/state'; 12 | import LeftPanel from '../LeftPanel/LeftPanel'; 13 | 14 | interface IProps { 15 | websocketMainStreamState: IWebsocketMainStreamState; 16 | notificationsState: INotificationsState; 17 | } 18 | 19 | const Page: React.FC = (props) => { 20 | const { websocketMainStreamState, notificationsState } = props; 21 | const { status } = websocketMainStreamState; 22 | if (status === EWebsocketMainStreamStatus.INIT) { 23 | return ( 24 | <> 25 | Initializing... 26 | 27 | 28 | ); 29 | } 30 | if (status === EWebsocketMainStreamStatus.LOADING) { 31 | return ( 32 | <> 33 | Waiting for upstream data... 34 | 35 | 36 | ); 37 | } 38 | return ( 39 | <> 40 | 41 |
42 | 43 |
44 | 45 |
46 |
47 |