[Uptime][Monitor Management UI] Add Enabled column in monitor management monitors list table. #121682

awahab07 · 2021-12-20T18:23:38Z

Fixes elastic/uptime#415

Summary

Adds Enabled column to the monitor management monitors list table (manage_monitors page).

Toggling the switch initiates the request to enable/disable that monitor.
Toast notifications will show the success/failure messages for the operation.
Failure to update the enabled state will set the UI switch to the original state.

Screenshots

Videos

uptime-415-monitor-enabled-column.mov

Update
After adding progress bar to mark busy state of switch:

uptime-415-Enabled-progress-bar.mov

How to test this PR locally

Go through this and enable monitor management.
Add few monitors.
On monitors list page (/app/uptime/manage-monitors), toggle the Enabled switch and test the behavior.

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
~~[ ] Documentation was added for features that require explanation or tutorials~~
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
~~[ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list~~
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

elasticmachine · 2021-12-20T18:23:43Z

Pinging @elastic/uptime (Team:uptime)

dominiqueclarke

Looks great! Works like a charm. A few comments.

dominiqueclarke · 2021-12-21T20:54:10Z

x-pack/plugins/uptime/public/components/monitor_management/monitor_list/monitor_enabled.tsx

+  return (
+    <EuiSwitch
+      checked={enabled}
+      disabled={isLoading}


Can we also add a loading indicator next to the switch when loading, similar to the pattern found in Uptime for our simple monitor alert.

Should be as simple as adding an xs EuiSpinner.

Sounds good.

I've added the progress bar instead as showing a spinner would jitter the table row as it takes more space.

uptime-415-Enabled-progress-bar.mov

dominiqueclarke · 2021-12-21T20:54:41Z

x-pack/plugins/uptime/public/components/monitor_management/monitor_list/monitor_enabled.tsx

+      });
+      setRefresh(true);
+    }
+  }, [status]); // eslint-disable-line react-hooks/exhaustive-deps


Disabling exhaustive deps always gives me pause. Can you explain why you are disabling exhaustive deps?

Because here I want the side effect to execute only when status changes. Without suppressing the linter, it would complain until isEnabled is also provided to deps, along with others, which is not desired here.

Thanks for the explanation. Could you add an inline comment for context?

dominiqueclarke · 2021-12-21T20:57:11Z

x-pack/plugins/uptime/public/components/monitor_management/monitor_list/monitor_enabled.tsx

