overview page

Signed-off-by: Hailong Cui <[email protected]> style update Signed-off-by: Hailong Cui <[email protected]> revert yml change Signed-off-by: Hailong Cui <[email protected]> clean up unused code Signed-off-by: Hailong Cui <[email protected]> remove unused import Signed-off-by: Hailong Cui <[email protected]>
ruanyl · Apr 8, 2024 · 24ee5f1 · 24ee5f1
1 parent 3702e28
commit 24ee5f1
Show file tree

Hide file tree

Showing 10 changed files with 97 additions and 102 deletions.
diff --git a/config/opensearch_dashboards.yml b/config/opensearch_dashboards.yml
@@ -290,16 +290,3 @@
 
 # Set the value to true to enable workspace feature
 # workspace.enabled: false
-
-opensearch.hosts: [https://localhost:9200]
-opensearch.ssl.verificationMode: none
-opensearch.username: kibanaserver
-opensearch.password: kibanaserver
-opensearch.requestHeadersWhitelist: [authorization, securitytenant]
-
-opensearch_security.multitenancy.enabled: true
-opensearch_security.multitenancy.tenants.preferred: [Private, Global]
-opensearch_security.readonly_mode.roles: [kibana_read_only]
-# Use this setting if you are running opensearch-dashboards without https
-opensearch_security.cookie.secure: false
-server.host: '0.0.0.0'
diff --git a/src/core/utils/default_app_categories.ts b/src/core/utils/default_app_categories.ts
@@ -73,7 +73,7 @@ export const DEFAULT_APP_CATEGORIES: Record<string, AppCategory> = Object.freeze
     order: 5000,
     euiIconType: 'managementApp',
   },
