Application overview scaffolding

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

@@ -39,7 +39,7 @@ const Map = ({ id, markers, setupLocationLink }) => {
       : undefined
 
   return (
-    <div className="h-full" data-test-id="map-widget">
+    <div className={style.mapWidget} data-test-id="map-widget">
       {markers.length > 0 ? (
         <LocationMap
           id={id}

pkg/webui/components/map/widget/widget.styl

@@ -34,4 +34,10 @@
   flex-direction: column
   justify-content: center
   align-items: center
-  padding: 0 $cs.xl
+  padding: 0 $cs.xl $cs.xl $cs.xl
+
+.map-widget
+  display: flex
+  flex-direction: column
+  height: 100%
+

pkg/webui/console/containers/application-overview-header/application-overview-header.styl

@@ -0,0 +1,55 @@
+// Copyright © 2024 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.
+
+.root
+  position: sticky
+  top: 0
+  z-index: $zi.dropdown - 1
+  display: flex
+  justify-content: space-between
+  gap: $cs.xl
+  align-items: center
+  padding: $cs.m
+  background-color: var(--c-bg-neutral-min)
+  border-bottom: 1px solid var(--c-border-neutral-light)
+
+  .name
+    line-height: normal
+    white-space: nowrap
+    color: var(--c-text-neutral-heavy)
+    font-weight: $fw.bold
+    font-size: $fsv2.l
+    margin: 0
+
+  .id
+    color: var(--c-text-neutral-semilight)
+    font-size: $fs.s
+    font-family: $font-family-mono
+    &-prefix
+      &:after
+        content: ':'
+        padding-right: $cs.xxs
+
+  .divider
+    height: $cs.xl
+    border-left: 1px solid var(--c-border-neutral-light)
+
+  .created-at-status > span
+    display: none
+
+.status
+  color: var(--c-text-neutral-semilight)
+  display: flex
+  align-items: center
+  white-space: nowrap

pkg/webui/console/containers/application-overview-header/index.js

@@ -0,0 +1,212 @@
+// Copyright © 2024 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, { useCallback, useMemo } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { defineMessages } from 'react-intl'
+import classnames from 'classnames'
+
+import Icon, {
+  IconBroadcast,
+  IconCalendarMonth,
+  IconMenu2,
+  IconStar,
+  IconStarFilled,
+  IconCpu,
+} from '@ttn-lw/components/icon'
+import Button from '@ttn-lw/components/button'
+import toast from '@ttn-lw/components/toast'
+import DocTooltip from '@ttn-lw/components/tooltip/doc'
+import Status from '@ttn-lw/components/status'
+
+import Message from '@ttn-lw/lib/components/message'
+import RequireRequest from '@ttn-lw/lib/components/require-request'
+
+import LastSeen from '@console/components/last-seen'
+
+import sharedMessages from '@ttn-lw/lib/shared-messages'
+import attachPromise from '@ttn-lw/lib/store/actions/attach-promise'
+import { selectFetchingEntry } from '@ttn-lw/lib/store/selectors/fetching'
+
+import { checkFromState, mayViewApplicationDevices } from '@console/lib/feature-checks'
+
+import {
+  ADD_BOOKMARK_BASE,
+  addBookmark,
+  DELETE_BOOKMARK_BASE,
+  deleteBookmark,
+} from '@console/store/actions/user-preferences'
+import { getApplicationDeviceCount } from '@console/store/actions/applications'
+
+import { selectUser } from '@console/store/selectors/logout'
+import { selectBookmarksList } from '@console/store/selectors/user-preferences'
+import {
+  selectApplicationDerivedLastSeen,
+  selectApplicationDeviceCount,
+  selectSelectedApplication,
+} from '@console/store/selectors/applications'
+
+import style from './application-overview-header.styl'
+
+const m = defineMessages({
+  addBookmarkFail: 'There was an error and the application could not be bookmarked',
+  removeBookmarkFail: 'There was an error and the application could not be removed from bookmarks',
+  lastSeenAvailableTooltip:
+    'The elapsed time since the network registered activity (sent uplinks, confirmed downlinks or (re)join requests) of the end device(s) in this application.',
+  noActivityTooltip:
+    'The network has not recently registered any activity (sent uplinks, confirmed downlinks or (re)join requests) of the end device(s) in this application.',
+  deviceCount: '{devices} End devices',
+})
+
+const ApplicationOverviewHeader = () => {
+  const dispatch = useDispatch()
+  const { name, created_at, ids } = useSelector(selectSelectedApplication)
+  const { application_id } = ids
+  const user = useSelector(selectUser)
+  const bookmarks = useSelector(selectBookmarksList)
+  const addBookmarkLoading = useSelector(state => selectFetchingEntry(state, ADD_BOOKMARK_BASE))
+  const deleteBookmarkLoading = useSelector(state =>
+    selectFetchingEntry(state, DELETE_BOOKMARK_BASE),
+  )
+  const mayViewDevices = useSelector(state => checkFromState(mayViewApplicationDevices, state))
+  const devicesTotalCount = useSelector(state =>
+    selectApplicationDeviceCount(state, application_id),
+  )
+  const lastSeen = useSelector(state => selectApplicationDerivedLastSeen(state, application_id))
+
+  const showLastSeen = Boolean(lastSeen)
+
+  const isBookmarked = useMemo(
+    () =>
+      bookmarks
+        .map(b => b.entity_ids?.application_ids?.application_id)
+        .some(b => b === application_id),
+    [bookmarks, application_id],
+  )
+
+  const handleAddToBookmark = useCallback(async () => {
+    try {
+      if (!isBookmarked) {
+        await dispatch(attachPromise(addBookmark(user.ids.user_id, { application_ids: ids })))
+        return
+      }
+      await dispatch(
+        attachPromise(
+          deleteBookmark(user.ids.user_id, {
+            name: 'application',
+            id: application_id,
+          }),
+        ),
+      )
+    } catch (e) {
+      toast({
+        title: application_id,
+        message: isBookmarked ? m.removeBookmarkFail : m.addBookmarkFail,
+        type: toast.types.ERROR,
+      })
+    }
+  }, [application_id, dispatch, ids, isBookmarked, user.ids.user_id])
+
+  const recentActivity = useMemo(() => {
+    let node
+    if (showLastSeen) {
+      node = (
+        <DocTooltip
+          interactive
+          docPath="/getting-started/console/troubleshooting"
+          content={<Message content={m.lastSeenAvailableTooltip} />}
+        >
+          <LastSeen lastSeen={lastSeen} className="c-text-neutral-semilight" />
+        </DocTooltip>
+      )
+    } else {
+      node = (
+        <DocTooltip
+          content={<Message content={m.noActivityTooltip} />}
+          docPath="/getting-started/console/troubleshooting"
+        >
+          <Status
+            status="mediocre"
+            label={sharedMessages.noRecentActivity}
+            className={style.status}
+          />
+        </DocTooltip>
+      )
+    }
+    return (
+      <div className="d-inline-flex al-center gap-cs-xxs sm:d-none">
+        <Icon icon={IconBroadcast} small className="c-text-neutral-semilight" />
+        {node}
+      </div>
+    )
+  }, [lastSeen, showLastSeen])
+
+  const menuDropdownItems = <></>
+
+  return (
+    <div className={style.root}>
+      <div>
+        <h5 className={style.name}>{name || application_id}</h5>
+        <span className={style.id}>
+          <Message className={style.idPrefix} content={sharedMessages.id} uppercase />
+          {application_id}
+        </span>
+      </div>
+      <div className="d-inline-flex h-full al-center gap-cs-m flex-wrap">
+        {recentActivity}
+        {mayViewDevices && (
+          <RequireRequest requestAction={getApplicationDeviceCount(application_id)}>
+            <div className="d-inline-flex al-center gap-cs-xxs sm:d-none">
+              <Icon icon={IconCpu} small className="c-text-neutral-semilight" />
+              <Message
+                content={m.deviceCount}
+                className="c-text-neutral-semilight"
+                values={{ devices: devicesTotalCount }}
+              />
+            </div>
+          </RequireRequest>
+        )}
+        <div className="d-flex al-center gap-cs-xxs sm:d-none">
+          <Icon small className="c-text-neutral-semilight" icon={IconCalendarMonth} />
+          <LastSeen
+            statusClassName={style.createdAtStatus}
+            message={sharedMessages.created}
+            lastSeen={created_at}
+            className="c-text-neutral-semilight"
+          />
+        </div>
+        <div className={classnames(style.divider, 'sm:d-none')} />
+        <div className="d-inline-flex al-center gap-cs-xxs">
+          <Button
+            secondary
+            icon={!isBookmarked ? IconStar : IconStarFilled}
+            onClick={handleAddToBookmark}
+            disabled={
+              (!isBookmarked && addBookmarkLoading) || (isBookmarked && deleteBookmarkLoading)
+            }
+          />
+          <Button
+            secondary
+            icon={IconMenu2}
+            noDropdownIcon
+            dropdownItems={menuDropdownItems}
+            dropdownPosition="below left"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ApplicationOverviewHeader