GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-02 13:20:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

Revert "Explorer Toolbar maximised and minimised (#4656)" (#4705)

Browse Source 
This reverts commit aadb962b6ccf716375f71791c4215c833f4406f5.

(cherry picked from commit cf2203956211d5ba1e4b119000127aad5a2395cb)
This commit is contained in:
Vikrant Gupta 2024-03-15 01:26:31 +05:30 committed by Prashant Shahi
parent 6c2a3d5d43
commit c04d0e9419
9 changed files with 88 additions and 393 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/constants/localStorage.ts
View File

@ -16,5 +16,4 @@ export enum LOCALSTORAGE {
CHAT_SUPPORT = 'CHAT_SUPPORT', CHAT_SUPPORT = 'CHAT_SUPPORT',
IS_IDENTIFIED_USER = 'IS_IDENTIFIED_USER', IS_IDENTIFIED_USER = 'IS_IDENTIFIED_USER',
DASHBOARD_VARIABLES = 'DASHBOARD_VARIABLES', DASHBOARD_VARIABLES = 'DASHBOARD_VARIABLES',
SHOW_EXPLORER_TOOLBAR = 'SHOW_EXPLORER_TOOLBAR',
} }

56
frontend/src/container/ExplorerOptions/ExplorerOptionWrapper.tsx
View File

