Speed up alerts page by not rendering collapsed details (#9005)

All this is doing is wrapping the inner alert details display with a
conditional `{open && ...}`.

This already improves https://github.com/prometheus/prometheus/issues/8548 a
lot for cases where there are many individual firing/pending alert elements
under each alerting rule.

E.g. for a list of 200 rules with ~100 alert elements each, this changed the page
render time from 30 seconds to 1s.

Signed-off-by: Julius Volz <julius.volz@gmail.com>

web/ui/react-app/src/pages/alerts/CollapsibleAlertPanel.tsx

@@ -28,6 +28,8 @@ const CollapsibleAlertPanel: FC<CollapsibleAlertPanelProps> = ({ rule, showAnnot
         <strong>{rule.name}</strong> ({`${rule.alerts.length} active`})
       </Alert>
       <Collapse isOpen={open} className="mb-2">
+        {open && (
+          <>
             <pre className="alert-cell">
               <code>
                 <div>
@@ -104,6 +106,8 @@ const CollapsibleAlertPanel: FC<CollapsibleAlertPanelProps> = ({ rule, showAnnot
                 </tbody>
               </Table>
             )}
+          </>
+        )}
       </Collapse>
     </>
   );