From 949e142edea3cb827fedf7c9feef3b9bc3ff09a5 Mon Sep 17 00:00:00 2001 From: novykh Date: Mon, 10 Aug 2026 15:20:54 +0300 Subject: [PATCH 1/5] Add the nodes_hexagon icon The hexagon mark the navigation design uses for Nodes. Two overlapping hexagon outlines; no equivalent exists in the current set, where nodes_hollow and node_hollow are both rack shapes. Added rather than replacing nodes_hollow on purpose. That asset has 17 call sites in cloud-frontend, one of which feeds the legacy tab bar that renders when the new navigation flag is off, so swapping its artwork would change a surface the flag is supposed to leave untouched. A separate name also keeps the old mark available while the design is still being settled. Exported raw with no fill attribute, per the icon README, so consumers control the colour through the Icon component. --- src/components/icon/assets/nodes_hexagon.svg | 3 +++ src/components/icon/iconsList.js | 2 ++ 2 files changed, 5 insertions(+) create mode 100644 src/components/icon/assets/nodes_hexagon.svg diff --git a/src/components/icon/assets/nodes_hexagon.svg b/src/components/icon/assets/nodes_hexagon.svg new file mode 100644 index 00000000..9110e85e --- /dev/null +++ b/src/components/icon/assets/nodes_hexagon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icon/iconsList.js b/src/components/icon/iconsList.js index f8963c96..00584490 100644 --- a/src/components/icon/iconsList.js +++ b/src/components/icon/iconsList.js @@ -215,6 +215,7 @@ import node_notification_l from "./assets/node_notification_l.svg" import node_parent from "./assets/node_parent.svg" import node_selected_l from "./assets/node_selected_l.svg" import nodes from "./assets/nodes.svg" +import nodes_hexagon from "./assets/nodes_hexagon.svg" import nodes_hollow from "./assets/nodes_hollow.svg" import nodes_update from "./assets/nodes_update.svg" import none_selected from "./assets/none_selected.svg" @@ -694,6 +695,7 @@ export const iconsList = { node_parent, node_selected_l, node, + nodes_hexagon, nodes_hollow, nodes_update, nodes, From cc789b6d9dcc4101c1a47c700b5c9fe31b099663 Mon Sep 17 00:00:00 2001 From: novykh Date: Mon, 10 Aug 2026 15:29:34 +0300 Subject: [PATCH 2/5] Add the hexagon_more icon for the collapsed rail overflow The glyph for the "N more" tile in the navigation's collapsed rail, which has been rendering as an empty tile because no such mark existed. Two changes from the supplied artwork, both forced by how the Icon component works. The export was a whole tile rather than a glyph: it carried the tile's own 23x23 bordered rect, which the rail already draws itself and recolours on selection, plus a drop shadow and an inner shadow. Neither survives here - no other asset in the set uses a filter, and a baked border would double-draw and then stay grey while the tile around it turned green. The artwork was also two-tone, a translucent hexagon under lighter dots. Icon applies a single colour to the whole SVG, so a straight fill-strip would have made the hexagon solid and swallowed the dots. The hexagon is therefore drawn as a ring - outer and inner path under fill-rule evenodd - which keeps the dots legible and lets the whole mark follow one colour. A stroke would not work, since the colour arrives as a fill. The ring is a uniform 1 unit thick and the dots clear its inner edge by 1.1 units. The dot artwork is unchanged. viewBox is 4 8 16 16, a square crop centred on the hexagon, so the glyph is not distorted when given equal width and height. --- src/components/icon/assets/hexagon_more.svg | 4 ++++ src/components/icon/iconsList.js | 2 ++ 2 files changed, 6 insertions(+) create mode 100644 src/components/icon/assets/hexagon_more.svg diff --git a/src/components/icon/assets/hexagon_more.svg b/src/components/icon/assets/hexagon_more.svg new file mode 100644 index 00000000..56579a9d --- /dev/null +++ b/src/components/icon/assets/hexagon_more.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/icon/iconsList.js b/src/components/icon/iconsList.js index 00584490..ef5b351e 100644 --- a/src/components/icon/iconsList.js +++ b/src/components/icon/iconsList.js @@ -134,6 +134,7 @@ import heart from "./assets/heart.svg" import heart_broken from "./assets/heart_broken.svg" import heart_hollow from "./assets/heart_hollow.svg" import help from "./assets/help.svg" +import hexagon_more from "./assets/hexagon_more.svg" import hide from "./assets/hide.svg" import highlightArea from "./assets/highlight_area.svg" import holder from "./assets/holder.svg" @@ -615,6 +616,7 @@ export const iconsList = { heart_hollow, heart, help, + hexagon_more, hide, highlightArea, holder, From 00630e9f0c7eda0d9348231d61d684bf82336b8a Mon Sep 17 00:00:00 2001 From: novykh Date: Mon, 10 Aug 2026 15:34:48 +0300 Subject: [PATCH 3/5] Add the hexagon_hollow icon for the rail's up-one-level tile The glyph for the tile that moves up one level in the navigation's collapsed rail. That tile is a working link with a tooltip today but renders as an empty square, because no plain hexagon outline existed in the set. Five contexts show it - a node, a node's Live and Logs views, a single alert and a single dashboard - so five drill-in states currently have a blank tile. Named for the shape rather than the direction, following the existing _hollow outline pairs, since the mark carries no directional cue of its own; the meaning comes from the tooltip the rail supplies. Path data and winding are exactly as supplied. Only the fill attributes are removed, per the icon README, so the colour follows the Icon component. --- src/components/icon/assets/hexagon_hollow.svg | 3 +++ src/components/icon/iconsList.js | 2 ++ 2 files changed, 5 insertions(+) create mode 100644 src/components/icon/assets/hexagon_hollow.svg diff --git a/src/components/icon/assets/hexagon_hollow.svg b/src/components/icon/assets/hexagon_hollow.svg new file mode 100644 index 00000000..b6b9c094 --- /dev/null +++ b/src/components/icon/assets/hexagon_hollow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icon/iconsList.js b/src/components/icon/iconsList.js index ef5b351e..00de472d 100644 --- a/src/components/icon/iconsList.js +++ b/src/components/icon/iconsList.js @@ -134,6 +134,7 @@ import heart from "./assets/heart.svg" import heart_broken from "./assets/heart_broken.svg" import heart_hollow from "./assets/heart_hollow.svg" import help from "./assets/help.svg" +import hexagon_hollow from "./assets/hexagon_hollow.svg" import hexagon_more from "./assets/hexagon_more.svg" import hide from "./assets/hide.svg" import highlightArea from "./assets/highlight_area.svg" @@ -616,6 +617,7 @@ export const iconsList = { heart_hollow, heart, help, + hexagon_hollow, hexagon_more, hide, highlightArea, From 7efd7d67b196679af88bd294fe07fde59867c3b7 Mon Sep 17 00:00:00 2001 From: novykh Date: Mon, 10 Aug 2026 15:40:53 +0300 Subject: [PATCH 4/5] Add the slo and uptime icons Two more marks the navigation menu needs, both currently borrowing unrelated glyphs: SLOs renders the quality-of-service mark and Uptime renders the around-the-clock one. - slo: dashed target and radar rings around a centre dot - uptime: clock hands inside a ring, with a counter-clockwise restore arrow Supplied as-is; only the fill attributes are removed so the colour follows the Icon component. Path data is untouched. No traces icon here. The design reuses the Logs glyph for that row, so it needs no new asset - the consuming app can point at the existing logs icon. --- src/components/icon/assets/slo.svg | 3 +++ src/components/icon/assets/uptime.svg | 4 ++++ src/components/icon/iconsList.js | 4 ++++ 3 files changed, 11 insertions(+) create mode 100644 src/components/icon/assets/slo.svg create mode 100644 src/components/icon/assets/uptime.svg diff --git a/src/components/icon/assets/slo.svg b/src/components/icon/assets/slo.svg new file mode 100644 index 00000000..9986b324 --- /dev/null +++ b/src/components/icon/assets/slo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icon/assets/uptime.svg b/src/components/icon/assets/uptime.svg new file mode 100644 index 00000000..566b8705 --- /dev/null +++ b/src/components/icon/assets/uptime.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/icon/iconsList.js b/src/components/icon/iconsList.js index 00de472d..363587ab 100644 --- a/src/components/icon/iconsList.js +++ b/src/components/icon/iconsList.js @@ -422,6 +422,7 @@ import settings from "./assets/settings.svg" import settings_h from "./assets/settings_h.svg" import share from "./assets/share.svg" import sign_in from "./assets/sign_in.svg" +import slo from "./assets/slo.svg" import socialChat from "./assets/social_chat.svg" import sort_ascending from "./assets/sort_ascending.svg" import sort_descending from "./assets/sort_descending.svg" @@ -455,6 +456,7 @@ import unreachableNode from "./assets/unreachableNode.svg" import update from "./assets/update.svg" import update_pending from "./assets/update_pending.svg" import upload from "./assets/upload.svg" +import uptime from "./assets/uptime.svg" import user from "./assets/user.svg" import userConfig from "./assets/user_config.svg" import userPress from "./assets/user_press.svg" @@ -906,6 +908,7 @@ export const iconsList = { share, socialChat, sign_in, + slo, sort_ascending, sort_descending, sort_indicator, @@ -938,6 +941,7 @@ export const iconsList = { update_pending, update, upload, + uptime, user, userConfig, userPress, From aca62959eefda1d2488c43f6c5d052eb46906853 Mon Sep 17 00:00:00 2001 From: novykh Date: Mon, 10 Aug 2026 16:08:25 +0300 Subject: [PATCH 5/5] v5.5.8 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index aede2f3d..e812fc8f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@netdata/netdata-ui", - "version": "5.5.7", + "version": "5.5.8", "description": "netdata UI kit", "main": "dist/index.js", "module": "dist/es6/index.js",