Events Widget Component #557

bafonins · 2019-04-22T14:40:40Z

Summary:

This PR adds the <Events.Widget /> component to the console as well as some groundwork for the entity events pages.
References #28 and #553

Changes:

Add the <Events /> (currently as a stub) and <Events.Widget /> components.
Add the <List /> component
Add the <Event /> component of different types
Add the <Status /> component
Add entity id selectors

cc @htdvisser

htdvisser · 2019-04-23T08:01:54Z

In the "Latest Data" you show events for both admin-gtw and admin-app. Gateway and Application IDs do not share the same namespace, so it's possible that there would be a Gateway with the same ID as an Application. Maybe we should indicate the entity type? I can imagine we already have icons for the navigation, perhaps re-use those and put them in front of the string IDs?

How are events rendered if they contain more than one identifier? For example, if an OAuth token exchange event contains the identifiers of both the User ID and the Client ID.

bafonins · 2019-04-23T08:16:40Z

In the "Latest Data" you show events for both admin-gtw and admin-app.

This is only for presentation purposes and wont be the case in the console. For this PR events are hardcoded.

How are events rendered if they contain more than one identifier?

The first matching id will be shown, see https://github.com/TheThingsNetwork/lorawan-stack/blob/73b10e22e05aff82749d3a392949f606b0fc4b55/pkg/webui/lib/selectors/id.js#L49-L58

kschiffer · 2019-04-24T07:41:27Z

pkg/webui/components/event/event.styl

+  display: flex
+  align-items: center
+  flex-wrap: nowrap
+  font-family: 'IBM Plex Mono', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace


Suggested change

font-family: 'IBM Plex Mono', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace

font-family: $font-family-mono

kschiffer · 2019-04-24T07:46:40Z

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

