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

feat: added option to download logs in csv & excel format (#2841)

Browse Source 
* feat: added option to download logs in csv format

* fix: suggested changes

* feat: added logs download as excel

* fix: updated logic for download excel and suggested changes

* fix: code level changes

---------

Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>
This commit is contained in:
Chintan Sudani 2023-06-07 15:31:57 +05:30 committed by GitHub
parent 745626f516
commit 97207f8e6d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 146 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/package.json
View File

@ -34,6 +34,7 @@
"@xstate/react": "^3.0.0",
"ansi-to-html": "0.7.2",
"antd": "5.0.5",
"antd-table-saveas-excel": "2.2.1",
"axios": "^0.21.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.0",

81
frontend/src/container/LogControls/index.tsx
View File

@ -1,13 +1,18 @@
import {
CloudDownloadOutlined,
FastBackwardOutlined,
LeftOutlined,
RightOutlined,
} from '@ant-design/icons';
import { Button, Divider, Select } from 'antd';
import { Button, Divider, Dropdown, MenuProps, Select } from 'antd';
import { Excel } from 'antd-table-saveas-excel';
import { getGlobalTime } from 'container/LogsSearchFilter/utils';
import { getMinMax } from 'container/TopNav/AutoRefresh/config';
import dayjs from 'dayjs';
import { FlatLogData } from 'lib/logs/flatLogData';
import { defaultSelectStyle } from 'pages/Logs/config';
import { memo, useMemo } from 'react';
import * as Papa from 'papaparse';
import { memo, useCallback, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Dispatch } from 'redux';
import { AppState } from 'store/reducers';
@ -22,7 +27,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
import { ILogsReducer } from 'types/reducer/logs';
import { ITEMS_PER_PAGE_OPTIONS } from './config';
import { Container } from './styles';
import { Container, DownloadLogButton } from './styles';
function LogControls(): JSX.Element | null {
const {
@ -72,12 +77,76 @@ function LogControls(): JSX.Element | null {
type: GET_PREVIOUS_LOG_LINES,
});
};
const handleNavigateNext = (): void => {
dispatch({
type: GET_NEXT_LOG_LINES,
});
};
const flattenLogData = useMemo(
() =>
logs.map((log) =>
FlatLogData({
...log,
timestamp: (dayjs(log.timestamp / 1e6).format() as unknown) as number,
}),
),
[logs],
);
const downloadExcelFile = useCallback((): void => {
const headers = Object.keys(Object.assign({}, ...flattenLogData)).map(
(item) => {
const updatedTitle = item
.split('_')
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(' ');
return {
title: updatedTitle,
dataIndex: item,
};
},
);
const excel = new Excel();
excel
.addSheet('log_data')
.addColumns(headers)
.addDataSource(flattenLogData, {
str2Percent: true,
})
.saveAs('log_data.xlsx');
}, [flattenLogData]);
const downloadCsvFile = useCallback((): void => {
const csv = Papa.unparse(flattenLogData);
const csvBlob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
const csvUrl = URL.createObjectURL(csvBlob);
const downloadLink = document.createElement('a');
downloadLink.href = csvUrl;
downloadLink.download = 'log_data.csv';
downloadLink.click();
downloadLink.remove();
}, [flattenLogData]);
const menu: MenuProps = useMemo(
() => ({
items: [
{
key: 'download-as-excel',
label: 'Excel',
onClick: downloadExcelFile,
},
{
key: 'download-as-csv',
label: 'CSV',
onClick: downloadCsvFile,
},
],
}),
[downloadCsvFile, downloadExcelFile],
);
const isLoading = isLogsLoading || isLoadingAggregate;
const isNextAndPreviousDisabled = useMemo(
@ -95,6 +164,12 @@ function LogControls(): JSX.Element | null {
return (
<Container>
<Dropdown menu={menu} trigger={['click']}>
<DownloadLogButton loading={isLoading} size="small" type="link">
<CloudDownloadOutlined />
Download
</DownloadLogButton>
</Dropdown>
<Button
loading={isLoading}
size="small"

6
frontend/src/container/LogControls/styles.ts
View File

@ -1,3 +1,4 @@
import { Button } from 'antd';
import styled from 'styled-components';
export const Container = styled.div`
@ -6,3 +7,8 @@ export const Container = styled.div`
justify-content: flex-end;
gap: 0.5rem;
`;
export const DownloadLogButton = styled(Button)`
display: flex;
align-items: center;
`;

62
frontend/yarn.lock
View File

@ -2141,6 +2141,11 @@
"@types/qs" "*"
"@types/serve-static" "*"
"@types/file-saver@^2.0.1":
version "2.0.5"
resolved "https://registry.yarnpkg.com/@types/file-saver/-/file-saver-2.0.5.tgz#9ee342a5d1314bb0928375424a2f162f97c310c7"
integrity sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==
"@types/fontfaceobserver@2.1.0":
version "2.1.0"
resolved "https://registry.npmjs.org/@types/fontfaceobserver/-/fontfaceobserver-2.1.0.tgz"
@ -3016,6 +3021,15 @@ ansi-to-html@0.7.2:
dependencies:
entities "^2.2.0"
antd-table-saveas-excel@2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/antd-table-saveas-excel/-/antd-table-saveas-excel-2.2.1.tgz#1abc68a51e7b79ab83d6ba9e710a9d27d3102b5b"
integrity sha512-GH3Mbg4JXqdgOPi94UCFyutmtHfLiir2aXnhBF4b1L+D2NwGxfb3Lmpm7lpk9swSAZecn2n3/H7yvgJdWWkdOg==
dependencies:
"@types/file-saver" "^2.0.1"
better-xlsx "^0.7.5"
file-saver "^2.0.2"
antd@5.0.5:
version "5.0.5"
resolved "https://registry.npmjs.org/antd/-/antd-5.0.5.tgz"
@ -3733,6 +3747,15 @@ batch@0.6.1:
resolved "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz"
integrity sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==
better-xlsx@^0.7.5:
version "0.7.6"
resolved "https://registry.yarnpkg.com/better-xlsx/-/better-xlsx-0.7.6.tgz#dc9bdbc303ecdb74823f9582c608d9f6879f4b51"
integrity sha512-pdkaXyCupGdV7PMjVJ4gt0nN4qSSZbQlbWoyv7q5TLscDnERrJ8fra0kdC0wntKzds5LIsit16xX/7MXhYzlyQ==
dependencies:
"@babel/runtime" "^7.8.4"
jszip "^3.2.2"
kind-of "^6.0.3"
"bezier-js@3 - 6":
version "6.1.3"
resolved "https://registry.npmjs.org/bezier-js/-/bezier-js-6.1.3.tgz"
@ -6055,6 +6078,11 @@ file-loader@6.1.1:
loader-utils "^2.0.0"
schema-utils "^3.0.0"
file-saver@^2.0.2:
version "2.0.5"
resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38"
integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==
fill-range@^4.0.0:
version "4.0.0"
resolved "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz"
@ -6861,6 +6889,11 @@ image-size@~0.5.0:
resolved "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz"
integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==
immediate@~3.0.5:
version "3.0.6"
resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
immutable@^4.0.0:
version "4.3.0"
resolved "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz"
@ -8117,6 +8150,16 @@ jsonparse@^1.2.0:
array-includes "^3.1.5"
object.assign "^4.1.3"
jszip@^3.2.2:
version "3.10.1"
resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.10.1.tgz#34aee70eb18ea1faec2f589208a157d1feb091c2"
integrity sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==
dependencies:
lie "~3.3.0"
pako "~1.0.2"
readable-stream "~2.3.6"
setimmediate "^1.0.5"
kapsule@1, kapsule@^1.14:
version "1.14.2"
resolved "https://registry.npmjs.org/kapsule/-/kapsule-1.14.2.tgz"
@ -8237,6 +8280,13 @@ levn@~0.3.0:
prelude-ls "~1.1.2"
type-check "~0.3.2"
lie@~3.3.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
dependencies:
immediate "~3.0.5"
lilconfig@2.0.5:
version "2.0.5"
resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz"
@ -9306,6 +9356,11 @@ pako@^2.0.4:
resolved "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz"
integrity sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==
pako@~1.0.2:
version "1.0.11"
resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
papaparse@5.3.2:
version "5.3.2"
resolved "https://registry.npmjs.org/papaparse/-/papaparse-5.3.2.tgz"
@ -10689,7 +10744,7 @@ readable-stream@3, readable-stream@^3.0.0, readable-stream@^3.0.6:
string_decoder "^1.1.1"
util-deprecate "^1.0.1"
readable-stream@^2.0.1:
readable-stream@^2.0.1, readable-stream@~2.3.6:
version "2.3.8"
resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz"
integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
@ -11265,6 +11320,11 @@ set-value@^2.0.0, set-value@^2.0.1:
is-plain-object "^2.0.3"
split-string "^3.0.1"
setimmediate@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
integrity sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==
setprototypeof@1.1.0:
version "1.1.0"
resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz"