Datanode List Page UI #17161

gally47 · 2023-11-02T16:08:08Z

Motivation and Context

fixes #17159

/nocl

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Refactoring (non-breaking change)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.

grotlue

Below are the results of testing this PR.
I still need to test the sorting functionality of the columns "Name" and "Is leader" and the searching but I still need to figure out how to manipulate these fields.
I found some issues with this list, I will review the code afterwards.

Test results

✅Data Node List shows all data nodes with "Name", "Transport address", "Status", "Is leader", "Certificate valid until" and "Actions"
✅When clicking on "More" in the "Actions" column it shows the following actions
- Renew certificate
- Start
- Stop
- Rejoin
- Remove
❌ The action "Stop" should only be shown for running data nodes
❌ The action "Start" should only be shown for stopped data nodes
✅When clicking on "Stop" it shows a notification
✅When clicking on "Stop" the status changes from "Available" to "Unavailable"
✅When clicking on "Start" it shows a notification
✅When clicking on "Start" the status changes from "Unavailable" to "Starting" to "Available"
❌ Entries can be sorted by "Status"
❌ Entries can be sorted by " Certificate valid until"
❌ The search syntax help shows information about searchable fields in this list -> Shows fields that are not in the list, like id, description
✅Clicking on the name leads to the detail view
✅Columns can be hidden and shown using the "Columns" dropdown on the right
✅A "Data Nodes documentation" link on the top right redirects to the official Graylog Documentation for Data Nodes
✅When clicking "Renew certificate" it shows a success notification
When clicking "Renew certificate" the certificate is renewed
⚠️ The confirmation modal for "Rejoin" talks about resetting the Data Node. The naming is not consistent and thus confusing. I'd suggest to change "reset" to "rejoin" in the modal.
✅When clicking "Remove" a confirmation modal is shown
✅When confirming the removal a success notification is shown
✅When confirming the removal the status changes to "Removing" and later to "Removed"
✅When clicking "Rejoin" a confirmation modal is shown
✅When confirming rejoining a success notification is shown
✅When confirming rejoining the status changes to "Unconfigured"
❌ When confirming rejoining the status does not change further and stays "Unconfigured", however in preflight mode nothing else can be configured for this Data Node
❌ When removing a rejoined Data Node which is stuck on "Unconfigured" it shows a success message, but the status does not change
✅Entries can be sorted by "Name"
✅Entries can be sorted by "Is leader"
❌ Entries can be searched by "Name"

grotlue

Code looks good in general. However, I think we should go through all the copy and make sure we use one spelling of Data Node.

graylog2-web-interface/src/components/datanode/DataNodeList/DataNodeActions.tsx

graylog2-web-interface/src/components/datanode/hooks/useDataNodes.ts

grotlue · 2023-12-18T15:14:32Z

graylog2-web-interface/src/components/datanode/hooks/useDataNodes.ts

