Skip to content
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.

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

Initial Work For Acceleration Wizard UI #745

Closed
wants to merge 17 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
5 changes: 5 additions & 0 deletions common/constants/shared.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export const DSL_CAT = '/cat.indices';
export const DSL_MAPPING = '/indices.getFieldMapping';
export const OBSERVABILITY_BASE = '/api/observability';
export const INTEGRATIONS_BASE = '/api/integrations';
export const DATASOURCES_BASE = '/api/datasources';
export const EVENT_ANALYTICS = '/event_analytics';
export const SAVED_OBJECTS = '/saved_objects';
export const SAVED_QUERY = '/query';
Expand Down Expand Up @@ -56,6 +57,10 @@ export const observabilityIntegrationsID = 'integrations';
export const observabilityIntegrationsTitle = 'Integrations';
export const observabilityIntegrationsPluginOrder = 9020;

export const observabilityDatasourcesID = 'datasources';
export const observabilityDatasourcesTitle = 'Datasources';
export const observabilityDatasourcesPluginOrder = 9030;

// Shared Constants
export const SQL_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/search-plugins/sql/index/';
export const PPL_DOCUMENTATION_URL =
Expand Down
2 changes: 1 addition & 1 deletion opensearch_dashboards.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"id": "observabilityDashboards",
"version": "3.0.0.0",
"opensearchDashboardsVersion": "3.0.0",
"opensearchDashboardsVersion": "2.9.0",
"server": true,
"ui": true,
"requiredPlugins": [
Expand Down
2 changes: 2 additions & 0 deletions public/components/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { EventAnalytics } from './event_analytics';
import { Home as MetricsHome } from './metrics/index';
import { Main as NotebooksHome } from './notebooks/components/main';
import { Home as TraceAnalyticsHome } from './trace_analytics/home';
import { Home as DatasourcesHome } from './flint/home';

interface ObservabilityAppDeps {
CoreStartProp: CoreStart;
Expand All @@ -44,6 +45,7 @@ const pages = {
notebooks: NotebooksHome,
dashboards: CustomPanelsHome,
integrations: IntegrationsHome,
datasources: DatasourcesHome,
};

export const App = ({
Expand Down
63 changes: 63 additions & 0 deletions public/components/common/tabbed_page/tabbed_page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import {
EuiLink,
EuiPageHeader,
EuiPageHeaderSection,
EuiSpacer,
EuiTab,
EuiTabs,
EuiText,
EuiTitle,
} from '@elastic/eui';
import _ from 'lodash';
import React, { useEffect, useState } from 'react';
import { OPENSEARCH_DOCUMENTATION_URL } from '../../../../common/constants/integrations';

interface TabbedPageProps {
tabNames: Array<[string, string]>;
header: JSX.Element;
}

interface Tab {
id: string;
name: string;
}

export function TabbedPage(props: TabbedPageProps) {
const { tabNames, header } = props;
const tabs: Tab[] = tabNames.map((tabName: [string, string]) => {
return { id: tabName[0], name: tabName[1] };
});

const [selectedTabId, setSelectedTabId] = useState(
window.location.hash.substring(2) ? window.location.hash.substring(2) : tabs && tabs.at(0)!.id
);

const onSelectedTabChanged = (id) => {
setSelectedTabId(id);
window.location.hash = id;
};

const renderTabs = () => {
return tabs.map((tab, index) => (
<EuiTab
onClick={() => onSelectedTabChanged(tab.id)}
isSelected={tab.id === selectedTabId}
key={index}
>
{tab.name}
</EuiTab>
));
};
return (
<div>
{header}
<EuiTabs display="condensed">{renderTabs()}</EuiTabs>
<EuiSpacer size="s" />
</div>
);
}
4 changes: 4 additions & 0 deletions public/components/flint/components/accelerate.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.accelerateCheckableCard {
width: 450px;
}

17 changes: 17 additions & 0 deletions public/components/flint/components/accelerate_callout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import { EuiCallOut } from '@elastic/eui';
import React from 'react';

export function AccelerateCallout() {
return (
<EuiCallOut title="Considerations for data acceleration" iconType="help">
<p>
Warning about not indexing personal or sensitive data, something about the cost of indexing.
</p>
</EuiCallOut>
);
}
22 changes: 22 additions & 0 deletions public/components/flint/components/accelerate_flyout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import _ from 'lodash';
import { EuiFlyout, EuiFlyoutBody } from '@elastic/eui';
import React, { useState } from 'react';
import { Accelerate } from './accelerate_page';

interface AccelerateFlyoutProps {
onClose: () => void;
pplService: any;
}

export function AccelerateFlyout(props: AccelerateFlyoutProps) {
return (
<EuiFlyout data-test-subj="accelerateFlyout" onClose={props.onClose} size="m">
<Accelerate isFlyout={true} {...props} />
</EuiFlyout>
);
}
59 changes: 59 additions & 0 deletions public/components/flint/components/accelerate_header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import {
EuiFlyoutHeader,
EuiLink,
EuiPageHeader,
EuiPageHeaderSection,
EuiSpacer,
EuiTab,
EuiTabs,
EuiText,
EuiTitle,
} from '@elastic/eui';
import _ from 'lodash';
import React, { useEffect, useState } from 'react';
import { OPENSEARCH_DOCUMENTATION_URL } from '../../../../common/constants/integrations';
import { AccelerateHeaderProps } from './accelerate_types';

export function AccelerateHeader(props: AccelerateHeaderProps) {
if (props.isFlyout) {
return (
<div>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="l" data-test-subj="accelerate-header">
<h1>Accelerate Data</h1>
</EuiTitle>
<EuiSpacer size="s" />
<EuiText size="s" color="subdued">
Index your data in OpenSearch for faster query performance.{' '}
<EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
Learn more
</EuiLink>
</EuiText>
</EuiFlyoutHeader>
</div>
);
}
return (
<div>
<EuiPageHeader>
<EuiPageHeaderSection>
<EuiTitle size="l" data-test-subj="accelerate-header">
<h1>Accelerate Data</h1>
</EuiTitle>
</EuiPageHeaderSection>
</EuiPageHeader>
<EuiSpacer size="s" />
<EuiText size="s" color="subdued">
Index your data in OpenSearch for faster query performance.{' '}
<EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
Learn more
</EuiLink>
</EuiText>
</div>
);
}
Loading
Loading