Data sources UI improvements by derek-ho · Pull Request #1059 · opensearch-project/dashboards-observability

derek-ho · 2023-09-30T23:06:53Z

Description

Make changes according to UX feedback:

Change spacing/heading style of permissions sub group on configure flow
Make CTA for error toast
Remove edit capabilities on datasource specific page
hook up s3 and prometheus correctly, and send actual data in request

Issues Resolved

[List any issues this PR will resolve]

Check List

New functionality includes testing.
- All tests pass, including unit test, integration test and doctest
New functionality has been documented.
- New functionality has javadoc added
- New functionality has user manual doc added
Commits are signed per the DCO using --signoff

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.
For more information on following Developer Certificate of Origin and signing off your commits, please check here.

Signed-off-by: Derek Ho <dxho@amazon.com>

codecov · 2023-09-30T23:25:36Z

Codecov Report

Merging #1059 (7d7cdad) into main (18256c5) will decrease coverage by 0.03%.
Report is 1 commits behind head on main.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             main    #1059      +/-   ##
==========================================
- Coverage   44.44%   44.42%   -0.03%     
==========================================
  Files         324      322       -2     
  Lines       19116    19117       +1     
  Branches     4572     4572              
==========================================
- Hits         8496     8492       -4     
- Misses      10577    10582       +5     
  Partials       43       43

