Latest decoded payload panel

pkg/webui/components/code-editor/code-editor.styl

@@ -13,8 +13,8 @@
 // limitations under the License.
 
 .wrapper
-  border-input()
-  border-radius: $br.xs
+  border: 1px solid var(--c-border-neutral-light)
+  border-radius: $br.l
   transition: border-color .2s
   position: relative
   overflow: hidden

pkg/webui/components/code-editor/ttn-theme.js

@@ -25,11 +25,11 @@ ace.define(
   box-shadow: none;\
 }\
 .ace-ttn .ace_gutter {\
-background: #e8e8e8;\
-color: #AAA;\
+background: #FAFBFF;\
+color: #B4B7CB;\
 }\
 .ace-ttn  {\
-background: #fff;\
+background: #FAFBFF;\
 color: #000;\
 }\
 // begin language\

pkg/webui/components/collapse/index.js

@@ -21,12 +21,12 @@ import Button from '@ttn-lw/components/button'
 import Message from '@ttn-lw/lib/components/message'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
+import sharedMessages from '@ttn-lw/lib/shared-messages'
 
 import style from './collapse.styl'
 
 const m = defineMessages({
   collapse: 'Collapse',
-  expand: 'Expand',
 })
 
 const Collapse = props => {
@@ -53,7 +53,7 @@ const Collapse = props => {
             secondary
             className={style.expandButton}
             disabled={disabled}
-            message={collapsed ? m.expand : m.collapse}
+            message={collapsed ? sharedMessages.expand : m.collapse}
             onClick={onCollapsedChange}
           />
         </div>

pkg/webui/components/icon/icon.styl

@@ -13,6 +13,8 @@
 // limitations under the License.
 
 .icon
+  color: inherit
+
   &.small
     font-size: 1rem
 

pkg/webui/components/icon/index.js

@@ -33,7 +33,7 @@ const Icon = forwardRef((props, ref) => {
     ...rest
   } = props
 
-  const classname = classnames(className, {
+  const classname = classnames(className, style.icon, {
     [style.nudgeUp]: nudgeUp,
     [style.nudgeDown]: nudgeDown,
     [style.textPaddedLeft]: textPaddedLeft,

pkg/webui/components/modal/index.js

@@ -36,6 +36,7 @@ const Modal = props => {
     buttonMessage,
     title,
     subtitle,
+    noControlBar,
     noTitleLine,
     children,
     message,
@@ -179,10 +180,12 @@ const Modal = props => {
           )}
           {title && !noTitleLine && <div className={style.line} />}
           <div className={classnames(className, style.body)}>{children || messageElement}</div>
-          <div className={style.controlBar}>
-            <div>{bottomLineElement}</div>
-            {buttons}
-          </div>
+          {!noControlBar && (
+            <div className={style.controlBar}>
+              <div>{bottomLineElement}</div>
+              {buttons}
+            </div>
+          )}
         </RootComponent>
       </RemoveScroll>
     </FocusLock>
@@ -208,6 +211,7 @@ Modal.propTypes = {
   message: PropTypes.message,
   method: PropTypes.string,
   name: PropTypes.string,
+  noControlBar: PropTypes.bool,
   noTitleLine: PropTypes.bool,
   onComplete: PropTypes.func,
   subtitle: PropTypes.message,
@@ -225,6 +229,7 @@ Modal.defaultProps = {
   logo: undefined,
   message: undefined,
   method: undefined,
+  noControlBar: false,
   noTitleLine: false,
   onComplete: () => null,
   inline: false,

pkg/webui/components/notification/details/index.js

@@ -19,14 +19,14 @@ import Button from '@ttn-lw/components/button'
 import PortalledModal from '@ttn-lw/components/modal/portalled'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
+import sharedMessages from '@ttn-lw/lib/shared-messages'
 
 import style from './details.styl'
 
 const m = defineMessages({
   showDetails: 'Show details',
   details: 'Details',
   errorDetails: 'Error details',
-  close: 'Close',
 })
 
 const Details = props => {
@@ -56,7 +56,7 @@ const Details = props => {
         visible={showDetails}
         onComplete={handleModalComplete}
         approval={false}
-        buttonMessage={m.close}
+        buttonMessage={sharedMessages.close}
         approveButtonProps={{ primary: false, icon: undefined }}
         noTitleLine
       >

pkg/webui/components/panel/index.js

@@ -49,6 +49,8 @@ const Panel = ({
   toggleOptions,
   activeToggle,
   onToggleClick,
+  onMouseEnter,
+  onMouseLeave,
   shortCutLinkTitle,
   shortCutLinkPath,
   className,
@@ -57,7 +59,11 @@ const Panel = ({
   shortCutLinkTarget,
   shortCutLinkDisabled,
 }) => (
-  <div className={classnames(styles.panel, className, { [styles.divider]: divider })}>
+  <div
+    className={classnames(styles.panel, className, { [styles.divider]: divider })}
+    onMouseEnter={onMouseEnter}
+    onMouseLeave={onMouseLeave}
+  >
     {title && (
       <div className={styles.panelHeader}>
         <div className="d-flex gap-cs-xs al-center">
@@ -96,6 +102,8 @@ Panel.propTypes = {
   icon: PropTypes.icon,
   iconClassName: PropTypes.string,
   messageDecorators: PropTypes.node,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
   onToggleClick: PropTypes.func,
   shortCutLinkDisabled: PropTypes.bool,
   shortCutLinkPath: PropTypes.string,
@@ -110,6 +118,8 @@ Panel.defaultProps = {
   toggleOptions: undefined,
   activeToggle: undefined,
   onToggleClick: () => null,
+  onMouseEnter: () => null,
+  onMouseLeave: () => null,
   className: undefined,
   messageDecorators: undefined,
   divider: false,

pkg/webui/components/panel/panel.styl

@@ -42,10 +42,11 @@
       text-overflow: ellipsis
       overflow: hidden
 
-  a.button
+  .button
     font-weight: $fwv2.semibold
     text-decoration: none transparent
     transition: text-decoration $ad.s ease-in-out
+    align-self: center
 
     &:hover:not(:disabled)
       color: var(--c-text-brand-normal)

pkg/webui/console/components/events/event.js

@@ -52,7 +52,7 @@ const Event = React.memo(({ event, scoped, widget, rowStyle, onRowClick, eventId
     [style.synthetic]: event.isSynthetic,
   })
   return (
-    <li className={eventClasses} style={rowStyle} onClick={handleRowClick}>
+    <li className={eventClasses} style={rowStyle} onClick={handleRowClick} id={event.unique_id}>
       <ErrorBoundary>
         <div className={style.cellTime} title={`${event.time}: ${typeValue}`}>
           <Icon icon={icon} className={style.eventIcon} />

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

@@ -12,8 +12,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { useState, useCallback } from 'react'
+import React, { useState, useCallback, useEffect, useRef } from 'react'
 import classnames from 'classnames'
+import { useSearchParams } from 'react-router-dom'
 
 import EVENT_STORE_LIMIT from '@console/constants/event-store-limit'
 import hamburgerMenuClose from '@assets/misc/hamburger-menu-close.svg'
@@ -61,24 +62,62 @@ const Events = React.memo(
       const eventLogData = composeDataUri(JSON.stringify(events, undefined, 2))
       downloadDataUriAsFile(eventLogData, `${entityId}_live_data_${Date.now()}.json`)
     }, [entityId, events])
+    const [searchParams, setSearchParams] = useSearchParams()
+    const firstRender = useRef(true)
+
+    useEffect(
+      () => () => {
+        if (firstRender.current && paused) {
+          onPause()
+        }
+      },
+      [onPause, paused],
+    )
+    useEffect(() => {
+      const eventId = searchParams.get('eventId')
+      if (!eventId) {
+        setFocus({ eventId: undefined, visible: false })
+        if (firstRender.current && paused) {
+          onPause() // Resume stream
+        }
+        firstRender.current = false
+        return
+      }
+      setFocus({ eventId, visible: eventId })
+      if (firstRender.current && !paused) {
+        // Make sure that the element is present in the DOM
+        setTimeout(() => {
+          const element = document.getElementById(eventId)
+          element?.scrollIntoView({ behavior: 'smooth' })
+        }, 200)
+
+        onPause() // Pause stream
+      }
+    }, [onPause, paused, searchParams])
+
     const handleRowClick = useCallback(
       eventId => {
         if (eventId !== focus.eventId) {
-          setFocus({ eventId, visible: eventId })
+          setSearchParams(
+            {
+              eventId,
+            },
+            { replace: true },
+          )
         } else {
-          setFocus({ eventId: undefined, visible: false })
+          setSearchParams({}, { replace: true })
         }
       },
-      [focus],
+      [focus.eventId, setSearchParams],
     )
 
     const handleVerboseFilterChange = useCallback(() => {
       onFilterChange(Boolean(filter) ? undefined : 'default')
     }, [onFilterChange, filter])
 
     const handleEventInfoCloseClick = useCallback(() => {
-      setFocus({ eventId: undefined, visible: false })
-    }, [])
+      setSearchParams({}, { replace: true })
+    }, [setSearchParams])
 
     return (
       <div className={style.container}>

pkg/webui/console/components/last-seen/index.js

@@ -44,6 +44,7 @@ const LastSeen = React.forwardRef((props, ref) => {
     message,
     status,
     noTitle,
+    displayMessage,
   } = props
 
   return (
@@ -55,7 +56,7 @@ const LastSeen = React.forwardRef((props, ref) => {
       className={classnames(statusClassName, 'd-flex al-center')}
     >
       <div className={classnames(className, 'd-inline-block')}>
-        {!short && <Message className="mr-cs-xxs" content={message} />}
+        {(!short || displayMessage) && <Message className="mr-cs-xxs" content={message} />}
         <DateTime.Relative
           value={lastSeen}
           computeDelta={computeDeltaInSeconds}
@@ -73,6 +74,7 @@ const LastSeen = React.forwardRef((props, ref) => {
 LastSeen.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  displayMessage: PropTypes.string,
   flipped: PropTypes.bool,
   lastSeen: PropTypes.oneOfType([
     PropTypes.string,
@@ -97,6 +99,7 @@ LastSeen.defaultProps = {
   message: sharedMessages.lastSeen,
   noTitle: false,
   statusClassName: undefined,
+  displayMessage: false,
 }
 
 export default LastSeen