Skip to content

Commit

Permalink
New management overview page and rename stack management to dashboard…
Browse files Browse the repository at this point in the history
… management (#4287) (#4528)

Support navigation changes for administrative features. This change includes
* Rename stack management to Dashboard management
* Add new management overview page
* Replace Stack Management to Management overview page on home app categories page
* Make home plugin optional for managemnet overview

Issue Resolved:
#4132

---------




(cherry picked from commit d8f0c48)

Signed-off-by: Hailong Cui <[email protected]>
  • Loading branch information
Hailong-am authored Jul 10, 2023
1 parent a287203 commit 3b9d45f
Show file tree
Hide file tree
Showing 27 changed files with 365 additions and 54 deletions.
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))


### 🐛 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"]
}
7 changes: 3 additions & 4 deletions src/plugins/management/public/components/landing/landing.tsx
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

0 comments on commit 3b9d45f

Please sign in to comment.