[WIFI-12375] Download command results fix

Signed-off-by: Charles <charles.bourque96@gmail.com>

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",

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",

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();
     },
   });

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();
     },
   });

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
+        borderColor: colorMode === 'light' ? 'rgba(99, 179, 237, 1)' : 'rgba(190, 227, 248, 1)', // blue-300 - blue-100
-        backgroundColor: colorMode === 'light' ? '#63B3ED' : '#BEE3F8', // 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
+        borderColor: colorMode === 'light' ? 'rgba(72, 187, 120, 1)' : 'rgba(154, 230, 180, 1)', // green-400 - green-200
-        backgroundColor: colorMode === 'light' ? '#48BB78' : '#9AE6B4', // 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',
       },
     ],
   };