[Workspace]Essential/Analytics(All) use case overview page

changelogs/fragments/7673.yml

@@ -0,0 +1,2 @@
+feat:
+- [Workspace]Essential/Analytics(All) use case overview page ([#7673](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7673))

src/core/public/index.ts

@@ -112,6 +112,10 @@ export {
   cleanWorkspaceId,
   DEFAULT_NAV_GROUPS,
   ALL_USE_CASE_ID,
+  SEARCH_USE_CASE_ID,
+  ESSENTIAL_USE_CASE_ID,
+  OBSERVABILITY_USE_CASE_ID,
+  SECURITY_ANALYTICS_USE_CASE_ID,
 } from '../utils';
 export {
   AppCategory,

src/core/utils/default_nav_groups.ts

@@ -7,6 +7,10 @@ import { i18n } from '@osd/i18n';
 import { ChromeNavGroup, NavGroupType } from '../types';
 
 export const ALL_USE_CASE_ID = 'all';
+export const OBSERVABILITY_USE_CASE_ID = 'observability';
+export const SECURITY_ANALYTICS_USE_CASE_ID = 'security-analytics';
+export const ESSENTIAL_USE_CASE_ID = 'analytics';
+export const SEARCH_USE_CASE_ID = 'search';
 
 const defaultNavGroups = {
   dataAdministration: {
@@ -40,9 +44,10 @@ const defaultNavGroups = {
       defaultMessage: 'This is a use case contains all the features.',
     }),
     order: 3000,
+    icon: 'wsAnalytics',
   },
   observability: {
-    id: 'observability',
+    id: OBSERVABILITY_USE_CASE_ID,
     title: i18n.translate('core.ui.group.observability.title', {
       defaultMessage: 'Observability',
     }),
@@ -51,9 +56,10 @@ const defaultNavGroups = {
         'Gain visibility into system health, performance, and reliability through monitoring and analysis of logs, metrics, and traces.',
     }),
     order: 4000,
+    icon: 'wsObservability',
   },
   'security-analytics': {
-    id: 'security-analytics',
+    id: SECURITY_ANALYTICS_USE_CASE_ID,
     title: i18n.translate('core.ui.group.security.analytics.title', {
       defaultMessage: 'Security Analytics',
     }),
@@ -62,9 +68,10 @@ const defaultNavGroups = {
         'Detect and investigate potential security threats and vulnerabilities across your systems and data.',
     }),
     order: 5000,
+    icon: 'wsSecurityAnalytics',
   },
   essentials: {
-    id: 'analytics',
+    id: ESSENTIAL_USE_CASE_ID,
     title: i18n.translate('core.ui.group.essential.title', {
       defaultMessage: 'Essentials',
     }),
@@ -73,9 +80,10 @@ const defaultNavGroups = {
         'Analyze data to derive insights, identify patterns and trends, and make data-driven decisions.',
     }),
     order: 7000,
+    icon: 'wsEssentials',
   },
   search: {
-    id: 'search',
+    id: SEARCH_USE_CASE_ID,
     title: i18n.translate('core.ui.group.search.title', {
       defaultMessage: 'Search',
     }),
@@ -84,6 +92,7 @@ const defaultNavGroups = {
         "Quickly find and explore relevant information across your organization's data sources.",
     }),
     order: 6000,
+    icon: 'wsSearch',
   },
 } as const;
 

src/core/utils/index.ts

@@ -39,4 +39,11 @@ export {
 export { DEFAULT_APP_CATEGORIES } from './default_app_categories';
 export { WORKSPACE_PATH_PREFIX, WORKSPACE_TYPE } from './constants';
 export { getWorkspaceIdFromUrl, formatUrlWithWorkspaceId, cleanWorkspaceId } from './workspace';
-export { DEFAULT_NAV_GROUPS, ALL_USE_CASE_ID } from './default_nav_groups';
+export {
+  DEFAULT_NAV_GROUPS,
+  ALL_USE_CASE_ID,
+  SEARCH_USE_CASE_ID,
+  ESSENTIAL_USE_CASE_ID,
+  OBSERVABILITY_USE_CASE_ID,
+  SECURITY_ANALYTICS_USE_CASE_ID,
+} from './default_nav_groups';

src/plugins/content_management/public/components/card_container/card_embeddable.test.tsx

@@ -28,3 +28,34 @@ test('CardEmbeddable should render a card with the title', () => {
     Array.from(node.querySelectorAll('*')).find((ele) => ele.textContent?.trim() === 'card title')
   ).toBeFalsy();
 });
