Prometheus: Fixed Prometheus query editor error (plus new ErrorBoundaryAlert component) (#18838)

* ErrorHandling: Fixed Prometheus query editor error and added error boundary

* Update public/app/core/components/ErrorBoundary/ErrorBoundary.tsx

Co-Authored-By: kay delaney <45561153+kaydelaney@users.noreply.github.com>

* Fixed ts error

packages/grafana-ui/src/components/Alert/Alert.tsx

@@ -1,15 +1,16 @@
-import React, { FC } from 'react';
+import React, { FC, ReactNode } from 'react';
 
 interface Props {
-  message: any;
+  title: string;
   button?: {
     text: string;
     onClick: (event: React.MouseEvent) => void;
   };
+  children?: ReactNode;
 }
 
 export const Alert: FC<Props> = props => {
-  const { message, button } = props;
+  const { title, button, children } = props;
   return (
     <div className="alert-container">
       <div className="alert-error alert">
@@ -17,7 +18,8 @@ export const Alert: FC<Props> = props => {
           <i className="fa fa-exclamation-triangle" />
         </div>
         <div className="alert-body">
-          <div className="alert-title">{message}</div>
+          <div className="alert-title">{title}</div>
+          {children && <div className="alert-text">{children}</div>}
         </div>
         {button && (
           <div className="alert-button">

packages/grafana-ui/src/components/Logs/LogRowContext.tsx

@@ -179,7 +179,7 @@ const LogRowContextGroup: React.FunctionComponent<LogRowContextGroupProps> = ({
                 }}
               />
             )}
-            {error && <Alert message={error} />}
+            {error && <Alert title={error} />}
           </div>
         </CustomScrollbar>
       </div>