Data sources UI improvements #1059

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 <[email protected]>

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 <[email protected]>

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 <[email protected]>

…vability into UX-feedback

Signed-off-by: Derek Ho <[email protected]>

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 <[email protected]>

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

* 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 <[email protected]> Signed-off-by: sumukhswamy <[email protected]> Signed-off-by: Eric Wei <[email protected]> Signed-off-by: Paul Sebastian <[email protected]> Signed-off-by: Peter Fitzgibbons <[email protected]> Signed-off-by: Shenoy Pratik <[email protected]> Signed-off-by: Simeon Widdis <[email protected]> Co-authored-by: sumukhswamy <[email protected]> Co-authored-by: Eric Wei <[email protected]> Co-authored-by: Paul Sebastian <[email protected]> Co-authored-by: Peter Fitzgibbons <[email protected]> Co-authored-by: Paul Sebastian <[email protected]> Co-authored-by: Shenoy Pratik <[email protected]> Co-authored-by: Simeon Widdis <[email protected]>

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

* 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 <[email protected]> Signed-off-by: sumukhswamy <[email protected]> Signed-off-by: Eric Wei <[email protected]> Signed-off-by: Paul Sebastian <[email protected]> Signed-off-by: Peter Fitzgibbons <[email protected]> Signed-off-by: Shenoy Pratik <[email protected]> Signed-off-by: Simeon Widdis <[email protected]> Co-authored-by: sumukhswamy <[email protected]> Co-authored-by: Eric Wei <[email protected]> Co-authored-by: Paul Sebastian <[email protected]> Co-authored-by: Peter Fitzgibbons <[email protected]> Co-authored-by: Paul Sebastian <[email protected]> Co-authored-by: Shenoy Pratik <[email protected]> Co-authored-by: Simeon Widdis <[email protected]> (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 <[email protected]>

Remove notifications pass through props

3166229

Signed-off-by: Derek Ho <[email protected]>

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 <[email protected]>

Remove edit buttons, delete files, update tests

814bf67

Signed-off-by: Derek Ho <[email protected]>

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 <[email protected]>

fix up s3 flow

a63f58f

Signed-off-by: Derek Ho <[email protected]>

Hook up fields to actual call

c8e9338

Signed-off-by: Derek Ho <[email protected]>

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

derek-ho requested review from pjfitzgibbons, ps48, kavithacm, joshuali925, dai-chen, YANG-DB, rupal-bq, mengweieric, vmmusings, Swiddis, penghuo, seankao-az and anirudha 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 <[email protected]>

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 <[email protected]>

Finish up test coverage for manage flow

7d7cdad

Signed-off-by: Derek Ho <[email protected]>

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
8 of 9 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Data sources UI improvements #1059

Data sources UI improvements #1059

derek-ho commented Sep 30, 2023 •

edited

Loading

codecov bot commented Sep 30, 2023 •

edited

Loading

derek-ho Oct 2, 2023

Swiddis Oct 3, 2023

Swiddis Oct 3, 2023

Swiddis Oct 3, 2023

derek-ho Oct 3, 2023

Data sources UI improvements #1059

Data sources UI improvements #1059

Conversation

derek-ho commented Sep 30, 2023 • edited Loading

Description

Issues Resolved

Check List

codecov bot commented Sep 30, 2023 • edited Loading

Codecov Report

derek-ho Oct 2, 2023

Choose a reason for hiding this comment

Swiddis Oct 3, 2023

Choose a reason for hiding this comment

Swiddis Oct 3, 2023

Choose a reason for hiding this comment

Swiddis Oct 3, 2023

Choose a reason for hiding this comment

derek-ho Oct 3, 2023

Choose a reason for hiding this comment

derek-ho commented Sep 30, 2023 •

edited

Loading

codecov bot commented Sep 30, 2023 •

edited

Loading