diff --git a/package-lock.json b/package-lock.json index 5c4baed..2c5c3cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "ucentral-client", - "version": "2.9.0(16)", + "version": "2.9.0(18)", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "ucentral-client", - "version": "2.9.0(16)", + "version": "2.9.0(18)", "license": "ISC", "dependencies": { "@chakra-ui/icons": "^2.0.11", diff --git a/package.json b/package.json index a46831a..86e1ce9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ucentral-client", - "version": "2.9.0(16)", + "version": "2.9.0(18)", "description": "", "private": true, "main": "index.tsx", diff --git a/src/hooks/Network/Commands.ts b/src/hooks/Network/Commands.ts index 76454ed..541bcce 100644 --- a/src/hooks/Network/Commands.ts +++ b/src/hooks/Network/Commands.ts @@ -283,7 +283,11 @@ export const useDownloadScriptResult = ({ serialNumber, commandId }: { serialNum const blob = new Blob([response.data], { type: 'application/octet-stream' }); const link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); - link.download = `Script_${commandId}.tar.gz`; + const headerLine = + (response.headers['content-disposition'] as string | undefined) ?? + (response.headers['content-disposition'] as string | undefined); + const filename = headerLine?.split('filename=')[1]?.split(',')[0] ?? `Script_${commandId}.tar.gz`; + link.download = filename; link.click(); }, }); diff --git a/src/hooks/Network/Trace.ts b/src/hooks/Network/Trace.ts index b9b5201..bc77ce5 100644 --- a/src/hooks/Network/Trace.ts +++ b/src/hooks/Network/Trace.ts @@ -92,7 +92,11 @@ export const useDownloadTrace = ({ serialNumber, commandId }: { serialNumber: st const blob = new Blob([response.data], { type: 'application/octet-stream' }); const link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); - link.download = `Trace_${commandId}.pcap`; + const headerLine = + (response.headers['content-disposition'] as string | undefined) ?? + (response.headers['content-disposition'] as string | undefined); + const filename = headerLine?.split('filename=')[1]?.split(',')[0] ?? `Trace_${commandId}.pcap`; + link.download = filename; link.click(); }, }); diff --git a/src/pages/Device/StatisticsCard/InterfaceChart.tsx b/src/pages/Device/StatisticsCard/InterfaceChart.tsx index 3579cb4..a27ef53 100644 --- a/src/pages/Device/StatisticsCard/InterfaceChart.tsx +++ b/src/pages/Device/StatisticsCard/InterfaceChart.tsx @@ -9,10 +9,12 @@ import { Title, Tooltip, Legend, + Filler, + ChartData, } from 'chart.js'; import { Line } from 'react-chartjs-2'; -ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend); +ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler); const getDivisionFactor = (maxBytes: number) => { if (maxBytes < 1024) { @@ -42,22 +44,28 @@ const InterfaceChart = ({ data }: Props) => { const { factor, unit } = getDivisionFactor(data.maxTx); - const points = { + const points: ChartData<'line', string[], string> = { labels: data.recorded.map((recorded) => new Date(recorded * 1000).toLocaleTimeString()), datasets: [ { // Real 'Tx', but shown as 'Rx' label: 'Tx', data: data.rx.map((tx) => (Math.floor((tx / factor) * 100) / 100).toFixed(2)), - borderColor: colorMode === 'light' ? '#63B3ED' : '#BEE3F8', // blue-300 - blue-100 - backgroundColor: colorMode === 'light' ? '#63B3ED' : '#BEE3F8', // blue-300 - blue-100 + borderColor: colorMode === 'light' ? 'rgba(99, 179, 237, 1)' : 'rgba(190, 227, 248, 1)', // blue-300 - blue-100 + backgroundColor: colorMode === 'light' ? 'rgba(99, 179, 237, 0.3)' : 'rgba(190, 227, 248, 0.3)', // blue-300 - blue-100 + tension: 0.5, + pointRadius: 0, + fill: 'start', }, { // Real 'Rx', but shown as 'Tx' label: 'Rx', data: data.tx.map((rx) => (Math.floor((rx / factor) * 100) / 100).toFixed(2)), - borderColor: colorMode === 'light' ? '#48BB78' : '#9AE6B4', // green-400 - green-200 - backgroundColor: colorMode === 'light' ? '#48BB78' : '#9AE6B4', // green-400 - green-200 + borderColor: colorMode === 'light' ? 'rgba(72, 187, 120, 1)' : 'rgba(154, 230, 180, 1)', // green-400 - green-200 + backgroundColor: colorMode === 'light' ? 'rgba(72, 187, 120, 0.3)' : 'rgba(154, 230, 180, 0.3)', // green-400 - green-200 + tension: 0.5, + pointRadius: 0, + fill: 'start', }, ], };