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

[Refactor]: graph manager to scss and fix the height issue (#3671)

Browse Source 
* refactor: graph manager to scss and fix the height issue

* refactor: updated scss
This commit is contained in:
Rajat Dabade 2023-10-06 15:10:13 +05:30 committed by GitHub
parent 321cba2af5
commit 587034f573
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/container/GridGraphLayout/Graph/FullView/GraphManager.styles.scss Normal file
View File

@ -0,0 +1,21 @@
.graph-manager-container {
margin-top: 1.25rem;
display: flex;
align-items: flex-end;
overflow-x: scroll;
.filter-table-container {
flex-basis: 80%;
}
.save-cancel-container {
flex-basis: 20%;
display: flex;
justify-content: flex-end;
}
.save-cancel-button {
margin: 0 0.313rem;
}
}

30
frontend/src/container/GridGraphLayout/Graph/FullView/GraphManager.tsx
View File

@ -1,3 +1,5 @@
import './GraphManager.styles.scss';
import { Button, Input } from 'antd'; import { Button, Input } from 'antd';
import { CheckboxChangeEvent } from 'antd/es/checkbox'; import { CheckboxChangeEvent } from 'antd/es/checkbox';
import { ResizeTable } from 'components/ResizeTable'; import { ResizeTable } from 'components/ResizeTable';
@ -8,12 +10,6 @@ import { memo, useCallback, useEffect, useMemo, useState } from 'react';
import { eventEmitter } from 'utils/getEventEmitter'; import { eventEmitter } from 'utils/getEventEmitter';
import { getGraphVisibilityStateOnDataChange } from '../utils'; import { getGraphVisibilityStateOnDataChange } from '../utils';
import {
FilterTableAndSaveContainer,
FilterTableContainer,
SaveCancelButtonContainer,
SaveContainer,
} from './styles';
import { getGraphManagerTableColumns } from './TableRender/GraphManagerColumns'; import { getGraphManagerTableColumns } from './TableRender/GraphManagerColumns';
import { ExtendedChartDataset, GraphManagerProps } from './types'; import { ExtendedChartDataset, GraphManagerProps } from './types';
import { import {
@ -169,30 +165,30 @@ function GraphManager({
const dataSource = tableDataSet.filter((item) => item.show); const dataSource = tableDataSet.filter((item) => item.show);
return ( return (
<FilterTableAndSaveContainer> <div className="graph-manager-container">
<FilterTableContainer> <div className="filter-table-container">
<Input onChange={filterHandler} placeholder="Filter Series" /> <Input onChange={filterHandler} placeholder="Filter Series" />
<ResizeTable <ResizeTable
columns={columns} columns={columns}
dataSource={dataSource} dataSource={dataSource}
rowKey="index" rowKey="index"
pagination={false} pagination={false}
scroll={{ y: 240 }} scroll={{ y: 200 }}
/> />
</FilterTableContainer> </div>
<SaveContainer> <div className="save-cancel-container">
<SaveCancelButtonContainer> <span className="save-cancel-button">
<Button type="default" onClick={onToggleModelHandler}> <Button type="default" onClick={onToggleModelHandler}>
Cancel Cancel
</Button> </Button>
</SaveCancelButtonContainer> </span>
<SaveCancelButtonContainer> <span className="save-cancel-button">
<Button onClick={saveHandler} type="primary"> <Button onClick={saveHandler} type="primary">
Save Save
</Button> </Button>
</SaveCancelButtonContainer> </span>
</SaveContainer> </div>
</FilterTableAndSaveContainer> </div>
); );
} }

20
frontend/src/container/GridGraphLayout/Graph/FullView/styles.ts
View File

@ -31,26 +31,6 @@ export const GraphContainer = styled.div<GraphContainerProps>`
isGraphLegendToggleAvailable ? '50%' : '100%'}; isGraphLegendToggleAvailable ? '50%' : '100%'};
`; `;
export const FilterTableAndSaveContainer = styled.div`
margin-top: 1.875rem;
display: flex;
align-items: flex-end;
`;
export const FilterTableContainer = styled.div`
flex-basis: 80%;
`;
export const SaveContainer = styled.div`
flex-basis: 20%;
display: flex;
justify-content: flex-end;
`;
export const SaveCancelButtonContainer = styled.span`
margin: 0 0.313rem;
`;
export const LabelContainer = styled.button` export const LabelContainer = styled.button`
max-width: 18.75rem; max-width: 18.75rem;
cursor: pointer; cursor: pointer;