├── .eslintrc
├── bin
    └── nats-monitor
├── public
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── src
    ├── img
    │   ├── nats-logo.png
    │   └── kuali-logo.svg
    ├── index.scss
    ├── App.scss
    ├── _globals.scss
    ├── App.test.js
    ├── api
    │   ├── web-socket.js
    │   ├── server-config.js
    │   └── nats-streaming.js
    ├── index.js
    ├── NotFound.js
    ├── components
    │   ├── footer.js
    │   ├── number-dash-widget.js
    │   ├── nav-item-link.js
    │   ├── store-view.js
    │   ├── chart-dash-widget.js
    │   ├── style.scss
    │   ├── home-view.js
    │   ├── server-view.js
    │   ├── channel-view.js
    │   └── client-view.js
    ├── utilities
    │   └── data-transformer.js
    ├── logo.svg
    ├── App.js
    └── registerServiceWorker.js
├── .npmignore
├── Dockerfile
├── server
    ├── proxy-proxy.js
    ├── nats-ss.js
    ├── routes
    │   ├── server.js
    │   └── channel-message.js
    ├── index.js
    └── events
    │   └── nats-to-socketio.js
├── .gitignore
├── README.md
└── package.json


/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "react-app"
3 | }
4 | 


--------------------------------------------------------------------------------
/bin/nats-monitor:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | 
3 | require('../server')
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zen/nats-streaming-console/master/public/favicon.ico


--------------------------------------------------------------------------------
/src/img/nats-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zen/nats-streaming-console/master/src/img/nats-logo.png


--------------------------------------------------------------------------------
/src/index.scss:
--------------------------------------------------------------------------------
1 | @import 'globals';
2 | 
3 | body {
4 |   margin: 0;
5 |   padding: 0;
6 |   font-family: sans-serif;
7 | }
8 | 


--------------------------------------------------------------------------------
/src/App.scss:
--------------------------------------------------------------------------------
 1 | .navbar {
 2 | 
 3 | }
 4 | 
 5 | .navbar-item {
 6 |   display: block;
 7 |   float: left;
 8 |   text-decoration: none;
 9 |   width: 200px;
10 | }


--------------------------------------------------------------------------------
/src/_globals.scss:
--------------------------------------------------------------------------------
1 | @import 'react-md/src/scss/react-md';
2 | 
3 | $md-light-theme: false;
4 | $md-primary-color: $md-light-blue-500;
5 | $md-secondary-color: $md-deep-orange-a-200;
6 | 
7 | @include react-md-everything;
8 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import App from './App'
4 | 
5 | it('renders without crashing', () => {
6 |   const div = document.createElement('div')
7 |   ReactDOM.render(<App />, div)
8 | })
9 | 


--------------------------------------------------------------------------------
/src/api/web-socket.js:
--------------------------------------------------------------------------------
1 | import openSocket from 'socket.io-client'
2 | const socket = openSocket('/')
3 | 
4 | export const subscribeToChannel = (channel, opts, cb) => {
5 |   socket.on(channel, message => cb(message))
6 |   socket.emit('subscribe-to-channel', { channel, opts })
7 | }
8 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | src
 2 | examples
 3 | coverage
 4 | docs
 5 | *.jpg
 6 | *.png
 7 | *.log
 8 | CONTRIBUTING.md
 9 | ISSUE_TEMPLATE.md
10 | PULL_REQUEST_TEMPLATE.md
11 | tslint.json
12 | .circle
13 | .gitignore
14 | .vscode
15 | .publishrc
16 | .rpt2_cache
17 | 
18 | jest.config.js
19 | tsconfig.json
20 | tslint.json
21 | prettier.config.js
22 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM node:8-alpine
 2 | 
 3 | ENV CODE /usr/src/app
 4 | WORKDIR $CODE
 5 | 
 6 | RUN mkdir -p $CODE
 7 | COPY package.json $CODE
 8 | COPY yarn.lock $CODE
 9 | RUN yarn
10 | 
11 | ADD public $CODE/public
12 | ADD server $CODE/server
13 | ADD src $CODE/src
14 | 
15 | RUN yarn build-css
16 | RUN yarn build
17 | 
18 | EXPOSE 8282
19 | CMD ["node", "server"]
20 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/server/proxy-proxy.js:
--------------------------------------------------------------------------------
 1 | const proxy = require('http-proxy-middleware')
 2 | const { options } = require('./nats-ss')
 3 | 
 4 | const proxies = {}
 5 | 
 6 | exports.proxy = (req, res, next) => {
 7 |   if (!proxies[options.monitor]) {
 8 |     proxies[options.monitor] = proxy('/streaming', {
 9 |       target: options.monitor,
10 |       ws: true,
11 |     })
12 |   }
13 |   proxies[options.monitor](req, res, next)
14 | }
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 
23 | # build artifacts
24 | src/**/*.css
25 | .vscode
26 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { render } from 'react-dom'
 3 | import { BrowserRouter } from 'react-router-dom'
 4 | import './index.css'
 5 | import App from './App'
 6 | import registerServiceWorker from './registerServiceWorker'
 7 | import WebFontLoader from 'webfontloader'
 8 | 
 9 | WebFontLoader.load({
10 |   google: {
11 |     families: ['Roboto:300,400,500,700', 'Material Icons'],
12 |   },
13 | })
14 | 
15 | render(
16 |   <BrowserRouter>
17 |     <App />
18 |   </BrowserRouter>,
19 |   document.getElementById('root'),
20 | )
21 | registerServiceWorker()
22 | 


