Skip to content

Commit

Permalink
[Feature] OverviewPage made with Content Management (#2077) (#2113)
Browse files Browse the repository at this point in the history
* overview page with content management

Signed-off-by: Adam Tackett <[email protected]>

* Changed dashboard picker modal to be flyout

Signed-off-by: Dan Dong <[email protected]>

* Changed cards to be scrollable

Signed-off-by: Dan Dong <[email protected]>

* Deep linked dashboard from overview page

Signed-off-by: Dan Dong <[email protected]>

* Updated jest testing

Signed-off-by: Dan Dong <[email protected]>

* Fixed bugs

Signed-off-by: Dan Dong <[email protected]>

* validates the dashboard exsit before loading, clears if it is and resets user setting

Signed-off-by: Adam Tackett <[email protected]>

* Add Observability Overview breadcrumb to display title

Signed-off-by: Adam Tackett <[email protected]>

* Update snapshots, small ui changes

Signed-off-by: Adam Tackett <[email protected]>

* Ui adjustments, moved header wrapper to helper folder

Signed-off-by: Adam Tackett <[email protected]>

* fix linting error

Signed-off-by: Adam Tackett <[email protected]>

* remove comments

Signed-off-by: Adam Tackett <[email protected]>

* adding dashboard manager for state mgmt

Signed-off-by: Shenoy Pratik <[email protected]>

* refine observables

Signed-off-by: Shenoy Pratik <[email protected]>

* update tests and rename components

Signed-off-by: Shenoy Pratik <[email protected]>

* add comment to move away from rxjs

Signed-off-by: Shenoy Pratik <[email protected]>

* searchable selectable box added for dashboard selection

Signed-off-by: Adam Tackett <[email protected]>

* updated shared variables, update text for cards

Signed-off-by: Adam Tackett <[email protected]>

* rename variables

Signed-off-by: Adam Tackett <[email protected]>

---------

Signed-off-by: Adam Tackett <[email protected]>
Signed-off-by: Dan Dong <[email protected]>
Signed-off-by: Adam Tackett <[email protected]>
Signed-off-by: Shenoy Pratik <[email protected]>
Co-authored-by: Adam Tackett <[email protected]>
Co-authored-by: Dan Dong <[email protected]>
Co-authored-by: Shenoy Pratik <[email protected]>
(cherry picked from commit 881e56a)
  • Loading branch information
TackAdam authored Sep 3, 2024
1 parent 38bc4ed commit fc7e009
Show file tree
Hide file tree
Showing 36 changed files with 2,698 additions and 158 deletions.
8 changes: 8 additions & 0 deletions common/constants/overview.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

export const alertsPluginID = 'alerting';
export const anomalyPluginID = 'anomalyDetection';
export const observabilityDashboardsKey = 'observability:defaultDashboard';
8 changes: 8 additions & 0 deletions common/constants/shared.ts
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,14 @@ export const observabilityMetricsID = 'observability-metrics';
export const observabilityMetricsTitle = 'Metrics';
export const observabilityMetricsPluginOrder = 5092;

export const observabilityTracesNewNavID = 'observability-traces-nav';
export const observabilityTracesNewNavURL = observabilityTracesNewNavID + '#/traces';
export const observabilityTracesID = 'observability-traces';
export const observabilityTracesTitle = 'Traces';
export const observabilityTracesPluginOrder = 5093;

export const observabilityServicesNewNavID = 'observability-services-nav';
export const observabilityServicesNewNavURL = observabilityServicesNewNavID + '#/services';
export const observabilityServicesID = 'observability-services';
export const observabilityServicesTitle = 'Services';
export const observabilityServicesPluginOrder = 5092;
Expand All @@ -84,6 +88,10 @@ export const observabilityDataConnectionsPluginOrder = 9030;
export const queryWorkbenchPluginID = 'opensearch-query-workbench';
export const queryWorkbenchPluginCheck = 'plugin:queryWorkbenchDashboards';

export const alertingPluginID = 'alerting';
export const anomalyDetectionPluginID = 'anomaly-detection-dashboards';
export const discoverPluginID = 'data-explorer/discover';

// Shared Constants
export const SQL_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/search-plugins/sql/index/';
export const PPL_DOCUMENTATION_URL =
Expand Down
20 changes: 20 additions & 0 deletions common/types/overview.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

export interface DashboardState {
startDate: string;
endDate: string;
dashboardTitle: string;
dashboardId: string;
}

export interface DashboardSavedObjectsType {
[key: string]: {
value: string;
label: string;
startDate: string;
endDate: string;
};
}
3 changes: 2 additions & 1 deletion opensearch_dashboards.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@
"savedObjects",
"uiActions",
"urlForwarding",
"visualizations"
"visualizations",
"contentManagement"
],
"optionalPlugins": [
"managementOverview",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ import { ApplicationType, AvailabilityType } from '../../../../common/types/appl
import { UI_DATE_FORMAT } from '../../../../common/constants/shared';
import { setNavBreadCrumbs } from '../../../../common/utils/set_nav_bread_crumbs';
import { DeleteModal } from '../../common/helpers/delete_modal';
import { HeaderControlledComponentsWrapper } from '../../../../public/plugin_headerControl';
import { HeaderControlledComponentsWrapper } from '../../../../public/plugin_helpers/plugin_headerControl';
import { coreRefs } from '../../../framework/core_refs';

const newNavigation = coreRefs.chrome?.navGroup.getNavGroupEnabled();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ import { Configuration } from './configuration';
import { ServiceDetailFlyout } from './flyout_components/service_detail_flyout';
import { TraceDetailFlyout } from './flyout_components/trace_detail_flyout';
import { coreRefs } from '../../../framework/core_refs';
import { HeaderControlledComponentsWrapper } from '../../../../public/plugin_headerControl';
import { HeaderControlledComponentsWrapper } from '../../../../public/plugin_helpers/plugin_headerControl';

const newNavigation = coreRefs.chrome?.navGroup.getNavGroupEnabled();

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
import { EuiPage, EuiPageBody, EuiSpacer } from '@elastic/eui';
import React, { useEffect, useState } from 'react';
import { HomeProps } from 'public/components/getting_started/home';
import { GettingStartedConnectionsHeader } from './getting_started_header';
import { CollectAndShipData } from './getting_started_collectData';
import { QueryAndAnalyze } from './getting_started_queryAndAnalyze';

Expand Down Expand Up @@ -58,8 +57,6 @@ export const NewGettingStarted = (props: ExtendedHomeProps) => {
return (
<EuiPage>
<EuiPageBody component="div">
<GettingStartedConnectionsHeader />
<EuiSpacer size="l" />
<CollectAndShipData
isOpen={isPickYourSourceOpen}
onToggle={togglePickYourSource}
Expand All @@ -70,7 +67,7 @@ export const NewGettingStarted = (props: ExtendedHomeProps) => {
selectedDataSourceId={selectedDataSourceId}
selectedDataSourceLabel={selectedDataSourceLabel}
/>
<EuiSpacer size="l" />
<EuiSpacer size="m" />
{!isSampleDataset && (
<QueryAndAnalyze
isOpen={isQueryDataOpen}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
EuiTitle,
} from '@elastic/eui';
import { coreRefs } from '../../../../public/framework/core_refs';
import { fetchDashboardIds, fetchIndexPatternIds } from './utils';
import { fetchDashboardIds, fetchIndexPatternIds, redirectToDashboards } from './utils';

interface Pattern {
id: string;
Expand Down Expand Up @@ -80,7 +80,7 @@ export const QueryAndAnalyze: React.FC<QueryAndAnalyzeProps> = ({
});
};

const redirectToDashboards = (dashboardId: string) => {
const redirectToDashboardsMDS = (dashboardId: string) => {
const finalDashboardId = selectedDataSourceId
? `mds-${selectedDataSourceId}-objectId-${dashboardId}`
: dashboardId;
Expand Down Expand Up @@ -137,7 +137,7 @@ export const QueryAndAnalyze: React.FC<QueryAndAnalyzeProps> = ({
title={dashboard.title}
description={`Explore the ${dashboard.title} dashboard`}
onClick={() => {
redirectToDashboards(dashboard.id);
redirectToDashboardsMDS(dashboard.id);
}}
/>
</EuiFlexItem>
Expand Down
6 changes: 6 additions & 0 deletions public/components/getting_started/components/utils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,3 +59,9 @@ export const fetchIndexPatternIds = async (tutorialId: string) => {
console.error(err.message);
}
};

export const redirectToDashboards = (path: string) => {
coreRefs?.application!.navigateToApp('dashboards', {
path: `#/${path}`,
});
};
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ import { useToast } from '../../../../public/components/common/toast';
import { DeleteModal } from '../../common/helpers/delete_modal';
import { PanelTitle } from '../../trace_analytics/components/common/helper_functions';
import { AddedIntegrationProps } from './integration_types';
import { HeaderControlledComponentsWrapper } from '../../../../public/plugin_headerControl';
import { HeaderControlledComponentsWrapper } from '../../../../public/plugin_helpers/plugin_headerControl';
import { coreRefs } from '../../../framework/core_refs';

const newNavigation = coreRefs.chrome?.navGroup.getNavGroupEnabled();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import {
OPENSEARCH_DOCUMENTATION_URL,
} from '../../../../common/constants/integrations';
import { IntegrationUploadFlyout } from './upload_flyout';
import { HeaderControlledComponentsWrapper } from '../../../../public/plugin_headerControl';
import { HeaderControlledComponentsWrapper } from '../../../../public/plugin_helpers/plugin_headerControl';
import { coreRefs } from '../../../framework/core_refs';

const newNavigation = coreRefs.chrome?.navGroup.getNavGroupEnabled();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
EuiSmallButton,
} from '@elastic/eui';
import React from 'react';
import { HeaderControlledComponentsWrapper } from '../../../../public/plugin_headerControl';
import { HeaderControlledComponentsWrapper } from '../../../../public/plugin_helpers/plugin_headerControl';
import { coreRefs } from '../../../framework/core_refs';

const newNavigation = coreRefs.chrome?.navGroup.getNavGroupEnabled();
Expand Down
2 changes: 1 addition & 1 deletion public/components/notebooks/components/note_table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ import {
} from './helpers/modal_containers';
import { NotebookType } from './main';
import { setNavBreadCrumbs } from '../../../../common/utils/set_nav_bread_crumbs';
import { HeaderControlledComponentsWrapper } from '../../../../public/plugin_headerControl';
import { HeaderControlledComponentsWrapper } from '../../../../public/plugin_helpers/plugin_headerControl';
import { coreRefs } from '../../../framework/core_refs';

const newNavigation = coreRefs.chrome?.navGroup.getNavGroupEnabled();
Expand Down
2 changes: 1 addition & 1 deletion public/components/notebooks/components/notebook.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ import {
generateInContextReport,
} from './helpers/reporting_context_menu_helper';
import { Paragraphs } from './paragraph_components/paragraphs';
import { HeaderControlledComponentsWrapper } from '../../../../public/plugin_headerControl';
import { HeaderControlledComponentsWrapper } from '../../../../public/plugin_helpers/plugin_headerControl';
import { coreRefs } from '../../../framework/core_refs';

const newNavigation = coreRefs.chrome?.navGroup.getNavGroupEnabled();
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Add dashboard callout renders add dashboard callout 1`] = `
<AddDashboardCallout>
<EuiCallOut
color="primary"
iconType="gear"
title="Select your dashboard"
>
<div
className="euiCallOut euiCallOut--primary"
>
<div
className="euiCallOutHeader"
>
<EuiIcon
aria-hidden="true"
className="euiCallOutHeader__icon"
color="inherit"
size="m"
type="gear"
>
<EuiIconBeaker
aria-hidden={true}
className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
focusable="false"
role="img"
style={null}
>
<svg
aria-hidden={true}
className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
focusable="false"
height={16}
role="img"
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
/>
</svg>
</EuiIconBeaker>
</EuiIcon>
<span
className="euiCallOutHeader__title"
>
Select your dashboard
</span>
</div>
<EuiText
color="default"
size="s"
>
<div
className="euiText euiText--small"
>
<EuiTextColor
color="default"
component="div"
>
<div
className="euiTextColor euiTextColor--default"
>
<EuiText
size="s"
>
<div
className="euiText euiText--small"
>
<p>
Select a dashboard to be displayed on this Overview page, or complete the steps described in
<EuiLink
onClick={[Function]}
>
<button
className="euiLink euiLink--primary"
disabled={false}
onClick={[Function]}
type="button"
>
Getting Started Guide
</button>
</EuiLink>
to re-populate the dashboard with your log data. This dashboard can later be changed in advanced settings.
</p>
</div>
</EuiText>
<EuiSpacer>
<div
className="euiSpacer euiSpacer--l"
/>
</EuiSpacer>
<EuiButton>
<EuiButtonDisplay
baseClassName="euiButton"
disabled={false}
element="button"
isDisabled={false}
type="button"
>
<button
className="euiButton euiButton--primary"
disabled={false}
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<EuiButtonContent
className="euiButton__content"
iconGap="m"
iconSide="left"
textProps={
Object {
"className": "euiButton__text",
}
}
>
<span
className="euiButtonContent euiButton__content"
>
<span
className="euiButton__text"
>
Select
</span>
</span>
</EuiButtonContent>
</button>
</EuiButtonDisplay>
</EuiButton>
</div>
</EuiTextColor>
</div>
</EuiText>
</div>
</EuiCallOut>
</AddDashboardCallout>
`;
Loading

0 comments on commit fc7e009

Please sign in to comment.