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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 34 additions and 27 deletions
Show Stats 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 renderLoading = grafanaRulesLoading || (dispatched && loading && !haveResults);
const havePreviousResults = Object.values(promRulesRequests).some((state) => state.result);
if (
!contextSrv.hasPermission(AccessControlAction.AlertingRuleRead) &&
!contextSrv.hasPermission(AccessControlAction.AlertingRuleExternalRead)
@ -225,33 +229,36 @@ export function UnifiedAlertList(props: PanelProps<UnifiedAlertListOptions>) {
return (
<CustomScrollbar autoHeightMin="100%" autoHeightMax="100%">
<div className={styles.container}>
{(grafanaRulesLoading || (dispatched && loading && !haveResults)) && <LoadingPlaceholder text="Loading..." />}
{noAlertsMessage && <div className={styles.noAlertsMessage}>{noAlertsMessage}</div>}
<section>
{props.options.viewMode === ViewMode.Stat && haveResults && (
<BigValue
width={props.width}
height={props.height}
graphMode={BigValueGraphMode.None}
textMode={BigValueTextMode.Auto}
justifyMode={BigValueJustifyMode.Auto}
theme={config.theme2}
value={{ text: `${rules.length}`, numeric: rules.length }}
/>
)}
{props.options.viewMode === ViewMode.List && props.options.groupMode === GroupMode.Custom && haveResults && (
<GroupedModeView rules={rules} options={parsedOptions} />
)}
{props.options.viewMode === ViewMode.List && props.options.groupMode === GroupMode.Default && haveResults && (
<UngroupedModeView
rules={rules}
options={parsedOptions}
handleInstancesLimit={handleInstancesLimit}
limitInstances={limitInstances}
hideViewRuleLinkText={hideViewRuleLinkText}
/>
)}
</section>
{havePreviousResults && noAlertsMessage && <div className={styles.noAlertsMessage}>{noAlertsMessage}</div>}
{havePreviousResults && (
<section>
{props.options.viewMode === ViewMode.Stat && (
<BigValue
width={props.width}
height={props.height}
graphMode={BigValueGraphMode.None}
textMode={BigValueTextMode.Auto}
justifyMode={BigValueJustifyMode.Auto}
theme={config.theme2}
value={{ text: `${rules.length}`, numeric: rules.length }}
/>
)}
{props.options.viewMode === ViewMode.List && props.options.groupMode === GroupMode.Custom && (
<GroupedModeView rules={rules} options={parsedOptions} />
)}
{props.options.viewMode === ViewMode.List && props.options.groupMode === GroupMode.Default && (
<UngroupedModeView
rules={rules}
options={parsedOptions}
handleInstancesLimit={handleInstancesLimit}
limitInstances={limitInstances}
hideViewRuleLinkText={hideViewRuleLinkText}
/>
)}
</section>
)}
{/* loading moved here to avoid twitching */}
{renderLoading && <LoadingPlaceholder text="Loading..." />}
</div>
</CustomScrollbar>
);