Flag	Coverage Δ
dashboards-observability	`44.42% <ø> (-0.03%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

see 14 files with indirect coverage changes

Signed-off-by: Derek Ho <dxho@amazon.com>

derek-ho · 2023-10-02T19:48:46Z

public/components/datasources/components/manage/access_control_tab.tsx

-  const saveChanges = () => {
-    http!.put(`${DATACONNECTIONS_BASE}`, {
-      body: JSON.stringify({
-        name: props.dataConnection,
-        allowedRoles: selectedQueryPermissionRoles.map((role) => role.label),
-        connector: props.connector,
-        properties: props.properties,
-      }),
-    });
-    setMode('view');
-  };


datasources is read only for now until backend support PATCH

Signed-off-by: Derek Ho <dxho@amazon.com>

…vability into UX-feedback

Signed-off-by: Derek Ho <dxho@amazon.com>

Swiddis · 2023-10-03T21:01:48Z

public/components/datasources/components/new/auth_details.tsx

+  setAccessKeyForRequest?: React.Dispatch<React.SetStateAction<string>>;
+  setSecretKeyForRequest?: React.Dispatch<React.SetStateAction<string>>;
+  setPasswordForRequest: React.Dispatch<React.SetStateAction<string>>;
+  setUsernameForRequest: React.Dispatch<React.SetStateAction<string>>;


I know we do it quite often so I'm more just curious: is there any way to send updaters in props without having to write out all these dispatch types and keep track of everything?

Swiddis · 2023-10-03T21:02:52Z

public/components/datasources/components/new/auth_details.tsx

+    setRegionForRequest,
+    setSecretKeyForRequest,
+    setUsernameForRequest,
+  } = props;


At this point I would probably just use the object directly to make it more explicit, call it authProps and use e.g. authProps.currentUsername or authProps.setAccessKeyForRequest. The extra typing is worth the clarity.

Swiddis · 2023-10-03T21:06:44Z

public/components/datasources/components/new/review_prometheus_datasource_configuration.tsx

-                  {currentUsername ? 'Basic auth' : 'AWSSigV4'}
+                  {currentAuthMethod === 'basicauth'
+                    ? 'Basic authentication'
+                    : 'AWS Signature Version 4'}


No handling for noauth. Seems pervasive in some other spots as well.

Prometheus only supports basic and sigv4

Signed-off-by: Derek Ho <dxho@amazon.com>

* Make UI changes based on UX feedback Signed-off-by: Derek Ho <dxho@amazon.com> * Remove notifications pass through props Signed-off-by: Derek Ho <dxho@amazon.com> * Fix steps Signed-off-by: Derek Ho <dxho@amazon.com> * Remove edit buttons, delete files, update tests Signed-off-by: Derek Ho <dxho@amazon.com> * Finish fixing promtheus flow Signed-off-by: Derek Ho <dxho@amazon.com> * fix up s3 flow Signed-off-by: Derek Ho <dxho@amazon.com> * Hook up fields to actual call Signed-off-by: Derek Ho <dxho@amazon.com> * Update according to UX feedback and tests Signed-off-by: Derek Ho <dxho@amazon.com> * Add test Signed-off-by: Derek Ho <dxho@amazon.com> * Finish up test coverage for manage flow Signed-off-by: Derek Ho <dxho@amazon.com> --------- Signed-off-by: Derek Ho <dxho@amazon.com>

* Update mocha (#960) * added code for the change of design of the sidebar, fixed overriding … (#928) * Refactor add_integration_flyout to break out nested methods (#956) * [Log Explorer] Remove top level tabs (#970) * Explorer's timeheader & color change (#959) * Update caching (#965) * Move query_utils to /public (#983) * Remove Zeppelin Parser from Notebook (#985) * Explorer empty bucket (#990) * refactored classnames for sidebar (#933) * Refactor Integrations Backend to abstract IO (#947) * Create React component for Integrations Setup UI (#1009) * Create Data sources plugin with Manage Datasources Flow (#1035) * Manage datasources (#967) * Add acceleration management UI (#989) * Rename data sources to data connections (#1004) * Add fallback to show if user does not have datasource API permissions (#1008) * Add access control tab content (#992) * Delete datasource and Connection Configuration Tab (#1024) * adjust explorer chart color and spacing (#1051) * Configure S3 datasource flow (#1049) * Manage datasources (#967) * Add acceleration management UI (#989) * Rename data sources to data connections (#1004) * Add fallback to show if user does not have datasource API permissions (#1008) * Add access control tab content (#992) * Delete datasource and Connection Configuration Tab (#1024) * modified explorer data grid to follow discover look and feel (#1041) * Create prometheus datasource flow (#1054) * Manage datasources (#967) * Add acceleration management UI (#989) * Rename data sources to data connections (#1004) * Add fallback to show if user does not have datasource API permissions (#1008) * Add access control tab content (#992) * Delete datasource and Connection Configuration Tab (#1024) * added design changes for sidebar (#1061) * updated snapshots (#1062) * Update UI for integrations setup (#1052) * Data sources UI improvements (#1059) * adding redirection to datasources (#1063) * Move convertDateTime, refactor query_utils (#1064) * Setup S3 connection with integrations (#1057) * Use approved svg from UX (#1066) * Fix missing import 'moment' on query_utils. (#1067) --------- Signed-off-by: Derek Ho <dxho@amazon.com> Signed-off-by: sumukhswamy <sumukhhs@amazon.com> Signed-off-by: Eric Wei <menwe@amazon.com> Signed-off-by: Paul Sebastian <paulstn@amazon.com> Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> Signed-off-by: Simeon Widdis <sawiddis@gmail.com> Co-authored-by: sumukhswamy <sumukhhs@amazon.com> Co-authored-by: Eric Wei <menwe@amazon.com> Co-authored-by: Paul Sebastian <paul_sebastian@live.com> Co-authored-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> Co-authored-by: Paul Sebastian <paulstn@amazon.com> Co-authored-by: Shenoy Pratik <sgguruda@amazon.com> Co-authored-by: Simeon Widdis <sawiddis@amazon.com>

* Make UI changes based on UX feedback Signed-off-by: Derek Ho <dxho@amazon.com> * Remove notifications pass through props Signed-off-by: Derek Ho <dxho@amazon.com> * Fix steps Signed-off-by: Derek Ho <dxho@amazon.com> * Remove edit buttons, delete files, update tests Signed-off-by: Derek Ho <dxho@amazon.com> * Finish fixing promtheus flow Signed-off-by: Derek Ho <dxho@amazon.com> * fix up s3 flow Signed-off-by: Derek Ho <dxho@amazon.com> * Hook up fields to actual call Signed-off-by: Derek Ho <dxho@amazon.com> * Update according to UX feedback and tests Signed-off-by: Derek Ho <dxho@amazon.com> * Add test Signed-off-by: Derek Ho <dxho@amazon.com> * Finish up test coverage for manage flow Signed-off-by: Derek Ho <dxho@amazon.com> --------- Signed-off-by: Derek Ho <dxho@amazon.com>

* Update mocha (opensearch-project#960) * added code for the change of design of the sidebar, fixed overriding … (opensearch-project#928) * Refactor add_integration_flyout to break out nested methods (opensearch-project#956) * [Log Explorer] Remove top level tabs (opensearch-project#970) * Explorer's timeheader & color change (opensearch-project#959) * Update caching (opensearch-project#965) * Move query_utils to /public (opensearch-project#983) * Remove Zeppelin Parser from Notebook (opensearch-project#985) * Explorer empty bucket (opensearch-project#990) * refactored classnames for sidebar (opensearch-project#933) * Refactor Integrations Backend to abstract IO (opensearch-project#947) * Create React component for Integrations Setup UI (opensearch-project#1009) * Create Data sources plugin with Manage Datasources Flow (opensearch-project#1035) * Manage datasources (opensearch-project#967) * Add acceleration management UI (opensearch-project#989) * Rename data sources to data connections (opensearch-project#1004) * Add fallback to show if user does not have datasource API permissions (opensearch-project#1008) * Add access control tab content (opensearch-project#992) * Delete datasource and Connection Configuration Tab (opensearch-project#1024) * adjust explorer chart color and spacing (opensearch-project#1051) * Configure S3 datasource flow (opensearch-project#1049) * Manage datasources (opensearch-project#967) * Add acceleration management UI (opensearch-project#989) * Rename data sources to data connections (opensearch-project#1004) * Add fallback to show if user does not have datasource API permissions (opensearch-project#1008) * Add access control tab content (opensearch-project#992) * Delete datasource and Connection Configuration Tab (opensearch-project#1024) * modified explorer data grid to follow discover look and feel (opensearch-project#1041) * Create prometheus datasource flow (opensearch-project#1054) * Manage datasources (opensearch-project#967) * Add acceleration management UI (opensearch-project#989) * Rename data sources to data connections (opensearch-project#1004) * Add fallback to show if user does not have datasource API permissions (opensearch-project#1008) * Add access control tab content (opensearch-project#992) * Delete datasource and Connection Configuration Tab (opensearch-project#1024) * added design changes for sidebar (opensearch-project#1061) * updated snapshots (opensearch-project#1062) * Update UI for integrations setup (opensearch-project#1052) * Data sources UI improvements (opensearch-project#1059) * adding redirection to datasources (opensearch-project#1063) * Move convertDateTime, refactor query_utils (opensearch-project#1064) * Setup S3 connection with integrations (opensearch-project#1057) * Use approved svg from UX (opensearch-project#1066) * Fix missing import 'moment' on query_utils. (opensearch-project#1067) --------- Signed-off-by: Derek Ho <dxho@amazon.com> Signed-off-by: sumukhswamy <sumukhhs@amazon.com> Signed-off-by: Eric Wei <menwe@amazon.com> Signed-off-by: Paul Sebastian <paulstn@amazon.com> Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> Signed-off-by: Simeon Widdis <sawiddis@gmail.com> Co-authored-by: sumukhswamy <sumukhhs@amazon.com> Co-authored-by: Eric Wei <menwe@amazon.com> Co-authored-by: Paul Sebastian <paul_sebastian@live.com> Co-authored-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> Co-authored-by: Paul Sebastian <paulstn@amazon.com> Co-authored-by: Shenoy Pratik <sgguruda@amazon.com> Co-authored-by: Simeon Widdis <sawiddis@amazon.com> (cherry picked from commit 171acde)

derek-ho added 2 commits September 30, 2023 19:05

Make UI changes based on UX feedback

41d304f

Signed-off-by: Derek Ho <dxho@amazon.com>

Remove notifications pass through props

3166229

Signed-off-by: Derek Ho <dxho@amazon.com>

derek-ho force-pushed the UX-feedback branch from 754cbc1 to 3166229 Compare October 2, 2023 15:05

derek-ho added 2 commits October 2, 2023 11:06

Fix steps

77b216c

Signed-off-by: Derek Ho <dxho@amazon.com>

Remove edit buttons, delete files, update tests

814bf67

Signed-off-by: Derek Ho <dxho@amazon.com>

derek-ho commented Oct 2, 2023

View reviewed changes

derek-ho added 3 commits October 2, 2023 17:33

Finish fixing promtheus flow

4352b1e

Signed-off-by: Derek Ho <dxho@amazon.com>

fix up s3 flow

a63f58f

Signed-off-by: Derek Ho <dxho@amazon.com>

Hook up fields to actual call

c8e9338

Signed-off-by: Derek Ho <dxho@amazon.com>

derek-ho marked this pull request as ready for review October 2, 2023 22:12

derek-ho requested review from Swiddis, YANG-DB, anirudha, dai-chen, joshuali925, kavithacm, mengweieric, penghuo, pjfitzgibbons, ps48, rupal-bq, seankao-az and vamsimanohar as code owners October 2, 2023 22:12

derek-ho added 2 commits October 2, 2023 20:03

Merge branch 'main' of github.com:opensearch-project/dashboards-obser…

fdf26af

…vability into UX-feedback

Update according to UX feedback and tests

f28a36e

Signed-off-by: Derek Ho <dxho@amazon.com>

Swiddis reviewed Oct 3, 2023

View reviewed changes

Swiddis approved these changes Oct 3, 2023

View reviewed changes

derek-ho added 2 commits October 3, 2023 17:39

Add test

74108b5

Signed-off-by: Derek Ho <dxho@amazon.com>

Finish up test coverage for manage flow

7d7cdad

Signed-off-by: Derek Ho <dxho@amazon.com>

ps48 approved these changes Oct 3, 2023

View reviewed changes

YANG-DB approved these changes Oct 3, 2023

View reviewed changes

YANG-DB merged commit af822a5 into opensearch-project:main Oct 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Data sources UI improvements#1059

Data sources UI improvements#1059
YANG-DB merged 11 commits intoopensearch-project:mainfrom
derek-ho:UX-feedback

derek-ho commented Sep 30, 2023 •

edited

Loading

Uh oh!

codecov bot commented Sep 30, 2023 •

edited

Loading

Uh oh!

derek-ho Oct 2, 2023

Uh oh!

Swiddis Oct 3, 2023

Uh oh!

Swiddis Oct 3, 2023

Uh oh!

Swiddis Oct 3, 2023

Uh oh!

derek-ho Oct 3, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

derek-ho commented Sep 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Issues Resolved

Check List

Uh oh!

codecov bot commented Sep 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

derek-ho Oct 2, 2023

Choose a reason for hiding this comment

Uh oh!

Swiddis Oct 3, 2023

Choose a reason for hiding this comment

Uh oh!

Swiddis Oct 3, 2023

Choose a reason for hiding this comment

Uh oh!

Swiddis Oct 3, 2023

Choose a reason for hiding this comment

Uh oh!

derek-ho Oct 3, 2023

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

derek-ho commented Sep 30, 2023 •

edited

Loading

codecov bot commented Sep 30, 2023 •

edited

Loading