Skip to content

Data sources UI improvements #1059

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
YANG-DB merged 11 commits into from
Oct 3, 2023
Merged

Data sources UI improvements #1059

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
41d304f
Make UI changes based on UX feedback
derek-ho Sep 30, 2023
3166229
Remove notifications pass through props
derek-ho Sep 30, 2023
77b216c
Fix steps
derek-ho Oct 2, 2023
814bf67
Remove edit buttons, delete files, update tests
derek-ho Oct 2, 2023
4352b1e
Finish fixing promtheus flow
derek-ho Oct 2, 2023
a63f58f
fix up s3 flow
derek-ho Oct 2, 2023
c8e9338
Hook up fields to actual call
derek-ho Oct 2, 2023
fdf26af
Merge branch 'main' of github.com:opensearch-project/dashboards-obser…
derek-ho Oct 3, 2023
f28a36e
Update according to UX feedback and tests
derek-ho Oct 3, 2023
74108b5
Add test
derek-ho Oct 3, 2023
7d7cdad
Finish up test coverage for manage flow
derek-ho Oct 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 24 additions & 2 deletions .cypress/integration/10_datasources.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,38 @@
*/

/// <reference types="cypress" />


const moveToDatasourcesHome = () => {
cy.visit(`${Cypress.env('opensearchDashboards')}/app/dataconnections`);
cy.visit(`${Cypress.env('opensearchDashboards')}/app/datasources`);
};

const moveToNewDatasourcesPage = () => {
cy.visit(`${Cypress.env('opensearchDashboards')}/app/datasources#/new`);
};

const moveToCreatePrometheusDatasourcePage = () => {
cy.visit(`${Cypress.env('opensearchDashboards')}/app/datasources#/configure/PROMETHEUS`);
};