+import style from './widget.styl'
+
+const m = defineMessages({
+  lastActivity: 'Last network activity',


Suggested change

lastActivity: 'Last network activity',

lastActivity: 'Latest events',

Although it says so in the screen design, network activity is misleading when we also show crud events.

kschiffer · 2019-04-24T07:53:11Z

pkg/webui/components/event/event.styl

+  align-items: center
+  flex-wrap: nowrap
+  font-family: 'IBM Plex Mono', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace
+


Suggested change

font-size: $fs.s

kschiffer · 2019-04-24T07:54:49Z

pkg/webui/components/event/event.styl

+
+  &-icon
+    margin-right: $cs.xs
+    nudge('up', 2px)


Suggested change

nudge('up', 2px)

font-size: 1.1rem

nudge('up', 1px)

Please also make sure that icons are $c-icon-fill if no other color is set.

kschiffer · 2019-04-24T07:56:01Z

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

+          size="small"
+          items={events}
+          renderItem={this.renderEvent}
+          emptyMessage={m.noEvents}


The empty message needs a special styling to be $tc-subtle-gray

kschiffer · 2019-04-24T07:58:21Z

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

+          />
+          <Link to={toAllUrl}>
+            <Message content={m.seeAllActivity} />
+            <Icon icon="arrow_forward" />


Suggested change

<Icon icon="arrow_forward" />

→

Use the → character rather.

kschiffer · 2019-04-24T08:01:15Z

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

+// limitations under the License.
+
+.widget
+


redundant new line

kschiffer · 2019-04-24T08:26:00Z

pkg/webui/components/status/status.styl

+    background-color: $c-active-blue
+
+    &:after
+      animation: goodPulse 2s infinite


The animation is actually thought to pulse whenever an event arrives. It can then also be a little more noticeable. Obviously not MVP critical, so don't do this.

kschiffer · 2019-04-24T08:28:06Z

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

+const m = defineMessages({
+  lastActivity: 'Last network activity',
+  seeAllActivity: 'See all activity',
+  noEvents: 'No events emitted by {entityId}',


Suggested change

noEvents: 'No events emitted by {entityId}',

noEvents: '{entityId} has not sent any events recently',

kschiffer · 2019-04-24T08:31:55Z

pkg/webui/components/event/index.js

+          value={time}
+          date={false}
+        />
+        <span className={style.eventEmitter}>{emitter}</span>


Think about size limiting these. text-overflow: ellipsis

kschiffer · 2019-04-24T13:52:10Z

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

+
+import Link from '../../link'
+import Message from '../../../lib/components/message'
+import Icon from '../../icon'


remove

Suggested change

import Icon from '../../icon'

kschiffer · 2019-04-24T13:55:23Z

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

+            →
+          </Link>
+        </div>
+        <List


Atm, the list will keep growing when list items overflow. It should rather have a fixed height and use overflow: hidden (and possibly also limit the number of items rendered, accordingly).

bafonins added the c/console This is related to the Console label Apr 22, 2019

bafonins added this to the April 2019 milestone Apr 22, 2019

bafonins requested a review from kschiffer April 22, 2019 14:40

bafonins self-assigned this Apr 22, 2019

bafonins changed the title ~~Feature/28 webui events widget~~ Event Widget Component Apr 23, 2019

bafonins changed the title ~~Event Widget Component~~ Events Widget Component Apr 23, 2019

bafonins force-pushed the feature/28-webui-events-widget branch from 73b10e2 to 8abebd7 Compare April 24, 2019 03:55

bafonins requested review from kschiffer and removed request for kschiffer April 24, 2019 03:55

kschiffer suggested changes Apr 24, 2019

View reviewed changes

bafonins force-pushed the feature/28-webui-events-widget branch from 8abebd7 to 01128d1 Compare April 24, 2019 12:49

bafonins requested a review from kschiffer April 24, 2019 12:49

kschiffer approved these changes Apr 24, 2019

View reviewed changes

bafonins force-pushed the feature/28-webui-events-widget branch 2 times, most recently from 4e951bc to 8d3730b Compare April 24, 2019 14:46

bafonins added 13 commits April 24, 2019 18:03

console: Add list component

f9d3390

console: Add status component

63e05fd

util: Add status storybook

7e37b8e

console: Extend icons list

391d718

util: Add entity id selectors

3359afc

console: Add event component

e166ebc

console: Add events component

efaefd9

console: Add events widget component

6778562

util: Add entity id selectors

840e3ba

console: Add event type utilities

bc4089b

console: Add CRUD event component

d3ecf16

console: Add default event component

698ef86

console: Add message event component

2ad83f1

dev: Update locales

97885ff

bafonins force-pushed the feature/28-webui-events-widget branch from 8d3730b to 97885ff Compare April 24, 2019 15:03

bafonins merged commit df50617 into master Apr 24, 2019

bafonins deleted the feature/28-webui-events-widget branch April 24, 2019 15:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Events Widget Component #557

Events Widget Component #557

bafonins commented Apr 22, 2019

htdvisser commented Apr 23, 2019

bafonins commented Apr 23, 2019

kschiffer Apr 24, 2019

kschiffer Apr 24, 2019

kschiffer Apr 24, 2019

kschiffer Apr 24, 2019

kschiffer Apr 24, 2019

kschiffer Apr 24, 2019

kschiffer Apr 24, 2019

kschiffer Apr 24, 2019

kschiffer Apr 24, 2019

kschiffer Apr 24, 2019

kschiffer Apr 24, 2019

kschiffer Apr 24, 2019

kschiffer Apr 24, 2019

	font-family: 'IBM Plex Mono', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace
	font-family: $font-family-mono

	lastActivity: 'Last network activity',
	lastActivity: 'Latest events',

	noEvents: 'No events emitted by {entityId}',
	noEvents: '{entityId} has not sent any events recently',

Events Widget Component #557

Events Widget Component #557

Conversation

bafonins commented Apr 22, 2019

htdvisser commented Apr 23, 2019

bafonins commented Apr 23, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment