From 140c812ab99f704dd5e54933186288120ca21bc2 Mon Sep 17 00:00:00 2001
From: Pavel Jankoski <pavel.jankoski@thethingsindustries.com>
Date: Tue, 11 Feb 2025 15:36:31 +0100
Subject: [PATCH 1/2] console: Change end devices panel and device picture

---
 .../device-info-panel/device-info-panel.styl  |  3 +--
 .../devices-panel/devices-panel.styl          |  1 -
 .../console/containers/devices-panel/index.js | 27 +++++++++++--------
 .../devices-panel/recent-devices.js           | 25 +++++++----------
 .../top-devices/index.js                      |  2 +-
 5 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/pkg/webui/console/containers/device-info-panel/device-info-panel.styl b/pkg/webui/console/containers/device-info-panel/device-info-panel.styl
index 8658b8e2ed..e582efb97a 100644
--- a/pkg/webui/console/containers/device-info-panel/device-info-panel.styl
+++ b/pkg/webui/console/containers/device-info-panel/device-info-panel.styl
@@ -32,8 +32,7 @@
   &-placeholder
     width: 6rem
   img
-    border-radius: $br.m
-    object-fit: contain
+    object-fit: cover
     width: 100%
     height: 100%
 
diff --git a/pkg/webui/console/containers/devices-panel/devices-panel.styl b/pkg/webui/console/containers/devices-panel/devices-panel.styl
index 4bb243ee39..b58b13f890 100644
--- a/pkg/webui/console/containers/devices-panel/devices-panel.styl
+++ b/pkg/webui/console/containers/devices-panel/devices-panel.styl
@@ -26,7 +26,6 @@
     &-header
       top: 0
       position: sticky
-      background: var(--c-bg-neutral-min)
       z-index: 1
 
 .scroll-gradient
diff --git a/pkg/webui/console/containers/devices-panel/index.js b/pkg/webui/console/containers/devices-panel/index.js
index e815a08d04..9888633ac2 100644
--- a/pkg/webui/console/containers/devices-panel/index.js
+++ b/pkg/webui/console/containers/devices-panel/index.js
@@ -19,6 +19,7 @@ import { useSelector } from 'react-redux'
 
 import { IconDevice } from '@ttn-lw/components/icon'
 import Panel from '@ttn-lw/components/panel'
+import Toggle from '@ttn-lw/components/panel/toggle'
 
 import sharedMessages from '@ttn-lw/lib/shared-messages'
 
@@ -35,35 +36,39 @@ const m = defineMessages({
 })
 
 const DevicesPanel = () => {
-  const [active, setActive] = useState('top')
+  const [activeToggle, setActiveToggle] = useState('top')
   const appId = useSelector(selectSelectedApplicationId)
 
-  const handleChange = useCallback(
+  const handleToggleChange = useCallback(
     (_, value) => {
       if (value !== 'all') {
-        setActive(value)
+        setActiveToggle(value)
       }
     },
-    [setActive],
+    [setActiveToggle],
   )
 
-  const options = [
+  const toggleOptions = [
     { label: sharedMessages.topDevices, value: 'top' },
     { label: m.recentDevices, value: 'recent' },
-    { label: sharedMessages.all, value: 'all', link: `/applications/${appId}/devices` },
   ]
 
   return (
     <Panel
       title={sharedMessages.devices}
       icon={IconDevice}
-      toggleOptions={options}
-      activeToggle={active}
-      onToggleClick={handleChange}
       className={classNames(style.devicesPanel)}
+      shortCutLinkTitle={sharedMessages.viewAll}
+      shortCutLinkPath={`/applications/${appId}/devices`}
     >
-      {active === 'top' && <TopDevicesList appId={appId} />}
-      {active === 'recent' && <RecentEndDevices />}
+      <Toggle
+        options={toggleOptions}
+        active={activeToggle}
+        onToggleChange={handleToggleChange}
+        fullWidth
+      />
+      {activeToggle === 'top' && <TopDevicesList appId={appId} />}
+      {activeToggle === 'recent' && <RecentEndDevices />}
     </Panel>
   )
 }
diff --git a/pkg/webui/console/containers/devices-panel/recent-devices.js b/pkg/webui/console/containers/devices-panel/recent-devices.js
index 4516d349b1..e3e5e718d1 100644
--- a/pkg/webui/console/containers/devices-panel/recent-devices.js
+++ b/pkg/webui/console/containers/devices-panel/recent-devices.js
@@ -72,22 +72,15 @@ const RecentEndDevices = () => {
         id: row.ids.device_id,
         name: row.name,
       }),
-      render: details => (
-        <div className="c-text-neutral-light fw-bold">
-          <Message
-            content={details.name ?? details.id}
-            component="p"
-            className="mt-0 mb-cs-xs p-0 text-overflow-ellipsis c-text-neutral-heavy"
-          />
-          {details.name && (
-            <Message
-              content={details.id}
-              component="span"
-              className="c-text-neutral-light fw-normal"
-            />
-          )}
-        </div>
-      ),
+      render: ({ id, name }) =>
+        Boolean(name) ? (
+          <>
+            <span className="mt-0 mb-cs-xxs p-0 fw-bold d-block">{name}</span>
+            <span className="c-text-neutral-light d-block">{id}</span>
+          </>
+        ) : (
+          <span className="mt-0 p-0 fw-bold d-block">{id}</span>
+        ),
     },
     {
       name: 'last_seen_at',
diff --git a/pkg/webui/console/containers/top-entities-dashboard-panel/top-devices/index.js b/pkg/webui/console/containers/top-entities-dashboard-panel/top-devices/index.js
index e1a0553c54..e3717c0248 100644
--- a/pkg/webui/console/containers/top-entities-dashboard-panel/top-devices/index.js
+++ b/pkg/webui/console/containers/top-entities-dashboard-panel/top-devices/index.js
@@ -46,7 +46,7 @@ const TopDevicesList = ({ appId }) => {
         const cleanedId = Boolean(appId) ? id.split('/')[1] : id
         return Boolean(entity?.name) ? (
           <>
-            <span className="mt-0 mb-cs-xxs p-0 fw-bold d-block">{name}</span>
+            <span className="mt-0 mb-cs-xxs p-0 fw-bold d-block">{entity.name}</span>
             <span className="c-text-neutral-light d-block">{cleanedId}</span>
           </>
         ) : (

From eba4b03ee450cd064a064ace36dd11292a4d6884 Mon Sep 17 00:00:00 2001
From: Pavel Jankoski <pavel.jankoski@thethingsindustries.com>
Date: Tue, 11 Feb 2025 16:31:39 +0100
Subject: [PATCH 2/2] console: Fix green pulse animation

---
 pkg/webui/components/status/status.styl             | 13 +++++++++++--
 .../containers/gateway-status-panel/index.js        |  1 +
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/pkg/webui/components/status/status.styl b/pkg/webui/components/status/status.styl
index ed522fd334..e7f4be82a6 100644
--- a/pkg/webui/components/status/status.styl
+++ b/pkg/webui/components/status/status.styl
@@ -34,8 +34,9 @@
   &:after
     content: ''
     position: absolute
-    top: 0
-    left: 0
+    top: 50%
+    left: 50%
+    transform: translate(-50%, -50%)
     border-radius: 50%
     width: 5px
     height: 5px
@@ -63,6 +64,12 @@
 .triggered-good-pulse:after
   animation: triggeredGoodPulse 1.5s ease-out
 
+.green-pulse:after
+  animation: greenPulse 4s infinite
+
+.triggered-green-pulse:after
+  animation: triggeredGreenPulse 1.5s ease-out
+
 pulse-animation($color, $name)
   @keyframes $name
     0%
@@ -89,5 +96,7 @@ triggered-pulse-animation($color, $name)
       box-shadow: 0 0 0 0 alpha($color, 0)
 
 pulse-animation($tokens.theme-light.color.icon-info-normal, 'goodPulse')
+pulse-animation($tokens.theme-light.color.icon-success-normal, 'greenPulse')
 
 triggered-pulse-animation($tokens.theme-light.color.icon-info-normal, 'triggeredGoodPulse')
+triggered-pulse-animation($tokens.theme-light.color.icon-success-normal, 'triggeredGreenPulse')
diff --git a/pkg/webui/console/containers/gateway-status-panel/index.js b/pkg/webui/console/containers/gateway-status-panel/index.js
index 875452e3c4..3737379096 100644
--- a/pkg/webui/console/containers/gateway-status-panel/index.js
+++ b/pkg/webui/console/containers/gateway-status-panel/index.js
@@ -158,6 +158,7 @@ const GatewayStatusPanel = () => {
       iconClassName={isDisconnected ? style.gtwStatusPanelIcon : undefined}
       messageDecorators={
         <Status
+          className="pr-cs-s"
           status={
             isDisconnected
               ? 'bad'