+}
+
+export const MonitorEnabled = ({ id, monitor, setRefresh }: Props) => {
+  const [isEnabled, setIsEnabled] = useState<boolean | null>(null);


Can we set the default for this to monitor[ConfigKey.ENABLED].

isEnabled tracks the recent ui state. When it is null, default would be used. So I am doing const enabled = isEnabled ?? monitor[ConfigKey.ENABLED]; below.

dominiqueclarke · 2021-12-21T20:59:07Z

x-pack/plugins/uptime/public/components/monitor_management/monitor_list/monitor_enabled.tsx

+      checked={enabled}
+      disabled={isLoading}
+      showLabel={false}
+      label={''}


I think you could get rid of the aria-label below in favor of using the label here, paired with showLabel={false}. I could be wrong.

It does work indeed. Great to learn that, thanks.

x-pack/plugins/uptime/public/components/monitor_management/monitor_list/monitor_list.tsx

awahab07 · 2021-12-30T10:39:56Z

@elasticmachine merge upstream

awahab07 · 2022-01-01T19:39:30Z

@elasticmachine merge upstream

awahab07 · 2022-01-04T10:22:43Z

@elasticmachine merge upstream

elastic/uptime#415

dominiqueclarke

LGTM

awahab07 · 2022-01-09T19:01:04Z

@elasticmachine merge upstream

…ment-list-table

kibana-ci · 2022-01-09T20:26:09Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`uptime`	673	674	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`uptime`	684.8KB	686.7KB	+1.8KB

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
`uptime`	38	39	+1

Total ESLint disabled count

id	before	after	diff
`uptime`	43	44	+1

History

💛 Build #15823 was flaky 60d5311
💚 Build #15626 succeeded 86561c270fe90fe7d2c2f5d908a9fc0bc9038d23
💚 Build #15524 succeeded c7af235b5c539a408529a147449763051abe0db5
💚 Build #15412 succeeded faaf7f6e06b9cae87df4c8504c82759985172d81
💚 Build #15197 succeeded 010b3ea5d91b08c2dc1281f7c0d770e46b277b68
💚 Build #15181 succeeded 791bdecf832b253f895a9ca242c883037c883141

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

awahab07 requested a review from a team as a code owner December 20, 2021 18:23

botelastic bot added the Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability label Dec 20, 2021

awahab07 added auto-backport Deprecated - use backport:version if exact versions are needed release_note:skip Skip the PR/issue when compiling release notes v8.0.0 v8.1.0 labels Dec 20, 2021

awahab07 force-pushed the uptime-415-add-enabled-toggle-monitor-management-list-table branch from 5127c07 to 1cb17ad Compare December 21, 2021 18:34

awahab07 removed the v8.0.0 label Dec 21, 2021

dominiqueclarke reviewed Dec 21, 2021

View reviewed changes

awahab07 force-pushed the uptime-415-add-enabled-toggle-monitor-management-list-table branch from 1cb17ad to 791bdec Compare December 27, 2021 22:31

awahab07 added 4 commits January 5, 2022 02:08

Add enabled column in monitor management monitors list table.

e096cc0

elastic/uptime#415

Stricter typing.

4fce3da

elastic/uptime#415

Utilize label=false instead of aria-label prop.

d6948b3

elastic/uptime#415

Added progress bar when Enabled switch is busy.

60d5311

elastic/uptime#415

awahab07 force-pushed the uptime-415-add-enabled-toggle-monitor-management-list-table branch from 86561c2 to 60d5311 Compare January 5, 2022 01:09

awahab07 added the ci:deploy-cloud label Jan 5, 2022

dominiqueclarke self-requested a review January 6, 2022 15:48

dominiqueclarke approved these changes Jan 6, 2022

View reviewed changes

Merge branch 'main' into uptime-415-add-enabled-toggle-monitor-manage…

63569cf

…ment-list-table

awahab07 added backport:skip This commit does not require backporting and removed auto-backport Deprecated - use backport:version if exact versions are needed labels Jan 10, 2022

awahab07 merged commit 786f416 into elastic:main Jan 10, 2022

tylersmalley added the ci:cloud-deploy Create or update a Cloud deployment label Aug 17, 2022

tylersmalley removed the ci:deploy-cloud label Aug 17, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Uptime][Monitor Management UI] Add Enabled column in monitor management monitors list table. #121682

[Uptime][Monitor Management UI] Add Enabled column in monitor management monitors list table. #121682

awahab07 commented Dec 20, 2021 •

edited

Loading

elasticmachine commented Dec 20, 2021

dominiqueclarke left a comment

dominiqueclarke Dec 21, 2021

awahab07 Dec 28, 2021

awahab07 Dec 28, 2021

awahab07 Dec 28, 2021

dominiqueclarke Dec 21, 2021

awahab07 Dec 28, 2021

dominiqueclarke Jan 6, 2022

dominiqueclarke Dec 21, 2021

awahab07 Dec 28, 2021

dominiqueclarke Dec 21, 2021 •

edited

Loading

awahab07 Dec 28, 2021

awahab07 commented Dec 30, 2021

awahab07 commented Jan 1, 2022

awahab07 commented Jan 4, 2022

dominiqueclarke left a comment

awahab07 commented Jan 9, 2022

kibana-ci commented Jan 9, 2022

ESLint disabled line counts

Total ESLint disabled count

[Uptime][Monitor Management UI] Add Enabled column in monitor management monitors list table. #121682

[Uptime][Monitor Management UI] Add Enabled column in monitor management monitors list table. #121682

Conversation

awahab07 commented Dec 20, 2021 • edited Loading

Summary

Screenshots

Videos

How to test this PR locally

Checklist

For maintainers

elasticmachine commented Dec 20, 2021

dominiqueclarke left a 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

Choose a reason for hiding this comment

dominiqueclarke Dec 21, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

awahab07 commented Dec 30, 2021

awahab07 commented Jan 1, 2022

awahab07 commented Jan 4, 2022

dominiqueclarke left a comment

Choose a reason for hiding this comment

awahab07 commented Jan 9, 2022

kibana-ci commented Jan 9, 2022

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

ESLint disabled line counts

Total ESLint disabled count

History

awahab07 commented Dec 20, 2021 •

edited

Loading

dominiqueclarke Dec 21, 2021 •

edited

Loading