poc

public/app/overrides/components/AppSelector/AppSelector.tsx

@@ -1,3 +1,4 @@
+export * from '@pyroscope/webapp/javascript/components/AppSelector';
 //import React, { useState, useEffect, useMemo } from 'react';
 //import ModalWithToggle from '@webapp/ui/Modals/ModalWithToggle';
 //import Input from '@webapp/ui/Input';
@@ -6,10 +7,6 @@
 //import { Label, LabelString } from '@webapp/components/AppSelector/Label';
 //import styles from './AppSelector.module.scss';
 
-export default function AppSelector() {
-  return <div>hey</div>;
-}
-
 //interface AppSelectorProps {
 //  /** Triggered when an app is selected */
 //  onSelected: (name: string) => void;
@@ -20,6 +17,7 @@ export default function AppSelector() {
 //  selectedAppName: string;
 //}
 //
+//
 //const AppSelector = ({
 //  onSelected,
 //  selectedAppName,

public/app/overrides/components/Toolbar.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import 'react-dom';
+
+import { useAppSelector, useAppDispatch } from '@webapp/redux/hooks';
+import { Query, queryToAppName, queryFromAppName } from '@webapp/models/query';
+import {
+  selectApps,
+  reloadAppNames,
+  selectQueries,
+  selectAppNamesState,
+} from '@webapp/redux/reducers/continuous';
+import { faSyncAlt } from '@fortawesome/free-solid-svg-icons/faSyncAlt';
+import Button from '@webapp/ui/Button';
+import LoadingSpinner from '@webapp/ui/LoadingSpinner';
+import DateRangePicker from '@webapp/components/DateRangePicker';
+import RefreshButton from '@webapp/components/RefreshButton';
+import AppSelector from '@webapp/components/AppSelector';
+// TODO
+import styles from '../../../../node_modules/pyroscope-oss/webapp/javascript/components/Toolbar.module.css';
+
+interface ToolbarProps {
+  /** callback to be called when an app is selected via the dropdown */
+  onSelectedApp: (name: Query) => void;
+
+  filterApp?: (names: string) => boolean;
+}
+function Toolbar({ onSelectedApp, filterApp = () => true }: ToolbarProps) {
+  const dispatch = useAppDispatch();
+  const appNamesState = useAppSelector(selectAppNamesState);
+  const apps = useAppSelector(selectApps).filter((a) => filterApp(a.name));
+  const appNames = apps.map((a) => a.name);
+  const { query } = useAppSelector(selectQueries);
+  const selectedAppName = queryToAppName(query).mapOr('', (q) =>
+    appNames.indexOf(q) !== -1 ? q : ''
+  );
+
+  const onSelected = (appName: string) => {
+    //const query = queryFromAppName(appName);
+    //    onSelectedApp(query);
+    onSelectedApp(
+      'process_cpu:cpu:nanoseconds:cpu:nanoseconds{pyroscope_app="simple.golang.app"}'
+    );
+  };
+
+  const appNamesLoading =
+    appNamesState.type === 'reloading' ? (
+      <LoadingSpinner className={styles.appNamesLoading} />
+    ) : null;
+
+  return (
+    <>
+      <div className="navbar">
+        <div className={styles.leftSide}>
+          <AppSelector
+            onSelected={onSelected}
+            apps={apps}
+            selectedAppName={selectedAppName}
+          />
+          <Button
+            aria-label="Refresh Apps"
+            icon={faSyncAlt}
+            onClick={() => dispatch(reloadAppNames())}
+            className={styles.refreshAppsButton}
+          />
+          {appNamesLoading}
+        </div>
+        <div className="navbar-space-filler" />
+        <RefreshButton />
+        &nbsp;
+        <DateRangePicker />
+      </div>
+    </>
+  );
+}
+
+export default Toolbar;

scripts/webpack/webpack.common.js

@@ -44,10 +44,18 @@ module.exports = {
         __dirname,
         '../../public/app/overrides/components/TimelineChart/ContextMenu.plugin'
       ),
+      //'@webapp/components/AppSelector': path.resolve(
+      //  __dirname,
+      //  '../../public/app/overrides/components/AppSelector/AppSelector'
+      //),
       '@webapp/components/AppSelector/Label': path.resolve(
         __dirname,
         '../../public/app/overrides/components/AppSelector/Label'
       ),
+      '@webapp/components/Toolbar': path.resolve(
+        __dirname,
+        '../../public/app/overrides/components/Toolbar'
+      ),
       '@webapp/ui/Sidebar': path.resolve(
         __dirname,
         '../../public/app/overrides/ui/Sidebar'

tsconfig.json

@@ -25,6 +25,9 @@
       "@webapp/components/AppSelector/Label": [
         "./public/app/overrides/components/AppSelector/Label"
       ],
+      "@webapp/components/Toolbar": [
+        "./public/app/overrides/components/Toolbar"
+      ],
       "@webapp/ui/Sidebar": ["./public/app/overrides/ui/Sidebar"],
       "@webapp/util/baseurl": ["./public/app/overrides/util/baseurl"],