chore: adds ability to add an extra button and a panel (#2998)

grafana · Feb 9, 2024 · 14f90bf · 14f90bf
1 parent 2fc05e8
commit 14f90bf
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 6 deletions.
diff --git a/public/app/pages/ContinuousDiffView.tsx b/public/app/pages/ContinuousDiffView.tsx
@@ -29,8 +29,17 @@ import { isLoadingOrReloading } from './loading';
 import { Panel } from '@pyroscope/components/Panel';
 import { PageContentWrapper } from '@pyroscope/pages/PageContentWrapper';
 import { FlameGraphWrapper } from '@pyroscope/components/FlameGraphWrapper';
+import styles from './ContinuousSingleView.module.css';
 
-function ComparisonDiffApp() {
+type ContinuousDiffViewProps = {
+  extraButton?: React.ReactNode;
+  extraPanel?: React.ReactNode;
+};
+
+function ComparisonDiffApp({
+  extraButton,
+  extraPanel,
+}: ContinuousDiffViewProps) {
   const dispatch = useAppDispatch();
   const {
     diffView,
@@ -222,8 +231,17 @@ function ComparisonDiffApp() {
             />
           </Panel>
         </div>
-        <Panel isLoading={isLoading} dataTestId="diff-panel">
-          <FlameGraphWrapper profile={diffView.profile} diff={true} />
+        <Panel isLoading={isLoading} headerActions={extraButton}>
+          {extraPanel ? (
+            <div className={styles.flamegraphContainer}>
+              <div className={styles.flamegraphComponent}>
+                <FlameGraphWrapper profile={diffView.profile} diff={true} />
+              </div>
+              <div className={styles.extraPanel}>{extraPanel}</div>
+            </div>
+          ) : (
+            <FlameGraphWrapper profile={diffView.profile} diff={true} />
+          )}
         </Panel>
       </PageContentWrapper>
     </div>

diff --git a/public/app/pages/ContinuousSingleView.module.css b/public/app/pages/ContinuousSingleView.module.css
@@ -0,0 +1,30 @@
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.flamegraphContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  animation: fadeIn 1s;
+}
+
+.flamegraphComponent {
+  flex-basis: 50%;
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+
+.extraPanel {
+  flex-basis: 50%;
+  flex-grow: 1;
+  flex-shrink: 0;
+
+  margin-left: 16px;
+  border-left: 2px solid #000;
+}
diff --git a/public/app/pages/ContinuousSingleView.tsx b/public/app/pages/ContinuousSingleView.tsx
@@ -36,8 +36,17 @@ import { isLoadingOrReloading } from './loading';
 import { Panel } from '@pyroscope/components/Panel';
 import { PageContentWrapper } from '@pyroscope/pages/PageContentWrapper';
 import { FlameGraphWrapper } from '@pyroscope/components/FlameGraphWrapper';
+import styles from './ContinuousSingleView.module.css';
 
-function ContinuousSingleView() {
+type ContinuousSingleViewProps = {
+  extraButton?: React.ReactNode;
+  extraPanel?: React.ReactNode;
+};
+
+function ContinuousSingleView({
+  extraButton,
+  extraPanel,
+}: ContinuousSingleViewProps) {
   const dispatch = useAppDispatch();
   const { offset } = useTimeZone();
   const { colorMode } = useColorMode();
@@ -165,8 +174,20 @@ function ContinuousSingleView() {
             }
           />
         </Panel>
-        <Panel isLoading={isLoadingOrReloading([singleView.type])}>
-          {flamegraphRenderer}
+        <Panel
+          isLoading={isLoadingOrReloading([singleView.type])}
+          headerActions={extraButton}
+        >
+          {extraPanel ? (
+            <div className={styles.flamegraphContainer}>
+              <div className={styles.flamegraphComponent}>
+                {flamegraphRenderer}
+              </div>
+              <div className={styles.extraPanel}>{extraPanel}</div>
+            </div>
+          ) : (
+            flamegraphRenderer
+          )}
         </Panel>
       </PageContentWrapper>
     </div>