-  // below category are for workspace
+  // below categories are for workspace
   getStarted: {
     id: 'getStarted',
     label: i18n.translate('core.ui.managementNavList.label', {

diff --git a/src/plugins/workspace/common/constants.ts b/src/plugins/workspace/common/constants.ts
@@ -7,7 +7,6 @@ export const WORKSPACE_CREATE_APP_ID = 'workspace_create';
 export const WORKSPACE_LIST_APP_ID = 'workspace_list';
 export const WORKSPACE_UPDATE_APP_ID = 'workspace_update';
 export const WORKSPACE_OVERVIEW_APP_ID = 'workspace_overview';
-export const WORKSPACE_OVERVIEW_GET_START_APP_ID = 'workspace_overview_get_start';
 // These features will be checked and disabled in checkbox on default.
 export const DEFAULT_CHECKED_FEATURES_IDS = [WORKSPACE_UPDATE_APP_ID, WORKSPACE_OVERVIEW_APP_ID];
 export const WORKSPACE_FATAL_ERROR_APP_ID = 'workspace_fatal_error';

diff --git a/src/plugins/workspace/public/application.tsx b/src/plugins/workspace/public/application.tsx
@@ -12,10 +12,7 @@ import { WorkspaceFatalError } from './components/workspace_fatal_error';
 import { WorkspaceCreatorApp } from './components/workspace_creator_app';
 import { WorkspaceUpdaterApp } from './components/workspace_updater_app';
 import { Services } from './types';
-import {
-  WorkspaceOverviewApp,
-  WorkspaceOverviewGetStartApp,
-} from './components/workspace_overview_app';
+import { WorkspaceOverviewApp } from './components/workspace_overview_app';
 
 export const renderCreatorApp = ({ element }: AppMountParameters, services: Services) => {
   ReactDOM.render(
@@ -83,16 +80,3 @@ export const renderOverviewApp = ({ element }: AppMountParameters, services: Ser
     ReactDOM.unmountComponentAtNode(element);
   };
 };
-
-export const renderOverviewGetStartApp = ({ element }: AppMountParameters, services: Services) => {
-  ReactDOM.render(
-    <OpenSearchDashboardsContextProvider services={services}>
-      <WorkspaceOverviewGetStartApp />
-    </OpenSearchDashboardsContextProvider>,
-    element
-  );
-
-  return () => {
-    ReactDOM.unmountComponentAtNode(element);
-  };
-};
diff --git a/...ts/workspace_overview/getstarted_cards.ts → ...rkspace_overview/all_get_started_cards.ts b/...ts/workspace_overview/getstarted_cards.ts → ...rkspace_overview/all_get_started_cards.ts
@@ -3,31 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { AppCategory } from 'opensearch-dashboards/public';
 import { DEFAULT_APP_CATEGORIES } from '../../../../../core/public';
-
-export interface GetStartCard {
-  /**
-   * application id that used for filter, if app id is not speicified, that means it will always display
-   */
-  appId?: string;
-  /**
-   * card title
-   */
-  title: string;
-  /**
-   * card description
-   */
-  description: string;
-  /**
-   * redirect destination when the card been clickedf
-   */
-  link?: string;
-  /**
-   * application category which appId belongs to
-   */
-  category: AppCategory;
-}
+import { GetStartCard } from './types';
 
 export const getStartCards: GetStartCard[] = [
   // getStarted
@@ -67,7 +44,7 @@ export const getStartCards: GetStartCard[] = [
   },
   {
     appId: 'visualize',
-    title: 'create visualizations and aggregate data stores',
+    title: 'unlock insightful data exploration with powerful visualization and aggregation tools.',
     description: 'with visualizations',
     link: '/app/visualize',
     category: DEFAULT_APP_CATEGORIES.dashboardAndReport,
@@ -89,21 +66,21 @@ export const getStartCards: GetStartCard[] = [
   // investigate
   {
     appId: 'data-explorer',
-    title: 'explore data and events by querying raw documents',
+    title: 'explore data and events by querying raw documents.',
     description: 'with discover',
     link: '/app/data-explorer/discover',
     category: DEFAULT_APP_CATEGORIES.investigate,
   },
   {
     appId: 'observability-metrics',
-    title: 'visualize metric data from log data',
+    title: 'transfrom logs into actionable visualizations with metric extraction.',
     description: 'with metrics',
     link: '/app/observability-metrics',
     category: DEFAULT_APP_CATEGORIES.investigate,
   },
   {
     appId: 'observability-traces',
-    title: 'visualize a flow of events and identify performance problems',
+    title: 'Unveil performance bottlenecks with event flow visualization.',
     description: 'with traces',
     link: '/app/observability-traces',
     category: DEFAULT_APP_CATEGORIES.investigate,
@@ -139,14 +116,14 @@ export const getStartCards: GetStartCard[] = [
   },
   {
     appId: 'anomaly-detection-dashboards',
-    title: 'detect anomalies in your data in near real-time using the RCF algorithm',
+    title: 'proactively safeguard your systems with customizable detection rules.',
     description: 'with anomaly detectors',
     link: '/app/anomaly-detection-dashboards#/detectors',
     category: DEFAULT_APP_CATEGORIES.detect,
   },
   {
     appId: 'opensearch_security_analytics_dashboards',
-    title: 'monitor data and trigger alerts when specific conditions are met',
+    title: 'receive timely notifications with detector-driven alert configuration.',
     description: 'with threat alerts',
     link: '/app/opensearch_security_analytics_dashboards#/alerts',
     category: DEFAULT_APP_CATEGORIES.detect,

diff --git a/src/plugins/workspace/public/components/workspace_overview/getting_start_card.tsx b/src/plugins/workspace/public/components/workspace_overview/getting_start_card.tsx
@@ -3,11 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiCard, EuiText, EuiTextColor } from '@elastic/eui';
+import { EuiCard, EuiFlexGroup, EuiFlexItem, EuiText, EuiTextColor } from '@elastic/eui';
 import React from 'react';
 import { ApplicationStart, IBasePath } from 'opensearch-dashboards/public';
-import { GetStartCard } from './getstarted_cards';
 import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
+import { GetStartCard } from './types';
 
 export interface WorkspaceOverviewCardProps {
   card: GetStartCard;
@@ -24,10 +24,20 @@ export const WorkspaceOverviewCard = ({
 }: WorkspaceOverviewCardProps) => {
   return (
     <EuiCard
-      layout="horizontal"
+      layout="vertical"
       titleSize="xs"
+      textAlign="left"
       title={<EuiText>{card.title}</EuiText>}
-      description={<EuiTextColor color="subdued">{card.description}</EuiTextColor>}
+      description={''}
+      footer={
+        <>
+          <EuiFlexGroup justifyContent="flexStart">
+            <EuiFlexItem grow={false}>
+              <EuiTextColor color="subdued">{card.description}</EuiTextColor>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </>
+      }
       onClick={() => {
         let url = card.link;
         if (!url && card.appId) {

diff --git a/src/plugins/workspace/public/components/workspace_overview/getting_start_modal.tsx b/src/plugins/workspace/public/components/workspace_overview/getting_start_modal.tsx
@@ -21,8 +21,8 @@ import {
   EuiModalBody,
   EuiModalHeaderTitle,
 } from '@elastic/eui';
-import { GetStartCard } from './getstarted_cards';
 import { WorkspaceOverviewCard, WorkspaceOverviewCardProps } from './getting_start_card';
+import { GetStartCard } from './types';
 
 interface Props extends Omit<WorkspaceOverviewCardProps, 'card'> {
   onCloseModal: () => void;
@@ -93,12 +93,12 @@ export const WorkspaceOverviewGettingStartModal = (props: Props) => {
       </EuiModalHeader>
 
       <EuiModalBody>
-        <EuiPage restrictWidth>
+        <EuiPage restrictWidth={1200}>
           <EuiPageSideBar paddingSize="s" sticky>
             <EuiSideNav items={sideNav} style={{ width: 170 }} />
           </EuiPageSideBar>
           <EuiPageBody paddingSize="s">
-            <EuiPageContent verticalPosition="center" horizontalPosition="center" paddingSize="s">
+            <EuiPageContent verticalPosition="center" horizontalPosition="center" paddingSize="m">
               {cardList}
             </EuiPageContent>
           </EuiPageBody>

diff --git a/src/plugins/workspace/public/components/workspace_overview/index.tsx b/src/plugins/workspace/public/components/workspace_overview/index.tsx
@@ -12,33 +12,29 @@ import {
   EuiPageContent,
   EuiFlexItem,
   EuiAvatar,
-  EuiCard,
   EuiText,
   EuiTabbedContent,
   EuiTitle,
   EuiBadge,
   EuiFlexGroup,
+  EuiPanel,
 } from '@elastic/eui';
 
 import { useObservable } from 'react-use';
-import { WorkspaceAttribute } from 'src/core/types';
 import { i18n } from '@osd/i18n';
 import { CoreStart } from 'opensearch-dashboards/public';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { WorkspaceOverviewLibrary } from './workspace_overview_library';
 import { WorkspaceOverviewSettings } from './workspace_overview_settings';
 import { WorkspaceOverviewContent } from './workspace_overview_content';
 import { WorkspaceClient } from '../../workspace_client';
-import { WorkspacePermissionSetting } from '../workspace_form/types';
 import { WorkspacePermissionItemType } from '../workspace_form/constants';
-import { getStartCards } from './getstarted_cards';
+import { getStartCards } from './all_get_started_cards';
 import { featureMatchesConfig } from '../../utils';
 import { WorkspaceOverviewCard } from './getting_start_card';
 import { WorkspaceOverviewGettingStartModal } from './getting_start_modal';
-
-interface WorkspaceWithPermission extends WorkspaceAttribute {
-  permissions: WorkspacePermissionSetting[];
-}
+import { convertPermissionsToPermissionSettings } from '../workspace_form/utils';
+import { WORKSPACE_UPDATE_APP_ID } from '../../../../workspace/common/constants';
 
 export const WorkspaceOverview = () => {
   const {
@@ -51,10 +47,6 @@ export const WorkspaceOverview = () => {
 
   const currentWorkspace = useObservable(workspaces.currentWorkspace$);
 
-  const currentWorkspaceWithPermission = useMemo(() => {
-    return currentWorkspace as WorkspaceWithPermission;
-  }, [currentWorkspace]);
-
   /**
    * all available cards based on workspace selected features
    */
@@ -71,16 +63,17 @@ export const WorkspaceOverview = () => {
   );
 
   let userGroupsList = null as ReactNode;
-  if (isPermissionEnabled && currentWorkspaceWithPermission) {
-    const permissions = currentWorkspaceWithPermission.permissions || [];
-    const userIds: string[] = permissions
+  if (isPermissionEnabled && currentWorkspace && currentWorkspace.permissions) {
+    const permissions = convertPermissionsToPermissionSettings(currentWorkspace.permissions);
+
+    const users: string[] = permissions
       .filter((permission) => permission.type === WorkspacePermissionItemType.User)
-      .map((permission) => permission.userId);
+      .map((permission) => (permission as { userId: string }).userId);
     const groups: string[] = permissions
       .filter((permission) => permission.type === WorkspacePermissionItemType.Group)
-      .map((permission) => permission.group);
+      .map((permission) => (permission as { group: string }).group);
 
-    const allUserAndGroup = [...new Set(userIds.concat(groups))];
+    const allUserAndGroup = [...new Set(users.concat(groups))];
 
     const userList = allUserAndGroup.slice(0, 3).map((user) => {
       return (
@@ -107,17 +100,23 @@ export const WorkspaceOverview = () => {
   const tabs = [
     {
       id: 'overview',
-      name: 'overview',
+      name: i18n.translate('workspace.overview.title', {
+        defaultMessage: 'overview',
+      }),
       content: <WorkspaceOverviewContent />,
     },
     {
       id: 'library',
-      name: 'library',
+      name: i18n.translate('workspace.library.title', {
+        defaultMessage: 'library',
+      }),
       content: <WorkspaceOverviewLibrary />,
     },
     {
       id: 'settings',
-      name: 'settings',
+      name: i18n.translate('workspace.setting.title', {
+        defaultMessage: 'setting',
+      }),
       content: <WorkspaceOverviewSettings />,
     },
   ];
@@ -129,15 +128,22 @@ export const WorkspaceOverview = () => {
   return (
     <EuiPage>
       <EuiPageBody>
-        <EuiPageHeader pageTitle={pageTitle} rightSideItems={[userGroupsList]}>
+        <EuiPageHeader
+          pageTitle={pageTitle}
+          rightSideItems={userGroupsList ? [userGroupsList] : undefined}
+        >
           {isStartWorkingVisible ? (
             <>
               <EuiTitle size="s">
-                <p>Start working</p>
+                <p>
+                  {i18n.translate('workspace.startWorking.title', {
+                    defaultMessage: 'Start working',
+                  })}
+                </p>
               </EuiTitle>
               <EuiSpacer />
               <EuiFlexGroup>
-                {availableCards.map((card, i) => {
+                {availableCards.slice(0, 5).map((card, i) => {
                   return (
                     <EuiFlexItem key={card.title}>
                       <WorkspaceOverviewCard
@@ -150,15 +156,13 @@ export const WorkspaceOverview = () => {
                   );
                 })}
                 <EuiFlexItem key="see_more">
-                  <EuiCard
-                    layout="horizontal"
-                    titleSize="xs"
-                    title={<EuiText>see more ways to get started</EuiText>}
-                    description={''}
+                  <EuiPanel
                     onClick={() => {
                       setIsModalVisible(true);
                     }}
-                  />
+                  >
+                    <EuiText>see more ways to get started</EuiText>
+                  </EuiPanel>
                 </EuiFlexItem>
               </EuiFlexGroup>
             </>
@@ -176,7 +180,7 @@ export const WorkspaceOverview = () => {
                   setIsStartWorkingVisible(!isStartWorkingVisible);
                 }}
               >
-                collapse
+                {isStartWorkingVisible ? 'collapse' : 'expand'}
               </EuiBadge>
             </EuiFlexItem>
           </EuiFlexGroup>
@@ -187,7 +191,11 @@ export const WorkspaceOverview = () => {
             tabs={tabs}
             initialSelectedTab={tabs[0]}
             autoFocus="selected"
-            onTabClick={(tab) => {}}
+            onTabClick={(tab) => {
+              if (tab.id === 'settings') {
+                application.navigateToApp(WORKSPACE_UPDATE_APP_ID);
+              }
+            }}
           />
         </EuiPageContent>
         {isModalVisible ? (