Add changelog and other fixes

Signed-off-by: abbyhu2000 <[email protected]>

CHANGELOG.md

@@ -31,6 +31,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Bump OUI to `1.1.2` to make `anomalyDetection` icon available ([#4408](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4408))
 - Add `color-scheme` to the root styling ([#4477](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4477))
 - [Multiple DataSource] Frontend support for adding sample data ([#4412](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4412))
+- Dashboard De-Angularization ([#4502](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4502))
 
 ### 🐛 Bug Fixes
 

src/plugins/dashboard/public/application/components/dashboard_editor.tsx

@@ -39,7 +39,7 @@ export const DashboardEditor = () => {
     savedDashboardInstance
   );
 
-  const { dashboardContainer, indexPatterns } = useDashboardContainer(
+  const { dashboardContainer, indexPatterns, setLastReloadRequestTime } = useDashboardContainer(
     services,
     dashboard,
     savedDashboardInstance,
@@ -99,6 +99,7 @@ export const DashboardEditor = () => {
               indexPatterns={indexPatterns}
               dashboardContainer={dashboardContainer}
               dashboardIdFromUrl={dashboardIdFromUrl}
+              setLastReloadRequestTime={setLastReloadRequestTime}
             />
           )}
       </div>

src/plugins/dashboard/public/application/components/dashboard_top_nav.tsx

@@ -22,6 +22,7 @@ interface DashboardTopNavProps {
   currentAppState: DashboardAppState;
   isEmbeddableRendered: boolean;
   indexPatterns: IndexPattern[];
+  setLastReloadRequestTime: React.Dispatch<React.SetStateAction<number>>;
   dashboardContainer?: DashboardContainer;
   dashboardIdFromUrl?: string;
 }
@@ -44,6 +45,7 @@ const TopNav = ({
   dashboardContainer,
   indexPatterns,
   dashboardIdFromUrl,
+  setLastReloadRequestTime,
 }: DashboardTopNavProps) => {
   const [topNavMenu, setTopNavMenu] = useState<any>();
   const [isFullScreenMode, setIsFullScreenMode] = useState<any>();
@@ -58,10 +60,11 @@ const TopNav = ({
   const handleRefresh = useCallback(
     (_payload: any, isUpdate?: boolean) => {
       if (!isUpdate && dashboardContainer) {
+        setLastReloadRequestTime(new Date().getTime());
         dashboardContainer.reload();
       }
     },
-    [dashboardContainer]
+    [dashboardContainer, setLastReloadRequestTime]
   );
 
   const isEmbeddedExternally = Boolean(queryParameters.get('embed'));

src/plugins/dashboard/public/application/embeddable/grid/_dashboard_grid.scss

@@ -82,7 +82,7 @@
     &:hover,
     &:focus {
       // TODO: this is a sass error, $embEditingModeHoverColor is undefined, comment it out for now
-      //background-color: $embEditingModeHoverColor;
+      // background-color: $embEditingModeHoverColor;
     }
   }
 

src/plugins/dashboard/public/application/utils/get_dashboard_instance.tsx

@@ -30,10 +30,11 @@ export const getDashboardInstance = async (
 
   // Get the existing dashboard/default new dashboard from saved object loader
   const savedDashboard: SavedObjectDashboard = await savedDashboards.get(opts);
+
   // Serialized the saved object dashboard
   const serializedDashboard = convertToSerializedDashboard(savedDashboard);
+
   // Create a Dashboard class using the serialized dashboard
-  // const dashboard = (await dashboards.createDashboard(serializedDashboard)) as Dashboard;
   const dashboard = new Dashboard(serializedDashboard);
   await dashboard.setState(serializedDashboard);
 

src/plugins/dashboard/public/application/utils/use/use_dashboard_container.tsx

@@ -60,6 +60,7 @@ export const useDashboardContainer = (
 ) => {
   const [dashboardContainer, setDashboardContainer] = useState<DashboardContainer>();
   const [indexPatterns, setIndexPatterns] = useState<IndexPattern[]>([]);
+  const [lastReloadRequestTime, setLastReloadRequestTime] = useState<number>(0);
 
   useEffect(() => {
     const getDashboardContainer = async () => {
@@ -70,7 +71,8 @@ export const useDashboardContainer = (
             services,
             appState,
             dashboard,
-            setIndexPatterns
+            setIndexPatterns,
+            lastReloadRequestTime
           );
 
           setDashboardContainer(dashboardContainerEmbeddable);
@@ -86,7 +88,7 @@ export const useDashboardContainer = (
     };
 
     getDashboardContainer();
-  }, [savedDashboardInstance, appState, services, dashboard]);
+  }, [savedDashboardInstance, appState, services, dashboard, lastReloadRequestTime]);
 
   useEffect(() => {
     const incomingEmbeddable = services.embeddable
@@ -104,15 +106,16 @@ export const useDashboardContainer = (
     }
   }, [dashboardContainer, services]);
 
-  return { dashboardContainer, indexPatterns };
+  return { dashboardContainer, indexPatterns, setLastReloadRequestTime };
 };
 
 const createDashboardEmbeddable = (
   savedDash: any,
   dashboardServices: DashboardServices,
   appState: DashboardAppStateContainer,
   dashboard: Dashboard,
-  setIndexPatterns: React.Dispatch<React.SetStateAction<IndexPattern[]>>
+  setIndexPatterns: React.Dispatch<React.SetStateAction<IndexPattern[]>>,
+  lastReloadRequestTime: number
 ) => {
   let dashboardContainer: DashboardContainer;
   let inputSubscription: Subscription | undefined;
@@ -217,7 +220,6 @@ const createDashboardEmbeddable = (
       embeddablesMap[panel.panelIndex] = convertSavedDashboardPanelToPanelState(panel);
     });
 
-    const lastReloadRequestTime = 0;
     return {
       id: savedDash.id || '',
       filters: data.query.filterManager.getFilters(),

src/plugins/dashboard/public/dashboard.ts

@@ -16,6 +16,8 @@
 import { cloneDeep } from 'lodash';
 import { Filter, ISearchSource, Query, RefreshInterval } from '../../data/public';
 import { SavedDashboardPanel } from './types';
+
+// TODO: This class can be revisited and clean up more
 export interface SerializedDashboard {
   id?: string;
   timeRestore: boolean;