add comparison page

Author: eh-am

package.json

@@ -26,6 +26,7 @@
     "@types/react-dom": "^18.0.11",
     "@types/react-helmet": "^6.1.5",
     "@types/react-outside-click-handler": "^1.3.1",
+    "@types/react-router-dom": "5.3.0",
     "copy-webpack-plugin": "^11.0.0",
     "esbuild-loader": "^3.0.1",
     "expose-loader": "^4.1.0",
@@ -60,6 +61,7 @@
     "react-notifications-component": "~3.1.0",
     "react-outside-click-handler": "^1.3.0",
     "react-redux": "^7.2.1",
+    "react-router-dom": "5.3.0",
     "react-textarea-autosize": "8.3.0"
   }
 }

public/app/app.tsx

@@ -6,16 +6,27 @@ import store, { persistor } from './redux/store';
 import '@webapp/../sass/profile.scss';
 import '@szhsin/react-menu/dist/index.css';
 import Notifications from '@webapp/ui/Notifications';
+import { Router, Switch, Route } from 'react-router-dom';
+import history from '@webapp/util/history';
 
 import { SingleView } from './pages/SingleView';
+import { ComparisonView } from './pages/ComparisonView';
 
 const container = document.getElementById('reactRoot') as HTMLElement;
 const root = ReactDOM.createRoot(container);
 
 root.render(
   <Provider store={store}>
     <Notifications />
-
-    <SingleView />
+    <Router history={history}>
+      <Switch>
+        <Route exact path={'/'}>
+          <SingleView />
+        </Route>
+        <Route path={'/comparison'}>
+          <ComparisonView />
+        </Route>
+      </Switch>
+    </Router>
   </Provider>
 );

public/app/overrides/components/TimelineChart/TimelineChartWrapper.tsx

@@ -29,10 +29,17 @@ interface TimelineChartWrapperProps {
 export default function (props: TimelineChartWrapperProps) {
   const ref = useRef<HTMLDivElement>(null);
 
-  // Since this element is inside a <Box>, also make the box hidden
+  // Horrible hack to hide the parent <Box>
+  // This won't be necessary after Timelines are implemented properly
   useEffect(() => {
     const parentElement = ref.current?.parentElement?.parentElement;
-    if (parentElement) {
+
+    // When timelines are within a pyro-flamegraph (eg in comparison page, don't do anything)
+    if (
+      parentElement?.parentElement?.tagName.toLowerCase() !==
+        'pyro-flamegraph' &&
+      parentElement
+    ) {
       parentElement.style.display = 'none';
     }
   }, [ref.current]);

public/app/pages/ComparisonView.tsx

@@ -0,0 +1,8 @@
+import ContinuousComparisonView from '@webapp/pages/ContinuousComparisonView';
+import { loadAppNames } from '../hooks/loadAppNames';
+
+export function ComparisonView() {
+  loadAppNames();
+
+  return <ContinuousComparisonView />;
+}

public/app/redux/store.ts

@@ -74,11 +74,41 @@ ReduxQuerySync({
       selector: (state: RootState) => state.continuous.until,
       action: continuousActions.setUntil,
     },
+    leftFrom: {
+      defaultValue: 'now-1h',
+      selector: (state: RootState) => state.continuous.leftFrom,
+      action: continuousActions.setLeftFrom,
+    },
+    leftUntil: {
+      defaultValue: 'now-30m',
+      selector: (state: RootState) => state.continuous.leftUntil,
+      action: continuousActions.setLeftUntil,
+    },
+    rightFrom: {
+      defaultValue: 'now-30m',
+      selector: (state: RootState) => state.continuous.rightFrom,
+      action: continuousActions.setRightFrom,
+    },
+    rightUntil: {
+      defaultValue: 'now',
+      selector: (state: RootState) => state.continuous.rightUntil,
+      action: continuousActions.setRightUntil,
+    },
     query: {
       defaultvalue: '',
       selector: (state: RootState) => state.continuous.query,
       action: continuousActions.setQuery,
     },
+    rightQuery: {
+      defaultvalue: '',
+      selector: (state: RootState) => state.continuous.rightQuery,
+      action: continuousActions.setRightQuery,
+    },
+    leftQuery: {
+      defaultvalue: '',
+      selector: (state: RootState) => state.continuous.leftQuery,
+      action: continuousActions.setLeftQuery,
+    },
     maxNodes: {
       defaultValue: '0',
       selector: (state: RootState) => state.continuous.maxNodes,

scripts/webpack/webpack.dev.js

@@ -6,6 +6,7 @@ module.exports = merge(common, {
   mode: 'development',
   devServer: {
     port: 4040,
+    historyApiFallback: true,
     proxy: {
       '/pyroscope': 'http://localhost:4100',
     },