fix re-direct links for visualizaitons in notebooks, metrics (#372)

Signed-off-by: Shenoy Pratik <[email protected]> (cherry picked from commit e6208d0) Signed-off-by: Peter Fitzgibbons <[email protected]>
opensearch-project · Apr 18, 2023 · 102ead3 · 102ead3
1 parent 4ccd465
commit 102ead3
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 77 deletions.
diff --git a/public/components/metrics/index.tsx b/public/components/metrics/index.tsx
@@ -15,9 +15,10 @@ import {
 } from '@elastic/eui';
 import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
 import React, { useEffect, useState } from 'react';
-import { Route, RouteComponentProps } from 'react-router-dom';
+import { HashRouter, Route, RouteComponentProps } from 'react-router-dom';
 import classNames from 'classnames';
 import { StaticContext } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 import { ChromeBreadcrumb, CoreStart, Toast } from '../../../../../src/core/public';
 import { onTimeChange } from './helpers/utils';
 import { Sidebar } from './sidebar/sidebar';
@@ -26,10 +27,10 @@ import PPLService from '../../services/requests/ppl';
 import { TopMenu } from './top_menu/top_menu';
 import { MetricType } from '../../../common/types/metrics';
 import { MetricsGrid } from './view/metrics_grid';
-import { useSelector } from 'react-redux';
 import { metricsLayoutSelector, selectedMetricsSelector } from './redux/slices/metrics_slice';
 import { resolutionOptions } from '../../../common/constants/metrics';
 import SavedObjects from '../../services/saved_objects/event_analytics/saved_objects';
+import { observabilityLogsID } from '../../../common/constants/shared';
 
 interface MetricsProps {
   http: CoreStart['http'];
@@ -38,6 +39,7 @@ interface MetricsProps {
   renderProps: RouteComponentProps<any, StaticContext, any>;
   pplService: PPLService;
   savedObjects: SavedObjects;
+  setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
 }
 
 export const Home = ({
@@ -82,6 +84,7 @@ export const Home = ({
   };
 
   const onRefreshFilters = (startTime: ShortDate, endTime: ShortDate) => {
+    // eslint-disable-line
     if (spanValue < 1) {
       setToast('Please add a valid span interval', 'danger');
       return;
@@ -102,7 +105,7 @@ export const Home = ({
   };
 
   const onEditClick = (savedVisualizationId: string) => {
-    window.location.assign(`#/event_analytics/explorer/${savedVisualizationId}`);
+    window.location.assign(`${observabilityLogsID}#/explorer/${savedVisualizationId}`);
   };
 
   const onSideBarClick = () => {
@@ -114,9 +117,19 @@ export const Home = ({
     }, 300);
   };
 
+  useEffect(() => {
+    chrome.setBreadcrumbs([
+      parentBreadcrumb,
+      {
+        text: 'Metrics',
+        href: `#/`,
+      },
+    ]);
+  }, []);
+
   useEffect(() => {
     if (!editMode) {
-      selectedMetrics.length > 0 ? setIsTopPanelDisabled(false) : setIsTopPanelDisabled(true);
+      selectedMetrics.length > 0 ? setIsTopPanelDisabled(false) : setIsTopPanelDisabled(true); // eslint-disable-line
     } else {
       setIsTopPanelDisabled(true);
     }
@@ -145,81 +158,83 @@ export const Home = ({
         side={toastRightSide ? 'right' : 'left'}
         toastLifeTimeMs={6000}
       />
-      <Route
-        exact
-        path="/metrics_analytics"
-        render={(props) => (
-          <div>
-            <EuiPage>
-              <EuiPageBody component="div">
-                <TopMenu
-                  http={http}
-                  IsTopPanelDisabled={IsTopPanelDisabled}
-                  startTime={startTime}
-                  endTime={endTime}
-                  onDatePickerChange={onDatePickerChange}
-                  recentlyUsedRanges={recentlyUsedRanges}
-                  editMode={editMode}
-                  setEditMode={setEditMode}
-                  setEditActionType={setEditActionType}
-                  panelVisualizations={panelVisualizations}
-                  setPanelVisualizations={setPanelVisualizations}
-                  resolutionValue={resolutionValue}
-                  setResolutionValue={setResolutionValue}
-                  spanValue={spanValue}
-                  setSpanValue={setSpanValue}
-                  resolutionSelectId={resolutionSelectId}
-                  savedObjects={savedObjects}
-                  setToast={setToast}
-                  setSearch={setSearch}
-                />
-                <div className="dscAppContainer">
-                  <div
-                    className={`col-md-2 dscSidebar__container dscCollapsibleSidebar ${sidebarClassName}`}
-                  >
-                    <div className="">
-                      {!isSidebarClosed && (
-                        <Sidebar http={http} pplService={pplService} search={search} />
+      <HashRouter>
+        <Route
+          exact
+          path="/"
+          render={(props) => (
+            <div>
+              <EuiPage>
+                <EuiPageBody component="div">
+                  <TopMenu
+                    http={http}
+                    IsTopPanelDisabled={IsTopPanelDisabled}
+                    startTime={startTime}
+                    endTime={endTime}
+                    onDatePickerChange={onDatePickerChange}
+                    recentlyUsedRanges={recentlyUsedRanges}
+                    editMode={editMode}
+                    setEditMode={setEditMode}
+                    setEditActionType={setEditActionType}
+                    panelVisualizations={panelVisualizations}
+                    setPanelVisualizations={setPanelVisualizations}
+                    resolutionValue={resolutionValue}
+                    setResolutionValue={setResolutionValue}
+                    spanValue={spanValue}
+                    setSpanValue={setSpanValue}
+                    resolutionSelectId={resolutionSelectId}
+                    savedObjects={savedObjects}
+                    setToast={setToast}
+                    setSearch={setSearch}
+                  />
+                  <div className="dscAppContainer">
+                    <div
+                      className={`col-md-2 dscSidebar__container dscCollapsibleSidebar ${sidebarClassName}`}
+                    >
+                      <div className="">
+                        {!isSidebarClosed && (
+                          <Sidebar http={http} pplService={pplService} search={search} />
+                        )}
+                        <EuiButtonIcon
+                          iconType={isSidebarClosed ? 'menuRight' : 'menuLeft'}
+                          iconSize="m"
+                          size="s"
+                          onClick={() => onSideBarClick()}
+                          data-test-subj="collapseSideBarButton"
+                          aria-controls="discover-sidebar"
+                          aria-expanded={isSidebarClosed ? 'false' : 'true'}
+                          aria-label="Toggle sidebar"
+                          className="dscCollapsibleSidebar__collapseButton"
+                        />
+                      </div>
+                    </div>
+                    <div className={`dscWrapper ${mainSectionClassName}`}>
+                      {selectedMetrics.length > 0 ? (
+                        <MetricsGrid
+                          http={http}
+                          chrome={chrome}
+                          panelVisualizations={panelVisualizations}
+                          setPanelVisualizations={setPanelVisualizations}
+                          editMode={editMode}
+                          pplService={pplService}
+                          startTime={startTime}
+                          endTime={endTime}
+                          moveToEvents={onEditClick}
+                          onRefresh={onRefresh}
+                          editActionType={editActionType}
+                          spanParam={spanValue + resolutionValue}
+                        />
+                      ) : (
+                        <EmptyMetricsView />
                       )}
-                      <EuiButtonIcon
-                        iconType={isSidebarClosed ? 'menuRight' : 'menuLeft'}
-                        iconSize="m"
-                        size="s"
-                        onClick={() => onSideBarClick()}
-                        data-test-subj="collapseSideBarButton"
-                        aria-controls="discover-sidebar"
-                        aria-expanded={isSidebarClosed ? 'false' : 'true'}
-                        aria-label="Toggle sidebar"
-                        className="dscCollapsibleSidebar__collapseButton"
-                      />
                     </div>
                   </div>
-                  <div className={`dscWrapper ${mainSectionClassName}`}>
-                    {selectedMetrics.length > 0 ? (
-                      <MetricsGrid
-                        http={http}
-                        chrome={chrome}
-                        panelVisualizations={panelVisualizations}
-                        setPanelVisualizations={setPanelVisualizations}
-                        editMode={editMode}
-                        pplService={pplService}
-                        startTime={startTime}
-                        endTime={endTime}
-                        moveToEvents={onEditClick}
-                        onRefresh={onRefresh}
-                        editActionType={editActionType}
-                        spanParam={spanValue + resolutionValue}
-                      />
-                    ) : (
-                      <EmptyMetricsView />
-                    )}
-                  </div>
-                </div>
-              </EuiPageBody>
-            </EuiPage>
-          </div>
-        )}
-      />
+                </EuiPageBody>
+              </EuiPage>
+            </div>
+          )}
+        />
+      </HashRouter>
     </>
   );
 };
diff --git a/public/components/notebooks/components/paragraph_components/para_input.tsx b/public/components/notebooks/components/paragraph_components/para_input.tsx
@@ -31,6 +31,7 @@ import { Input, Prompt } from '@nteract/presentational-components';
 import { uiSettingsService } from '../../../../../common/utils';
 import React, { useState } from 'react';
 import { ParaType } from '../../../../../common/types/notebooks';
+import { observabilityLogsID } from '../../../../../common/constants/shared';
 
 /*
  * "ParaInput" component is used by notebook to populate paragraph inputs for an open notebook.
@@ -118,7 +119,7 @@ export const ParaInput = (props: {
     const renderOption = (option: EuiComboBoxOptionOption, searchValue: string) => {
       let visURL = `visualize#/edit/${option.key}?_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:'${props.startTime}',to:'${props.endTime}'))`;
       if (option.className === 'OBSERVABILITY_VISUALIZATION') {
-        visURL = `#/event_analytics/explorer/${option.key}`;
+        visURL = `${observabilityLogsID}#/explorer/${option.key}`;
       }
       return (
         <EuiLink href={visURL} target="_blank">