+
+test('CardEmbeddable should render a card with the cardProps', () => {
+  const embeddable = new CardEmbeddable({
+    id: 'card-id',
+    title: 'card title',
+    description: '',
+    cardProps: {
+      selectable: {
+        children: 'selectable line',
+        onSelect: () => {},
+      },
+    },
+  });
+
+  const node = document.createElement('div');
+  embeddable.render(node);
+
+  // it should render the card with title specified
+  expect(
+    Array.from(node.querySelectorAll('*')).find(
+      (ele) => ele.textContent?.trim() === 'selectable line'
+    )
+  ).toBeTruthy();
+
+  embeddable.destroy();
+  expect(
+    Array.from(node.querySelectorAll('*')).find(
+      (ele) => ele.textContent?.trim() === 'selectable line'
+    )
+  ).toBeFalsy();
+});

src/plugins/content_management/public/components/card_container/card_embeddable.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { EuiCard } from '@elastic/eui';
+import { EuiCard, EuiCardProps } from '@elastic/eui';
 
 import { Embeddable, EmbeddableInput, IContainer } from '../../../../embeddable/public';
 
@@ -15,6 +15,7 @@ export type CardEmbeddableInput = EmbeddableInput & {
   onClick?: () => void;
   getIcon?: () => React.ReactElement;
   getFooter?: () => React.ReactElement;
+  cardProps?: Omit<EuiCardProps, 'title' | 'description'>;
 };
 
 export class CardEmbeddable extends Embeddable<CardEmbeddableInput> {
@@ -30,18 +31,21 @@ export class CardEmbeddable extends Embeddable<CardEmbeddableInput> {
       ReactDOM.unmountComponentAtNode(this.node);
     }
     this.node = node;
-    ReactDOM.render(
-      <EuiCard
-        textAlign="left"
-        title={this.input.title ?? ''}
-        description={this.input.description}
-        display="plain"
-        onClick={this.input.onClick}
-        icon={this.input?.getIcon?.()}
-        footer={this.input?.getFooter?.()}
-      />,
-      node
-    );
+
+    const cardProps: EuiCardProps = {
+      ...this.input.cardProps,
+      title: this.input.title ?? '',
+      description: this.input.description,
+      onClick: this.input.onClick,
+      icon: this.input?.getIcon?.(),
+    };
+
+    if (!cardProps.layout || cardProps.layout === 'vertical') {
+      cardProps.textAlign = 'left';
+      cardProps.footer = this.input?.getFooter?.();
+    }
+
+    ReactDOM.render(<EuiCard {...cardProps} />, node);
   }
 
   public destroy() {

src/plugins/content_management/public/components/card_container/card_list.tsx

@@ -47,7 +47,12 @@ const CardListInner = ({ embeddable, input, embeddableServices }: Props) => {
     const child = embeddable.getChild(panel.explicitInput.id);
     return (
       <EuiFlexItem key={panel.explicitInput.id}>
-        <embeddableServices.EmbeddablePanel embeddable={child} />
+        <embeddableServices.EmbeddablePanel
+          embeddable={child}
+          hideHeader
+          hasBorder={false}
+          hasShadow={false}
+        />
       </EuiFlexItem>
     );
   });

src/plugins/content_management/public/components/card_container/types.ts

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { EuiCardProps } from '@elastic/eui';
 import { ContainerInput } from '../../../../embeddable/public';
 
 export interface CardExplicitInput {
@@ -11,6 +12,7 @@ export interface CardExplicitInput {
   onClick?: () => void;
   getIcon?: () => React.ReactElement;
   getFooter?: () => React.ReactElement;
+  cardProps?: Omit<EuiCardProps, 'title' | 'description'>;
 }
 
 export type CardContainerInput = ContainerInput<CardExplicitInput> & {

src/plugins/content_management/public/components/section_input.ts

@@ -49,6 +49,7 @@ export const createCardInput = (
           onClick: content.onClick,
           getIcon: content?.getIcon,
           getFooter: content?.getFooter,
+          cardProps: content.cardProps,
         },
       };
     }

src/plugins/content_management/public/components/section_render.tsx