@ -1,56 +0,0 @@
import { DndContext, DragEndEvent } from '@dnd-kit/core';
import { useEffect, useState } from 'react';
import ExplorerOptions, { ExplorerOptionsProps } from './ExplorerOptions';
import {
getExplorerToolBarVisibility,
setExplorerToolBarVisibility,
} from './utils';
type ExplorerOptionsWrapperProps = Omit<
ExplorerOptionsProps,
'isExplorerOptionDrop'
>;
function ExplorerOptionWrapper({
disabled,
query,
isLoading,
onExport,
sourcepage,
}: ExplorerOptionsWrapperProps): JSX.Element {
const [isExplorerOptionHidden, setIsExplorerOptionHidden] = useState(false);
useEffect(() => {
const toolbarVisibility = getExplorerToolBarVisibility(sourcepage);
setIsExplorerOptionHidden(!toolbarVisibility);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const handleDragEnd = (event: DragEndEvent): void => {
const { active, over } = event;
if (
over !== null &&
active.id === 'explorer-options-draggable' &&
over.id === 'explorer-options-droppable'
) {
setIsExplorerOptionHidden(true);
setExplorerToolBarVisibility(false, sourcepage);
}
};
return (
<DndContext onDragEnd={handleDragEnd}>
<ExplorerOptions
disabled={disabled}
query={query}
isLoading={isLoading}
onExport={onExport}
sourcepage={sourcepage}
isExplorerOptionHidden={isExplorerOptionHidden}
setIsExplorerOptionHidden={setIsExplorerOptionHidden}
/>
</DndContext>
);
}
export default ExplorerOptionWrapper;

4
frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
View File

@ -3,7 +3,7 @@
} }
.explorer-update { .explorer-update {
position: fixed; position: fixed;
bottom: 24px; bottom: 16px;
left: calc(50% - 225px); left: calc(50% - 225px);
display: flex; display: flex;
align-items: center; align-items: center;
@ -47,7 +47,7 @@
box-shadow: 4px 4px 16px 4px rgba(0, 0, 0, 0.25); box-shadow: 4px 4px 16px 4px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
position: fixed; position: fixed;
bottom: 24px; bottom: 16px;
left: calc(50% + 240px); left: calc(50% + 240px);
transform: translate(calc(-50% - 120px), 0); transform: translate(calc(-50% - 120px), 0);
transition: left 0.2s linear; transition: left 0.2s linear;

220
frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
View File

@ -1,7 +1,5 @@
/* eslint-disable react/jsx-props-no-spreading */
import './ExplorerOptions.styles.scss'; import './ExplorerOptions.styles.scss';
import { useDraggable } from '@dnd-kit/core';
import { Color } from '@signozhq/design-tokens'; import { Color } from '@signozhq/design-tokens';
import { import {
Button, Button,
@ -33,15 +31,7 @@ import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
import { useNotifications } from 'hooks/useNotifications'; import { useNotifications } from 'hooks/useNotifications';
import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery'; import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
import { Check, ConciergeBell, Disc3, Plus, X, XCircle } from 'lucide-react'; import { Check, ConciergeBell, Disc3, Plus, X, XCircle } from 'lucide-react';
import { import { CSSProperties, useCallback, useMemo, useRef, useState } from 'react';
CSSProperties,
Dispatch,
SetStateAction,
useCallback,
useMemo,
useRef,
useState,
} from 'react';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { AppState } from 'store/reducers'; import { AppState } from 'store/reducers';
@ -51,7 +41,6 @@ import { DataSource } from 'types/common/queryBuilder';
import AppReducer from 'types/reducer/app'; import AppReducer from 'types/reducer/app';
import { USER_ROLES } from 'types/roles'; import { USER_ROLES } from 'types/roles';
import ExplorerOptionsDroppableArea from './ExplorerOptionsDroppableArea';
import { import {
DATASOURCE_VS_ROUTES, DATASOURCE_VS_ROUTES,
generateRGBAFromHex, generateRGBAFromHex,
@ -68,8 +57,6 @@ function ExplorerOptions({
onExport, onExport,
query, query,
sourcepage, sourcepage,
isExplorerOptionHidden = false,
setIsExplorerOptionHidden,
}: ExplorerOptionsProps): JSX.Element { }: ExplorerOptionsProps): JSX.Element {
const [isExport, setIsExport] = useState<boolean>(false); const [isExport, setIsExport] = useState<boolean>(false);
const [isSaveModalOpen, setIsSaveModalOpen] = useState(false); const [isSaveModalOpen, setIsSaveModalOpen] = useState(false);
@ -79,7 +66,6 @@ function ExplorerOptions({
const history = useHistory(); const history = useHistory();
const ref = useRef<RefSelectProps>(null); const ref = useRef<RefSelectProps>(null);
const isDarkMode = useIsDarkMode(); const isDarkMode = useIsDarkMode();
const [isDragEnabled, setIsDragEnabled] = useState(false);
const onModalToggle = useCallback((value: boolean) => { const onModalToggle = useCallback((value: boolean) => {
setIsExport(value); setIsExport(value);
@ -271,31 +257,11 @@ function ExplorerOptions({
[isDarkMode], [isDarkMode],
); );
const {
attributes,
listeners,
setNodeRef,
transform,
isDragging,
} = useDraggable({
id: 'explorer-options-draggable',
disabled: isDragEnabled,
});
const isEditDeleteSupported = allowedRoles.includes(role as string); const isEditDeleteSupported = allowedRoles.includes(role as string);
const style: React.CSSProperties | undefined = transform
? {
transform: `translate3d(${transform.x - 338}px, ${transform.y}px, 0)`,
width: `${400 - transform.y * 6}px`,
maxWidth: '440px', // initial width of the explorer options
overflow: 'hidden',
}
: undefined;
return ( return (
<> <>
{isQueryUpdated && !isExplorerOptionHidden && !isDragging && ( {isQueryUpdated && (
<div <div
className={cx( className={cx(
isEditDeleteSupported ? '' : 'hide-update', isEditDeleteSupported ? '' : 'hide-update',
@ -323,105 +289,87 @@ function ExplorerOptions({
</Tooltip> </Tooltip>
</div> </div>
)} )}
{!isExplorerOptionHidden && ( <div
<div className="explorer-options"
className="explorer-options" style={{
style={{ background: extraData
background: extraData ? `linear-gradient(90deg, rgba(0,0,0,0) -5%, ${rgbaColor} 9%, rgba(0,0,0,0) 30%)`
? `linear-gradient(90deg, rgba(0,0,0,0) -5%, ${rgbaColor} 9%, rgba(0,0,0,0) 30%)` : 'transparent',
: 'transparent', backdropFilter: 'blur(20px)',
backdropFilter: 'blur(20px)', }}
...style, >
}} <div className="view-options">
ref={setNodeRef} <Select<string, { key: string; value: string }>
{...listeners} showSearch
{...attributes} placeholder="Select a view"
> loading={viewsIsLoading || isRefetching}
<div className="view-options"> value={viewName || undefined}
<Select<string, { key: string; value: string }> onSelect={handleSelect}
showSearch style={{
placeholder="Select a view" minWidth: 170,
loading={viewsIsLoading || isRefetching} }}
value={viewName || undefined} dropdownStyle={dropdownStyle}
onSelect={handleSelect} className="views-dropdown"
style={{ allowClear={{
minWidth: 170, clearIcon: <XCircle size={16} style={{ marginTop: '-3px' }} />,
}} }}
dropdownStyle={dropdownStyle} onClear={handleClearSelect}
className="views-dropdown" ref={ref}
allowClear={{ >
clearIcon: <XCircle size={16} style={{ marginTop: '-3px' }} />, {viewsData?.data?.data?.map((view) => {
}} const extraData =
onDropdownVisibleChange={(open): void => { view.extraData !== '' ? JSON.parse(view.extraData) : '';
setIsDragEnabled(open); let bgColor = getRandomColor();
}} if (extraData !== '') {
onClear={handleClearSelect} bgColor = extraData.color;
ref={ref} }
> return (
{viewsData?.data?.data?.map((view) => { <Select.Option key={view.uuid} value={view.name}>
const extraData = <div className="render-options">
view.extraData !== '' ? JSON.parse(view.extraData) : ''; <span
let bgColor = getRandomColor(); className="dot"
if (extraData !== '') { style={{
bgColor = extraData.color; background: bgColor,
} boxShadow: `0px 0px 6px 0px ${bgColor}`,
return ( }}
<Select.Option key={view.uuid} value={view.name}> />{' '}
<div className="render-options"> {view.name}
<span </div>
className="dot" </Select.Option>
style={{ );
background: bgColor, })}
boxShadow: `0px 0px 6px 0px ${bgColor}`, </Select>
}}
/>{' '}
{view.name}
</div>
</Select.Option>
);
})}
</Select>
<Button <Button
shape="round" shape="round"
onClick={handleSaveViewModalToggle} onClick={handleSaveViewModalToggle}
className={isEditDeleteSupported ? '' : 'hidden'} className={isEditDeleteSupported ? '' : 'hidden'}
disabled={viewsIsLoading || isRefetching} disabled={viewsIsLoading || isRefetching}
> >
<Disc3 size={16} /> Save this view <Disc3 size={16} /> Save this view
</Button> </Button>
</div>
<hr className={isEditDeleteSupported ? '' : 'hidden'} />
<div className={cx('actions', isEditDeleteSupported ? '' : 'hidden')}>
<Tooltip title="Create Alerts">
<Button
disabled={disabled}
shape="circle"
onClick={onCreateAlertsHandler}
>
<ConciergeBell size={16} />
</Button>
</Tooltip>
<Tooltip title="Add to Dashboard">
<Button disabled={disabled} shape="circle" onClick={onAddToDashboard}>
<Plus size={16} />
</Button>
</Tooltip>
</div>
</div> </div>
)}
<ExplorerOptionsDroppableArea <hr className={isEditDeleteSupported ? '' : 'hidden'} />
isExplorerOptionHidden={isExplorerOptionHidden}
setIsExplorerOptionHidden={setIsExplorerOptionHidden} <div className={cx('actions', isEditDeleteSupported ? '' : 'hidden')}>
sourcepage={sourcepage} <Tooltip title="Create Alerts">
isQueryUpdated={isQueryUpdated} <Button
handleClearSelect={handleClearSelect} disabled={disabled}
onUpdateQueryHandler={onUpdateQueryHandler} shape="circle"
/> onClick={onCreateAlertsHandler}
>
<ConciergeBell size={16} />
</Button>
</Tooltip>
<Tooltip title="Add to Dashboard">
<Button disabled={disabled} shape="circle" onClick={onAddToDashboard}>
<Plus size={16} />
</Button>
</Tooltip>
</div>
</div>
<Modal <Modal
className="save-view-modal" className="save-view-modal"
@ -479,14 +427,8 @@ export interface ExplorerOptionsProps {
query: Query | null; query: Query | null;
disabled: boolean; disabled: boolean;
sourcepage: DataSource; sourcepage: DataSource;
isExplorerOptionHidden?: boolean;
setIsExplorerOptionHidden?: Dispatch<SetStateAction<boolean>>;
} }
ExplorerOptions.defaultProps = { ExplorerOptions.defaultProps = { isLoading: false };
isLoading: false,
isExplorerOptionHidden: false,
setIsExplorerOptionHidden: undefined,
};
export default ExplorerOptions; export default ExplorerOptions;

55
frontend/src/container/ExplorerOptions/ExplorerOptionsDroppableArea.styles.scss
View File

@ -1,55 +0,0 @@
.explorer-option-droppable-container {
position: fixed;
bottom: 0;
width: -webkit-fill-available;
height: 24px;
display: flex;
justify-content: center;
border-radius: 10px 10px 0px 0px;
// box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
// backdrop-filter: blur(20px);
.explorer-actions-btn {
display: flex;
gap: 8px;
margin-right: 8px;
.action-btn {
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px 10px 0px 0px;
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(20px);
height: 24px !important;
border: none;
}
}
.explorer-show-btn {
border-radius: 10px 10px 0px 0px;
border: 1px solid var(--bg-slate-400);
background: rgba(22, 24, 29, 0.40);
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(20px);
align-self: center;
padding: 8px 12px;
height: 24px !important;
.menu-bar {
border-radius: 50px;
background: var(--bg-slate-200);
height: 4px;
width: 50px;
}
}
}
.lightMode {
.explorer-option-droppable-container {
.explorer-show-btn {
background: var(--bg-vanilla-400);
}
}
}

83
frontend/src/container/ExplorerOptions/ExplorerOptionsDroppableArea.tsx
View File

@ -1,83 +0,0 @@
/* eslint-disable no-nested-ternary */
import './ExplorerOptionsDroppableArea.styles.scss';
import { useDroppable } from '@dnd-kit/core';
import { Color } from '@signozhq/design-tokens';
import { Button, Tooltip } from 'antd';
import { Disc3, X } from 'lucide-react';
import { Dispatch, SetStateAction } from 'react';
import { DataSource } from 'types/common/queryBuilder';
import { setExplorerToolBarVisibility } from './utils';
interface DroppableAreaProps {
isQueryUpdated: boolean;
isExplorerOptionHidden?: boolean;
sourcepage: DataSource;
setIsExplorerOptionHidden?: Dispatch<SetStateAction<boolean>>;
handleClearSelect: () => void;
onUpdateQueryHandler: () => void;
}
function ExplorerOptionsDroppableArea({
isQueryUpdated,
isExplorerOptionHidden,
sourcepage,
setIsExplorerOptionHidden,
handleClearSelect,
onUpdateQueryHandler,
}: DroppableAreaProps): JSX.Element {
const { setNodeRef } = useDroppable({
id: 'explorer-options-droppable',
});
const handleShowExplorerOption = (): void => {
if (setIsExplorerOptionHidden) {
setIsExplorerOptionHidden(false);
setExplorerToolBarVisibility(true, sourcepage);
}
};
return (
<div ref={setNodeRef} className="explorer-option-droppable-container">
{isExplorerOptionHidden && (
<>
{isQueryUpdated && (
<div className="explorer-actions-btn">
<Tooltip title="Clear this view">
<Button
onClick={handleClearSelect}
className="action-btn"
style={{ background: Color.BG_CHERRY_500 }}
icon={<X size={14} color={Color.BG_INK_500} />}
/>
</Tooltip>
<Tooltip title="Update this View">
<Button
onClick={onUpdateQueryHandler}
className="action-btn"
style={{ background: Color.BG_ROBIN_500 }}
icon={<Disc3 size={14} color={Color.BG_INK_500} />}
/>
</Tooltip>
</div>
)}
<Button
// style={{ alignSelf: 'center', marginRight: 'calc(10% - 20px)' }}
className="explorer-show-btn"
onClick={handleShowExplorerOption}
>
<div className="menu-bar" />
</Button>
</>
)}
</div>
);
}
ExplorerOptionsDroppableArea.defaultProps = {
isExplorerOptionHidden: undefined,
setIsExplorerOptionHidden: undefined,
};
export default ExplorerOptionsDroppableArea;

52
frontend/src/container/ExplorerOptions/utils.ts
View File

@ -1,6 +1,5 @@
import { Color } from '@signozhq/design-tokens'; import { Color } from '@signozhq/design-tokens';
import { showErrorNotification } from 'components/ExplorerCard/utils'; import { showErrorNotification } from 'components/ExplorerCard/utils';
import { LOCALSTORAGE } from 'constants/localStorage';
import { QueryParams } from 'constants/query'; import { QueryParams } from 'constants/query';
import ROUTES from 'constants/routes'; import ROUTES from 'constants/routes';
import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi'; import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
@ -68,54 +67,3 @@ export const generateRGBAFromHex = (hex: string, opacity: number): string =>
hex.slice(3, 5), hex.slice(3, 5),
16, 16,
)}, ${parseInt(hex.slice(5, 7), 16)}, ${opacity})`; )}, ${parseInt(hex.slice(5, 7), 16)}, ${opacity})`;
export const getExplorerToolBarVisibility = (dataSource: string): boolean => {
try {
const showExplorerToolbar = localStorage.getItem(
LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
);
if (showExplorerToolbar === null) {
const parsedShowExplorerToolbar: {
[DataSource.LOGS]: boolean;
[DataSource.TRACES]: boolean;
[DataSource.METRICS]: boolean;
} = {
[DataSource.METRICS]: true,
[DataSource.TRACES]: true,
[DataSource.LOGS]: true,
};
localStorage.setItem(
LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
JSON.stringify(parsedShowExplorerToolbar),
);
return true;
}
const parsedShowExplorerToolbar = JSON.parse(showExplorerToolbar || '{}');
return parsedShowExplorerToolbar[dataSource];
} catch (error) {
console.error(error);
return false;
}
};
export const setExplorerToolBarVisibility = (
value: boolean,
dataSource: string,
): void => {
try {
const showExplorerToolbar = localStorage.getItem(
LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
);
if (showExplorerToolbar) {
const parsedShowExplorerToolbar = JSON.parse(showExplorerToolbar);
parsedShowExplorerToolbar[dataSource] = value;
localStorage.setItem(
LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
JSON.stringify(parsedShowExplorerToolbar),
);
return;
}
} catch (error) {
console.error(error);
}
};

4
frontend/src/container/LogsExplorerViews/index.tsx
View File

@ -14,7 +14,7 @@ import {
PANEL_TYPES, PANEL_TYPES,
} from 'constants/queryBuilder'; } from 'constants/queryBuilder';
import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config'; import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config';
import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper'; import ExplorerOptions from 'container/ExplorerOptions/ExplorerOptions';
import GoToTop from 'container/GoToTop'; import GoToTop from 'container/GoToTop';
import LogsExplorerChart from 'container/LogsExplorerChart'; import LogsExplorerChart from 'container/LogsExplorerChart';
import LogsExplorerList from 'container/LogsExplorerList'; import LogsExplorerList from 'container/LogsExplorerList';
@ -634,7 +634,7 @@ function LogsExplorerViews({
<GoToTop /> <GoToTop />
<ExplorerOptionWrapper <ExplorerOptions
disabled={!stagedQuery} disabled={!stagedQuery}
query={exportDefaultQuery} query={exportDefaultQuery}
isLoading={isUpdateDashboardLoading} isLoading={isUpdateDashboardLoading}

6
frontend/src/pages/TracesExplorer/index.tsx
View File

@ -5,7 +5,7 @@ import axios from 'axios';
import ExplorerCard from 'components/ExplorerCard/ExplorerCard'; import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes'; import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder'; import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper'; import ExplorerOptions from 'container/ExplorerOptions/ExplorerOptions';
import ExportPanel from 'container/ExportPanel'; import ExportPanel from 'container/ExportPanel';
import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions'; import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2'; import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
@ -208,12 +208,12 @@ function TracesExplorer(): JSX.Element {
onChange={handleExplorerTabChange} onChange={handleExplorerTabChange}
/> />
</Container> </Container>
<ExplorerOptionWrapper <ExplorerOptions
disabled={!stagedQuery} disabled={!stagedQuery}
query={exportDefaultQuery} query={exportDefaultQuery}
isLoading={isLoading} isLoading={isLoading}
sourcepage={DataSource.TRACES}
onExport={handleExport} onExport={handleExport}
sourcepage={DataSource.TRACES}
/> />
</> </>
</ErrorBoundary> </ErrorBoundary>