improve error handling

- various smaller fixes - move remaining translations to new namespace
grafana · w1kman · Feb 11, 2025 · Feb 11, 2025 · Feb 12, 2025 · Feb 19, 2025
commit 9067f28e88938260e9910f6e7eea9d8e3904cd79
diff --git a/public/app/features/secrets-management/SecretsManagementPage.tsx b/public/app/features/secrets-management/SecretsManagementPage.tsx
@@ -3,22 +3,29 @@ import { useCallback, useEffect, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Trans, useTranslate } from '@grafana/i18n';
-import { Button, FilterInput, InlineField, TextLink, useStyles2 } from '@grafana/ui';
+import { Button, EmptyState, FilterInput, InlineField, TextLink, useStyles2 } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { PageContents } from 'app/core/components/Page/PageContents';
 
 import { useDeleteSecretMutation, useListSecretsQuery } from './api/secretsManagementApi';
 import { EditSecretModal } from './components/EditSecretModal';
 import { SecretsList } from './components/SecretsList';
 import { SecretStatusPhase } from './types';
+import { getErrorMessage } from './utils';
 
 export default function SecretsManagementPage() {
   const styles = useStyles2(getStyles);
   const { t } = useTranslate();
 
   // Api test
   const [pollingInterval, setPollingInterval] = useState(0);
-  const { data: secrets, isLoading } = useListSecretsQuery(undefined, {
+  const {
+    data: secrets,
+    isLoading,
+    isError,
+    error,
+    refetch,
+  } = useListSecretsQuery(undefined, {
     pollingInterval,
   });
 
@@ -83,13 +90,33 @@ export default function SecretsManagementPage() {
           </InlineField>
         </div>
 
-        <SecretsList
-          onEditSecret={handleEditSecret}
-          onDeleteSecret={deleteSecret}
-          secrets={secrets}
-          filter={filter}
-          onCreateSecret={handleShowCreateModal}
-        />
+        {isError ? (
+          <EmptyState
+            variant="not-found"
+            message={t('secrets.error-state.message', 'Something went wrong')}
+            button={
+              <Trans i18nKey="secrets.error-state.retry">
+                <Button onClick={() => refetch()}>Retry</Button>
+              </Trans>
+            }
+          >
+            <Trans i18nKey="secrets.error-state.body">
+              <p>
+                This may be due to poor network conditions or a potential plugin blocking requests. Retry, and if the
+                problem persists, contact support.
+              </p>
+              {!!error && <p>Details: {getErrorMessage(error)}</p>}
+            </Trans>
+          </EmptyState>
+        ) : (
+          <SecretsList
+            onEditSecret={handleEditSecret}
+            onDeleteSecret={deleteSecret}
+            secrets={secrets}
+            filter={filter}
+            onCreateSecret={handleShowCreateModal}
+          />
+        )}
 
         {isEditModalOpen && <EditSecretModal isOpen onDismiss={handleDismissModal} name={editTarget} />}
       </PageContents>

diff --git a/public/app/features/secrets-management/api/secretsManagementApi.ts b/public/app/features/secrets-management/api/secretsManagementApi.ts
@@ -9,7 +9,7 @@ import { transformFromSecret, transformToSecret } from '../utils';
 const baseURL = getAPIBaseURL('secret.grafana.app', 'v0alpha1');
 
 export const secretsManagementApi = createApi({
-  tagTypes: ['Secrets'],
+  tagTypes: ['Secret'],
   reducerPath: 'secretsManagementApi',
   baseQuery: createBaseQuery({ baseURL }),
   endpoints: (builder) => ({
@@ -19,7 +19,7 @@ export const secretsManagementApi = createApi({
         method: 'GET',
       }),
       providesTags: (result) =>
-        result ? [...result.map(({ name }) => ({ type: 'Secrets' as const, id: name })), 'Secrets'] : ['Secrets'],
+        result ? [...result.map(({ name }) => ({ type: 'Secret' as const, id: name })), 'Secret'] : ['Secret'],
       transformResponse: (response: SecretsListResponse) => {
         return (response?.items?.map(transformToSecret) as Secret[]) ?? [];
       },
@@ -29,26 +29,17 @@ export const secretsManagementApi = createApi({
         url: `/securevalues/${encodeURIComponent(name)}`,
         method: 'GET',
       }),
-      providesTags: (_result, _error, name) => [{ type: 'Secrets', id: name }],
+      providesTags: (_result, _error, name) => [{ type: 'Secret', id: name }],
       transformResponse: (response: SecretsListResponseItem) => {
         return transformToSecret(response);
-
-        // return {
-        //   name: response.metadata.name,
-        //   description: response.spec.description,
-        //   audiences: response.spec.decrypters,
-        //   uid: response.metadata.uid,
-        //   status: response.status?.phase ?? 'Succeeded',
-        //   ...('keeper' in response.spec ? { keeper: response.spec.keeper } : undefined),
-        // } as Secret;
       },
     }),
     deleteSecret: builder.mutation({
       query: (name) => ({
         url: `/securevalues/${encodeURIComponent(name)}`,
         method: 'DELETE',
       }),
-      invalidatesTags: (result, error, name) => ['Secrets'],
+      invalidatesTags: (result, error, arg) => [{ type: 'Secret', id: arg }],
       async onQueryStarted(name, { dispatch, queryFulfilled }) {
         const patchResult = dispatch(
           secretsManagementApi.util.updateQueryData('listSecrets', undefined, (draft) => {
@@ -71,19 +62,30 @@ export const secretsManagementApi = createApi({
         method: 'POST',
         body: transformFromSecret(data),
       }),
-      invalidatesTags: ['Secrets'],
+      invalidatesTags: (result, error, arg, meta) => {
+        if (!!error) {
+          return [null];
+        }
+
+        return ['Secret'];
+      },
     }),
-    updateSecret: builder.mutation({
+    updateSecret: builder.mutation<Secret, Partial<Secret> & Pick<Secret, 'name'>>({
       query: (secret) => ({
         url: `/securevalues/${encodeURIComponent(secret.name)}`,
         method: 'PUT',
         body: transformFromSecret(secret),
       }),
-      invalidatesTags: ['Secrets'],
+      invalidatesTags: (result, error, arg) => [{ type: 'Secret', id: arg.name }],
     }),
   }),
 });
 
+// Secret mutation factory
+export function useSecretMutation(update = false) {
+  return update ? useUpdateSecretMutation() : useCreateSecretMutation();
+}
+
 export const {
   useListSecretsQuery,
   useDeleteSecretMutation,

diff --git a/public/app/features/secrets-management/components/EditSecretModal.tsx b/public/app/features/secrets-management/components/EditSecretModal.tsx
@@ -1,11 +1,14 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 
+import { AppEvents } from '@grafana/data';
+import { Trans } from '@grafana/i18n';
 import { t } from '@grafana/i18n/internal';
-import { Modal, Spinner } from '@grafana/ui';
+import { getAppEvents } from '@grafana/runtime';
+import { Alert, Box, Modal, Spinner, Text } from '@grafana/ui';
 
-import { useCreateSecretMutation, useGetSecretQuery, useUpdateSecretMutation } from '../api/secretsManagementApi';
+import { useGetSecretQuery, useSecretMutation } from '../api/secretsManagementApi';
 import { SecretFormValues } from '../types';
-import { secretFormValuesToSecret, secretToSecretFormValues } from '../utils';
+import { getErrorMessage, secretFormValuesToSecret, secretToSecretFormValues } from '../utils';
 
 import { SecretForm } from './SecretForm';
 
@@ -15,6 +18,8 @@ interface EditSecretModalProps {
   onDismiss: () => void;
 }
 
+const appEvents = getAppEvents();
+
 export function EditSecretModal({ isOpen, onDismiss, name }: EditSecretModalProps) {
   const {
     data: secret,
@@ -23,11 +28,9 @@ export function EditSecretModal({ isOpen, onDismiss, name }: EditSecretModalProp
   } = useGetSecretQuery(name as string, {
     skip: !name,
   });
-
-  const [createSecret] = useCreateSecretMutation();
-  const [updateSecret] = useUpdateSecretMutation();
-
   const isNew = isUninitialized;
+  const [mutation, { data: response, error, isSuccess }] = useSecretMutation(!isNew);
+
   const initialValues = isNew ? undefined : secretToSecretFormValues(secret);
   const modalTitle = isNew
     ? t('secrets.edit-modal.title.create', 'Create secret')
@@ -37,34 +40,58 @@ export function EditSecretModal({ isOpen, onDismiss, name }: EditSecretModalProp
     : t('secrets.edit-modal.form.button-update', 'Update');
 
   const handleSubmit = useCallback(
-    async (data: SecretFormValues) => {
-      try {
-        const secretData = secretFormValuesToSecret({ ...secret, ...data });
-        if (isNew) {
-          await createSecret(secretData);
-        } else {
-          await updateSecret(secretData);
-        }
-      } catch (error) {
-        return Promise.reject('Unable to store secret');
-      } finally {
-        onDismiss();
-      }
+    (data: SecretFormValues) => {
+      const secretData = secretFormValuesToSecret({ ...secret, ...data });
+      return mutation(secretData);
     },
-    [createSecret, isNew, onDismiss, secret, updateSecret]
+    [secret, mutation]
   );
 
+  useEffect(() => {
+    if (isSuccess) {
+      const message = isNew
+        ? t('secrets.mutation-success.create', 'Secret "{{name}}" was created successfully', response.metadata)
+        : t('secrets.mutation-success.update', 'Secret "{{name}}" was updated successfully', response.metadata);
+      appEvents.publish({
+        type: AppEvents.alertSuccess.name,
+        payload: [message],
+      });
+      onDismiss();
+    }
+  }, [isNew, isSuccess, onDismiss, response]);
+
   return (
     <Modal title={modalTitle} isOpen={isOpen} onDismiss={onDismiss} closeOnBackdropClick={false}>
       {isLoading && <Spinner />}
       {!isLoading && (
-        <SecretForm
-          disableNameField={!isNew}
-          submitText={submitText}
-          initialValues={initialValues}
-          onSubmit={handleSubmit}
-          onCancel={onDismiss}
-        />
+        <div>
+          {!!error && (
+            <Alert severity="error" title={t('secrets.mutation-error.title', 'Request error')}>
+              {isNew
+                ? t(
+                    'secrets.mutation-error.create',
+                    'Failed to create secret. Please try again, and if the problem persists, contact support'
+                  )
+                : t(
+                    'secrets.mutation-error.update',
+                    'Failed to update secret. Please try again, and if the problem persists, contact support'
+                  )}
+
+              <Box marginTop={1}>
+                <Trans i18nKey="secrets.error-state.details" values={{ message: getErrorMessage(error) }}>
+                  <Text italic>Details: {'{{message}}'}</Text>
+                </Trans>
+              </Box>
+            </Alert>
+          )}
+          <SecretForm
+            disableNameField={!isNew}
+            submitText={submitText}
+            initialValues={initialValues}
+            onSubmit={handleSubmit}
+            onCancel={onDismiss}
+          />
+        </div>
       )}
     </Modal>
   );