describe('Basic sanity test for datasources plugin', () => {
describe('Integration tests for datasources plugin', () => {
const testPrometheusSuffix = (Math.random() + 1).toString(36).substring(7);
const testPrometheusInstance = `Prometheus_${testPrometheusSuffix}`;
const testS3Suffix = (Math.random() + 1).toString(36).substring(7);
const testS3Instance = `S3_${testS3Suffix}`;
it('Navigates to datasources plugin and expects the correct header', () => {
moveToDatasourcesHome();
cy.get('[data-test-subj="dataconnections-header"]').should('exist');
});

it('Tests navigation between tabs and goes to Prometheus creation flow', () => {
moveToDatasourcesHome();
cy.get('[data-test-subj="new"]').click();
cy.url().should('include', '/new')
cy.get('[data-test-subj="datasource_card_prometheus"]').click();
cy.url().should('include', '/configure/PROMETHEUS');
});

});


Expand Down
12 changes: 10 additions & 2 deletions common/constants/data_connections.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,16 @@
* SPDX-License-Identifier: Apache-2.0
*/

export const OPENSEARCH_DOCUMENTATION_URL =
'https://opensearch.org/docs/latest/data-connections/index';
import { DatasourceType } from '../../common/types/data_connections';

export const OPENSEARCH_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/data-sources/index';

export const QUERY_RESTRICTED = 'query-restricted';
export const QUERY_ALL = 'query-all';

export const DatasourceTypeToDisplayName: { [key in DatasourceType]: string } = {
PROMETHEUS: 'Prometheus',
S3GLUE: 'S3',
};

export type AuthMethod = 'noauth' | 'basicauth' | 'awssigv4';
2 changes: 1 addition & 1 deletion common/types/data_connections.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,4 @@ export interface PermissionsConfigurationProps {

export type Role = EuiComboBoxOptionOption;

export type DatasourceType = 'SPARK' | 'S3GLUE' | 'OPENSEARCH' | 'PROMETHEUS';
export type DatasourceType = 'S3GLUE' | 'PROMETHEUS';
200 changes: 5 additions & 195 deletions ...c/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,31 +53,9 @@ exports[`Data Connection Page test Renders data connection page with data 1`] =
<div
class="euiText euiText--small overview-content"
>
my_spark3
prom
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
class="euiText euiText--medium overview-title"
>
Authentication method
</div>
<div
class="euiText euiText--small overview-content"
>
-
</div>
</div>
</div>
</div>
<div
class="euiFlexItem"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
Expand All @@ -92,20 +70,6 @@ exports[`Data Connection Page test Renders data connection page with data 1`] =
-
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
class="euiText euiText--medium overview-title"
>
Query permissions
</div>
<div
class="euiText euiText--small overview-content"
>
Everyone
</div>
</div>
</div>
</div>
<div
Expand All @@ -120,12 +84,12 @@ exports[`Data Connection Page test Renders data connection page with data 1`] =
<div
class="euiText euiText--medium overview-title"
>
Spark data location
Prometheus URI
</div>
<div
class="euiText euiText--small overview-content"
>
-
localhost:9201
</div>
</div>
</div>
Expand Down Expand Up @@ -225,142 +189,7 @@ exports[`Data Connection Page test Renders data connection page with data 1`] =
id="random_html_idDescription"
>
<p>
Query your data in Data Explorer or Observability Logs.
</p>
</div>
</div>
</div>
</div>
<div
class="euiFlexItem"
>
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--centerAligned euiCard--isClickable euiCard--hasIcon"
>
<div
class="euiCard__top"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--xxLarge euiIcon-isLoading euiCard__icon"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
/>
</div>
<div
class="euiCard__content"
>
<span
class="euiTitle euiTitle--small euiCard__title"
id="random_html_idTitle"
>
<button
aria-describedby=" random_html_idDescription"
class="euiCard__titleButton"
>
Accelerate performance
</button>
</span>
<div
class="euiText euiText--small euiCard__description"
id="random_html_idDescription"
>
<p>
Accelerate performance through OpenSearch indexing.
</p>
</div>
</div>
</div>
</div>
<div
class="euiFlexItem"
>
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--centerAligned euiCard--isClickable euiCard--hasIcon"
>
<div
class="euiCard__top"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--xxLarge euiIcon-isLoading euiCard__icon"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
/>
</div>
<div
class="euiCard__content"
>
<span
class="euiTitle euiTitle--small euiCard__title"
id="random_html_idTitle"
>
<button
aria-describedby=" random_html_idDescription"
class="euiCard__titleButton"
>
Tables
</button>
</span>
<div
class="euiText euiText--small euiCard__description"
id="random_html_idDescription"
>
<p>
Manually Define Tables
</p>
</div>
</div>
</div>
</div>
<div
class="euiFlexItem"
>
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--centerAligned euiCard--isClickable euiCard--hasIcon"
>
<div
class="euiCard__top"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--xxLarge euiIcon-isLoading euiCard__icon"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
/>
</div>
<div
class="euiCard__content"
>
<span
class="euiTitle euiTitle--small euiCard__title"
id="random_html_idTitle"
>
<button
aria-describedby=" random_html_idDescription"
class="euiCard__titleButton"
>
Integrations data
</button>
</span>
<div
class="euiText euiText--small euiCard__description"
id="random_html_idDescription"
>
<p>
Explore data faster through integrations
Query your data in Metrics Analytics.
</p>
</div>
</div>
Expand Down Expand Up @@ -468,25 +297,6 @@ exports[`Data Connection Page test Renders data connection page with data 1`] =
Control which OpenSearch users have access to this data source.
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
class="euiButton euiButton--primary euiButton--fill"
data-test-subj="createButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
>
<span
class="euiButton__text"
>
Edit
</span>
</span>
</button>
</div>
</div>
<hr
class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
Expand All @@ -511,7 +321,7 @@ exports[`Data Connection Page test Renders data connection page with data 1`] =
<div
class="euiText euiText--small overview-content"
>
-
Everyone
</div>
</div>
</div>
Expand Down
4 changes: 3 additions & 1 deletion ...atasources/components/__tests__/__snapshots__/manage_data_connections_table.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ exports[`Manage Data Connections Table test Renders manage data connections tabl

<a
class="euiLink euiLink--primary"
href="https://opensearch.org/docs/latest/data-connections/index"
href="https://opensearch.org/docs/latest/data-sources/index"
rel="noreferrer"
target="blank"
>
Expand Down Expand Up @@ -65,6 +65,7 @@ exports[`Manage Data Connections Table test Renders manage data connections tabl
<button
aria-selected="true"
class="euiTab euiTab-isSelected"
data-test-subj="manage"
role="tab"
type="button"
>
Expand All @@ -77,6 +78,7 @@ exports[`Manage Data Connections Table test Renders manage data connections tabl
<button
aria-selected="false"
class="euiTab"
data-test-subj="new"
role="tab"
type="button"
>
Expand Down
2 changes: 1 addition & 1 deletion public/components/datasources/components/__tests__/data_connection.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ jest.mock('../../../../../public/framework/core_refs', () => ({
setBreadcrumbs: jest.fn(),
},
http: {
get: jest.fn().mockResolvedValueOnce(mockRoleData).mockResolvedValue(describeDataConnection),
get: jest.fn().mockResolvedValue(describeDataConnection),
},
},
}));
Expand Down
1 change: 1 addition & 0 deletions public/components/datasources/components/data_connections_header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export const DataConnectionsHeader = () => {
isSelected={tab.id === selectedTabId}
disabled={tab.disabled}
key={index}
data-test-subj={tab.id}
>
{tab.name}
</EuiTab>
Expand Down
Loading