Add events to application pages

pkg/webui/components/events/index.js

@@ -34,7 +34,45 @@ const m = defineMessages({
 })
 
 @bind
-class Events extends React.PureComponent {
+class Events extends React.Component {
+
+  state = {
+    paused: false,
+  }
+
+  shouldComponentUpdate (nextProps, nextState) {
+    const { paused } = this.state
+    const {
+      events,
+      emitterId,
+      onClear,
+      limit,
+    } = this.props
+
+    if (
+      emitterId !== nextProps.emitterId
+      || limit !== nextProps.limit
+      || onClear !== nextProps.onClear
+      || paused !== nextState.paused
+    ) {
+      return true
+    }
+
+    const newEvents = events !== nextProps.events
+    const clearedEvents = newEvents && nextProps.events.length === 0
+
+    // rerender component if cleared events when in the `paused` state
+    if (clearedEvents && paused) {
+      return true
+    }
+
+    // do not rerender component on new events when in the `paused` state
+    if (newEvents && paused) {
+      return false
+    }
+
+    return newEvents
+  }
 
   renderEvent (event) {
     const { component: Component, type } = getEventComponentByName(event.name)
@@ -52,9 +90,7 @@ class Events extends React.PureComponent {
   }
 
   onPause () {
-    const { onPause } = this.props
-
-    onPause()
+    this.setState(prev => ({ paused: !prev.paused }))
   }
 
   onClear () {
@@ -71,12 +107,11 @@ class Events extends React.PureComponent {
     const {
       className,
       events,
-      paused,
       onClear,
-      onPause,
       emitterId,
       limit,
     } = this.props
+    const { paused } = this.state
 
     let limitedEvents = events
     const truncated = events.length > limit
@@ -87,7 +122,7 @@ class Events extends React.PureComponent {
     const header = (
       <Header
         paused={paused}
-        onPause={onPause}
+        onPause={this.onPause}
         onClear={onClear}
       />
     )
@@ -116,9 +151,7 @@ class Events extends React.PureComponent {
 
 Events.propTypes = {
   events: PropTypes.arrayOf(PropTypes.event),
-  paused: PropTypes.bool.isRequired,
   emitterId: PropTypes.string.isRequired,
-  onPause: PropTypes.func.isRequired,
   onClear: PropTypes.func.isRequired,
   limit: PropTypes.number,
 }

pkg/webui/components/events/widget/index.js

@@ -28,7 +28,7 @@ import sharedMessages from '../../../lib/shared-messages'
 import style from './widget.styl'
 
 const m = defineMessages({
-  latestEvents: 'Latest events',
+  latestEvents: 'Latest Events',
   seeAllActivity: 'See all activity',
   unknown: 'Unknown',
 })
@@ -133,4 +133,13 @@ EventsWidget.defaultProps = {
   limit: 5,
 }
 
+const CONNECTION_STATUS = Object.freeze({
+  GOOD: 'good',
+  BAD: 'bad',
+  MEDIOCRE: 'mediocre',
+  UNKNOWN: 'unknown',
+})
+
+EventsWidget.CONNECTION_STATUS = CONNECTION_STATUS
+
 export default EventsWidget

pkg/webui/components/events/widget/widget.styl

@@ -25,4 +25,5 @@
   min-height: 10rem
 
 .status-message
+  font-weight: 600
   margin-right: $cs.xs

pkg/webui/console/api/index.js

@@ -77,6 +77,7 @@ export default {
     'delete': ttnClient.Applications.deleteById.bind(ttnClient.Applications),
     create: ttnClient.Applications.create.bind(ttnClient.Applications),
     update: ttnClient.Applications.updateById.bind(ttnClient.Applications),
+    eventsSubscribe: ttnClient.Applications.openStream.bind(ttnClient.Applications),
     apiKeys: {
       list: ttnClient.Applications.ApiKeys.getAll.bind(ttnClient.Applications.ApiKeys),
       update: ttnClient.Applications.ApiKeys.updateById.bind(ttnClient.Applications.ApiKeys),

pkg/webui/console/constants/connection-status.js

@@ -0,0 +1,20 @@
+// Copyright © 2019 The Things Network Foundation, The Things Industries B.V.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+export default Object.freeze({
+  CONNECTED: 'connected',
+  DISCONNECTED: 'disconnected',
+  CONNECTING: 'connecting',
+  UNKNOWN: 'unknown',
+})

pkg/webui/console/containers/application-events/index.js

@@ -0,0 +1,67 @@
+// Copyright © 2019 The Things Network Foundation, The Things Industries B.V.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react'
+import { connect } from 'react-redux'
+import bind from 'autobind-decorator'
+
+import PropTypes from '../../../lib/prop-types'
+import EventsSubscription from '../../containers/events-subscription'
+
+import {
+  clearApplicationEventsStream,
+} from '../../store/actions/application'
+
+import {
+  applicationEventsSelector,
+  applicationEventsStatusSelector,
+} from '../../store/selectors/application'
+
+@connect(
+  null,
+  (dispatch, ownProps) => ({
+    onClear: () => dispatch(clearApplicationEventsStream(ownProps.appId)),
+  }))
+@bind
+class ApplicationEvents extends React.Component {
+  render () {
+    const {
+      appId,
+      widget,
+      onClear,
+    } = this.props
+
+    return (
+      <EventsSubscription
+        id={appId}
+        widget={widget}
+        eventsSelector={applicationEventsSelector}
+        statusSelector={applicationEventsStatusSelector}
+        onClear={onClear}
+        toAllUrl={`/console/applications/${appId}/data`}
+      />
+    )
+  }
+}
+
+ApplicationEvents.propTypes = {
+  appId: PropTypes.string.isRequired,
+  widget: PropTypes.bool,
+}
+
+ApplicationEvents.defaultProps = {
+  widget: false,
+}
+
+export default ApplicationEvents

pkg/webui/console/containers/events-subscription/index.js

@@ -0,0 +1,97 @@
+// Copyright © 2019 The Things Network Foundation, The Things Industries B.V.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react'
+import { connect } from 'react-redux'
+
+import CONNECTION_STATUS from '../../constants/connection-status'
+import Events from '../../../components/events'
+import PropTypes from '../../../lib/prop-types'
+
+const { Widget } = Events
+
+const mapConnectionStatusToWidget = function (status) {
+  switch (status) {
+  case CONNECTION_STATUS.CONNECTED:
+    return Widget.CONNECTION_STATUS.GOOD
+  case CONNECTION_STATUS.CONNECTING:
+    return Widget.CONNECTION_STATUS.MEDIOCRE
+  case CONNECTION_STATUS.DISCONNECTED:
+    return Widget.CONNECTION_STATUS.BAD
+  case CONNECTION_STATUS.UNKNOWN:
+  default:
+    return Widget.CONNECTION_STATUS.UNKNOWN
+  }
+}
+
+@connect(function (state, props) {
+  const {
+    eventsSelector,
+    statusSelector,
+  } = props
+
+  return {
+    events: eventsSelector(state, props),
+    connectionStatus: statusSelector(state, props),
+  }
+})
+class EventsSubscription extends React.Component {
+  render () {
+    const {
+      id,
+      widget,
+      events,
+      connectionStatus,
+      onClear,
+      toAllUrl,
+    } = this.props
+
+    if (widget) {
+      return (
+        <Widget
+          emitterId={id}
+          events={events}
+          connectionStatus={mapConnectionStatusToWidget(connectionStatus)}
+          toAllUrl={toAllUrl}
+        />
+      )
+    }
+
+    return (
+      <Events
+        emitterId={id}
+        events={events}
+        onClear={onClear}
+      />
+    )
+  }
+}
+
+EventsSubscription.propTypes = {
+  id: PropTypes.string.isRequired,
+  eventsSelector: PropTypes.func.isRequired,
+  statusSelector: PropTypes.func,
+  onClear: PropTypes.func,
+  widget: PropTypes.bool,
+  toAllUrl: PropTypes.string,
+}
+
+EventsSubscription.defaultProps = {
+  widget: false,
+  onClear: () => null,
+  statusSelector: () => 'unknown',
+  toAllUrl: null,
+}
+
+export default EventsSubscription

pkg/webui/console/store/actions/application.js

@@ -34,6 +34,19 @@ import {
   getCollaborator,
 } from '../actions/collaborators'
 
+import {
+  startEventsStream,
+  createStartEventsStreamActionType,
+  startEventsStreamSuccess,
+  createStartEventsStreamSuccessActionType,
+  startEventsStreamFailure,
+  createStartEventsStreamFailureActionType,
+  stopEventsStream,
+  createStopEventsStreamActionType,
+  clearEvents,
+  createClearEventsActionType,
+} from '../actions/events'
+
 export const SHARED_NAME = 'APPLICATION'
 
 export const GET_APP = 'GET_APPLICATION'
@@ -47,6 +60,11 @@ export const GET_APP_COLLABORATOR_PAGE_DATA = createGetCollaboratorActionType(SH
 export const GET_APP_COLLABORATORS_LIST = createGetCollaboratorsListActionType(SHARED_NAME)
 export const GET_APP_COLLABORATORS_LIST_SUCCESS = createGetCollaboratorsListSuccessActionType(SHARED_NAME)
 export const GET_APP_COLLABORATORS_LIST_FAILURE = createGetCollaboratorsListFailureActionType(SHARED_NAME)
+export const START_APP_EVENT_STREAM = createStartEventsStreamActionType(SHARED_NAME)
+export const START_APP_EVENT_STREAM_SUCCESS = createStartEventsStreamSuccessActionType(SHARED_NAME)
+export const START_APP_EVENT_STREAM_FAILURE = createStartEventsStreamFailureActionType(SHARED_NAME)
+export const STOP_APP_EVENT_STREAM = createStopEventsStreamActionType(SHARED_NAME)
+export const CLEAR_APP_EVENTS = createClearEventsActionType(SHARED_NAME)
 
 export const getApplication = id => (
   { type: GET_APP, id }
@@ -75,3 +93,13 @@ export const getApplicationCollaboratorsListSuccess = getCollaboratorsListSucces
 export const getApplicationCollaboratorsListFailure = getCollaboratorsListFailure(SHARED_NAME)
 
 export const getApplicationCollaboratorPageData = getCollaborator(SHARED_NAME)
+
+export const startApplicationEventsStream = startEventsStream(SHARED_NAME)
+
+export const startApplicationEventsStreamSuccess = startEventsStreamSuccess(SHARED_NAME)
+
+export const startApplicationEventsStreamFailure = startEventsStreamFailure(SHARED_NAME)
+
+export const stopApplicationEventsStream = stopEventsStream(SHARED_NAME)
+
+export const clearApplicationEventsStream = clearEvents(SHARED_NAME)