IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Alerting: Avoid alert list view component being unmounted every time we fetch new data (#77631)

Browse Source 
* Avoid view component being unmounted any time we fetch new data

* Render loading indicator only when loading data for the first time

* Remove unnecessary useRef
This commit is contained in:
Sonia Aguilar
2023-11-06 08:35:42 +01:00
committed by GitHub
parent c3962acf98
commit f88a0f36ec
1 changed files with 34 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
View File

@@ -213,6 +213,10 @@ export function UnifiedAlertList(props: PanelProps<UnifiedAlertListOptions>) {
const noAlertsMessage = rules.length === 0 ? 'No alerts matching filters' : undefined; const noAlertsMessage = rules.length === 0 ? 'No alerts matching filters' : undefined;
const renderLoading = grafanaRulesLoading || (dispatched && loading && !haveResults);
const havePreviousResults = Object.values(promRulesRequests).some((state) => state.result);
if ( if (
!contextSrv.hasPermission(AccessControlAction.AlertingRuleRead) && !contextSrv.hasPermission(AccessControlAction.AlertingRuleRead) &&
!contextSrv.hasPermission(AccessControlAction.AlertingRuleExternalRead) !contextSrv.hasPermission(AccessControlAction.AlertingRuleExternalRead)
@@ -225,33 +229,36 @@ export function UnifiedAlertList(props: PanelProps<UnifiedAlertListOptions>) {
return ( return (
<CustomScrollbar autoHeightMin="100%" autoHeightMax="100%"> <CustomScrollbar autoHeightMin="100%" autoHeightMax="100%">
<div className={styles.container}> <div className={styles.container}>
{(grafanaRulesLoading || (dispatched && loading && !haveResults)) && <LoadingPlaceholder text="Loading..." />} {havePreviousResults && noAlertsMessage && <div className={styles.noAlertsMessage}>{noAlertsMessage}</div>}
{noAlertsMessage && <div className={styles.noAlertsMessage}>{noAlertsMessage}</div>} {havePreviousResults && (
<section> <section>
{props.options.viewMode === ViewMode.Stat && haveResults && ( {props.options.viewMode === ViewMode.Stat && (
<BigValue <BigValue
width={props.width} width={props.width}
height={props.height} height={props.height}
graphMode={BigValueGraphMode.None} graphMode={BigValueGraphMode.None}
textMode={BigValueTextMode.Auto} textMode={BigValueTextMode.Auto}
justifyMode={BigValueJustifyMode.Auto} justifyMode={BigValueJustifyMode.Auto}
theme={config.theme2} theme={config.theme2}
value={{ text: `${rules.length}`, numeric: rules.length }} value={{ text: `${rules.length}`, numeric: rules.length }}
/> />
)} )}
{props.options.viewMode === ViewMode.List && props.options.groupMode === GroupMode.Custom && haveResults && ( {props.options.viewMode === ViewMode.List && props.options.groupMode === GroupMode.Custom && (
<GroupedModeView rules={rules} options={parsedOptions} /> <GroupedModeView rules={rules} options={parsedOptions} />
)} )}
{props.options.viewMode === ViewMode.List && props.options.groupMode === GroupMode.Default && haveResults && ( {props.options.viewMode === ViewMode.List && props.options.groupMode === GroupMode.Default && (
<UngroupedModeView <UngroupedModeView
rules={rules} rules={rules}
options={parsedOptions} options={parsedOptions}
handleInstancesLimit={handleInstancesLimit} handleInstancesLimit={handleInstancesLimit}
limitInstances={limitInstances} limitInstances={limitInstances}
hideViewRuleLinkText={hideViewRuleLinkText} hideViewRuleLinkText={hideViewRuleLinkText}
/> />
)} )}
</section> </section>
)}
{/* loading moved here to avoid twitching */}
{renderLoading && <LoadingPlaceholder text="Loading..." />}
</div> </div>
</CustomScrollbar> </CustomScrollbar>
); );