Add download functionality for metric files and enhance UI warning component

- Introduced a new API method to download metric files.
- Updated MetricDataTruncatedWarning component to include a download button for large datasets.
- Passed metricId as a prop to MetricDataTruncatedWarning for download functionality.
- Improved user experience by providing feedback during the download process.

apps/web/src/api/buster_rest/metrics/requests.ts

@@ -14,11 +14,12 @@ import type {
   MetricDataResponse,
   GetMetricResponse,
   UpdateMetricResponse,
-  ShareUpdateResponse
+  ShareUpdateResponse,
+  MetricDownloadResponse
 } from '@buster/server-shared/metrics';
 import type { ShareDeleteRequest, ShareUpdateRequest } from '@buster/server-shared/share';
 import { serverFetch } from '@/api/createServerInstance';
-import { mainApi } from '../instances';
+import { mainApi, mainApiV2 } from '../instances';
 import { SharePostRequest } from '@buster/server-shared/share';
 
 export const getMetric = async (params: GetMetricRequest): Promise<GetMetricResponse> => {
@@ -104,3 +105,10 @@ export const updateMetricShare = async ({
     .put<ShareUpdateResponse>(`/metric_files/${id}/sharing`, params)
     .then((res) => res.data);
 };
+
+// Download metric file
+export const downloadMetricFile = async (id: string): Promise<MetricDownloadResponse> => {
+  return mainApiV2
+    .get<MetricDownloadResponse>(`/metric_files/${id}/download`)
+    .then((res) => res.data);
+};

apps/web/src/controllers/MetricController/MetricViewChart/MetricDataTruncatedWarning.tsx

@@ -1,21 +1,61 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Text } from '@/components/ui/typography';
+import { Button } from '@/components/ui/buttons';
+import { Download4 } from '@/components/ui/icons';
 import { cn } from '@/lib/classMerge';
+import { downloadMetricFile } from '@/api/buster_rest/metrics/requests';
 
 interface MetricDataTruncatedWarningProps {
   className?: string;
+  metricId: string;
 }
 
 export const MetricDataTruncatedWarning: React.FC<MetricDataTruncatedWarningProps> = ({
-  className
+  className,
+  metricId
 }) => {
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const handleDownload = async () => {
+    try {
+      setIsDownloading(true);
+      
+      // Call the API to get the download URL
+      const response = await downloadMetricFile(metricId);
+      
+      // Simply navigate to the download URL
+      // The response-content-disposition header will force a download
+      window.location.href = response.downloadUrl;
+      
+    } catch (error) {
+      console.error('Failed to download metric file:', error);
+      // You might want to show an error toast here
+    } finally {
+      // Add a small delay before removing loading state since download happens async
+      setTimeout(() => {
+        setIsDownloading(false);
+      }, 1000);
+    }
+  };
+
   return (
     <div
-      className={cn('bg-background flex flex-col space-y-1 rounded border p-4 shadow', className)}>
+      className={cn('bg-background flex items-center justify-between rounded border p-4 shadow', className)}>
+      <div className="flex flex-col space-y-1">
         <Text className="font-medium">This request returned more than 5,000 records</Text>
         <Text size="xs" variant="secondary">
-        If you need more than that, please contact your data admin.
+          To see all records, you'll need to download the results.
         </Text>
       </div>
+      <Button
+        onClick={handleDownload}
+        loading={isDownloading}
+        variant="default"
+        className="ml-4"
+        prefix={<Download4 />}
+      >
+        Download
+      </Button>
+    </div>
   );
 };

apps/web/src/controllers/MetricController/MetricViewChart/MetricViewChart.tsx

@@ -108,7 +108,7 @@ export const MetricViewChart: React.FC<{
             />
           </MetricViewChartCard>
 
-          {!!metricData?.has_more_records && <MetricDataTruncatedWarning />}
+          {!!metricData?.has_more_records && <MetricDataTruncatedWarning metricId={metricId} />}
         </div>
 
         <AnimatePresenceWrapper show={showEvaluation}>