From acdd306fd06832516f92404adb4a3abeafda3a66 Mon Sep 17 00:00:00 2001 From: Yomi Eluwande Date: Thu, 7 Nov 2024 15:45:43 +0100 Subject: [PATCH 01/43] rejig dashboard buttons --- .../src/ProfileView/VisualizationPanel.tsx | 21 +-- .../shared/profile/src/ProfileView/index.tsx | 40 ++++- .../ActionButtons/GroupByDropdown.tsx | 2 +- .../ActionButtons/SortByDropdown.tsx | 84 +++++++++ .../MultiLevelDropdown.tsx | 35 +--- .../components/VisualisationToolbar/index.tsx | 161 +++++++++++------- 6 files changed, 237 insertions(+), 106 deletions(-) create mode 100644 ui/packages/shared/profile/src/components/ActionButtons/SortByDropdown.tsx diff --git a/ui/packages/shared/profile/src/ProfileView/VisualizationPanel.tsx b/ui/packages/shared/profile/src/ProfileView/VisualizationPanel.tsx index 6ea16798af8..4163db46ea2 100644 --- a/ui/packages/shared/profile/src/ProfileView/VisualizationPanel.tsx +++ b/ui/packages/shared/profile/src/ProfileView/VisualizationPanel.tsx @@ -11,7 +11,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import React, {useState} from 'react'; +import React from 'react'; import {Icon} from '@iconify/react'; import cx from 'classnames'; @@ -26,11 +26,11 @@ interface Props { isMultiPanelView: boolean; handleClosePanel: (dashboardItem: string) => void; dragHandleProps: DraggableProvidedDragHandleProps | null | undefined; - getDashboardItemByType: (props: { - type: string; - isHalfScreen: boolean; - setActionButtons: (actionButtons: JSX.Element) => void; - }) => JSX.Element; + getDashboardItemByType: (props: {type: string; isHalfScreen: boolean}) => JSX.Element; + actionButtons: { + icicle: JSX.Element; + table: JSX.Element; + }; } export const VisualizationPanel = React.memo(function VisualizationPanel({ @@ -39,8 +39,8 @@ export const VisualizationPanel = React.memo(function VisualizationPanel({ handleClosePanel, dragHandleProps, getDashboardItemByType, + actionButtons, }: Props): JSX.Element { - const [actionButtons, setActionButtons] = useState(<>); const {flamegraphHint} = useParcaContext(); return ( @@ -52,14 +52,16 @@ export const VisualizationPanel = React.memo(function VisualizationPanel({ isMultiPanelView && dashboardItem === 'icicle' ? 'items-end gap-x-2' : 'items-end' )} > -
+
-
{actionButtons}
+ {isMultiPanelView ? ( +
{actionButtons[dashboardItem]}
+ ) : null}
); diff --git a/ui/packages/shared/profile/src/ProfileView/index.tsx b/ui/packages/shared/profile/src/ProfileView/index.tsx index 4f63006ca0e..5a721bac1fc 100644 --- a/ui/packages/shared/profile/src/ProfileView/index.tsx +++ b/ui/packages/shared/profile/src/ProfileView/index.tsx @@ -45,7 +45,10 @@ import {FIELD_FUNCTION_NAME} from '../ProfileIcicleGraph/IcicleGraphArrow'; import {ProfileSource} from '../ProfileSource'; import {SourceView} from '../SourceView'; import {Table} from '../Table'; -import VisualisationToolbar from '../components/VisualisationToolbar'; +import VisualisationToolbar, { + IcicleGraphToolbar, + TableToolbar, +} from '../components/VisualisationToolbar'; import {ProfileViewContextProvider} from './ProfileViewContext'; import {VisualizationPanel} from './VisualizationPanel'; @@ -195,11 +198,9 @@ export const ProfileView = ({ const getDashboardItemByType = ({ type, isHalfScreen, - setActionButtons, }: { type: string; isHalfScreen: boolean; - setActionButtons: (actionButtons: JSX.Element) => void; }): JSX.Element => { switch (type) { case 'icicle': { @@ -221,13 +222,12 @@ export const ProfileView = ({ filtered={filtered} profileType={profileSource?.ProfileType()} loading={flamegraphData.loading} - setActionButtons={setActionButtons} error={flamegraphData.error} isHalfScreen={isHalfScreen} width={ dimensions?.width !== undefined ? isHalfScreen - ? (dimensions.width - 40) / 2 + ? (dimensions.width - 54) / 2 : dimensions.width - 16 : 0 } @@ -260,7 +260,6 @@ export const ProfileView = ({ data={topTableData.arrow?.record} unit={topTableData.unit} profileType={profileSource?.ProfileType()} - setActionButtons={setActionButtons} currentSearchString={currentSearchString} setSearchString={setSearchString} isHalfScreen={isHalfScreen} @@ -276,7 +275,6 @@ export const ProfileView = ({ data={sourceData.data} total={total} filtered={filtered} - setActionButtons={setActionButtons} /> ) : ( <> @@ -342,6 +340,28 @@ export const ProfileView = ({ hasProfileSource && (profileViewExternalMainActions === null || profileViewExternalMainActions === undefined); + const clearSelection = useCallback((): void => { + setSearchString?.(''); + }, [setSearchString]); + + const getActionButtonsWithMultiPanelView = (): { + icicle: JSX.Element; + table: JSX.Element; + } => { + return { + icicle: , + table: ( + + ), + }; + }; + return ( @@ -429,7 +449,10 @@ export const ProfileView = ({ 'w-full min-h-96', snapshot.isDragging ? 'bg-gray-200 dark:bg-gray-500' - : 'bg-white dark:bg-gray-900' + : 'bg-white dark:bg-gray-900', + isMultiPanelView + ? 'border-2 border-gray-100 dark:border-gray-700 rounded-md p-3' + : '' )} >
)} diff --git a/ui/packages/shared/profile/src/components/ActionButtons/GroupByDropdown.tsx b/ui/packages/shared/profile/src/components/ActionButtons/GroupByDropdown.tsx index 9d6a628be49..65e45b0262b 100644 --- a/ui/packages/shared/profile/src/components/ActionButtons/GroupByDropdown.tsx +++ b/ui/packages/shared/profile/src/components/ActionButtons/GroupByDropdown.tsx @@ -180,7 +180,7 @@ const GroupByDropdown: React.FC = ({ return (
- +