@@ -41,7 +41,12 @@ const DashboardSection = ({ section, embeddable, contents$, savedObjectsClient }
 
   if (section.kind === 'dashboard' && factory && input) {
     // const input = createDashboardSection(section, contents ?? []);
-    return <EmbeddableRenderer factory={factory} input={input} />;
+    return (
+      // to make dashboard section align with others add margin left and right -8px
+      <div style={{ margin: '0 -8px' }}>
+        <EmbeddableRenderer factory={factory} input={input} />
+      </div>
+    );
   }
 
   return null;
@@ -61,18 +66,20 @@ const CardSection = ({ section, embeddable, contents$ }: Props) => {
 
   if (section.kind === 'card' && factory && input) {
     return (
-      <EuiPanel>
-        <EuiTitle size="s">
-          <h2>
-            <EuiButtonIcon
-              iconType={isCardVisible ? 'arrowDown' : 'arrowUp'}
-              onClick={toggleCardVisibility}
-              color="text"
-              aria-label={isCardVisible ? 'Show panel' : 'Hide panel'}
-            />
-            {section.title}
-          </h2>
-        </EuiTitle>
+      <EuiPanel paddingSize="none" hasBorder={false} hasShadow={false} color="transparent">
+        {section.title ? (
+          <EuiTitle size="s">
+            <h2>
+              <EuiButtonIcon
+                iconType={isCardVisible ? 'arrowDown' : 'arrowUp'}
+                onClick={toggleCardVisibility}
+                color="text"
+                aria-label={isCardVisible ? 'Show panel' : 'Hide panel'}
+              />
+              {section.title}
+            </h2>
+          </EuiTitle>
+        ) : null}
         {isCardVisible && (
           <>
             <EuiSpacer size="m" /> <EmbeddableRenderer factory={factory} input={input} />

src/plugins/content_management/public/constants.ts

@@ -0,0 +1,55 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  ESSENTIAL_USE_CASE_ID,
+  ALL_USE_CASE_ID,
+  SEARCH_USE_CASE_ID,
+  OBSERVABILITY_USE_CASE_ID,
+  SECURITY_ANALYTICS_USE_CASE_ID,
+} from '../../../core/public';
+
+// central place for all content ids rendered by content management
+
+// page ids
+export const ANALYTICS_ALL_OVERVIEW_PAGE_ID = `${ALL_USE_CASE_ID}_overview`;
+export const ESSENTIAL_OVERVIEW_PAGE_ID = `${ESSENTIAL_USE_CASE_ID}_overview`;
+export const SEARCH_OVERVIEW_PAGE_ID = `${SEARCH_USE_CASE_ID}_overview`;
+export const OBSERVABILITY_OVERVIEW_PAGE_ID = `${OBSERVABILITY_USE_CASE_ID}_overview`;
+export const SECURITY_ANALYTICS_OVERVIEW_PAGE_ID = `${SECURITY_ANALYTICS_USE_CASE_ID}_overview`;
+export const HOME_PAGE_ID = 'osd_homepage';
+
+// section ids
+export enum SECTIONS {
+  GET_STARTED = `get_started`,
+  SERVICE_CARDS = `service_cards`,
+  RECENTLY_VIEWED = `recently_viewed`,
+  DIFFERENT_SEARCH_TYPES = 'different_search_types',
+  CONFIG_EVALUATE_SEARCH = 'config_evaluate_search',
+}
+
+export enum HOME_CONTENT_AREAS {
+  GET_STARTED = `${HOME_PAGE_ID}/${SECTIONS.GET_STARTED}`,
+  SERVICE_CARDS = `${HOME_PAGE_ID}/${SECTIONS.SERVICE_CARDS}`,
+  RECENTLY_VIEWED = `${HOME_PAGE_ID}/${SECTIONS.RECENTLY_VIEWED}`,
+}
+
+export enum ESSENTIAL_OVERVIEW_CONTENT_AREAS {
+  GET_STARTED = `${ESSENTIAL_OVERVIEW_PAGE_ID}/${SECTIONS.GET_STARTED}`,
+  SERVICE_CARDS = `${ESSENTIAL_OVERVIEW_PAGE_ID}/${SECTIONS.SERVICE_CARDS}`,
+  RECENTLY_VIEWED = `${ESSENTIAL_OVERVIEW_PAGE_ID}/${SECTIONS.RECENTLY_VIEWED}`,
+}
+
+export enum ANALYTICS_ALL_OVERVIEW_CONTENT_AREAS {
+  GET_STARTED = `${ANALYTICS_ALL_OVERVIEW_PAGE_ID}/${SECTIONS.GET_STARTED}`,
+  SERVICE_CARDS = `${ANALYTICS_ALL_OVERVIEW_PAGE_ID}/${SECTIONS.SERVICE_CARDS}`,
+  RECENTLY_VIEWED = `${ANALYTICS_ALL_OVERVIEW_PAGE_ID}/${SECTIONS.RECENTLY_VIEWED}`,
+}
+
+export enum SEARCH_OVERVIEW_CONTENT_AREAS {
+  DIFFERENT_SEARCH_TYPES = `${SEARCH_OVERVIEW_PAGE_ID}/${SECTIONS.DIFFERENT_SEARCH_TYPES}`,
+  CONFIG_EVALUATE_SEARCH = `${SEARCH_OVERVIEW_PAGE_ID}/${SECTIONS.CONFIG_EVALUATE_SEARCH}`,
+  GET_STARTED = `${SEARCH_OVERVIEW_PAGE_ID}/${SECTIONS.GET_STARTED}`,
+}

src/plugins/content_management/public/index.ts

@@ -13,3 +13,5 @@ export const plugin = (initializerContext: PluginInitializerContext) =>
 
 export * from './components';
 export * from './mocks';
+export * from './services/content_management';
+export * from './constants';

src/plugins/content_management/public/mocks.ts

@@ -9,6 +9,7 @@ const createStartContract = (): ContentManagementPluginStart => {
   return {
     registerContentProvider: jest.fn(),
     renderPage: jest.fn(),
+    updatePageSection: jest.fn(),
   };
 };
 

src/plugins/content_management/public/services/content_management/content_management_service.test.ts

@@ -47,6 +47,29 @@ test('it register content provider', () => {
   expect(cms.getPage('page1')?.getContents('section1')).toHaveLength(1);
 });
 
+test('it register content provider to multiple destination', () => {
+  const cms = new ContentManagementService();
+  cms.registerPage({ id: 'page1', sections: [{ id: 'section1', kind: 'card', order: 0 }] });
+  cms.registerPage({ id: 'page2', sections: [{ id: 'section1', kind: 'card', order: 0 }] });
+  cms.registerContentProvider({
+    id: 'content_provider1',
+    getTargetArea() {
+      return ['page1/section1', 'page2/section1'];
+    },
+    getContent() {
+      return {
+        kind: 'card',
+        id: 'content1',
+        title: 'card',
+        description: 'descriptions',
+        order: 0,
+      };
+    },
+  });
+  expect(cms.getPage('page1')?.getContents('section1')).toHaveLength(1);
+  expect(cms.getPage('page2')?.getContents('section1')).toHaveLength(1);
+});
+
 test('it should throw error when register content provider with invalid target area', () => {
   const cms = new ContentManagementService();
   cms.registerPage({ id: 'page1', sections: [{ id: 'section1', kind: 'card', order: 0 }] });

src/plugins/content_management/public/services/content_management/content_management_service.ts

@@ -35,16 +35,19 @@ export class ContentManagementService {
   registerContentProvider = (provider: ContentProvider) => {
     this.contentProviders.set(provider.id, provider);
 
-    const targetArea = provider.getTargetArea();
-    const [pageId, sectionId] = targetArea.split('/');
-
-    if (!pageId || !sectionId) {
-      throw new Error('getTargetArea() should return a string in format {pageId}/{sectionId}');
-    }
-
-    const page = this.getPage(pageId);
-    if (page) {
-      page.addContent(sectionId, provider.getContent());
+    const area = provider.getTargetArea();
+    const targetAreas: string[] = Array.isArray(area) ? [...area] : [area];
+    for (const targetArea of targetAreas) {
+      const [pageId, sectionId] = targetArea.split('/');
+
+      if (!pageId || !sectionId) {
+        throw new Error('getTargetArea() should return a string in format {pageId}/{sectionId}');
+      }
+
+      const page = this.getPage(pageId);
+      if (page) {
+        page.addContent(sectionId, provider.getContent());
+      }
     }
   };