+    () => fetchDataNodes(params),
+    {
+      onError: (errorThrown) => {
+        UserNotification.error(`Loading datanodes failed with status: ${errorThrown}`,


Same here, another way to spell datanodes.

graylog2-web-interface/src/pages/DataNodesClusterPage.tsx

graylog2-web-interface/src/pages/DataNodesMigrationPage.tsx

ousmaneo · 2023-12-19T09:54:15Z

Thank you for your test and review. I fixed all the frontend-related comments. For these below, we will need to adjust the backend; for example, for the search-related issue, the frontend sends the right request, and the same goes for the sorting.
Hi @moesterheld can you help with this?

❌ Entries can be sorted by "Status"
❌ Entries can be sorted by " Certificate valid until"
❌ When confirming rejoining the status does not change further and stays "Unconfigured", however in preflight mode nothing else can be configured for this Data Node
❌ When removing a rejoined Data Node which is stuck on "Unconfigured" it shows a success message, but the status does not change
❌ Entries can be searched by "Name"

moesterheld · 2023-12-19T15:51:27Z

❌ Entries can be sorted by "Status"
❌ Entries can be sorted by " Certificate valid until"

I have created a issue for these, as making that available is not trivial. Maybe the sorting button could be hidden in these columns in the UI in the meantime?

grotlue

Thanks a lot for the fixes!

I still found inconsistencies in the copy, so I went through all the files and commented suggestions so it's easier to track an update. I suggested to go with Data Node/Data Nodes, using it as a term/own name.

❌ Entries can be sorted by "Status"
❌ Entries can be sorted by " Certificate valid until"

I have created a issue for these, as making that available is not trivial. Maybe the sorting button could be hidden in these columns in the UI in the meantime?

I think this is a good idea, so we don't merge something broken.

I retested the other cases and they look fine now! However, I added to more cases which I think should be adjusted.

Test results

✅ Entries can be searched by "Name"
✅ When confirming rejoining the status does not change further and stays "Unconfigured", however in preflight mode nothing else can be configured for this Data Node
✅ ~~When removing a rejoined Data Node which is stuck on "Unconfigured" it shows a success message, but the status does not change~~
✅ The search syntax help shows information about searchable fields in this list -> Shows fields that are not in the list, like id, description
✅ The action "Stop" should only be shown for running data nodes
✅ The action "Start" should only be shown for stopped data nodes
✅ ~~The confirmation modal for "Rejoin" talks about resetting the Data Node. The naming is not consistent and thus confusing. I'd suggest to change "reset" to "rejoin" in the modal.~~

❌ The action "Rejoin" should only be shown for removed data nodes
❌ The action "Remove" should only be for data nodes that are not already removed

grotlue · 2023-12-19T17:14:11Z

graylog2-web-interface/src/components/datanode/DataNodeList/DataNodeActions.tsx

+
+const DIALOG_TEXT = {
+  [DIALOG_TYPES.REJOIN]: {
+    dialogTitle: 'Rejoin Datanode',


Suggested change

dialogTitle: 'Rejoin Datanode',

dialogTitle: 'Rejoin Data Node',

grotlue · 2023-12-19T17:14:27Z

graylog2-web-interface/src/components/datanode/DataNodeList/DataNodeActions.tsx

+const DIALOG_TEXT = {
+  [DIALOG_TYPES.REJOIN]: {
+    dialogTitle: 'Rejoin Datanode',
+    dialogBody: (datanode: string) => `Are you sure you want to rejoin datanode "${datanode}"?`,


Suggested change

dialogBody: (datanode: string) => `Are you sure you want to rejoin datanode "${datanode}"?`,

dialogBody: (datanode: string) => `Are you sure you want to rejoin Data Node "${datanode}"?`,

grotlue · 2023-12-19T17:14:33Z

graylog2-web-interface/src/components/datanode/DataNodeList/DataNodeActions.tsx

+    dialogBody: (datanode: string) => `Are you sure you want to rejoin datanode "${datanode}"?`,
+  },
+  [DIALOG_TYPES.REMOVE]: {
+    dialogTitle: 'Remove datanode',


Suggested change

dialogTitle: 'Remove datanode',

dialogTitle: 'Remove Data Node',

grotlue · 2023-12-19T17:14:40Z

graylog2-web-interface/src/components/datanode/DataNodeList/DataNodeActions.tsx

+  },
+  [DIALOG_TYPES.REMOVE]: {
+    dialogTitle: 'Remove datanode',
+    dialogBody: (datanode: string) => `Are you sure you want to remove datanode "${datanode}"?`,


Suggested change

dialogBody: (datanode: string) => `Are you sure you want to remove datanode "${datanode}"?`,

dialogBody: (datanode: string) => `Are you sure you want to remove Data Node "${datanode}"?`,

grotlue · 2023-12-19T17:14:46Z

graylog2-web-interface/src/components/datanode/DataNodeList/DataNodeActions.tsx

+    dialogBody: (datanode: string) => `Are you sure you want to remove datanode "${datanode}"?`,
+  },
+  [DIALOG_TYPES.STOP]: {
+    dialogTitle: 'Stop datanode',


Suggested change

dialogTitle: 'Stop datanode',

dialogTitle: 'Stop Data Node',

grotlue · 2023-12-19T17:18:34Z

graylog2-web-interface/src/pages/DataNodesMigrationPage.tsx

+    <DataNodesPageNavigation />
+    <PageHeader title="Data nodes Migration"
+                documentationLink={{
+                  title: 'Data nodes documentation',


Suggested change

title: 'Data nodes documentation',

title: 'Data Nodes documentation',

grotlue · 2023-12-19T17:18:42Z

graylog2-web-interface/src/pages/DataNodesMigrationPage.tsx

+                  path: DocsHelper.PAGES.GRAYLOG_DATA_NODE,
+                }}>
+      <span>
+        Graylog data nodes offer a better integration with Graylog and simplify future updates. They allow you to index and search through all the messages in your Graylog message database.


Suggested change

Graylog data nodes offer a better integration with Graylog and simplify future updates. They allow you to index and search through all the messages in your Graylog message database.

Graylog Data Nodes offer a better integration with Graylog and simplify future updates. They allow you to index and search through all the messages in your Graylog message database.

grotlue · 2023-12-19T17:19:19Z

graylog2-web-interface/src/pages/DataNodesPage.tsx


 const DataNodesPage = () => (
  <DocumentTitle title="Data Nodes">
+    <DataNodesPageNavigation />
    <PageHeader title="Data Nodes"
                documentationLink={{
                  title: 'Data Nodes documentation',


Spelling already correct.

grotlue · 2023-12-19T17:19:23Z

graylog2-web-interface/src/pages/DataNodesPage.tsx


 const DataNodesPage = () => (
  <DocumentTitle title="Data Nodes">
+    <DataNodesPageNavigation />
    <PageHeader title="Data Nodes"


Spelling already correct.

grotlue · 2023-12-19T17:20:04Z

graylog2-web-interface/src/components/datanode/DataNodePageNavigation.tsx

-  { title: 'Overview', path: Routes.SYSTEM.DATANODES.OVERVIEW, exactPathMatch: true },
-  { title: 'Monitoring & Management', path: Routes.SYSTEM.DATANODES.OVERVIEW },
-  { title: 'Migrations', path: Routes.SYSTEM.DATANODES.OVERVIEW },
+  { title: 'Data Nodes', path: Routes.SYSTEM.DATANODES.LIST, exactPathMatch: true },


Spelling already correct.

grotlue

Two more places for the spelling. I will just commit those suggestions, that will make it easier :)

Also It would be good if we can still "fix":
❌ The action "Rejoin" should only be shown for removed data nodes
❌ The action "Remove" should only be for data nodes that are not already removed

graylog2-web-interface/src/components/datanode/DataNodeList/DataNodeActions.tsx

grotlue

Looking great! Thanks a lot!

✅ The action “Rejoin” should only be shown for removed data nodes
✅ The action “Remove” should only be for data nodes that are not already removed

Co-authored-by: Gary Bot <[email protected]>

…taNodeActions.tsx

…des.ts

gally47 self-assigned this Nov 9, 2023

gally47 assigned ousmaneo Nov 27, 2023

ousmaneo force-pushed the datanode-list-page branch 3 times, most recently from c20249e to e37a853 Compare December 1, 2023 15:14

ousmaneo changed the base branch from master to feature/17383-datanode-lifecycle-validations December 1, 2023 15:15

Base automatically changed from feature/17383-datanode-lifecycle-validations to master December 5, 2023 11:16

ousmaneo requested a review from grotlue December 11, 2023 13:10

grotlue requested changes Dec 15, 2023

View reviewed changes

grotlue requested changes Dec 18, 2023

View reviewed changes

ousmaneo requested a review from grotlue December 19, 2023 09:55

moesterheld mentioned this pull request Dec 19, 2023

Add sorting by certificate validity and status to data node list #17753

Open

grotlue requested changes Dec 19, 2023

View reviewed changes

ousmaneo force-pushed the datanode-list-page branch from cabbf59 to 654c1a1 Compare December 20, 2023 08:12

ousmaneo requested a review from grotlue December 20, 2023 08:13

grotlue reviewed Dec 20, 2023

View reviewed changes

graylog2-web-interface/src/components/datanode/DataNodeList/DataNodeActions.tsx Outdated Show resolved Hide resolved

ousmaneo requested a review from grotlue December 20, 2023 12:03

grotlue approved these changes Dec 20, 2023

View reviewed changes

gally47 added 10 commits December 20, 2023 15:50

cherry picked new datanode page

2a32d57

initial setup for datanode page navigation

788a620

added DataNodesPageNavigation to pages

83080af

DataNodeList component initial setup

5016d55

fix build

38383e7

datanode list initial prototype

ce76557

fix eslint issues

bf0c092

add datanode list components

32ddf34

fix eslint issues

22a87a3

add new data node button

aebb541

ousmaneo and others added 27 commits December 20, 2023 15:50

add todo

2987d3b

add license header

5bc3b1a

fix linter

fad89c4

fix linter

48ce2b7

Updating yarn lockfile (#17528)

fb2f804

Co-authored-by: Gary Bot <[email protected]>

replace quotes

e5a618e

add confirm dialog for actions

539b157

cleanup status cell

2399825

handle certificate renewal

f48d388

remove bulk actions

993b8c1

add start/stop datanode

ef3f62d

show leader and add cert info to details

eb8192b

remove is_master

7e0cc7d

use correct action on start button

0bb2c18

fix spelling

5645dec

fix review

d3b7c1b

update Datatable QueryHelper example to use ReactNode

c75106c

remove DataNodeBulkActions

ae9ae62

fix query by name

93cb1a0

add check for removal of running nodes

683ffd6

remove done todo

c33df84

fix reset to do a complete restart

43aad76

make status and cert_valid_until not sortable

71a905a

update spelling

c33239d

Update graylog2-web-interface/src/components/datanode/DataNodeList/Da…

b8f203c

…taNodeActions.tsx

Update graylog2-web-interface/src/components/datanode/hooks/useDataNo…

237facd

…des.ts

show remove and rejoin for relevant state

c9db05f

ousmaneo force-pushed the datanode-list-page branch from ff140f9 to c9db05f Compare December 20, 2023 15:56

ousmaneo merged commit f0a9ca2 into master Dec 21, 2023
6 checks passed

ousmaneo deleted the datanode-list-page branch December 21, 2023 09:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Datanode List Page UI #17161

Datanode List Page UI #17161

gally47 commented Nov 2, 2023 •

edited

Loading

grotlue left a comment •

edited

Loading

grotlue left a comment

grotlue Dec 18, 2023

ousmaneo commented Dec 19, 2023 •

edited

Loading

moesterheld commented Dec 19, 2023

grotlue left a comment

grotlue Dec 19, 2023

grotlue Dec 19, 2023

grotlue Dec 19, 2023

grotlue Dec 19, 2023

grotlue Dec 19, 2023

grotlue Dec 19, 2023

grotlue Dec 19, 2023

grotlue Dec 19, 2023

grotlue Dec 19, 2023

grotlue Dec 19, 2023

grotlue left a comment

grotlue left a comment

	dialogTitle: 'Rejoin Datanode',
	dialogTitle: 'Rejoin Data Node',

	dialogBody: (datanode: string) => `Are you sure you want to rejoin datanode "${datanode}"?`,
	dialogBody: (datanode: string) => `Are you sure you want to rejoin Data Node "${datanode}"?`,

	dialogTitle: 'Remove datanode',
	dialogTitle: 'Remove Data Node',

	title: 'Data nodes documentation',
	title: 'Data Nodes documentation',

	Graylog data nodes offer a better integration with Graylog and simplify future updates. They allow you to index and search through all the messages in your Graylog message database.
	Graylog Data Nodes offer a better integration with Graylog and simplify future updates. They allow you to index and search through all the messages in your Graylog message database.

Datanode List Page UI #17161

Datanode List Page UI #17161

Conversation

gally47 commented Nov 2, 2023 • edited Loading

Motivation and Context

Types of changes

Checklist:

grotlue left a comment • edited Loading

Choose a reason for hiding this comment

Test results

grotlue left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ousmaneo commented Dec 19, 2023 • edited Loading

moesterheld commented Dec 19, 2023

grotlue left a comment

Choose a reason for hiding this comment

Test results

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

grotlue left a comment

Choose a reason for hiding this comment

grotlue left a comment

Choose a reason for hiding this comment

gally47 commented Nov 2, 2023 •

edited

Loading

grotlue left a comment •

edited

Loading

ousmaneo commented Dec 19, 2023 •

edited

Loading