--------------------------------------------------------------------------------
/src/NotFound.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import classnames from 'classnames'
 4 | 
 5 | import './style.css'
 6 | 
 7 | export default class NotFound extends Component {
 8 |   // static propTypes = {}
 9 |   // static defaultProps = {}
10 |   // state = {}
11 | 
12 |   render() {
13 |     const { className, ...props } = this.props
14 |     return (
15 |       <div className={classnames('NotFound', className)} {...props}>
16 |         <h1>
17 |           404 <small>Not Found :(</small>
18 |         </h1>
19 |       </div>
20 |     )
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/server/nats-ss.js:
--------------------------------------------------------------------------------
 1 | const { getInstance: getNerveInstance } = require('nats-nerve')
 2 | 
 3 | const defaults = {
 4 |   server: process.env.STAN_URL || 'nats://localhost:4222',
 5 |   monitor: process.env.STAN_MONITOR_URL || 'http://localhost:8222',
 6 |   cluster: process.env.STAN_CLUSTER || 'test-cluster',
 7 |   appName: 'nats-streaming-console',
 8 | }
 9 | 
10 | exports.options = Object.assign({}, defaults)
11 | console.log({ options: exports.options })
12 | 
13 | exports.getNerveInstance = async () => {
14 |   const { server, cluster, appName } = exports.options
15 |   return getNerveInstance(server, cluster, appName)
16 | }
17 | 


--------------------------------------------------------------------------------
/src/api/server-config.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | 
 3 | // export const config = {
 4 | //   host: 'localhost',
 5 | //   port: '4222',
 6 | //   monitoringPort: '8222'
 7 | // }
 8 | 
 9 | export async function getServerConfig() {
10 |   return axios({
11 |     method: 'get',
12 |     url: '/api/server',
13 |     headers: { 'Content-Type': 'application/json' },
14 |   }).then(resp => resp.data)
15 | }
16 | 
17 | export async function updateServerConfig(data) {
18 |   return axios({
19 |     method: 'post',
20 |     url: '/api/server',
21 |     headers: { 'Content-Type': 'application/json' },
22 |     data,
23 |   }).then(resp => resp.data)
24 | }
25 | 


--------------------------------------------------------------------------------
/src/components/footer.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import logo from '../img/kuali-logo.svg'
 4 | import './style.css'
 5 | 
 6 | export default class NumberWidget extends Component {
 7 |   render() {
 8 |     const { number, text, title } = this.props
 9 |     return (
10 |       <div className="dashboard-footer">
11 |         <a
12 |           href="http://kuali.co"
13 |           style={{ display: 'block', color: 'white', textDecoration: 'none' }}
14 |           target="_blank"
15 |         >
16 |           Sponsored by <img style={{ width: 60, position: 'relative', top: 3 }} src={logo} />
17 |         </a>
18 |       </div>
19 |     )
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/src/components/number-dash-widget.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import { Toolbar } from 'react-md'
 4 | 
 5 | import './style.css'
 6 | 
 7 | export default class NumberWidget extends Component {
 8 |   static propTypes = {
 9 |     number: PropTypes.number.isRequired,
10 |     text: PropTypes.string,
11 |     title: PropTypes.string,
12 |   }
13 | 
14 |   render() {
15 |     const { number, text, title } = this.props
16 |     return (
17 |       <div className="dashboard-widget-one-by-one">
18 |         <Toolbar title={title} themed />
19 |         <div className="dashboard-widget-content">
20 |           <span className="number">{number}</span>
21 |           <span className="text">{text}</span>
22 |         </div>
23 |       </div>
24 |     )
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/server/routes/server.js:
--------------------------------------------------------------------------------
 1 | const axios = require('axios')
 2 | const { getNerveInstance, options } = require('../nats-ss')
 3 | 
 4 | exports.getServerOptions = async (req, res) => {
 5 |   if (options.server.split('@').length > 1) {
 6 |     options.server = `nats://${options.server.split('@')[1]}`
 7 |   }
 8 |   res.status(200).send(options)
 9 | }
10 | 
11 | exports.setServerOptions = async (req, res) => {
12 |   const { host, port, monitoringPort } = req.body
13 |   try {
14 |     const resp = await axios({
15 |       method: 'get',
16 |       baseURL: `http://${host}:${monitoringPort}/`,
17 |       url: '/streaming/serverz',
18 |       headers: { Accept: 'application/json' },
19 |       proxy: false,
20 |     })
21 |     updateOptions(resp.data, host, port, monitoringPort)
22 |     res.status(200).send({ options, data: resp.data })
23 |   } catch (err) {
24 |     console.log({ err })
25 |     res.status(500).send({ status: 'error' })
26 |   }
27 | }
28 | 
29 | function updateOptions(data, host, port, monitoringPort) {
30 |   ;(options.server = `nats://${host}:${port}`),
31 |     (options.monitor = `http://${host}:${monitoringPort}`),
32 |     (options.cluster = data.cluster_id)
33 | }
34 | 


--------------------------------------------------------------------------------
/server/routes/channel-message.js:
--------------------------------------------------------------------------------
 1 | const Promise = require('bluebird')
 2 | const { getNerveInstance } = require('../nats-ss')
 3 | 
 4 | exports.channelMessageList = async (req, res) => {
 5 |   try {
 6 |     const { channel } = req.params
 7 |     const nerve = await getNerveInstance()
 8 |     const opts = { startAtSequence: 10 }
 9 |     let count = 0
10 |     const messages = []
11 |     const disposer = getNerveSubscription(nerve, channel, opts, msg => {
12 |       messages.push({
13 |         sequence: msg.getSequence(),
14 |         timestamp: msg.getTimestamp(),
15 |         subject: msg.getSubject(),
16 |         data: msg.getData(),
17 |       })
18 |     })
19 |     Promise.using(disposer, async subscription => {
20 |       await Promise.delay(1000)
21 |       res.send(messages)
22 |     })
23 |   } catch (err) {
24 |     console.log({ err })
25 |     res.status(500).send(err)
26 |   }
27 | }
28 | 
29 | function getNerveSubscription(nerve, channel, opts, fn) {
30 |   return Promise.resolve(nerve.subscribe(channel, opts, fn)).disposer(subscription => {
31 |     return new Promise((resolve, reject) => {
32 |       subscription.unsubscribe()
33 |       subscription.on('unsubscribed', () => {
34 |         resolve()
35 |       })
36 |     })
37 |   })
38 | }
39 | 


--------------------------------------------------------------------------------
/src/components/nav-item-link.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import { Link, Route } from 'react-router-dom'
 4 | import { FontIcon, ListItem } from 'react-md'
 5 | 
 6 | /**
 7 |  * Due to the fact that react-router uses context and most of the components
 8 |  * in react-md use PureComponent, the matching won't work as expected since
 9 |  * the PureComponent will block the context updates. This is a simple wrapper
10 |  * with Route to make sure that the active state is correctly applied after
11 |  * an item has been clicked.
12 |  */
13 | const NavItemLink = ({ label, to, icon, exact }) => (
14 |   <Route path={to} exact={exact}>
15 |     {({ match }) => {
16 |       let leftIcon
17 |       if (icon) {
18 |         leftIcon = <FontIcon>{icon}</FontIcon>
19 |       }
20 | 
21 |       return (
22 |         <ListItem
23 |           component={Link}
24 |           active={!!match}
25 |           to={to}
26 |           primaryText={label}
27 |           leftIcon={leftIcon}
28 |         />
29 |       )
30 |     }}
31 |   </Route>
32 | )
33 | 
34 | NavItemLink.propTypes = {
35 |   label: PropTypes.string.isRequired,
36 |   to: PropTypes.string,
37 |   exact: PropTypes.bool,
38 |   icon: PropTypes.node,
39 | }
40 | export default NavItemLink
41 | 


--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
 1 | const _http = require('http')
 2 | const path = require('path')
 3 | const express = require('express')
 4 | const bodyParser = require('body-parser')
 5 | const socketio = require('socket.io')
 6 | const { proxy } = require('./proxy-proxy')
 7 | const { getServerOptions, setServerOptions } = require('./routes/server')
 8 | const { channelMessageList } = require('./routes/channel-message')
 9 | const { Bridge } = require('./events/nats-to-socketio')
10 | require('./nats-ss')
11 | 
12 | // SETUP APPLICATION SERVER
13 | const app = express()
14 | const http = _http.Server(app)
15 | app.use(express.static(path.join(__dirname, '../build')))
16 | app.use('/streaming', proxy)
17 | app.get('/api/server', getServerOptions)
18 | app.post('/api/server', bodyParser.json(), setServerOptions)
19 | app.get('/api/channel/:channel/message', channelMessageList)
20 | app.get('*', (req, res) => {
21 |   res.status(404).send('Not here.')
22 | })
23 | 
24 | // SETUP WEB SOCKETS
25 | const io = socketio(http)
26 | io.on('connection', client => {
27 |   const clientMessageBridge = new Bridge(client)
28 |   client.on('subscribe-to-channel', data => {
29 |     clientMessageBridge.subscribeToChannel(data)
30 |   })
31 |   client.on('unsubscribe-from-channel', data => {
32 |     clientMessageBridge.unsubscribeFromChannel(data)
33 |   })
34 | })
35 | 
36 | // START SERVER
37 | const server = http.listen(8282, () => {
38 |   var host = server.address().address
39 |   var port = server.address().port
40 |   console.log(`Example app listening at http://${host}:${port}`)
41 | })
42 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>React App</title>
23 |   </head>
24 |   <body>
25 |     <noscript>
26 |       You need to enable JavaScript to run this app.
27 |     </noscript>
28 |     <div id="root"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/server/events/nats-to-socketio.js:
--------------------------------------------------------------------------------
 1 | const Promise = require('bluebird')
 2 | const { getNerveInstance } = require('../nats-ss')
 3 | 
 4 | exports.Bridge = class Bridge {
 5 |   constructor(client) {
 6 |     this.client = client
 7 |     this.subscriptions = {}
 8 |   }
 9 | 
10 |   async subscribeToChannel(data) {
11 |     console.log({ data })
12 |     const { channel, opts } = data
13 |     console.log({ channel, opts })
14 |     try {
15 |       const nerve = await getNerveInstance()
16 |       const subscription = nerve.subscribe(channel, opts, msg => {
17 |         const message = {
18 |           sequence: msg.getSequence(),
19 |           timestamp: msg.getTimestamp(),
20 |           subject: msg.getSubject(),
21 |           data: msg.getData(),
22 |         }
23 |         console.log({ channel, message })
24 |         this.client.emit(channel, message)
25 |       })
26 |       this.subscriptions[channel] = { nerve, subscription }
27 |       console.log({ subscriptions: this.subscriptions })
28 |     } catch (err) {
29 |       console.log('MEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEME')
30 |       console.log(err)
31 |       console.log('MEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEMEME')
32 |     }
33 |   }
34 | 
35 |   async unsubscribeFromChannel(channel) {
36 |     console.log('UNSUBSCRIBE ===============================================>')
37 |     console.log({ channel })
38 |     const { subscription } = this.subscriptions[channel]
39 |     return new Promise((resolve, reject) => {
40 |       subscription.unsubscribe()
41 |       subscription.on('unsubscribed', () => {
42 |         resolve()
43 |       })
44 |     })
45 |   }
46 | 
47 |   async unsubscribeAll() {
48 |     const promises = this.subscriptions.map((sub, channel) => {
49 |       this.unsubscribeFromChannel(channel)
50 |     })
51 |     return Promise.all(promises)
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nats Monitor
 2 | 
 3 | A web console for Nats Streaming Server.
 4 | 
 5 | This repository is forked from [nats-streaming-console](https://github.com/KualiCo/nats-streaming-console).
 6 | 
 7 | # Install
 8 | 
 9 | ```
10 | npm -g install nats-monitor
11 | 
12 | nats-monitor
13 | ```
14 | 
15 | For other installation method, please read the below.
16 | 
17 | ## Dashboard
18 | 
19 | <img src="https://s3-us-west-2.amazonaws.com/co.kuali.docs/nsc-ss-home.png" width="512" height="384" />
20 | 
21 | ## Clients
22 | 
23 | <img src="https://s3-us-west-2.amazonaws.com/co.kuali.docs/nsc-ss-clients.png" width="512" height="384" />
24 | 
25 | ## Channels
26 | 
27 | <img src="https://s3-us-west-2.amazonaws.com/co.kuali.docs/nsc-ss-channels.png" width="512" height="384" />
28 | 
29 | ## Server
30 | 
31 | <img src="https://s3-us-west-2.amazonaws.com/co.kuali.docs/nsc-ss-server.png" width="512" height="384" />
32 | 
33 | ## Store
34 | 
35 | <img src="https://s3-us-west-2.amazonaws.com/co.kuali.docs/nsc-ss-store.png" width="512" height="384" />
36 | 
37 | # Configuration
38 | 
39 | ```
40 | env STAN_URL=nats://127.0.0.1:4222 STAN_MONITOR_URL=http://127.0.0.1:8222 STAN_CLUSTER=my-cluster nats-monitor
41 | 
42 | ```
43 | 
44 | # Usage
45 | 
46 | There are four ways other than npm to use Nats Monitor:
47 | 
48 | ## Docker
49 | 
50 | The docker image is available from dockerhub
51 | [https://hub.docker.com/r/mozgoo/nats-streaming-console](https://hub.docker.com/r/mozgoo/nats-streaming-console)
52 | 
53 | ## Electron App
54 | 
55 | Coming soon
56 | 
57 | ## Checkout and run the Codes!
58 | 
59 | If you just want to build and run it. That is pretty easy too. You will need git and nodejs.
60 | 
61 | ```sh
62 | git clone https://github.com/KualiCo/nats-streaming-console.git
63 | cd nats-streaming-console
64 | yarn install
65 | yarn start
66 | ```
67 | 
68 | Good luck. Let me know if something goes wrong.
69 | 


--------------------------------------------------------------------------------
/src/utilities/data-transformer.js:
--------------------------------------------------------------------------------
 1 | import { timeParse, ascending } from 'd3'
 2 | 
 3 | const parseDate = timeParse('%m/%d/%Y')
 4 | 
 5 | function flattenData(data) {
 6 |   let flattenedData = []
 7 |   let keys = []
 8 |   data.forEach(function(dataArray) {
 9 |     dataArray.forEach(function(row) {
10 |       if (keys.indexOf(row.name) < 0) {
11 |         keys.push(row.name)
12 |       }
13 |       let thisDate = row.date
14 |       row.date = parseDate(row.date)
15 |       let metricName = row.name
16 |       row[metricName] = +row.count
17 |       delete row.name
18 |       delete row.count
19 |     })
20 |     flattenedData = flattenedData.concat(dataArray)
21 |   })
22 |   return {
23 |     data: flattenedData,
24 |     keys: keys,
25 |   }
26 | }
27 | 
28 | function combineData(data) {
29 |   let combinedData = []
30 |   data.forEach(function(row) {
31 |     let thisDate = row.date
32 |     let index = combinedData.findIndex(x => +x.date === +thisDate)
33 |     if (index > 0) {
34 |       combinedData[index] = Object.assign(combinedData[index], row)
35 |     } else {
36 |       combinedData.push(row)
37 |     }
38 |   })
39 |   return combinedData
40 | }
41 | 
42 | function fillZeros(data, keys) {
43 |   data.forEach(function(row) {
44 |     keys.forEach(function(key) {
45 |       if (!row[key]) {
46 |         row[key] = 0
47 |       }
48 |     })
49 |   })
50 |   return data
51 | }
52 | 
53 | function sortData(data) {
54 |   data.sort(function(x, y) {
55 |     return ascending(x.date, y.date)
56 |   })
57 |   return data
58 | }
59 | 
60 | function roundDate(date) {
61 |   if (date && date.setHours) {
62 |     date.setHours(0)
63 |     date.setMinutes(0)
64 |     date.setSeconds(0)
65 |     date.setMilliseconds(0)
66 |     return date
67 |   }
68 | }
69 | 
70 | function findValue(data, date, metric) {
71 |   let myVal
72 |   data.forEach(function(row) {
73 |     if (+row.data.date == +date) {
74 |       myVal = row.data[metric]
75 |     }
76 |   })
77 |   return myVal
78 | }
79 | 
80 | export { flattenData, combineData, fillZeros, sortData, roundDate, findValue }
81 | 


--------------------------------------------------------------------------------
/src/components/store-view.js:
--------------------------------------------------------------------------------
 1 | import { isString } from 'lodash'
 2 | import React, { Component } from 'react'
 3 | import PropTypes from 'prop-types'
 4 | import classnames from 'classnames'
 5 | import { getStores } from '../api/nats-streaming'
 6 | import { DataTable, TableHeader, TableBody, TableRow, TableColumn } from 'react-md'
 7 | 
 8 | import './style.css'
 9 | 
10 | export default class Stores extends Component {
11 |   // static propTypes = {}
12 |   // static defaultProps = {}
13 |   constructor(props) {
14 |     super(props)
15 | 
16 |     this.state = {
17 |       stores: undefined,
18 |     }
19 |   }
20 | 
21 |   componentDidMount = async () => {
22 |     const stores = await getStores()
23 |     this.setState({ stores: Object.entries(stores) })
24 |   }
25 | 
26 |   toTable = obj => {
27 |     const array = Object.entries(obj)
28 |     return (
29 |       <DataTable plain>
30 |         <TableHeader>
31 |           <TableRow>
32 |             <TableColumn>Key</TableColumn>
33 |             <TableColumn>Value</TableColumn>
34 |           </TableRow>
35 |         </TableHeader>
36 |         <TableBody>
37 |           {array &&
38 |             array.map(tuple => (
39 |               <TableRow key={tuple[0]}>
40 |                 <TableColumn>{tuple[0]}</TableColumn>
41 |                 <TableColumn>{isString ? tuple[1] : this.toTable(tuple[1])}</TableColumn>
42 |               </TableRow>
43 |             ))}
44 |         </TableBody>
45 |       </DataTable>
46 |     )
47 |   }
48 | 
49 |   render() {
50 |     const { stores } = this.state
51 |     return (
52 |       <DataTable plain>
53 |         <TableHeader>
54 |           <TableRow>
55 |             <TableColumn>Key</TableColumn>
56 |             <TableColumn>Value</TableColumn>
57 |           </TableRow>
58 |         </TableHeader>
59 |         <TableBody>
60 |           {stores &&
61 |             stores.map(tuple => (
62 |               <TableRow key={tuple[0]}>
63 |                 <TableColumn>{tuple[0]}</TableColumn>
64 |                 <TableColumn>{isString(tuple[1]) ? tuple[1] : this.toTable(tuple[1])}</TableColumn>
65 |               </TableRow>
66 |             ))}
67 |         </TableBody>
68 |       </DataTable>
69 |     )
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/src/components/chart-dash-widget.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import { Toolbar } from 'react-md'
 4 | import { Area, AreaChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts'
 5 | 
 6 | import './style.css'
 7 | 
 8 | export default class ChartWidget extends Component {
 9 |   static propTypes = {
10 |     data: PropTypes.any.isRequired,
11 |     title: PropTypes.string,
12 |   }
13 | 
14 |   getClientDimensions = () => {
15 |     const w = window
16 |     const d = document
17 |     const e = d.documentElement
18 |     const g = d.getElementsByTagName('body')[0]
19 |     const width = w.innerWidth || e.clientWidth || g.clientWidth
20 |     const height = w.innerHeight || e.clientHeight || g.clientHeight
21 |     return { width, height }
22 |   }
23 | 
24 |   render() {
25 |     const { data, title } = this.props
26 |     const { width, height } = this.getClientDimensions()
27 |     console.log({ width, height })
28 |     return (
29 |       <div className="dashboard-widget-four-by-one">
30 |         <Toolbar title={title} themed />
31 |         <AreaChart
32 |           width={width - 100}
33 |           height={260}
34 |           data={data}
35 |           margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
36 |         >
37 |           <defs>
38 |             <linearGradient id="colorNewMsgs" x1="0" y1="0" x2="0" y2="1">
39 |               <stop offset="5%" stopColor="#00acf1" stopOpacity={0.8} />
40 |               <stop offset="95%" stopColor="#00acf1" stopOpacity={0} />
41 |             </linearGradient>
42 |           </defs>
43 |           <XAxis dataKey="name" />
44 |           <YAxis />
45 |           <CartesianGrid strokeDasharray="3 3" />
46 |           <Tooltip
47 |             wrapperStyle={{
48 |               backgroundColor: 'rgba(255, 255, 255, .1)',
49 |               border: 'none',
50 |               borderRadius: '2px',
51 |             }}
52 |           />
53 |           <Area
54 |             type="monotone"
55 |             dataKey="newMsgs"
56 |             stroke="#00acf1"
57 |             fillOpacity={1}
58 |             fill="url(#colorNewMsgs)"
59 |           />
60 |         </AreaChart>
61 |       </div>
62 |     )
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nats-monitor",
 3 |   "version": "1.0.7",
 4 |   "author": [
 5 |     "kuali",
 6 |     "acro5piano"
 7 |   ],
 8 |   "license": "MIT",
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/acro5piano/nats-streaming-console.git"
12 |   },
13 |   "bugs": {
14 |     "url": "https://github.com/acro5piano/nats-streaming-console/issues"
15 |   },
16 |   "bin": {
17 |     "nats-monitor": "./bin/nats-monitor"
18 |   },
19 |   "scripts": {
20 |     "prepublish": "yarn build",
21 |     "build": "npm-run-all -p build:*",
22 |     "build:css": "node-sass-chokidar --include-path ./node_modules src/ -o src/",
23 |     "watch:css": "npm run build:css -- --watch --recursive",
24 |     "start": "npm-run-all -p server watch:css start:react",
25 |     "start:react": "react-scripts start",
26 |     "build:react": "react-scripts build",
27 |     "test": "react-scripts test --env=jsdom",
28 |     "eject": "react-scripts eject",
29 |     "server": "node server",
30 |     "lint": "eslint --fix {src,server}/**/*.{js,jsx}",
31 |     "format": "prettier --write {src,server}/**/*.{js,jsx} README.md"
32 |   },
33 |   "proxy": "http://localhost:8282",
34 |   "dependencies": {
35 |     "axios": "0.17.1",
36 |     "bluebird": "3.5.1",
37 |     "body-parser": "1.18.2",
38 |     "express": "4.16.2",
39 |     "http-proxy-middleware": "0.17.4",
40 |     "nats-nerve": "1.0.3",
41 |     "socket.io": "2.0.4"
42 |   },
43 |   "devDependencies": {
44 |     "classnames": "2.2.5",
45 |     "husky": "^3.0.0",
46 |     "lint-staged": "^9.0.1",
47 |     "lodash": "4.17.4",
48 |     "node-sass-chokidar": "0.0.3",
49 |     "npm-run-all": "4.1.2",
50 |     "prettier": "^1.18.2",
51 |     "prop-types": "15.6.0",
52 |     "react": "16.2.0",
53 |     "react-dom": "16.2.0",
54 |     "react-json-tree": "0.11.0",
55 |     "react-md": "1.2.11",
56 |     "react-router": "4.2.0",
57 |     "react-router-dom": "4.2.2",
58 |     "react-scripts": "1.1.0",
59 |     "recharts": "1.0.0-beta.9",
60 |     "socket.io-client": "2.0.4",
61 |     "webfontloader": "1.6.28"
62 |   },
63 |   "husky": {
64 |     "hooks": {
65 |       "pre-commit": "lint-staged"
66 |     }
67 |   },
68 |   "lint-staged": {
69 |     "*.{js,ts,tsx}": [
70 |       "eslint --fix",
71 |       "prettier --write",
72 |       "git add"
73 |     ]
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/src/img/kuali-logo.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="brand-logo__title" class="brand-logo" role="img" style="max-width: 400px;" viewBox="0 0 72 26">
 2 |     <defs>
 3 |         <style>
 4 |             .kuali-green{ fill:#00b586; }
 5 |         </style>
 6 |     </defs>
 7 |     <title id="brand-logo__title">
 8 |         Kuali
 9 |     </title>
10 |     <path d="M30.2404698,17.4619476 L30.2404698,8.1533101 L35.9412734,8.1533101 L35.9412734,25.2521548 L30.2404698,25.2521548 L30.2404698,24.0638181 C30.2404698,24.0638181 28.7988873,25.6152577 25.194931,25.6152577 C21.5909747,25.6152577 18.2491243,22.281313 18.2491243,18.3862094 L18.2491243,8.1533101 L23.9826911,8.1533101 L23.9826911,17.4619476 C23.9826911,19.4425087 25.5553266,20.4657986 27.0624356,20.4657986 C28.5695446,20.4657986 30.2404698,19.4425087 30.2404698,17.4619476 Z M57.9581702,3.23491656 L63.6589738,3.23491656 L63.6589738,25.2521548 L57.9581702,25.2521548 L57.9581702,3.23491656 Z M65.7558211,8.1533101 L71.4566248,8.1533101 L71.4566248,25.2191454 L65.7558211,25.2191454 L65.7558211,8.1533101 Z M68.6389862,6.46983312 C66.8657117,6.46983312 65.4281887,5.02151164 65.4281887,3.23491656 C65.4281887,1.44832148 66.8657117,0 68.6389862,0 C70.4122607,0 71.8497836,1.44832148 71.8497836,3.23491656 C71.8497836,5.02151164 70.4122607,6.46983312 68.6389862,6.46983312 Z M50.1605193,9.40766551 L50.1605193,8.1533101 L55.8613229,8.1533101 L55.8613229,25.2521548 L50.1605193,25.2521548 L50.1605193,24.2618742 C47.2773542,26.0773886 43.6406347,26.0773886 40.7902328,24.2618742 C36.7275912,21.6541353 35.5153513,16.2075922 38.1036472,12.1144324 C40.6919431,8.02127269 46.0978776,6.79992665 50.1605193,9.40766551 Z M50.4881517,17.3299101 C50.5536781,16.9998166 50.5536781,16.6367137 50.4881517,16.3066202 C50.2260457,14.0619842 48.1947249,12.4775353 45.9668246,12.7746195 C44.1648465,13.0056849 42.723264,14.4580965 42.4939213,16.2736109 C42.1990521,18.4852375 43.7716876,20.5318173 45.9668246,20.8289015 C48.1619617,21.1259857 50.1932825,19.5415368 50.4881517,17.3299101 Z M17.4628065,8.1533101 L12.6138471,14.1610123 L19.4941273,25.2521548 L13.0397692,25.2521548 L8.97712755,18.6832936 L5.70080363,22.7104346 L5.70080363,25.2521548 L0,25.2521548 L0,3.26792591 L5.70080363,3.26792591 L5.70080363,13.8309188 L10.2876571,8.1533101 L17.4628065,8.1533101 Z" class="kuali-green"/>
11 | </svg>


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/src/components/style.scss:
--------------------------------------------------------------------------------
  1 | @import '../globals';
  2 | 
  3 | body {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   font-family: sans-serif;
  7 | }
  8 | 
  9 | .view {
 10 |   display: flex;
 11 |   flex-wrap: wrap;
 12 |   justify-content: space-around;
 13 | }
 14 | 
 15 | .column-view {
 16 |   display: flex;
 17 |   flex-wrap: nowrap;
 18 |   justify-content: left;
 19 | }
 20 | 
 21 | .menu-wrapper {
 22 |   background-color: get-color('card', $md-light-theme);
 23 |   margin: 0 7px 0 0;
 24 | }
 25 | 
 26 | .menu-list {
 27 |   min-width: 400px;
 28 | }
 29 | 
 30 | .menu-input {
 31 |   padding: 0 7px;
 32 | }
 33 | 
 34 | .menu-input button {
 35 |   margin-top: -13px;
 36 | }
 37 | 
 38 | .dashboard-widget-one-by-one {
 39 |   background-color: get-color('card', $md-light-theme);
 40 |   display: flex;
 41 |   flex-basis: 20%;
 42 |   flex-direction: column;
 43 |   flex-grow: 1;
 44 |   min-height: 220px;
 45 |   min-width: 220px;
 46 |   margin: 4px;
 47 | }
 48 | 
 49 | .dashboard-widget-four-by-one {
 50 |   background-color: get-color('card', $md-light-theme);
 51 |   display: flex;
 52 |   flex-basis: 75%;
 53 |   flex-direction: column;
 54 |   flex-grow: 4;
 55 |   min-height: 220px;
 56 |   min-width: 320px;
 57 |   margin: 4px;
 58 | }
 59 | 
 60 | .dashboard-widget-content {
 61 |   align-items: center;
 62 |   display: flex;
 63 |   flex-direction: column;
 64 |   flex-grow: 5;
 65 |   justify-content: center;
 66 |   padding: 15px;
 67 | }
 68 | 
 69 | .dashboard-widget-content .number {
 70 |   color: white;
 71 |   display: block;
 72 |   font-size: 4em;
 73 |   font-weight: bold;
 74 | }
 75 | 
 76 | .dashboard-widget-content .text {
 77 |   color: #eee;
 78 |   font-size: 1.5em;
 79 |   text-align: center;
 80 |   text-transform: uppercase;
 81 | }
 82 | 
 83 | .dashboard-footer {
 84 |   flex-basis: 100%;
 85 |   display: flex;
 86 |   justify-content: center;
 87 |   margin-top: 3em;
 88 | }
 89 | 
 90 | .detail-dialog {
 91 |   width: 60%;
 92 | }
 93 | 
 94 |   @media (min-width: 415px) and (max-width: 1024px) {
 95 |   .detail-dialog {
 96 |     width: 80%;
 97 |   }
 98 | 
 99 |   .menu-wrapper {
100 |     width: 400px;
101 |   }
102 | 
103 |   .menu-list {
104 |     min-width: 400px;
105 |   }
106 | }
107 | 
108 | @media (min-width: 376px) and (max-width: 414px) {
109 |   .detail-dialog {
110 |     width: 80%;
111 |   }
112 | 
113 |   .menu-wrapper {
114 |     width: 352px;
115 |   }
116 | 
117 |   .menu-list {
118 |     min-width: 352px;
119 |   }
120 | }
121 | 
122 | @media (min-width: 361px) and (max-width: 375px) {
123 |   .detail-dialog {
124 |     width: 80%;
125 |   }
126 | 
127 |   .menu-wrapper {
128 |     width: 312px;
129 |   }
130 | 
131 |   .menu-list {
132 |     min-width: 312px;
133 |   }
134 | }
135 | 
136 | @media (max-width: 360px) {
137 |   .detail-dialog {
138 |     width: 80%;
139 |   }
140 | 
141 |   .menu-wrapper {
142 |     width: 300px;
143 |   }
144 | 
145 |   .menu-list {
146 |     min-width: 300px;
147 |   }
148 | }
149 | 


--------------------------------------------------------------------------------
/src/components/home-view.js:
--------------------------------------------------------------------------------
 1 | import { each, get, isArray, last, size } from 'lodash'
 2 | import React, { Component } from 'react'
 3 | import PropTypes from 'prop-types'
 4 | import classnames from 'classnames'
 5 | import NumberWidget from './number-dash-widget'
 6 | import ChartWidget from './chart-dash-widget'
 7 | import { getChannels, getClients, getMessages } from '../api/nats-streaming'
 8 | import Footer from './footer'
 9 | 
10 | import './style.css'
11 | 
12 | export default class Clients extends Component {
13 |   state = {
14 |     timeSeries: [],
15 |   }
16 | 
17 |   async componentDidMount() {
18 |     await this.getMonitorData()
19 |     this.refresher = setInterval(() => this.getMonitorData(), 5000)
20 |   }
21 | 
22 |   componentWillUnmount() {
23 |     clearInterval(this.refresher)
24 |   }
25 | 
26 |   getMonitorData = async () => {
27 |     try {
28 |       const [channelSummary, clientSummary] = await Promise.all([getChannels(), getClients()])
29 |       const stats = {}
30 |       const channels = channelSummary.channels
31 |       const clients = clientSummary.clients
32 |       if (channels && isArray(channels)) {
33 |         stats.channels = channels.length
34 |         stats.messages = channels.reduce((count, channel) => (count += channel.msgs), 0)
35 |       }
36 |       if (clients && isArray(clients)) {
37 |         stats.clients = clients.length
38 |         stats.subscriptions = clients.reduce((count, client) => {
39 |           count += client.subscriptions ? size(client.subscriptions) : 0
40 |           return count
41 |         }, 0)
42 |       }
43 |       this.setState({ ...stats, timeSeries: this.getTimeSeriesData(stats) })
44 |     } catch (err) {
45 |       console.log({ name: err.name, message: err.message, fileName: err.fileName })
46 |       window.location.href = '/server'
47 |     }
48 |   }
49 | 
50 |   getTimeSeriesData = stats => {
51 |     const date = new Date()
52 |     const { timeSeries: ts } = this.state
53 |     const tsClone = ts.slice(ts.length >= 60 ? 1 : 0)
54 |     const lastValues = last(ts)
55 |     tsClone.push(
56 |       Object.assign(
57 |         {
58 |           name: date.toLocaleTimeString(),
59 |           newMsgs: lastValues ? stats.messages - lastValues.messages : 0,
60 |         },
61 |         stats,
62 |       ),
63 |     )
64 |     return tsClone
65 |   }
66 | 
67 |   render() {
68 |     const { clients, channels, messages, subscriptions, timeSeries } = this.state
69 |     return (
70 |       <section className="view">
71 |         {clients !== undefined && (
72 |           <NumberWidget number={clients} title="Clients" text="Total Clients" />
73 |         )}
74 |         {channels !== undefined && (
75 |           <NumberWidget number={channels} title="Channels" text="Total Channels" />
76 |         )}
77 |         {subscriptions !== undefined && (
78 |           <NumberWidget number={subscriptions} title="Subscriptions" text="Active Subscriptions" />
79 |         )}
80 |         {messages !== undefined && (
81 |           <NumberWidget number={messages} title="Messages" text="Total Messages" />
82 |         )}
83 |         <ChartWidget data={timeSeries} title="New Messages" />
84 |         <Footer />
85 |       </section>
86 |     )
87 |   }
88 | }
89 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
  1 | import { upperFirst } from 'lodash/string'
  2 | import React, { Component } from 'react'
  3 | import PropTypes from 'prop-types'
  4 | import { NavigationDrawer } from 'react-md'
  5 | import { withRouter } from 'react-router'
  6 | import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'
  7 | import logo from './logo.svg'
  8 | import NavItemLink from './components/nav-item-link'
  9 | import Home from './components/home-view'
 10 | import Clients from './components/client-view'
 11 | import Channels from './components/channel-view'
 12 | import Server from './components/server-view'
 13 | import Store from './components/store-view'
 14 | 
 15 | import './App.css'
 16 | 
 17 | const navItems = [
 18 |   {
 19 |     label: 'Home',
 20 |     to: '/',
 21 |     exact: true,
 22 |     icon: 'home',
 23 |   },
 24 |   {
 25 |     label: 'Clients',
 26 |     to: '/clients',
 27 |     icon: 'perm_identity',
 28 |   },
 29 |   {
 30 |     label: 'Channels',
 31 |     to: '/channels',
 32 |     icon: 'inbox',
 33 |   },
 34 |   {
 35 |     label: 'Server',
 36 |     to: '/server',
 37 |     icon: 'dns',
 38 |   },
 39 |   {
 40 |     label: 'Store',
 41 |     to: '/store',
 42 |     icon: 'store',
 43 |   },
 44 | ]
 45 | 
 46 | const styles = {
 47 |   content: { minHeight: 'auto' },
 48 | }
 49 | 
 50 | class App extends Component {
 51 |   static propTypes = {
 52 |     location: PropTypes.object.isRequired,
 53 |   }
 54 | 
 55 |   constructor(props) {
 56 |     super(props)
 57 |     this.state = { toolbarTitle: this.getCurrentTitle(props) }
 58 |   }
 59 | 
 60 |   componentWillReceiveProps(nextProps) {
 61 |     this.setState({ toolbarTitle: this.getCurrentTitle(nextProps) })
 62 |   }
 63 | 
 64 |   getCurrentTitle = props => {
 65 |     const { pathname } = props.location
 66 |     const lastSection = pathname.substring(pathname.lastIndexOf('/') + 1)
 67 |     return lastSection === ''
 68 |       ? 'Nats Streaming Console'
 69 |       : `Nats Streaming Console: ${this.toTitle(lastSection)}`
 70 |   }
 71 | 
 72 |   toTitle = str => {
 73 |     return str.split(/-|[A-Z]+/).reduce((s, split) => {
 74 |       const capititalized = split.match(/svg$/) ? 'SVG' : upperFirst(split)
 75 |       return `${s ? `${s} ` : ''}${capititalized}`
 76 |     }, '')
 77 |   }
 78 | 
 79 |   render() {
 80 |     const { toolbarTitle } = this.state
 81 |     const { location } = this.props
 82 |     return (
 83 |       <NavigationDrawer
 84 |         toolbarTitle={toolbarTitle}
 85 |         mobileDrawerType={NavigationDrawer.DrawerTypes.TEMPORARY_MINI}
 86 |         tabletDrawerType={NavigationDrawer.DrawerTypes.PERSISTENT_MINI}
 87 |         desktopDrawerType={NavigationDrawer.DrawerTypes.PERSISTENT_MINI}
 88 |         navItems={navItems.map(props => (
 89 |           <NavItemLink {...props} key={props.to} />
 90 |         ))}
 91 |         contentId="app-content"
 92 |         contentStyle={styles.content}
 93 |         contentClassName="md-grid"
 94 |       >
 95 |         <Switch key={location.pathname}>
 96 |           <Route path={navItems[0].to} exact component={Home} />
 97 |           <Route path={navItems[1].to} component={Clients} />
 98 |           <Route path={navItems[2].to} component={Channels} />
 99 |           <Route path={navItems[3].to} component={Server} />
100 |           <Route path={navItems[4].to} component={Store} />
101 |         </Switch>
102 |       </NavigationDrawer>
103 |     )
104 |   }
105 | }
106 | 
107 | export default withRouter(App)
108 | 


--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
  1 | // In production, we register a service worker to serve assets from local cache.
  2 | 
  3 | // This lets the app load faster on subsequent visits in production, and gives
  4 | // it offline capabilities. However, it also means that developers (and users)
  5 | // will only see deployed updates on the "N+1" visit to a page, since previously
  6 | // cached resources are updated in the background.
  7 | 
  8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
  9 | // This link also includes instructions on opting out of this behavior.
 10 | 
 11 | const isLocalhost = Boolean(
 12 |   window.location.hostname === 'localhost' ||
 13 |     // [::1] is the IPv6 localhost address.
 14 |     window.location.hostname === '[::1]' ||
 15 |     // 127.0.0.1/8 is considered localhost for IPv4.
 16 |     window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/),
 17 | )
 18 | 
 19 | export default function register() {
 20 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 21 |     // The URL constructor is available in all browsers that support SW.
 22 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location)
 23 |     if (publicUrl.origin !== window.location.origin) {
 24 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 25 |       // from what our page is served on. This might happen if a CDN is used to
 26 |       // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
 27 |       return
 28 |     }
 29 | 
 30 |     window.addEventListener('load', () => {
 31 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
 32 | 
 33 |       if (!isLocalhost) {
 34 |         // Is not local host. Just register service worker
 35 |         registerValidSW(swUrl)
 36 |       } else {
 37 |         // This is running on localhost. Lets check if a service worker still exists or not.
 38 |         checkValidServiceWorker(swUrl)
 39 |       }
 40 |     })
 41 |   }
 42 | }
 43 | 
 44 | function registerValidSW(swUrl) {
 45 |   navigator.serviceWorker
 46 |     .register(swUrl)
 47 |     .then(registration => {
 48 |       registration.onupdatefound = () => {
 49 |         const installingWorker = registration.installing
 50 |         installingWorker.onstatechange = () => {
 51 |           if (installingWorker.state === 'installed') {
 52 |             if (navigator.serviceWorker.controller) {
 53 |               // At this point, the old content will have been purged and
 54 |               // the fresh content will have been added to the cache.
 55 |               // It's the perfect time to display a "New content is
 56 |               // available; please refresh." message in your web app.
 57 |               console.log('New content is available; please refresh.')
 58 |             } else {
 59 |               // At this point, everything has been precached.
 60 |               // It's the perfect time to display a
 61 |               // "Content is cached for offline use." message.
 62 |               console.log('Content is cached for offline use.')
 63 |             }
 64 |           }
 65 |         }
 66 |       }
 67 |     })
 68 |     .catch(error => {
 69 |       console.error('Error during service worker registration:', error)
 70 |     })
 71 | }
 72 | 
 73 | function checkValidServiceWorker(swUrl) {
 74 |   // Check if the service worker can be found. If it can't reload the page.
 75 |   fetch(swUrl)
 76 |     .then(response => {
 77 |       // Ensure service worker exists, and that we really are getting a JS file.
 78 |       if (
 79 |         response.status === 404 ||
 80 |         response.headers.get('content-type').indexOf('javascript') === -1
 81 |       ) {
 82 |         // No service worker found. Probably a different app. Reload the page.
 83 |         navigator.serviceWorker.ready.then(registration => {
 84 |           registration.unregister().then(() => {
 85 |             window.location.reload()
 86 |           })
 87 |         })
 88 |       } else {
 89 |         // Service worker found. Proceed as normal.
 90 |         registerValidSW(swUrl)
 91 |       }
 92 |     })
 93 |     .catch(() => {
 94 |       console.log('No internet connection found. App is running in offline mode.')
 95 |     })
 96 | }
 97 | 
 98 | export function unregister() {
 99 |   if ('serviceWorker' in navigator) {
100 |     navigator.serviceWorker.ready.then(registration => {
101 |       registration.unregister()
102 |     })
103 |   }
104 | }
105 | 


--------------------------------------------------------------------------------
/src/components/server-view.js:
--------------------------------------------------------------------------------
  1 | import { assignIn, pick } from 'lodash'
  2 | import React, { Component } from 'react'
  3 | import PropTypes from 'prop-types'
  4 | import classnames from 'classnames'
  5 | import { getServers } from '../api/nats-streaming'
  6 | import { getServerConfig, updateServerConfig } from '../api/server-config'
  7 | import {
  8 |   Button,
  9 |   Card,
 10 |   CardActions,
 11 |   CardTitle,
 12 |   CardText,
 13 |   DataTable,
 14 |   Media,
 15 |   MediaOverlay,
 16 |   Snackbar,
 17 |   TableHeader,
 18 |   TableBody,
 19 |   TableRow,
 20 |   TableColumn,
 21 |   TextField,
 22 |   Toolbar,
 23 | } from 'react-md'
 24 | import logo from '../img/nats-logo.png'
 25 | import './style.css'
 26 | import SnackbarContainer from 'react-md/lib/Snackbars/SnackbarContainer'
 27 | 
 28 | export default class Servers extends Component {
 29 |   constructor(props) {
 30 |     super(props)
 31 | 
 32 |     this.state = {
 33 |       host: 'localhost',
 34 |       port: '4222',
 35 |       monitoringPort: '8222',
 36 |       connected: false,
 37 |       config: undefined,
 38 |       servers: undefined,
 39 |     }
 40 |   }
 41 | 
 42 |   componentDidMount = async () => {
 43 |     try {
 44 |       const [config, servers] = await Promise.all([getServerConfig(), getServers()])
 45 |       console.log({ config, servers })
 46 |       this.setState({ connected: true, config, servers })
 47 |     } catch (err) {
 48 |       if (err.message === 'Request failed with status code 504') {
 49 |         this.setState({ connected: false })
 50 |       }
 51 |     }
 52 |   }
 53 | 
 54 |   configure = () => {
 55 |     this.setState({ connected: false })
 56 |   }
 57 | 
 58 |   changeHost = value => {
 59 |     this.setState({ host: value })
 60 |   }
 61 | 
 62 |   changePort = value => {
 63 |     this.setState({ port: value })
 64 |   }
 65 | 
 66 |   changeMonitoringPort = value => {
 67 |     this.setState({ monitoringPort: value })
 68 |   }
 69 | 
 70 |   submit = async () => {
 71 |     const data = pick(this.state, ['host', 'port', 'monitoringPort'])
 72 |     try {
 73 |       const { options: config, data: servers } = await updateServerConfig(data)
 74 |       console.log({ config, servers })
 75 |       this.setState({ connected: true, config, servers })
 76 |     } catch (err) {
 77 |       this.setState({
 78 |         error: `Could not connect. Check that your Nats Streaming Server is configured to allow monitoring at http://${data.host}:${data.monitoringPort}`,
 79 |       })
 80 |     }
 81 |   }
 82 | 
 83 |   clearErrors = () => {
 84 |     this.setState({ error: undefined })
 85 |   }
 86 | 
 87 |   render() {
 88 |     const { connected } = this.state
 89 |     return connected ? this.renderServerInfo() : this.renderUpdate()
 90 |   }
 91 | 
 92 |   renderServerInfo() {
 93 |     const { configure } = this
 94 |     const { config, servers } = this.state
 95 | 
 96 |     const configEntries = Object.entries(config)
 97 |     const serversEntries = Object.entries(servers)
 98 | 
 99 |     return (
100 |       <section>
101 |         <Button floating fixed primary onClick={configure}>
102 |           settings
103 |         </Button>
104 |         {configEntries && configEntries.length && (
105 |           <DataTable plain>
106 |             <TableHeader>
107 |               <TableRow style={{ backgroundColor: '#111' }}>
108 |                 <TableColumn>Key</TableColumn>
109 |                 <TableColumn>Value</TableColumn>
110 |               </TableRow>
111 |             </TableHeader>
112 |             <TableBody>
113 |               {configEntries.map(tuple => (
114 |                 <TableRow key={tuple[0]}>
115 |                   <TableColumn>{tuple[0]}</TableColumn>
116 |                   <TableColumn>{tuple[1]}</TableColumn>
117 |                 </TableRow>
118 |               ))}
119 |             </TableBody>
120 |           </DataTable>
121 |         )}
122 |         {serversEntries && serversEntries.length && (
123 |           <DataTable plain>
124 |             <TableHeader>
125 |               <TableRow style={{ backgroundColor: '#111' }}>
126 |                 <TableColumn>Key</TableColumn>
127 |                 <TableColumn>Value</TableColumn>
128 |               </TableRow>
129 |             </TableHeader>
130 |             <TableBody>
131 |               {serversEntries.map(tuple => (
132 |                 <TableRow key={tuple[0]}>
133 |                   <TableColumn>{tuple[0]}</TableColumn>
134 |                   <TableColumn>{tuple[1]}</TableColumn>
135 |                 </TableRow>
136 |               ))}
137 |             </TableBody>
138 |           </DataTable>
139 |         )}
140 |       </section>
141 |     )
142 |   }
143 | 
144 |   renderUpdate() {
145 |     const { error, host, port, monitoringPort } = this.state
146 |     const { changeHost, changePort, changeMonitoringPort, clearErrors, submit } = this
147 |     return (
148 |       <section>
149 |         <Card style={{ maxWidth: 600 }}>
150 |           <Toolbar themed title="Connect to Nats Streaming Server">
151 |             <img src={logo} style={{ width: '162.5px', height: '55px' }} />
152 |           </Toolbar>
153 |           <div style={{ minHeight: 260, margin: 19 }}>
154 |             <TextField
155 |               id="host"
156 |               label="Host"
157 |               value={host}
158 |               placeholder="localhost"
159 |               onChange={changeHost}
160 |             />
161 |             <TextField
162 |               id="port"
163 |               label="Port"
164 |               value={port}
165 |               placeholder="4222"
166 |               onChange={changePort}
167 |             />
168 |             <TextField
169 |               id="monitoring-port"
170 |               label="Monitoring Port"
171 |               value={monitoringPort}
172 |               placeholder="8222"
173 |               onChange={changeMonitoringPort}
174 |             />
175 |           </div>
176 |           <CardActions centered>
177 |             <Button flat primary swapTheming onClick={submit}>
178 |               Connect
179 |             </Button>
180 |           </CardActions>
181 |         </Card>
182 |         {error && (
183 |           <Snackbar
184 |             id="errors"
185 |             toasts={[{ text: error, action: 'Ok' }]}
186 |             autohide={false}
187 |             onDismiss={clearErrors}
188 |           />
189 |         )}
190 |       </section>
191 |     )
192 |   }
193 | }
194 | 


--------------------------------------------------------------------------------
/src/api/nats-streaming.js:
--------------------------------------------------------------------------------
  1 | import axios from 'axios'
  2 | 
  3 | // const SERVERS = {
  4 | //   "cluster_id": "test-cluster",
  5 | //   "server_id": "cwZa1M7yf8hdEfdEIrLPtG",
  6 | //   "version": "0.5.0",
  7 | //   "go": "go1.7.6",
  8 | //   "state": "STANDALONE",
  9 | //   "now": "2017-10-13T22:23:11.0329339Z",
 10 | //   "start_time": "2017-10-13T20:37:28.3764861Z",
 11 | //   "uptime": "1h45m42s",
 12 | //   "clients": 2,
 13 | //   "subscriptions": 6,
 14 | //   "channels": 6,
 15 | //   "total_msgs": 771,
 16 | //   "total_bytes": 105806
 17 | // }
 18 | 
 19 | // const STORES = {
 20 | //   "cluster_id": "test-cluster",
 21 | //   "server_id": "cwZa1M7yf8hdEfdEIrLPtG",
 22 | //   "now": "2017-10-13T21:12:13.9924207Z",
 23 | //   "type": "FILE",
 24 | //   "limits": {
 25 | //     "max_channels": 100,
 26 | //     "max_msgs": 1000000,
 27 | //     "max_bytes": 1024000000,
 28 | //     "max_age": 0,
 29 | //     "max_subscriptions": 1000
 30 | //   },
 31 | //   "total_msgs": 771,
 32 | //   "total_bytes": 105806
 33 | // }
 34 | 
 35 | // const CHANNELS = {
 36 | //   "cluster_id": "test-cluster",
 37 | //   "server_id": "cwZa1M7yf8hdEfdEIrLPtG",
 38 | //   "now": "2017-10-13T22:23:47.4196729Z",
 39 | //   "offset": 0,
 40 | //   "limit": 1024,
 41 | //   "count": 6,
 42 | //   "total": 6,
 43 | //   "channels": [
 44 | //     {
 45 | //       "name": "cor",
 46 | //       "msgs": 0,
 47 | //       "bytes": 0,
 48 | //       "first_seq": 0,
 49 | //       "last_seq": 0
 50 | //     },
 51 | //     {
 52 | //       "name": "hackweek",
 53 | //       "msgs": 0,
 54 | //       "bytes": 0,
 55 | //       "first_seq": 0,
 56 | //       "last_seq": 0
 57 | //     },
 58 | //     {
 59 | //       "name": "hackweek.test.subject.one",
 60 | //       "msgs": 420,
 61 | //       "bytes": 57413,
 62 | //       "first_seq": 1,
 63 | //       "last_seq": 420,
 64 | //       "subscriptions": [
 65 | //         {
 66 | //           "inbox": "_INBOX.GR2GOUWO1Q3HAF1UTZYTCG",
 67 | //           "ack_inbox": "_INBOX.cwZa1M7yf8hdEfdEIrLQ2Y",
 68 | //           "durable_name": "test-durable-name",
 69 | //           "is_durable": true,
 70 | //           "max_inflight": 1,
 71 | //           "ack_wait": 10,
 72 | //           "last_sent": 416,
 73 | //           "pending_count": 1,
 74 | //           "is_stalled": true
 75 | //         }
 76 | //       ]
 77 | //     },
 78 | //     {
 79 | //       "name": "hackweek.test.subject.three",
 80 | //       "msgs": 140,
 81 | //       "bytes": 19613,
 82 | //       "first_seq": 1,
 83 | //       "last_seq": 140,
 84 | //       "subscriptions": [
 85 | //         {
 86 | //           "inbox": "_INBOX.GR2GOUWO1Q3HAF1UTZYTIC",
 87 | //           "ack_inbox": "_INBOX.cwZa1M7yf8hdEfdEIrLQ5e",
 88 | //           "durable_name": "test-durable-name",
 89 | //           "is_durable": true,
 90 | //           "max_inflight": 1,
 91 | //           "ack_wait": 10,
 92 | //           "last_sent": 139,
 93 | //           "pending_count": 1,
 94 | //           "is_stalled": true
 95 | //         }
 96 | //       ]
 97 | //     },
 98 | //     {
 99 | //       "name": "hackweek.test.subject.two",
100 | //       "msgs": 211,
101 | //       "bytes": 28780,
102 | //       "first_seq": 1,
103 | //       "last_seq": 211,
104 | //       "subscriptions": [
105 | //         {
106 | //           "inbox": "_INBOX.GR2GOUWO1Q3HAF1UTZYTFE",
107 | //           "ack_inbox": "_INBOX.cwZa1M7yf8hdEfdEIrLQ46",
108 | //           "durable_name": "test-durable-name",
109 | //           "is_durable": true,
110 | //           "max_inflight": 1,
111 | //           "ack_wait": 10,
112 | //           "last_sent": 209,
113 | //           "pending_count": 1,
114 | //           "is_stalled": true
115 | //         }
116 | //       ]
117 | //     },
118 | //     {
119 | //       "name": "toElasticsearch",
120 | //       "msgs": 0,
121 | //       "bytes": 0,
122 | //       "first_seq": 0,
123 | //       "last_seq": 0
124 | //     }
125 | //   ]
126 | // }
127 | 
128 | // const CLIENTS =
129 | // {
130 | //   "cluster_id": "test-cluster",
131 | //   "server_id": "cwZa1M7yf8hdEfdEIrLPtG",
132 | //   "now": "2017-10-13T22:25:02.896463Z",
133 | //   "offset": 0,
134 | //   "limit": 1024,
135 | //   "count": 4,
136 | //   "total": 4,
137 | //   "clients": [
138 | //     {
139 | //       "id": "cor-main-default_9af7de4b6740",
140 | //       "hb_inbox": "_INBOX.6S17LBVY36GXN499WPVDS6"
141 | //     },
142 | //     {
143 | //       "id": "cor-workflows-development_349574cbccba",
144 | //       "hb_inbox": "_INBOX.26QSTN9JZQOXBZAXOXHOA5"
145 | //     },
146 | //     {
147 | //       "id": "test-ordered-subscriber-2",
148 | //       "hb_inbox": "_INBOX.V9O12JF9BCV1KXVUC2VPEK",
149 | //       "subscriptions": {
150 | //         "hackweek.test.subject.one": [
151 | //           {
152 | //             "inbox": "_INBOX.V9O12JF9BCV1KXVUC2VPSW",
153 | //             "ack_inbox": "_INBOX.cwZa1M7yf8hdEfdEIrLaQg",
154 | //             "durable_name": "test-durable-name",
155 | //             "is_durable": true,
156 | //             "max_inflight": 1,
157 | //             "ack_wait": 10,
158 | //             "last_sent": 437,
159 | //             "pending_count": 0,
160 | //             "is_stalled": false
161 | //           }
162 | //         ],
163 | //         "hackweek.test.subject.three": [
164 | //           {
165 | //             "inbox": "_INBOX.V9O12JF9BCV1KXVUC2VQLK",
166 | //             "ack_inbox": "_INBOX.cwZa1M7yf8hdEfdEIrLaTm",
167 | //             "durable_name": "test-durable-name",
168 | //             "is_durable": true,
169 | //             "max_inflight": 1,
170 | //             "ack_wait": 10,
171 | //             "last_sent": 145,
172 | //             "pending_count": 0,
173 | //             "is_stalled": false
174 | //           }
175 | //         ],
176 | //         "hackweek.test.subject.two": [
177 | //           {
178 | //             "inbox": "_INBOX.V9O12JF9BCV1KXVUC2VQ78",
179 | //             "ack_inbox": "_INBOX.cwZa1M7yf8hdEfdEIrLaSE",
180 | //             "durable_name": "test-durable-name",
181 | //             "is_durable": true,
182 | //             "max_inflight": 1,
183 | //             "ack_wait": 10,
184 | //             "last_sent": 219,
185 | //             "pending_count": 0,
186 | //             "is_stalled": false
187 | //           }
188 | //         ]
189 | //       }
190 | //     },
191 | //     {
192 | //       "id": "test-publisher",
193 | //       "hb_inbox": "_INBOX.XC4NIJC4C68NIN6JX4DJY8"
194 | //     }
195 | //   ]
196 | // }
197 | 
198 | export function getServers() {
199 |   // return Promise.resolve(SERVERS)
200 |   return axios({
201 |     method: 'get',
202 |     url: '/streaming/serverz',
203 |     headers: { 'Content-Type': 'application/json' },
204 |   }).then(resp => resp.data)
205 | }
206 | 
207 | export function getStores() {
208 |   // return Promise.resolve(STORES)
209 |   return axios({
210 |     method: 'get',
211 |     url: '/streaming/storez',
212 |     headers: { 'Content-Type': 'application/json' },
213 |   }).then(resp => resp.data)
214 | }
215 | 
216 | export function getClients() {
217 |   // return Promise.resolve(CLIENTS)
218 |   return axios({
219 |     method: 'get',
220 |     url: '/streaming/clientsz',
221 |     params: {
222 |       subs: 1,
223 |     },
224 |     headers: { 'Content-Type': 'application/json' },
225 |   }).then(resp => resp.data)
226 | }
227 | 
228 | export function getChannels() {
229 |   // return Promise.resolve(CHANNELS)
230 |   return axios({
231 |     method: 'get',
232 |     url: '/streaming/channelsz',
233 |     params: {
234 |       subs: 1,
235 |     },
236 |     headers: { 'Content-Type': 'application/json' },
237 |   }).then(resp => resp.data)
238 | }
239 | 
240 | export function getMessages(channel) {
241 |   return axios({
242 |     method: 'get',
243 |     url: `/api/channel/${channel}/message`,
244 |     headers: { 'Content-Type': 'application/json' },
245 |   }).then(resp => resp.data)
246 | }
247 | 


--------------------------------------------------------------------------------
/src/components/channel-view.js:
--------------------------------------------------------------------------------
  1 | import { find, keyBy, map, reduce, size } from 'lodash'
  2 | import React, { Component } from 'react'
  3 | import PropTypes from 'prop-types'
  4 | import classnames from 'classnames'
  5 | import { getChannels, getClients, getMessages } from '../api/nats-streaming'
  6 | import { subscribeToChannel } from '../api/web-socket'
  7 | import JSONTree from 'react-json-tree'
  8 | import {
  9 |   Avatar,
 10 |   Button,
 11 |   DataTable,
 12 |   DialogContainer,
 13 |   Divider,
 14 |   FontIcon,
 15 |   List,
 16 |   ListItem,
 17 |   TableBody,
 18 |   TableColumn,
 19 |   TableHeader,
 20 |   TableRow,
 21 |   TextField,
 22 |   Toolbar,
 23 |   Subheader,
 24 | } from 'react-md'
 25 | 
 26 | import './style.css'
 27 | 
 28 | export default class ChannelView extends Component {
 29 |   // static propTypes = {}
 30 |   // static defaultProps = {}
 31 |   // state = {}
 32 | 
 33 |   constructor(props) {
 34 |     super(props)
 35 | 
 36 |     this.state = {
 37 |       channelSummary: undefined,
 38 |       channelMap: undefined,
 39 |       channelFilter: undefined,
 40 |       clientSummary: undefined,
 41 |       clientMap: undefined,
 42 |       clientFilter: undefined,
 43 |       detail: undefined,
 44 |       loading: true,
 45 |       focusedChannel: undefined,
 46 |       width: '0',
 47 |       height: '0',
 48 |     }
 49 |   }
 50 | 
 51 |   componentDidMount() {
 52 |     this.getMonitorData()
 53 |     this.updateWindowDimensions()
 54 |     window.addEventListener('resize', this.updateWindowDimensions)
 55 |   }
 56 | 
 57 |   componentWillUnmount() {
 58 |     window.removeEventListener('resize', this.updateWindowDimensions)
 59 |   }
 60 | 
 61 |   updateWindowDimensions = () => {
 62 |     this.setState({ width: window.innerWidth, height: window.innerHeight })
 63 |   }
 64 | 
 65 |   getMonitorData = async () => {
 66 |     this.setState({ loading: true })
 67 |     const [channelSummary, clientSummary] = await Promise.all([getChannels(), getClients()])
 68 |     const channelMap = keyBy(channelSummary.channels, 'name')
 69 |     const clientMap = keyBy(clientSummary.clients, 'id')
 70 |     this.setState({
 71 |       channelSummary,
 72 |       channelMap,
 73 |       clientSummary,
 74 |       clientMap,
 75 |       loading: false,
 76 |       focusedChannel: undefined,
 77 |       focusedChannelMessages: undefined,
 78 |     })
 79 |   }
 80 | 
 81 |   focusChannel = async channel => {
 82 |     console.log({ channel })
 83 |     const { name, last_seq } = channel
 84 |     this.setState({
 85 |       focusedChannel: channel,
 86 |       focusedChannelMessages: undefined,
 87 |     })
 88 |     const opts = last_seq
 89 |       ? { startAtSequence: Math.max(last_seq - 30, 0) }
 90 |       : { startAtTimeDelta: 300000 }
 91 |     const messages = []
 92 |     console.log({ name, opts, messages })
 93 |     subscribeToChannel(name, opts, msg => {
 94 |       console.log({ msg })
 95 |       if (messages.length === 30) messages.pop()
 96 |       messages.unshift(msg)
 97 |       this.setState({ focusedChannelMessages: messages })
 98 |     })
 99 |   }
100 | 
101 |   render() {
102 |     const {
103 |       channelSummary,
104 |       channelMap,
105 |       channelFilter,
106 |       clientSummary,
107 |       clientMap,
108 |       clientFilter,
109 |       detail,
110 |       detailFormat,
111 |       focusedChannel,
112 |       loading,
113 |       height,
114 |       width,
115 |     } = this.state
116 | 
117 |     console.log('render Home.js')
118 | 
119 |     if (loading) {
120 |       return (
121 |         <div>
122 |           <h1>Loading...</h1>
123 |         </div>
124 |       )
125 |     }
126 |     return (
127 |       <section className="column-view">
128 |         <div className="menu-wrapper">
129 |           <Toolbar title="Channels" themed />
130 |           <div className="menu-input">
131 |             <TextField
132 |               id="channel-filter"
133 |               label="Filter"
134 |               value={channelFilter}
135 |               inlineIndicator={<Button icon>search</Button>}
136 |               onChange={value => this.setState({ channelFilter: value })}
137 |             />
138 |           </div>
139 |           <List>{this.renderChannels()}</List>
140 |         </div>
141 |         {focusedChannel && (
142 |           <div className="menu-wrapper">
143 |             <Toolbar title="Channel Messages" themed />
144 |             <List>{this.renderMessages()}</List>
145 |           </div>
146 |         )}
147 |         {detail && detailFormat === 'json' ? this.renderJsonDialog() : this.renderDatatableDialog()}
148 |       </section>
149 |     )
150 |   }
151 | 
152 |   renderChannels = () => {
153 |     const { channelMap, channelFilter, focusedChannel } = this.state
154 |     let filtered = channelMap
155 |     if (channelFilter) {
156 |       filtered = reduce(
157 |         channelMap,
158 |         (map, channel, name) => {
159 |           if (name.includes(channelFilter)) {
160 |             map[name] = channel
161 |           }
162 |           return map
163 |         },
164 |         {},
165 |       )
166 |     }
167 |     return map(filtered, (channel, name) => {
168 |       const expander = channel.msgs ? <FontIcon>chevron_right</FontIcon> : undefined
169 | 
170 |       return (
171 |         <ListItem
172 |           key={name}
173 |           primaryText={name}
174 |           secondaryText={
175 |             <span>
176 |               Messages: {channel.msgs}
177 |               <br />
178 |               Bytes: {channel.bytes}
179 |             </span>
180 |           }
181 |           secondaryTextStyle={{ fontSize: '.8em', color: '#bbb' }}
182 |           threeLines
183 |           leftIcon={
184 |             <FontIcon
185 |               onClick={e => {
186 |                 e.preventDefault()
187 |                 e.stopPropagation()
188 |                 this.setState({ detail: channel, detailFormat: 'datatable' })
189 |               }}
190 |             >
191 |               info
192 |             </FontIcon>
193 |           }
194 |           rightIcon={expander}
195 |           active={focusedChannel ? name === focusedChannel.name : false}
196 |           onClick={() => this.focusChannel(channel)}
197 |         />
198 |       )
199 |     })
200 |   }
201 | 
202 |   renderMessages = () => {
203 |     const { focusedChannelMessages } = this.state
204 |     if (!focusedChannelMessages) {
205 |       return <ListItem primaryText="Loading..." />
206 |     }
207 |     return map(focusedChannelMessages, msg => {
208 |       const { sequence, timestamp, subject, data } = msg
209 |       return (
210 |         <ListItem
211 |           key={`${sequence}-${timestamp}`}
212 |           primaryText={
213 |             <span>
214 |               <span
215 |                 style={{
216 |                   padding: '3px 4px 2px',
217 |                   borderRadius: '2px',
218 |                   backgroundColor: '#333',
219 |                   marginRight: '7px',
220 |                 }}
221 |               >
222 |                 {sequence}
223 |               </span>
224 |               <em
225 |                 style={{
226 |                   fontSize: '.9em',
227 |                   fontWeight: 'normal',
228 |                   color: '#bbb',
229 |                 }}
230 |               >
231 |                 {new Date(timestamp).toLocaleString()}
232 |               </em>
233 |             </span>
234 |           }
235 |           onClick={() => {
236 |             this.setState({
237 |               detail: JSON.parse(data),
238 |               detailFormat: 'json',
239 |             })
240 |           }}
241 |         />
242 |       )
243 |     })
244 |   }
245 | 
246 |   renderJsonDialog = () => {
247 |     const { detail } = this.state
248 |     const actions = [
249 |       {
250 |         children: 'ok',
251 |         onClick: () => this.setState({ detail: null, detailFormat: null }),
252 |         primary: true,
253 |       },
254 |     ]
255 |     return (
256 |       <DialogContainer
257 |         id="detail"
258 |         aria-describedby="detail-content"
259 |         title="Detail"
260 |         visible={!!detail}
261 |         onHide={() => this.setState({ detail: null })}
262 |         actions={actions}
263 |         dialogClassName="detail-dialog"
264 |       >
265 |         <JSONTree
266 |           data={detail}
267 |           theme="monokai"
268 |           invertTheme={false}
269 |           shouldExpandNode={(path, branch, level) => level <= 1}
270 |         />
271 |       </DialogContainer>
272 |     )
273 |   }
274 | 
275 |   renderDatatableDialog = () => {
276 |     const { detail } = this.state
277 |     const details = detail ? Object.entries(detail) : []
278 |     const actions = [
279 |       {
280 |         children: 'ok',
281 |         onClick: () => this.setState({ detail: null }),
282 |         primary: true,
283 |       },
284 |     ]
285 |     return (
286 |       <DialogContainer
287 |         id="detail"
288 |         aria-describedby="detail-content"
289 |         title="Detail"
290 |         visible={!!detail}
291 |         onHide={() => this.setState({ detail: null })}
292 |         actions={actions}
293 |         dialogClassName="detail-dialog"
294 |       >
295 |         <DataTable plain>
296 |           <TableHeader>
297 |             <TableRow>
298 |               <TableColumn>Key</TableColumn>
299 |               <TableColumn>Value</TableColumn>
300 |             </TableRow>
301 |           </TableHeader>
302 |           <TableBody>
303 |             {details.map(tuple => (
304 |               <TableRow key={tuple[0]}>
305 |                 <TableColumn>{tuple[0]}</TableColumn>
306 |                 <TableColumn>{JSON.stringify(tuple[1])}</TableColumn>
307 |               </TableRow>
308 |             ))}
309 |           </TableBody>
310 |         </DataTable>
311 |       </DialogContainer>
312 |     )
313 |   }
314 | }
315 | 


--------------------------------------------------------------------------------
/src/components/client-view.js:
--------------------------------------------------------------------------------
  1 | import { find, keyBy, map, reduce, size } from 'lodash'
  2 | import React, { Component } from 'react'
  3 | import PropTypes from 'prop-types'
  4 | import classnames from 'classnames'
  5 | import { getChannels, getClients, getMessages } from '../api/nats-streaming'
  6 | import { subscribeToChannel } from '../api/web-socket'
  7 | import JSONTree from 'react-json-tree'
  8 | import {
  9 |   Avatar,
 10 |   Button,
 11 |   DataTable,
 12 |   DialogContainer,
 13 |   Divider,
 14 |   FontIcon,
 15 |   List,
 16 |   ListItem,
 17 |   TableBody,
 18 |   TableColumn,
 19 |   TableHeader,
 20 |   TableRow,
 21 |   TextField,
 22 |   Toolbar,
 23 |   Subheader,
 24 | } from 'react-md'
 25 | 
 26 | import './style.css'
 27 | 
 28 | export default class ClientView extends Component {
 29 |   // static propTypes = {}
 30 |   // static defaultProps = {}
 31 |   // state = {}
 32 | 
 33 |   constructor(props) {
 34 |     super(props)
 35 | 
 36 |     this.state = {
 37 |       channelSummary: undefined,
 38 |       channelMap: undefined,
 39 |       channelFilter: undefined,
 40 |       clientSummary: undefined,
 41 |       clientMap: undefined,
 42 |       clientFilter: undefined,
 43 |       detail: undefined,
 44 |       loading: true,
 45 |       focusedClient: undefined,
 46 |       focusedSubscription: undefined,
 47 |       width: '0',
 48 |       height: '0',
 49 |     }
 50 |   }
 51 | 
 52 |   componentDidMount() {
 53 |     this.getMonitorData()
 54 |     this.updateWindowDimensions()
 55 |     window.addEventListener('resize', this.updateWindowDimensions)
 56 |   }
 57 | 
 58 |   componentWillUnmount() {
 59 |     window.removeEventListener('resize', this.updateWindowDimensions)
 60 |   }
 61 | 
 62 |   updateWindowDimensions = () => {
 63 |     this.setState({ width: window.innerWidth, height: window.innerHeight })
 64 |   }
 65 | 
 66 |   getMonitorData = async () => {
 67 |     this.setState({ loading: true })
 68 |     const [channelSummary, clientSummary] = await Promise.all([getChannels(), getClients()])
 69 |     const channelMap = keyBy(channelSummary.channels, 'name')
 70 |     const clientMap = keyBy(clientSummary.clients, 'id')
 71 |     this.setState({
 72 |       channelSummary,
 73 |       channelMap,
 74 |       clientSummary,
 75 |       clientMap,
 76 |       loading: false,
 77 |       focusedClient: this.state.focusedClient
 78 |         ? this.state.focusedClient
 79 |         : find(clientMap, () => true),
 80 |       focusedSubscription: undefined,
 81 |     })
 82 |   }
 83 | 
 84 |   focusClient = client => {
 85 |     this.setState({ focusedClient: client, focusedSubscription: undefined })
 86 |   }
 87 | 
 88 |   focusSubscription = async subscription => {
 89 |     const { _channel, last_sent } = subscription
 90 |     this.setState({
 91 |       focusedSubscription: subscription,
 92 |       focusedSubscriptionMessages: undefined,
 93 |     })
 94 |     const opts = last_sent
 95 |       ? { startAtSequence: Math.max(last_sent - 30, 0) }
 96 |       : { startAtTimeDelta: 300000 }
 97 |     const messages = []
 98 |     subscribeToChannel(subscription._channel, opts, msg => {
 99 |       if (messages.length === 30) messages.pop()
100 |       messages.unshift(msg)
101 |       this.setState({ focusedSubscriptionMessages: messages })
102 |     })
103 |   }
104 | 
105 |   render() {
106 |     const {
107 |       channelSummary,
108 |       channelMap,
109 |       channelFilter,
110 |       clientSummary,
111 |       clientMap,
112 |       clientFilter,
113 |       detail,
114 |       detailFormat,
115 |       focusedClient,
116 |       focusedSubscription,
117 |       focusedSubscriptionMessages,
118 |       loading,
119 |       height,
120 |       width,
121 |     } = this.state
122 | 
123 |     console.log('render Home.js')
124 | 
125 |     if (loading) {
126 |       return (
127 |         <div>
128 |           <h1>Loading...</h1>
129 |         </div>
130 |       )
131 |     }
132 |     return (
133 |       <section className="column-view">
134 |         <div className="menu-wrapper">
135 |           <Toolbar title="Clients" themed />
136 |           <div className="menu-input">
137 |             <TextField
138 |               id="client-filter"
139 |               label="Filter"
140 |               value={clientFilter}
141 |               inlineIndicator={<Button icon>search</Button>}
142 |               onChange={value => this.setState({ clientFilter: value })}
143 |             />
144 |           </div>
145 |           <List className="menu-list">{this.renderClients()}</List>
146 |         </div>
147 |         {focusedClient && focusedClient.subscriptions && (
148 |           <div className="menu-wrapper">
149 |             <Toolbar title="Subscriptions" themed />
150 |             <div className="menu-input">
151 |               <TextField
152 |                 id="subscription-filter"
153 |                 label="Filter"
154 |                 value={channelFilter}
155 |                 inlineIndicator={<Button icon>search</Button>}
156 |                 onChange={value => this.setState({ channelFilter: value })}
157 |               />
158 |             </div>
159 |             <List className="menu-list">{this.renderSubscriptions()}</List>
160 |           </div>
161 |         )}
162 |         {focusedSubscription && (
163 |           <div className="menu-wrapper">
164 |             <Toolbar title="Messages" themed />
165 |             <List className="menu-list">{this.renderMessages()}</List>
166 |           </div>
167 |         )}
168 |         {detail && detailFormat === 'json' ? this.renderJsonDialog() : this.renderDatatableDialog()}
169 |       </section>
170 |     )
171 |   }
172 | 
173 |   renderClients = () => {
174 |     const { clientMap, clientFilter, focusedClient } = this.state
175 |     let filtered = clientMap
176 |     if (clientFilter) {
177 |       filtered = reduce(
178 |         clientMap,
179 |         (map, client, name) => {
180 |           if (name.includes(clientFilter)) {
181 |             map[name] = client
182 |           }
183 |           return map
184 |         },
185 |         {},
186 |       )
187 |     }
188 |     return map(filtered, (client, name) => {
189 |       const expander = client.subscriptions ? <FontIcon>chevron_right</FontIcon> : undefined
190 | 
191 |       return (
192 |         <ListItem
193 |           key={name}
194 |           primaryText={name}
195 |           secondaryText={<span>Subscriptions: {size(client.subscriptions)}</span>}
196 |           secondaryTextStyle={{ fontSize: '.8em', color: '#bbb' }}
197 |           leftIcon={
198 |             <FontIcon
199 |               onClick={e => {
200 |                 e.preventDefault()
201 |                 e.stopPropagation()
202 |                 this.setState({ detail: client, detailFormat: 'datatable' })
203 |               }}
204 |             >
205 |               info
206 |             </FontIcon>
207 |           }
208 |           rightIcon={expander}
209 |           active={name === focusedClient.id}
210 |           onClick={() => this.focusClient(client)}
211 |         />
212 |       )
213 |     })
214 |   }
215 | 
216 |   renderSubscriptions = () => {
217 |     const { channelFilter, focusedClient, focusedSubscription } = this.state
218 |     let filtered = focusedClient.subscriptions
219 |     if (channelFilter) {
220 |       filtered = reduce(
221 |         focusedClient.subscriptions,
222 |         (map, client, name) => {
223 |           if (name.includes(channelFilter)) {
224 |             map[name] = client
225 |           }
226 |           return map
227 |         },
228 |         {},
229 |       )
230 |     }
231 |     return map(filtered, (sub, name) => {
232 |       const subscription = sub[0]
233 |       const { queue_name, last_sent } = subscription
234 |       const [_client, _durableName] = subscription.queue_name
235 |         ? subscription.queue_name.split(':')
236 |         : [subscription.client_id, '-not durable-']
237 |       console.log({ subscription, x: subscription.queue_name, _client, _durableName })
238 |       Object.assign(subscription, { _channel: name, _client, _durableName })
239 | 
240 |       const expander = last_sent ? <FontIcon>chevron_right</FontIcon> : undefined
241 | 
242 |       return (
243 |         <ListItem
244 |           key={name}
245 |           primaryText={name}
246 |           secondaryText={
247 |             <span>
248 |               Durable Name: {_durableName}
249 |               <br />
250 |               Message Count: {last_sent}
251 |             </span>
252 |           }
253 |           secondaryTextStyle={{ fontSize: '.8em', color: '#bbb' }}
254 |           threeLines
255 |           leftIcon={
256 |             <FontIcon
257 |               onClick={e => {
258 |                 e.preventDefault()
259 |                 e.stopPropagation()
260 |                 this.setState({
261 |                   detail: subscription,
262 |                   detailFormat: 'datatable',
263 |                 })
264 |               }}
265 |             >
266 |               info
267 |             </FontIcon>
268 |           }
269 |           rightIcon={expander}
270 |           active={focusedSubscription && name === focusedSubscription._channel}
271 |           onClick={last_sent ? () => this.focusSubscription(subscription) : () => {}}
272 |         />
273 |       )
274 |     })
275 |   }
276 | 
277 |   renderMessages = () => {
278 |     const { focusedSubscription, focusedSubscriptionMessages } = this.state
279 |     if (!focusedSubscriptionMessages) {
280 |       return <ListItem primaryText="Loading..." />
281 |     }
282 |     return map(focusedSubscriptionMessages, msg => {
283 |       const { sequence, timestamp, subject, data } = msg
284 |       return (
285 |         <ListItem
286 |           key={`${focusedSubscription.client_id}:${sequence}:${timestamp}`}
287 |           primaryText={
288 |             <span>
289 |               <span
290 |                 style={{
291 |                   padding: '3px 4px 2px',
292 |                   borderRadius: '2px',
293 |                   backgroundColor: '#333',
294 |                   marginRight: '7px',
295 |                 }}
296 |               >
297 |                 {sequence}
298 |               </span>
299 |               <em
300 |                 style={{
301 |                   fontSize: '.9em',
302 |                   fontWeight: 'normal',
303 |                   color: '#bbb',
304 |                 }}
305 |               >
306 |                 {new Date(timestamp).toLocaleString()}
307 |               </em>
308 |             </span>
309 |           }
310 |           onClick={() => {
311 |             this.setState({
312 |               detail: JSON.parse(data),
313 |               detailFormat: 'json',
314 |             })
315 |           }}
316 |         />
317 |       )
318 |     })
319 |   }
320 | 
321 |   renderJsonDialog = () => {
322 |     const { detail } = this.state
323 |     const actions = [
324 |       {
325 |         children: 'ok',
326 |         onClick: () => this.setState({ detail: null, detailFormat: null }),
327 |         primary: true,
328 |       },
329 |     ]
330 |     return (
331 |       <DialogContainer
332 |         id="detail"
333 |         aria-describedby="detail-content"
334 |         title="Detail"
335 |         visible={!!detail}
336 |         onHide={() => this.setState({ detail: null })}
337 |         actions={actions}
338 |         dialogClassName="detail-dialog"
339 |       >
340 |         <JSONTree
341 |           data={detail}
342 |           theme="monokai"
343 |           invertTheme={false}
344 |           shouldExpandNode={(path, branch, level) => level <= 1}
345 |         />
346 |       </DialogContainer>
347 |     )
348 |   }
349 | 
350 |   renderDatatableDialog = () => {
351 |     const { detail } = this.state
352 |     const details = detail ? Object.entries(detail) : []
353 |     const actions = [
354 |       {
355 |         children: 'ok',
356 |         onClick: () => this.setState({ detail: null }),
357 |         primary: true,
358 |       },
359 |     ]
360 |     return (
361 |       <DialogContainer
362 |         id="detail"
363 |         aria-describedby="detail-content"
364 |         title="Detail"
365 |         visible={!!detail}
366 |         onHide={() => this.setState({ detail: null })}
367 |         actions={actions}
368 |         dialogClassName="detail-dialog"
369 |       >
370 |         <DataTable plain>
371 |           <TableHeader>
372 |             <TableRow>
373 |               <TableColumn>Key</TableColumn>
374 |               <TableColumn>Value</TableColumn>
375 |             </TableRow>
376 |           </TableHeader>
377 |           <TableBody>
378 |             {details.map(tuple => (
379 |               <TableRow key={tuple[0]}>
380 |                 <TableColumn>{tuple[0]}</TableColumn>
381 |                 <TableColumn>{JSON.stringify(tuple[1])}</TableColumn>
382 |               </TableRow>
383 |             ))}
384 |           </TableBody>
385 |         </DataTable>
386 |       </DialogContainer>
387 |     )
388 |   }
389 | }
390 | 


--------------------------------------------------------------------------------