feat: Add comparison page

feat: comparison page

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,30 @@ 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';
+import { LoadAppNames } from './components/LoadAppNames';
 
 const container = document.getElementById('reactRoot') as HTMLElement;
 const root = ReactDOM.createRoot(container);
 
 root.render(
   <Provider store={store}>
     <Notifications />
-
-    <SingleView />
+    <LoadAppNames>
+      <Router history={history}>
+        <Switch>
+          <Route exact path={'/'}>
+            <SingleView />
+          </Route>
+          <Route path={'/comparison'}>
+            <ComparisonView />
+          </Route>
+        </Switch>
+      </Router>
+    </LoadAppNames>
   </Provider>
 );

public/app/components/LoadAppNames.tsx

@@ -0,0 +1,8 @@
+import { loadAppNames } from '../hooks/loadAppNames';
+
+// LoadAppNames loads all app names automatically
+export function LoadAppNames(props: { children?: React.ReactNode }) {
+  loadAppNames();
+
+  return <>{props.children}</>;
+}

public/app/overrides/components/ExportData.tsx

@@ -1,11 +1,11 @@
 interface ExportDataProps {
-  flamebearer: unknown;
-  exportPNG: unknown;
-  exportJSON: unknown;
-  exportPprof: unknown;
-  exportHTML: unknown;
-  exportFlamegraphDotCom: unknown;
-  exportFlamegraphDotComFn: unknown;
+  flamebearer?: unknown;
+  exportPNG?: unknown;
+  exportJSON?: unknown;
+  exportPprof?: unknown;
+  exportHTML?: unknown;
+  exportFlamegraphDotCom?: unknown;
+  exportFlamegraphDotComFn?: unknown;
 }
 export default function (props: ExportDataProps) {
   return <></>;

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

@@ -9,30 +9,46 @@ interface TooltipCallbackProps {
     // TODO: remove this
     tagName: string;
   }>;
-  //  coordsToCanvasPos?: jquery.flot.axis['p2c'];
   coordsToCanvasPos?: unknown;
   canvasX?: number;
 }
 
+export type TimelineData = any;
+
 interface TimelineChartWrapperProps {
   id: string;
   timelineA: unknown;
-  height: unknown;
   timezone: string;
-  title: React.ReactNode;
-  annotations: unknown;
-  ContextMenu: unknown;
+  annotations?: unknown;
   selectionType: unknown;
   onSelect: (from: string, until: string) => void;
   onHoverDisplayTooltip?: React.FC<TooltipCallbackProps>;
+  format?: any;
+  timelineB?: unknown;
+  selectionWithHandler?: unknown;
+  syncCrosshairsWith?: unknown;
+  selection?: {
+    left?: unknown;
+    right?: unknown;
+  };
+  ContextMenu?: (props: any) => React.ReactNode;
+  height?: unknown;
+  title?: React.ReactNode;
 }
 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,5 @@
+import ContinuousComparisonView from '@webapp/pages/ContinuousComparisonView';
+
+export function ComparisonView() {
+  return <ContinuousComparisonView />;
+}

public/app/pages/SingleView.tsx

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

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',
       '/querier.v1.QuerierService': 'http://localhost:4100',