From d71aa732a377b416516c46c953d9e19973818d7e Mon Sep 17 00:00:00 2001
From: Jan Vorcak <jan.vorcak@redpanda.com>
Date: Sat, 16 Nov 2024 14:13:32 +0100
Subject: [PATCH] Adds support for debug bundle error state

---
 .../pages/admin/Admin.DebugBundle.tsx         | 14 ++++--
 .../pages/admin/Admin.DebugBundleProgress.tsx | 44 +++++++++----------
 .../pages/overview/ClusterHealthOverview.tsx  |  2 +-
 frontend/src/state/backendApi.ts              | 12 +++--
 4 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/pages/admin/Admin.DebugBundle.tsx b/frontend/src/components/pages/admin/Admin.DebugBundle.tsx
index 8a10806ba..a5fa082cd 100644
--- a/frontend/src/components/pages/admin/Admin.DebugBundle.tsx
+++ b/frontend/src/components/pages/admin/Admin.DebugBundle.tsx
@@ -82,9 +82,14 @@ export class AdminDebugBundle extends Component<{}> {
         return (
             <Box>
                 <Header />
-                {(api.canDownloadDebugBundle || api.isDebugBundleExpired) && <Text mt={4} fontWeight="bold">Latest debug bundle:</Text>}
-                {api.isDebugBundleExpired ? <Text>Your previous bundle has expired and cannot be downloaded.</Text> : <DebugBundleLink statuses={api.debugBundleStatuses} showDeleteButton />}
-                {api.debugBundleStatuses.length === 0 && <Text>No debug bundle available for download.</Text>}
+                <Box mt={4}>
+                    {(api.isDebugBundleSuccess || api.isDebugBundleExpired) && <Text fontWeight="bold">Latest debug bundle:</Text>}
+                    {api.isDebugBundleExpired && <Text>Your previous bundle has expired and cannot be downloaded.</Text>}
+                    {api.isDebugBundleError && <Text>This debug bundle was cancelled by the user and is not available for download.</Text>}
+                    {api.isDebugBundleSuccess && <DebugBundleLink statuses={api.debugBundleStatuses} showDeleteButton/>}
+
+                    {api.debugBundleStatuses.length===0 && <Text>No debug bundle available for download.</Text>}
+                </Box>
 
 
 
@@ -97,7 +102,8 @@ export class AdminDebugBundle extends Component<{}> {
                         onSubmit={(data: CreateDebugBundleRequest) => {
                             this.submitInProgress = true;
                             this.createBundleError = undefined;
-                            api.createDebugBundle(data).then(result => {
+                            api.createDebugBundle(data).then(async result => {
+                                await api.refreshDebugBundleStatuses();
                                 appGlobal.history.push(`/admin/debug-bundle/progress/${result.jobId}`);
                             }).catch((err: ErrorResponse) => {
                                 this.createBundleError = err;
diff --git a/frontend/src/components/pages/admin/Admin.DebugBundleProgress.tsx b/frontend/src/components/pages/admin/Admin.DebugBundleProgress.tsx
index 968a48761..76e0d677f 100644
--- a/frontend/src/components/pages/admin/Admin.DebugBundleProgress.tsx
+++ b/frontend/src/components/pages/admin/Admin.DebugBundleProgress.tsx
@@ -54,31 +54,31 @@ export default class AdminPageDebugBundleProgress extends PageComponent<{}> {
             <Box>
                 <Text>Collect environment data that can help debug and diagnose issues with a Redpanda cluster, a broker, or the machine it’s running on. This will bundle the collected data into a ZIP file.</Text>
 
-                {api.isDebugBundleInProgress && <Box mt={6}>
-                    <Text>Generating bundle...</Text>
-                </Box>}
+                <Box mt={4}>
+                    {api.isDebugBundleInProgress && <Text>Generating bundle...</Text>}
+                    {api.isDebugBundleExpired && <Text fontWeight="bold">Your previous bundle has expired and cannot be downloaded.</Text>}
+                    {api.isDebugBundleError && <Text>This debug bundle was cancelled by the user and is not available for download.</Text>}
+                    {api.isDebugBundleSuccess && <Box>
+                        <Flex gap={2}>
+                            <Text fontWeight="bold">Debug bundle complete:</Text>
+                            <DebugBundleLink statuses={api.debugBundleStatuses} showDatetime={false}/>
+                        </Flex>
+                    </Box>}
+                </Box>
 
-                {api.isDebugBundleExpired && <Text fontWeight="bold" mt={4}>Your previous bundle has expired and cannot be downloaded.</Text>}
+                {!api.isDebugBundleExpired && <Box mt={2}>
+                    {api.debugBundleStatuses && <DebugBundleOverview statuses={api.debugBundleStatuses} />}
 
-                {!api.isDebugBundleInProgress && !api.isDebugBundleExpired && <Box>
-                    <Flex gap={2} my={2}>
-                        <Text fontWeight="bold">Debug bundle complete:</Text>
-                        {api.canDownloadDebugBundle &&
-                        <DebugBundleLink statuses={api.debugBundleStatuses} showDatetime={false} />}
-                    </Flex>
+                    <Box my={2}>
+                        {api.isDebugBundleInProgress ? <Button variant="outline" onClick={() => {
+                            api.debugBundleStatuses.forEach(status => {
+                                if (status.value.case==='bundleStatus') {
+                                    void api.cancelDebugBundleProcess({jobId: status.value.value.jobId});
+                                }
+                            });
+                        }}>Stop</Button>:<Button variant="outline" as={ReactRouterLink} to="/admin">Done</Button>}
+                    </Box>
                 </Box>}
-
-                {api.debugBundleStatuses && <DebugBundleOverview statuses={api.debugBundleStatuses} />}
-
-                <Box my={2}>
-                    {api.isDebugBundleInProgress ? <Button variant="outline" onClick={() => {
-                        api.debugBundleStatuses.forEach(status => {
-                            if (status.value.case==='bundleStatus') {
-                                void api.cancelDebugBundleProcess({jobId: status.value.value.jobId});
-                            }
-                        });
-                    }}>Stop</Button>:<Button variant="outline" as={ReactRouterLink} to="/admin">Done</Button>}
-                </Box>
             </Box>
         );
     }
diff --git a/frontend/src/components/pages/overview/ClusterHealthOverview.tsx b/frontend/src/components/pages/overview/ClusterHealthOverview.tsx
index 78df48e4c..2056a9228 100644
--- a/frontend/src/components/pages/overview/ClusterHealthOverview.tsx
+++ b/frontend/src/components/pages/overview/ClusterHealthOverview.tsx
@@ -76,7 +76,7 @@ const ClusterHealthOverview = () => {
                             <Box fontWeight="bold">Debug bundle</Box>
                             <Flex gap={2}>
                                 {api.isDebugBundleInProgress && <Button px={0} as={ReactRouterLink} variant="link" to={`/admin/debug-bundle/progress/${api.debugBundleStatus?.jobId}`}>Bundle generation in progress...</Button>}
-                                {api.isDebugBundleReady && !api.isDebugBundleExpired && <DebugBundleLink statuses={api.debugBundleStatuses} showDatetime={false}/>}
+                                {api.isDebugBundleSuccess && <DebugBundleLink statuses={api.debugBundleStatuses} showDatetime={false}/>}
                                 {!api.isDebugBundleInProgress && <Button px={0} as={ReactRouterLink} variant="link" to="/admin/debug-bundle/new">Generate new</Button>}
                             </Flex>
                         </Grid>
diff --git a/frontend/src/state/backendApi.ts b/frontend/src/state/backendApi.ts
index 02eeffe39..8d242a195 100644
--- a/frontend/src/state/backendApi.ts
+++ b/frontend/src/state/backendApi.ts
@@ -1619,7 +1619,7 @@ const apiStore = {
             throw new Error('Debug bundle client is not initialized');
         }
 
-        client.getDebugBundleStatus({
+        await client.getDebugBundleStatus({
         }).then(response => {
             this.debugBundleStatuses = response.brokerStatuses
             this.hasDebugProcess = response.hasDebugProcess
@@ -1634,12 +1634,16 @@ const apiStore = {
         return api.debugBundleStatuses.length > 0 && !this.isDebugBundleInProgress
     },
 
-    get canDownloadDebugBundle() {
-        return this.isDebugBundleReady && this.debugBundleStatuses.filter(status => status.value.case === 'bundleStatus' && status.value.value.status === DebugBundleStatus_Status.SUCCESS).length > 0
+    get isDebugBundleSuccess() {
+        return this.isDebugBundleReady && this.debugBundleStatuses.some(status => status.value.case === 'bundleStatus' && status.value.value.status === DebugBundleStatus_Status.SUCCESS);
+    },
+
+    get isDebugBundleError() {
+        return this.isDebugBundleReady && this.debugBundleStatuses.some(status => status.value.case === 'bundleStatus' && status.value.value.status === DebugBundleStatus_Status.ERROR);
     },
 
     get isDebugBundleExpired() {
-        return this.isDebugBundleReady && this.debugBundleStatuses.filter(status => status.value.case === 'bundleStatus' && status.value.value.status === DebugBundleStatus_Status.EXPIRED).length > 0
+        return this.isDebugBundleReady && this.debugBundleStatuses.some(status => status.value.case === 'bundleStatus' && status.value.value.status === DebugBundleStatus_Status.EXPIRED);
     },
 
     get isDebugBundleInProgress() {