mirror of
https://github.com/SigNoz/signoz.git
synced 2025-12-17 15:36:48 +00:00
e8035b7dd2
This pull request introduces a new, customizable logs export feature in the Logs Explorer view, replacing the previous hardcoded download functionality. Users can now select export format, row limit, and which columns to include via a dedicated options menu. The implementation includes a new API integration for downloading export data, UI components for export options, and associated styling.
87 lines
1.6 KiB
SCSS
87 lines
1.6 KiB
SCSS
.logs-download-popover {
|
|
.ant-popover-inner {
|
|
border-radius: 4px;
|
|
border: 1px solid var(--bg-slate-400);
|
|
background: linear-gradient(
|
|
139deg,
|
|
var(--bg-ink-400) 0%,
|
|
var(--bg-ink-500) 98.68%
|
|
);
|
|
box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
|
|
backdrop-filter: blur(20px);
|
|
padding: 0 8px 12px 8px;
|
|
margin: 6px 0;
|
|
}
|
|
|
|
.export-options-container {
|
|
width: 240px;
|
|
border-radius: 4px;
|
|
|
|
.title {
|
|
display: flex;
|
|
color: var(--bg-slate-50);
|
|
font-family: Inter;
|
|
font-size: 11px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 18px;
|
|
letter-spacing: 0.88px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.export-format,
|
|
.row-limit,
|
|
.columns-scope {
|
|
padding: 12px 4px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
:global(.ant-radio-wrapper) {
|
|
color: var(--bg-vanilla-400);
|
|
font-family: Inter;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
.horizontal-line {
|
|
height: 1px;
|
|
background: var(--bg-slate-400);
|
|
}
|
|
|
|
.export-button {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.lightMode {
|
|
.logs-download-popover {
|
|
.ant-popover-inner {
|
|
border: 1px solid var(--bg-vanilla-300);
|
|
background: linear-gradient(
|
|
139deg,
|
|
var(--bg-vanilla-100) 0%,
|
|
var(--bg-vanilla-300) 98.68%
|
|
);
|
|
box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
|
|
}
|
|
.export-options-container {
|
|
.title {
|
|
color: var(--bg-ink-200);
|
|
}
|
|
|
|
:global(.ant-radio-wrapper) {
|
|
color: var(--bg-ink-400);
|
|
}
|
|
|
|
.horizontal-line {
|
|
background: var(--bg-vanilla-300);
|
|
}
|
|
}
|
|
}
|
|
}
|