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

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

Browse Source 
This reverts commit c04d0e9419fb8aa6d08fa2dfcc0a0826a9f2ad74.
This commit is contained in:
Prashant Shahi 2024-03-27 23:15:40 +05:45
parent 2a7ad596a1
commit dfc99a7756
9 changed files with 392 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,4 +16,5 @@ 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 Normal file
View File

@ -0,0 +1,56 @@
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: 16px; bottom: 24px;
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: 16px; bottom: 24px;
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;

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

@ -1,5 +1,7 @@
/* 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,
@ -31,7 +33,15 @@ 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 { CSSProperties, useCallback, useMemo, useRef, useState } from 'react'; import {
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';
@ -41,6 +51,7 @@ 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,
@ -57,6 +68,8 @@ 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);
@ -66,6 +79,7 @@ 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);
@ -257,11 +271,31 @@ 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 && ( {isQueryUpdated && !isExplorerOptionHidden && !isDragging && (
<div <div
className={cx( className={cx(
isEditDeleteSupported ? '' : 'hide-update', isEditDeleteSupported ? '' : 'hide-update',
@ -289,87 +323,105 @@ function ExplorerOptions({
</Tooltip> </Tooltip>
</div> </div>
)} )}
<div {!isExplorerOptionHidden && (
className="explorer-options" <div
style={{ className="explorer-options"
background: extraData style={{
? `linear-gradient(90deg, rgba(0,0,0,0) -5%, ${rgbaColor} 9%, rgba(0,0,0,0) 30%)` background: extraData
: 'transparent', ? `linear-gradient(90deg, rgba(0,0,0,0) -5%, ${rgbaColor} 9%, rgba(0,0,0,0) 30%)`
backdropFilter: 'blur(20px)', : 'transparent',
}} backdropFilter: 'blur(20px)',
> ...style,
<div className="view-options"> }}
<Select<string, { key: string; value: string }> ref={setNodeRef}
showSearch {...listeners}
placeholder="Select a view" {...attributes}
loading={viewsIsLoading || isRefetching} >
value={viewName || undefined} <div className="view-options">
onSelect={handleSelect} <Select<string, { key: string; value: string }>
style={{ showSearch
minWidth: 170, placeholder="Select a view"
}} loading={viewsIsLoading || isRefetching}
dropdownStyle={dropdownStyle} value={viewName || undefined}
className="views-dropdown" onSelect={handleSelect}
allowClear={{ style={{
clearIcon: <XCircle size={16} style={{ marginTop: '-3px' }} />, minWidth: 170,
}} }}
onClear={handleClearSelect} dropdownStyle={dropdownStyle}
ref={ref} className="views-dropdown"
> allowClear={{
{viewsData?.data?.data?.map((view) => { clearIcon: <XCircle size={16} style={{ marginTop: '-3px' }} />,
const extraData = }}
view.extraData !== '' ? JSON.parse(view.extraData) : ''; onDropdownVisibleChange={(open): void => {
let bgColor = getRandomColor(); setIsDragEnabled(open);
if (extraData !== '') { }}
bgColor = extraData.color; onClear={handleClearSelect}
} ref={ref}
return (
<Select.Option key={view.uuid} value={view.name}>
<div className="render-options">
<span
className="dot"
style={{
background: bgColor,
boxShadow: `0px 0px 6px 0px ${bgColor}`,
}}
/>{' '}
{view.name}
</div>
</Select.Option>
);
})}
</Select>
<Button
shape="round"
onClick={handleSaveViewModalToggle}
className={isEditDeleteSupported ? '' : 'hidden'}
disabled={viewsIsLoading || isRefetching}
>
<Disc3 size={16} /> Save this view
</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} /> {viewsData?.data?.data?.map((view) => {
</Button> const extraData =
</Tooltip> view.extraData !== '' ? JSON.parse(view.extraData) : '';
let bgColor = getRandomColor();
if (extraData !== '') {
bgColor = extraData.color;
}
return (
<Select.Option key={view.uuid} value={view.name}>
<div className="render-options">
<span
className="dot"
style={{
background: bgColor,
boxShadow: `0px 0px 6px 0px ${bgColor}`,
}}
/>{' '}
{view.name}
</div>
</Select.Option>
);
})}
</Select>
<Tooltip title="Add to Dashboard"> <Button
<Button disabled={disabled} shape="circle" onClick={onAddToDashboard}> shape="round"
<Plus size={16} /> onClick={handleSaveViewModalToggle}
className={isEditDeleteSupported ? '' : 'hidden'}
disabled={viewsIsLoading || isRefetching}
>
<Disc3 size={16} /> Save this view
</Button> </Button>
</Tooltip> </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>
</div> )}
<ExplorerOptionsDroppableArea
isExplorerOptionHidden={isExplorerOptionHidden}
setIsExplorerOptionHidden={setIsExplorerOptionHidden}
sourcepage={sourcepage}
isQueryUpdated={isQueryUpdated}
handleClearSelect={handleClearSelect}
onUpdateQueryHandler={onUpdateQueryHandler}
/>
<Modal <Modal
className="save-view-modal" className="save-view-modal"
@ -427,8 +479,14 @@ 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 = { isLoading: false }; ExplorerOptions.defaultProps = {
isLoading: false,
isExplorerOptionHidden: false,
setIsExplorerOptionHidden: undefined,
};
export default ExplorerOptions; export default ExplorerOptions;

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

@ -0,0 +1,55 @@
.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 Normal file
View File

@ -0,0 +1,83 @@
/* 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,5 +1,6 @@
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';
@ -67,3 +68,54 @@ 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 ExplorerOptions from 'container/ExplorerOptions/ExplorerOptions'; import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
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 />
<ExplorerOptions <ExplorerOptionWrapper
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 ExplorerOptions from 'container/ExplorerOptions/ExplorerOptions'; import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
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>
<ExplorerOptions <ExplorerOptionWrapper
disabled={!stagedQuery} disabled={!stagedQuery}
query={exportDefaultQuery} query={exportDefaultQuery}
isLoading={isLoading} isLoading={isLoading}
onExport={handleExport}
sourcepage={DataSource.TRACES} sourcepage={DataSource.TRACES}
onExport={handleExport}
/> />
</> </>
</ErrorBoundary> </ErrorBoundary>