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

* refactor: graph manager to scss and fix the height issue * refactor: updated scss
SigNoz · Oct 6, 2023 · 587034f · 587034f
1 parent 321cba2
commit 587034f
Show file tree

Hide file tree

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

diff --git a/frontend/src/container/GridGraphLayout/Graph/FullView/styles.ts b/frontend/src/container/GridGraphLayout/Graph/FullView/styles.ts
@@ -31,26 +31,6 @@ export const GraphContainer = styled.div<GraphContainerProps>`
 		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`
 	max-width: 18.75rem;
 	cursor: pointer;