New home page related UI updates (#1129)

* refactored code Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * updated overview page with new widgets; added getting started page Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> --------- Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com>
opensearch-project · Sep 4, 2024 · 930b74a · 930b74a
1 parent e55f421
commit 930b74a
Show file tree

Hide file tree

Showing 27 changed files with 781 additions and 325 deletions.
diff --git a/public/components/Charts/ChartContainer.scss b/public/components/Charts/ChartContainer.scss
@@ -1,6 +1,6 @@
 .chart-view-container {
   position: relative;
-  width: 100%;
+  width: 90%;
   height: 100%;
 
   .chart-view-container-mask {

diff --git a/public/components/DataSourceThreatAlertsCard/DataSourceThreatAlertsCard.tsx b/public/components/DataSourceThreatAlertsCard/DataSourceThreatAlertsCard.tsx
@@ -5,7 +5,6 @@
 
 import React, { useCallback, useEffect, useState } from 'react';
 import {
-  EuiBadge,
   EuiBasicTable,
   EuiBasicTableColumn,
   EuiFlexGroup,
@@ -23,10 +22,9 @@ import {
 import {
   dataSourceFilterFn,
   errorNotificationToast,
-  getBadgeText,
-  getSeverityColor,
   getTruncatedText,
   renderTime,
+  getAlertSeverityBadge,
 } from '../../utils/helpers';
 import { THREAT_ALERTS_NAV_ID } from '../../utils/constants';
 import {
@@ -137,17 +135,7 @@ export const DataSourceThreatAlertsCard: React.FC<DataSourceAlertsCardProps> = (
       name: 'Alert severity',
       sortable: true,
       align: 'left',
-      render: (severity: string) => {
-        const severityColor = getSeverityColor(severity);
-        return (
-          <EuiBadge
-            color={severityColor?.background}
-            style={{ padding: '1px 8px', color: severityColor?.text }}
-          >
-            {getBadgeText(severity)}
-          </EuiBadge>
-        );
-      },
+      render: getAlertSeverityBadge,
     },
   ];
 

diff --git a/public/components/MDS/DataSourceMenuWrapper.tsx b/public/components/MDS/DataSourceMenuWrapper.tsx
@@ -159,6 +159,7 @@ export const DataSourceMenuWrapper: React.FC<DataSourceMenuWrapperProps> = ({
           ROUTES.RULES_DUPLICATE,
           ROUTES.LOG_TYPES_CREATE,
           ROUTES.CORRELATION_RULE_CREATE,
+          ROUTES.GETTING_STARTED,
           ROUTES.ROOT,
         ]}
         render={() => {

diff --git a/public/components/PageHeader/PageHeader.tsx b/public/components/PageHeader/PageHeader.tsx
@@ -7,14 +7,13 @@ import React from 'react';
 import {
   TopNavControlData,
   TopNavControlDescriptionData,
-  TopNavControlLinkData,
 } from '../../../../../src/plugins/navigation/public';
 import { getApplication, getNavigationUI, getUseUpdatedUx } from '../../services/utils/constants';
 
 export interface PageHeaderProps {
   appRightControls?: TopNavControlData[];
   appBadgeControls?: TopNavControlData[];
-  appDescriptionControls?: (TopNavControlDescriptionData | TopNavControlLinkData)[];
+  appDescriptionControls?: TopNavControlDescriptionData[];
 }
 
 export const PageHeader: React.FC<PageHeaderProps> = ({

diff --git a/...ConfigureAlerts/components/AlertCondition/__snapshots__/AlertConditionPanel.test.tsx.snap b/...ConfigureAlerts/components/AlertCondition/__snapshots__/AlertConditionPanel.test.tsx.snap
@@ -476,7 +476,6 @@ Object {
                     tabindex="-1"
                   >
                     <span
-                      badgelabel="Highest"
                       class="euiComboBoxPill euiComboBoxPill--plainText"
                       id="1"
                       text="1 (Highest)"
@@ -1346,7 +1345,6 @@ Object {
                   tabindex="-1"
                 >
                   <span
-                    badgelabel="Highest"
                     class="euiComboBoxPill euiComboBoxPill--plainText"
                     id="1"
                     text="1 (Highest)"

diff --git a/public/pages/Findings/components/FindingsTable/ThreatIntelFindingsTable.tsx b/public/pages/Findings/components/FindingsTable/ThreatIntelFindingsTable.tsx
@@ -3,7 +3,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiBasicTableColumn, EuiSmallButtonIcon, EuiInMemoryTable, EuiToolTip } from '@elastic/eui';
+import {
+  EuiBasicTableColumn,
+  EuiSmallButtonIcon,
+  EuiInMemoryTable,
+  EuiToolTip,
+} from '@elastic/eui';
 import { ThreatIntelFinding } from '../../../../../types';
 import React from 'react';
 import { renderTime } from '../../../../utils/helpers';
@@ -37,7 +42,9 @@ export const ThreatIntelFindingsTable: React.FC<ThreatIntelFindingsTableProps> =
       name: 'Threat intel source',
       field: 'ioc_feed_ids',
       render: (ioc_feed_ids: ThreatIntelFinding['ioc_feed_ids']) => {
-        return <span>{ioc_feed_ids[0]?.feed_id ?? DEFAULT_EMPTY_DATA}</span>;
+        return (
+          <span>{ioc_feed_ids.map((ids) => ids.feed_name).join(', ') || DEFAULT_EMPTY_DATA}</span>
+        );
       },
     },
     {

diff --git a/public/pages/Main/Main.tsx b/public/pages/Main/Main.tsx
@@ -18,9 +18,14 @@ import {
   EuiFlexItem,
 } from '@elastic/eui';
 import { Toast } from '@opensearch-project/oui/src/eui_components/toast/global_toast_list';
-import { AppMountParameters, CoreStart, SavedObject } from 'opensearch-dashboards/public';
+import { AppMountParameters, CoreStart } from 'opensearch-dashboards/public';
 import { SaContextConsumer } from '../../services';
-import { DEFAULT_DATE_RANGE, DATE_TIME_FILTER_KEY, ROUTES, dataSourceObservable } from '../../utils/constants';
+import {
+  DEFAULT_DATE_RANGE,
+  DATE_TIME_FILTER_KEY,
+  ROUTES,
+  dataSourceObservable,
+} from '../../utils/constants';
 import { CoreServicesConsumer } from '../../components/core_services';
 import Findings from '../Findings';
 import Detectors from '../Detectors';
@@ -56,15 +61,14 @@ import { DataSourceManagementPluginSetup } from '../../../../../src/plugins/data
 import { DataSourceMenuWrapper } from '../../components/MDS/DataSourceMenuWrapper';
 import { DataSourceOption } from 'src/plugins/data_source_management/public/components/data_source_menu/types';
 import { DataSourceContext, DataSourceContextConsumer } from '../../services/DataSourceContext';
-import { dataSourceInfo } from '../../services/utils/constants';
+import { dataSourceInfo, getUseUpdatedUx } from '../../services/utils/constants';
 import { ThreatIntelOverview } from '../ThreatIntel/containers/Overview/ThreatIntelOverview';
 import { AddThreatIntelSource } from '../ThreatIntel/containers/AddThreatIntelSource/AddThreatIntelSource';
 import { ThreatIntelScanConfigForm } from '../ThreatIntel/containers/ScanConfiguration/ThreatIntelScanConfigForm';
 import { ThreatIntelSource } from '../ThreatIntel/containers/ThreatIntelSource/ThreatIntelSource';
-import * as pluginManifest from '../../../opensearch_dashboards.json';
-import { DataSourceAttributes } from '../../../../../src/plugins/data_source/common/data_sources';
-import semver from 'semver';
 import queryString from 'query-string';
+import { dataSourceFilterFn } from '../../utils/helpers';
+import { GettingStartedContent } from '../Overview/components/GettingStarted/GettingStartedContent';
 
 enum Navigation {
   SecurityAnalytics = 'Security Analytics',
@@ -137,20 +141,21 @@ export default class Main extends Component<MainProps, MainState> {
     const defaultDateTimeFilter = cachedDateTimeFilter
       ? JSON.parse(cachedDateTimeFilter)
       : {
-        startTime: DEFAULT_DATE_RANGE.start,
-        endTime: DEFAULT_DATE_RANGE.end,
-      };
-    let dataSourceId = "";
-    let dataSourceLabel = "";
+          startTime: DEFAULT_DATE_RANGE.start,
+          endTime: DEFAULT_DATE_RANGE.end,
+        };
+    let dataSourceId = '';
+    let dataSourceLabel = '';
     if (props.multiDataSourceEnabled) {
-      const { dataSourceId: parsedDataSourceId, dataSourceLabel: parsedDataSourceLabel } = queryString.parse(
-        this.props.location.search
-      ) as {
+      const {
+        dataSourceId: parsedDataSourceId,
+        dataSourceLabel: parsedDataSourceLabel,
+      } = queryString.parse(this.props.location.search) as {
         dataSourceId: string;
         dataSourceLabel: string;
       };
       dataSourceId = parsedDataSourceId;
-      dataSourceLabel = parsedDataSourceLabel || "";
+      dataSourceLabel = parsedDataSourceLabel || '';
 
       if (dataSourceId) {
         dataSourceObservable.next({ id: dataSourceId, label: dataSourceLabel });
@@ -163,10 +168,10 @@ export default class Main extends Component<MainProps, MainState> {
       dateTimeFilter: defaultDateTimeFilter,
       showFlyoutData: null,
       /**
-        * undefined: need data source picker to help to determine which data source to use.
-        * empty string: using the local cluster.
-        * string: using the selected data source.
-        */
+       * undefined: need data source picker to help to determine which data source to use.
+       * empty string: using the local cluster.
+       * string: using the selected data source.
+       */
       dataSourceLoading: dataSourceId === undefined ? props.multiDataSourceEnabled : false,
       selectedDataSource: { id: dataSourceId },
       dataSourceMenuReadOnly: false,
@@ -267,7 +272,10 @@ export default class Main extends Component<MainProps, MainState> {
         selectedDataSource: { ...sources[0] },
       });
     }
-    dataSourceObservable.next({ id: this.state.selectedDataSource.id, label: this.state.selectedDataSource.label });
+    dataSourceObservable.next({
+      id: this.state.selectedDataSource.id,
+      label: this.state.selectedDataSource.label,
+    });
     if (dataSourceLoading) {
       this.setState({ dataSourceLoading: false });
     }
@@ -406,17 +414,6 @@ export default class Main extends Component<MainProps, MainState> {
     ];
   };
 
-  dataSourceFilterFn = (dataSource: SavedObject<DataSourceAttributes>) => {
-    const dataSourceVersion = dataSource?.attributes?.dataSourceVersion || '';
-    const installedPlugins = dataSource?.attributes?.installedPlugins || [];
-    return (
-      semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions) &&
-      pluginManifest.requiredOSDataSourcePlugins.every((plugin) =>
-        installedPlugins.includes(plugin)
-      )
-    );
-  };
-
   render() {
     const {
       landingPage,
@@ -463,7 +460,7 @@ export default class Main extends Component<MainProps, MainState> {
                                 dataSourceLoading={this.state.dataSourceLoading}
                                 dataSourceMenuReadOnly={dataSourceMenuReadOnly}
                                 setHeaderActionMenu={setActionMenu}
-                                dataSourceFilterFn={this.dataSourceFilterFn}
+                                dataSourceFilterFn={dataSourceFilterFn}
                               />
                             )}
                             {!dataSourceLoading && services && (
@@ -620,6 +617,17 @@ export default class Main extends Component<MainProps, MainState> {
                                         />
                                       )}
                                     />
+                                    {getUseUpdatedUx() && (
+                                      <Route
+                                        path={ROUTES.GETTING_STARTED}
+                                        render={(props: RouteComponentProps) => (
+                                          <GettingStartedContent
+                                            {...props}
+                                            onStepClicked={() => {}}
+                                          />
+                                        )}
+                                      />
+                                    )}
                                     <Route
                                       path={`${ROUTES.ALERTS}/:detectorId?`}
                                       render={(props: RouteComponentProps) => (