FE: add ability to download envoy config dump (#2367)

frontend/workflows/envoy/package.json

@@ -27,6 +27,7 @@
     "@clutch-sh/data-layout": "^2.0.0-beta",
     "@clutch-sh/wizard": "^2.0.0-beta",
     "@mui/material": "^5.8.5",
+    "file-saver": "^2.0.5",
     "lodash": "^4.17.15",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

frontend/workflows/envoy/src/remote-triage/index.tsx

@@ -13,6 +13,7 @@ import {
 import { useDataLayout } from "@clutch-sh/data-layout";
 import type { WizardChild } from "@clutch-sh/wizard";
 import { Wizard, WizardStep } from "@clutch-sh/wizard";
+import FileSaver from "file-saver";
 
 import type { TriageChild, WorkflowProps } from "../index";
 
@@ -59,10 +60,17 @@ const TriageIdentifier: React.FC<TriageChild> = ({ host = "" }) => {
   );
 };
 
+// This function is here for downloading the envoy config dump.
+const download = (data, host) => {
+  const output = new Blob([JSON.stringify(data, null, "\t")]);
+  const timestamp = Date.now();
+  FileSaver.saveAs(output, `envoy_config_dump_${host}_${timestamp}.json`);
+};
+
 const TriageDetails: React.FC<WizardChild> = () => {
   const remoteData = useDataLayout("remoteData");
   const metadata = remoteData.value.nodeMetadata as IClutch.envoytriage.v1.NodeMetadata;
-  const { clusters, listeners, runtime, stats, serverInfo } =
+  const { clusters, configDump, listeners, runtime, stats, serverInfo } =
     (remoteData.value?.output as IClutch.envoytriage.v1.Result.Output) || {};
 
   const failingClusterCount = clusters?.clusterStatuses.filter(
@@ -88,6 +96,7 @@ const TriageDetails: React.FC<WizardChild> = () => {
     { name: "Runtime Keys", value: runtime?.entries?.length || 0 },
     { name: "Stats", value: stats?.stats?.length || 0 },
   ];
+
   return (
     <WizardStep error={remoteData.error} isLoading={remoteData.isLoading}>
       <MetadataTable
@@ -101,6 +110,12 @@ const TriageDetails: React.FC<WizardChild> = () => {
           { name: "Service Cluster", value: metadata?.serviceCluster },
         ]}
       />
+      <Button
+        text="Download Config Dump"
+        onClick={() => {
+          download(configDump?.value, remoteData.value.address?.host);
+        }}
+      />
       <Tabs>
         <Tab label="Dashboard">
           <Dashboard

frontend/yarn.lock

@@ -11908,6 +11908,11 @@ file-loader@^6.2.0:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
+file-saver@^2.0.5:
+  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==
+
 file-system-cache@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/file-system-cache/-/file-system-cache-1.0.5.tgz#84259b36a2bbb8d3d6eb1021d3132ffe64cfff4f"