Supplementary Query Error: Align buttons to the right / Update timeout message (#65738)

* Update timeout message

* Align buttons to the right

* Remove test code

* Update test

* Add min width to error container

public/app/features/explore/LogsVolumePanelList.test.tsx

@@ -63,7 +63,7 @@ describe('LogsVolumePanelList', () => {
       },
       onLoadCallback
     );
-    expect(screen.getByText('The logs volume query is taking too long and has timed out')).toBeInTheDocument();
+    expect(screen.getByText('The logs volume query has timed out')).toBeInTheDocument();
     await userEvent.click(screen.getByRole('button', { name: 'Retry' }));
     expect(onLoadCallback).toHaveBeenCalled();
   });

public/app/features/explore/LogsVolumePanelList.tsx

@@ -69,7 +69,7 @@ export const LogsVolumePanelList = ({
   } else if (timeoutError) {
     return (
       <SupplementaryResultError
-        title="The logs volume query is taking too long and has timed out"
+        title="The logs volume query has timed out"
         // Using info to avoid users thinking that the actual query has failed.
         severity="info"
         suggestedAction="Retry"

public/app/features/explore/SupplementaryResultError.tsx

@@ -1,7 +1,8 @@
+import { css } from '@emotion/css';
 import React, { useState } from 'react';
 
-import { DataQueryError } from '@grafana/data';
-import { Alert, AlertVariant, Button } from '@grafana/ui';
+import { DataQueryError, GrafanaTheme2 } from '@grafana/data';
+import { Alert, AlertVariant, Button, useTheme2 } from '@grafana/ui';
 
 type Props = {
   error?: DataQueryError;
@@ -19,27 +20,53 @@ export function SupplementaryResultError(props: Props) {
   // /public/app/features/explore/ErrorContainer.tsx
   const message = error?.message || error?.data?.message || '';
   const showButton = !isOpen && message.length > SHORT_ERROR_MESSAGE_LIMIT;
+  const theme = useTheme2();
+  const styles = getStyles(theme);
 
   return (
-    <Alert title={title} severity={severity} onRemove={onRemove}>
-      {showButton ? (
-        <Button
-          variant="secondary"
-          size="xs"
-          onClick={() => {
-            setIsOpen(true);
-          }}
-        >
-          Show details
-        </Button>
-      ) : (
-        message
-      )}
-      {suggestedAction && onSuggestedAction && (
-        <Button variant="primary" size="xs" onClick={onSuggestedAction}>
-          {suggestedAction}
-        </Button>
-      )}
-    </Alert>
+    <div className={styles.supplementaryErrorContainer}>
+      <Alert title={title} severity={severity} onRemove={onRemove}>
+        <div className={styles.suggestedActionWrapper}>
+          {showButton ? (
+            <Button
+              variant="secondary"
+              size="xs"
+              onClick={() => {
+                setIsOpen(true);
+              }}
+            >
+              Show details
+            </Button>
+          ) : (
+            message
+          )}
+          {suggestedAction && onSuggestedAction && (
+            <div className={styles.suggestedActionWrapper}>
+              <Button variant="primary" size="xs" onClick={onSuggestedAction}>
+                {suggestedAction}
+              </Button>
+            </div>
+          )}
+        </div>
+      </Alert>
+    </div>
   );
 }
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    supplementaryErrorContainer: css`
+      width: 50%;
+      min-width: ${theme.breakpoints.values.sm}px;
+      margin: 0 auto;
+    `,
+    suggestedActionWrapper: css`
+      height: ${theme.spacing(6)};
+      button {
+        position: absolute;
+        right: ${theme.spacing(2)};
+        top: ${theme.spacing(7)};
+      }
+    `,
+  };
+};