GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-18 17:55:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

[Refactor]: Height for log explorer list panel (#4657)

Browse Source 
* refactor: added fullview and fix height issue for logs

* refactor: hide full view button on full view mode

* refactor: removed fullview for logs

* refactor: remove max with for body
This commit is contained in:
Rajat Dabade 2024-03-12 12:20:45 +05:30 committed by GitHub
parent b4d12966f3
commit 0326a4d42a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 63 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/Logs/TableView/config.ts
View File

@ -14,12 +14,12 @@ export function getDefaultCellStyle(isDarkMode?: boolean): CSSProperties {
lineHeight: '18px', lineHeight: '18px',
letterSpacing: '-0.07px', letterSpacing: '-0.07px',
marginBottom: '0px', marginBottom: '0px',
minWidth: '10rem',
}; };
} }
export const defaultTableStyle: CSSProperties = { export const defaultTableStyle: CSSProperties = {
minWidth: '40rem', minWidth: '40rem',
maxWidth: '40rem',
}; };
export const defaultListViewPanelStyle: CSSProperties = { export const defaultListViewPanelStyle: CSSProperties = {

3
frontend/src/container/LogsExplorerList/LogsExplorerList.style.scss
View File

@ -1,4 +1,7 @@
.logs-list-view-container { .logs-list-view-container {
flex: 1;
display: flex;
flex-direction: column;
font-family: 'Space Mono', monospace; font-family: 'Space Mono', monospace;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;

1
frontend/src/container/LogsExplorerList/styles.ts
View File

@ -1,6 +1,7 @@
import styled from 'styled-components'; import styled from 'styled-components';
export const InfinityWrapperStyled = styled.div` export const InfinityWrapperStyled = styled.div`
flex: 1;
height: 40rem !important; height: 40rem !important;
display: flex; display: flex;
height: 100%; height: 100%;

12
frontend/src/container/LogsExplorerViews/LogsExplorerViews.styles.scss
View File

@ -1,7 +1,15 @@
.logs-explorer-views-container { .logs-explorer-views-container {
margin-bottom: 24px; margin-bottom: 24px;
flex: 1;
display: flex;
flex-direction: column;
.logs-explorer-views-types { .logs-explorer-views-types {
width: -webkit-fill-available;
display: flex;
flex-direction: column;
flex: 1;
.views-tabs-container { .views-tabs-container {
padding: 8px 16px; padding: 8px 16px;
border: 1px solid var(--text-slate-400); border: 1px solid var(--text-slate-400);
@ -85,6 +93,10 @@
} }
.logs-explorer-views-type-content { .logs-explorer-views-type-content {
flex: 1;
display: flex;
flex-direction: column;
.ant-card { .ant-card {
border: none !important; border: none !important;
} }

11
frontend/src/pages/LogsExplorer/LogsExplorer.styles.scss Normal file
View File

@ -0,0 +1,11 @@
.log-explorer-query-container {
display: flex;
flex-direction: column;
flex: 1;
.logs-explorer-views {
flex: 1;
display: flex;
flex-direction: column;
}
}

16
frontend/src/pages/LogsExplorer/index.tsx
View File

@ -1,8 +1,8 @@
import { Col, Row } from 'antd'; import './LogsExplorer.styles.scss';
import ExplorerCard from 'components/ExplorerCard/ExplorerCard'; import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
import LogExplorerQuerySection from 'container/LogExplorerQuerySection'; import LogExplorerQuerySection from 'container/LogExplorerQuerySection';
import LogsExplorerViews from 'container/LogsExplorerViews'; import LogsExplorerViews from 'container/LogsExplorerViews';
// import LogsTopNav from 'container/LogsTopNav';
import LeftToolbarActions from 'container/QueryBuilder/components/ToolbarActions/LeftToolbarActions'; import LeftToolbarActions from 'container/QueryBuilder/components/ToolbarActions/LeftToolbarActions';
import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions'; import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
import Toolbar from 'container/Toolbar/Toolbar'; import Toolbar from 'container/Toolbar/Toolbar';
@ -87,19 +87,19 @@ function LogsExplorer(): JSX.Element {
/> />
<WrapperStyled> <WrapperStyled>
<Row gutter={[0, 0]}> <div className="log-explorer-query-container">
<Col xs={24}> <div>
<ExplorerCard sourcepage={DataSource.LOGS}> <ExplorerCard sourcepage={DataSource.LOGS}>
<LogExplorerQuerySection selectedView={selectedView} /> <LogExplorerQuerySection selectedView={selectedView} />
</ExplorerCard> </ExplorerCard>
</Col> </div>
<Col xs={24}> <div className="logs-explorer-views">
<LogsExplorerViews <LogsExplorerViews
selectedView={selectedView} selectedView={selectedView}
showHistogram={showHistogram} showHistogram={showHistogram}
/> />
</Col> </div>
</Row> </div>
</WrapperStyled> </WrapperStyled>
</ErrorBoundary> </ErrorBoundary>
); );

3
frontend/src/pages/LogsExplorer/styles.ts
View File

@ -3,6 +3,9 @@ import { themeColors } from 'constants/theme';
import styled from 'styled-components'; import styled from 'styled-components';
export const WrapperStyled = styled.div` export const WrapperStyled = styled.div`
display: flex;
flex-direction: column;
flex: 1;
color: ${themeColors.lightWhite}; color: ${themeColors.lightWhite};
`; `;

24
frontend/src/pages/LogsModulePage/LogsModulePage.styles.scss
View File

@ -5,6 +5,14 @@
// margin: 0 -1rem; // margin: 0 -1rem;
// } // }
flex: 1;
display: flex;
flex-direction: column;
.ant-tabs {
flex: 1;
}
.ant-tabs-nav { .ant-tabs-nav {
padding: 0 16px; padding: 0 16px;
margin-bottom: 0px; margin-bottom: 0px;
@ -14,6 +22,22 @@
} }
} }
.ant-tabs-content-holder {
display: flex;
.ant-tabs-content {
flex: 1;
display: flex;
flex-direction: column;
.ant-tabs-tabpane {
flex: 1;
display: flex;
flex-direction: column;
}
}
}
.tab-item { .tab-item {
display: flex; display: flex;
justify-content: center; justify-content: center;