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

[Manual Backport 2.x] New management overview page and rename stack management to dashboard management #4528

Merged
Merged
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
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
- Add category option within groups for context menus ([#4144](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4144))
- [Saved Object Service] Add Repository Factory Provider ([#4149](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4149))
- Enable plugins to augment visualizations with additional data and context ([#4361](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4361))
- New management overview page and rename stack management to dashboard management ([#4287](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4287))
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to update the PR number to be the backport one (4528) or keep using the original one is good enough ?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Autocut PR's anyway skip the change log entry and even though manual backport ones has the opportunity to update the PR number in the change log, I see most of the existing ones in 2.x pointing to the original PR.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No. Original PR stands as it has the most accurate history.



### 🐛 Bug Fixes

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ import { ComponentRegistry } from '../types';
import './index.scss';

const title = i18n.translate('advancedSettings.advancedSettingsLabel', {
defaultMessage: 'Advanced Settings',
defaultMessage: 'Advanced settings',
});
const crumb = [{ text: title }];

Expand Down
2 changes: 1 addition & 1 deletion src/plugins/advanced_settings/public/plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ import { AdvancedSettingsSetup, AdvancedSettingsStart, AdvancedSettingsPluginSet
const component = new ComponentRegistry();

const title = i18n.translate('advancedSettings.advancedSettingsLabel', {
defaultMessage: 'Advanced Settings',
defaultMessage: 'Advanced settings',
});

export class AdvancedSettingsPlugin
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/data_source_management/common/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@
*/

export const PLUGIN_ID = 'dataSourceManagement';
export const PLUGIN_NAME = 'Data Sources';
export const PLUGIN_NAME = 'Data sources';
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { mockDataSourceAttributesWithAuth } from '../mocks';
describe('DataSourceManagement: breadcrumbs.ts', () => {
test('get listing breadcrumb', () => {
const bc = getListBreadcrumbs();
expect(bc[0].text).toBe('Data Sources');
expect(bc[0].text).toBe('Data sources');
expect(bc[0].href).toBe('/');
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export function getListBreadcrumbs() {
return [
{
text: i18n.translate('dataSourcesManagement.dataSources.listBreadcrumb', {
defaultMessage: 'Data Sources',
defaultMessage: 'Data sources',
}),
href: `/`,
},
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/dev_tools/opensearch_dashboards.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"version": "opensearchDashboards",
"server": false,
"ui": true,
"optionalPlugins": ["dataSource"],
"optionalPlugins": ["dataSource", "managementOverview"],
"requiredPlugins": ["urlForwarding"],
"requiredBundles": ["dataSourceManagement"]
}
41 changes: 28 additions & 13 deletions src/plugins/dev_tools/public/plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,16 +34,20 @@ import { AppUpdater } from 'opensearch-dashboards/public';
import { i18n } from '@osd/i18n';
import { sortBy } from 'lodash';

import { DataSourcePluginStart } from 'src/plugins/data_source/public';
import { DataSourcePluginSetup } from 'src/plugins/data_source/public';
import { AppNavLinkStatus, DEFAULT_APP_CATEGORIES } from '../../../core/public';
import { UrlForwardingSetup } from '../../url_forwarding/public';
import { CreateDevToolArgs, DevToolApp, createDevToolApp } from './dev_tool';

import './index.scss';
import { ManagementOverViewPluginSetup } from '../../management_overview/public';

export interface DevToolsSetupDependencies {
dataSource?: DataSourcePluginStart;
dataSource?: DataSourcePluginSetup;
urlForwarding: UrlForwardingSetup;
managementOverview?: ManagementOverViewPluginSetup;
}

export interface DevToolsSetup {
/**
* Register a developer tool. It will be available
Expand All @@ -58,40 +62,51 @@ export interface DevToolsSetup {
register: (devTool: CreateDevToolArgs) => DevToolApp;
}

export class DevToolsPlugin implements Plugin<DevToolsSetup, void> {
export class DevToolsPlugin implements Plugin<DevToolsSetup> {
private readonly devTools = new Map<string, DevToolApp>();
private appStateUpdater = new BehaviorSubject<AppUpdater>(() => ({}));

private getSortedDevTools(): readonly DevToolApp[] {
return sortBy([...this.devTools.values()], 'order');
}

public setup(
coreSetup: CoreSetup<DevToolsSetupDependencies>,
{ urlForwarding }: { urlForwarding: UrlForwardingSetup }
) {
private title = i18n.translate('devTools.devToolsTitle', {
defaultMessage: 'Dev Tools',
});

public setup(coreSetup: CoreSetup, deps: DevToolsSetupDependencies) {
const { application: applicationSetup, getStartServices } = coreSetup;
const { urlForwarding, managementOverview } = deps;

applicationSetup.register({
id: 'dev_tools',
title: i18n.translate('devTools.devToolsTitle', {
defaultMessage: 'Dev Tools',
}),
title: this.title,
updater$: this.appStateUpdater,
euiIconType: '/plugins/home/assets/logos/opensearch_mark_default.svg',
order: 9010,
/* the order of dev tools, it shows as last item of management section */
order: 9070,
category: DEFAULT_APP_CATEGORIES.management,
mount: async (params: AppMountParameters) => {
const { element, history } = params;
element.classList.add('devAppWrapper');

const [core, devSetup] = await getStartServices();
const [core] = await getStartServices();

const { renderApp } = await import('./application');
return renderApp(core, element, history, this.getSortedDevTools(), devSetup);
return renderApp(core, element, history, this.getSortedDevTools(), deps);
},
});

managementOverview?.register({
id: 'dev_tools',
title: this.title,
description: i18n.translate('devTools.devToolsDescription', {
defaultMessage:
'Use the console to set up and troubleshoot your OpenSearch environment with the REST API.',
}),
order: 9070,
});

urlForwarding.forwardApp('dev_tools', 'dev_tools');

return {
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/index_pattern_management/public/plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export type IndexPatternManagementSetup = IndexPatternManagementServiceSetup;
export type IndexPatternManagementStart = IndexPatternManagementServiceStart;

const sectionsHeader = i18n.translate('indexPatternManagement.indexPattern.sectionsHeader', {
defaultMessage: 'Index Patterns',
defaultMessage: 'Index patterns',
});

const IPM_APP_ID = 'indexPatterns';
Expand Down
4 changes: 2 additions & 2 deletions src/plugins/management/opensearch_dashboards.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@
"version": "opensearchDashboards",
"server": true,
"ui": true,
"optionalPlugins": ["home"],
"requiredBundles": ["opensearchDashboardsReact", "opensearchDashboardsUtils", "home"]
"optionalPlugins": ["home", "managementOverview"],
"requiredBundles": ["opensearchDashboardsReact", "opensearchDashboardsUtils"]
}
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ interface ManagementLandingPageProps {
setBreadcrumbs: () => void;
}

export const ManagementLandingPage = ({ version, setBreadcrumbs }: ManagementLandingPageProps) => {
export const ManagementLandingPage = ({ setBreadcrumbs }: ManagementLandingPageProps) => {
useMount(() => {
setBreadcrumbs();
});
Expand All @@ -61,15 +61,14 @@ export const ManagementLandingPage = ({ version, setBreadcrumbs }: ManagementLan
<h1>
<FormattedMessage
id="management.landing.header"
defaultMessage="Welcome to Stack Management {version}"
values={{ version }}
defaultMessage="Welcome to Dashboards Management"
/>
</h1>
</EuiTitle>
<EuiText>
<FormattedMessage
id="management.landing.subhead"
defaultMessage="Manage your indices, index patterns, saved objects, OpenSearch Dashboards settings, and more."
defaultMessage="Manage your index patterns, saved objects, OpenSearch Dashboards settings, and more."
/>
</EuiText>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const sectionTip = i18n.translate('management.sections.section.tip', {
});

const opensearchDashboardsTitle = i18n.translate('management.sections.opensearchDashboardsTitle', {
defaultMessage: 'OpenSearch Dashboards',
defaultMessage: 'Dashboards Management',
});

const opensearchDashboardsTip = i18n.translate('management.sections.opensearchDashboardsTip', {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.mgtSideBarNav {
width: 210px;
width: 220px;
margin-right: $euiSize;
}

Expand Down
43 changes: 20 additions & 23 deletions src/plugins/management/public/plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
import { i18n } from '@osd/i18n';
import { BehaviorSubject } from 'rxjs';
import { ManagementSetup, ManagementStart } from './types';
import { FeatureCatalogueCategory, HomePublicPluginSetup } from '../../home/public';
import { HomePublicPluginSetup } from '../../home/public';
import {
CoreSetup,
CoreStart,
Expand All @@ -49,9 +49,11 @@ import {
ManagementSectionsService,
getSectionsServiceStartPrivate,
} from './management_sections_service';
import { ManagementOverViewPluginSetup } from '../../management_overview/public';

interface ManagementSetupDependencies {
home?: HomePublicPluginSetup;
managementOverview?: ManagementOverViewPluginSetup;
}

export class ManagementPlugin implements Plugin<ManagementSetup, ManagementStart> {
Expand All @@ -63,32 +65,17 @@ export class ManagementPlugin implements Plugin<ManagementSetup, ManagementStart

constructor(private initializerContext: PluginInitializerContext) {}

public setup(core: CoreSetup, { home }: ManagementSetupDependencies) {
const opensearchDashboardsVersion = this.initializerContext.env.packageInfo.version;
private title = i18n.translate('management.dashboardManagement.title', {
defaultMessage: 'Dashboards Management',
});

if (home) {
home.featureCatalogue.register({
id: 'stack-management',
title: i18n.translate('management.stackManagement.managementLabel', {
defaultMessage: 'Stack Management',
}),
description: i18n.translate('management.stackManagement.managementDescription', {
defaultMessage: 'Your center console for managing the OpenSearch Stack.',
}),
icon: 'managementApp',
path: '/app/management',
showOnHomePage: false,
category: FeatureCatalogueCategory.ADMIN,
visible: () => this.hasAnyEnabledApps,
});
}
public setup(core: CoreSetup, { home, managementOverview }: ManagementSetupDependencies) {
const opensearchDashboardsVersion = this.initializerContext.env.packageInfo.version;

core.application.register({
id: MANAGEMENT_APP_ID,
title: i18n.translate('management.stackManagement.title', {
defaultMessage: 'Stack Management',
}),
order: 9040,
title: this.title,
order: 9030,
icon: '/plugins/home/assets/logos/opensearch_mark_default.svg',
category: DEFAULT_APP_CATEGORIES.management,
updater$: this.appUpdater,
Expand All @@ -104,6 +91,16 @@ export class ManagementPlugin implements Plugin<ManagementSetup, ManagementStart
},
});

managementOverview?.register({
id: MANAGEMENT_APP_ID,
title: this.title,
description: i18n.translate('management.dashboardManagement.description', {
defaultMessage:
'Manage Dashboards saved objects and data source connections. You can also modify advanced settings for Dashboards.',
}),
order: 9030,
});

return {
sections: this.managementSections.setup(),
};
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/management/public/utils/breadcrumbs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ import { i18n } from '@osd/i18n';

export const MANAGEMENT_BREADCRUMB = {
text: i18n.translate('management.breadcrumb', {
defaultMessage: 'Stack Management',
defaultMessage: 'Dashboards Management',
}),
href: '/',
};
6 changes: 6 additions & 0 deletions src/plugins/management_overview/common/constants.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

export const MANAGEMENT_OVERVIEW_PLUGIN_ID = 'opensearch_management_overview';
9 changes: 9 additions & 0 deletions src/plugins/management_overview/opensearch_dashboards.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"id": "managementOverview",
"version": "opensearchDashboards",
"ui": true,
"server": false,
"requiredPlugins": ["navigation"],
"optionalPlugins": ["home"],
"requiredBundles": ["home"]
}
77 changes: 77 additions & 0 deletions src/plugins/management_overview/public/application.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import ReactDOM from 'react-dom';
import { I18nProvider, FormattedMessage } from '@osd/i18n/react';
import React from 'react';
import { EuiFlexGrid, EuiFlexItem, EuiPage, EuiPageBody, EuiSpacer, EuiTitle } from '@elastic/eui';
import useObservable from 'react-use/lib/useObservable';
import { ApplicationStart, ChromeStart, CoreStart } from '../../../core/public';
import { OverviewApp } from '.';
import { OverviewCard } from './components/overview_card';

export interface ManagementOverviewProps {
application: ApplicationStart;
chrome: ChromeStart;
overviewApps?: OverviewApp[];
}

function ManagementOverviewWrapper(props: ManagementOverviewProps) {
const { chrome, application, overviewApps } = props;

const hiddenAppIds =
useObservable(chrome.navLinks.getNavLinks$())
?.filter((link) => link.hidden)
.map((link) => link.id) || [];

const availableApps = overviewApps?.filter((app) => hiddenAppIds.indexOf(app.id) === -1);

return (
<EuiPage restrictWidth={1200}>
<EuiPageBody component="main">
<EuiTitle size="l">
<h1>
<FormattedMessage id="management.overview.overviewTitle" defaultMessage="Overview" />
</h1>
</EuiTitle>
<EuiSpacer />
<EuiFlexGrid columns={3}>
{availableApps?.map((app) => (
<EuiFlexItem key={app.id}>
<OverviewCard
{...app}
onClick={() => {
application.navigateToApp(app.id);
}}
/>
</EuiFlexItem>
))}
</EuiFlexGrid>
</EuiPageBody>
</EuiPage>
);
}

export function renderApp(
{ application, chrome }: CoreStart,
overviewApps: OverviewApp[],
element: HTMLElement
) {
ReactDOM.render(
<I18nProvider>
<ManagementOverviewWrapper
chrome={chrome}
application={application}
overviewApps={overviewApps}
/>
</I18nProvider>,
element
);

return () => {
chrome.docTitle.reset();
ReactDOM.unmountComponentAtNode(element);
};
}
Loading
Loading