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: Make folder filter clearable in Alert list panel (#50093)

Browse Source
This commit is contained in:
Peter Holmberg 2022-06-03 15:43:29 +02:00 committed by GitHub
parent e6ceee501f
commit b1e1a97c63
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
public/app/core/components/Select/FolderPicker.tsx
View File

@ -3,7 +3,7 @@ import React, { PureComponent } from 'react';
import { AppEvents, SelectableValue } from '@grafana/data'; import { AppEvents, SelectableValue } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors'; import { selectors } from '@grafana/e2e-selectors';
import { AsyncSelect } from '@grafana/ui'; import { ActionMeta, AsyncSelect } from '@grafana/ui';
import { contextSrv } from 'app/core/services/context_srv'; import { contextSrv } from 'app/core/services/context_srv';
import { createFolder, getFolderById, searchFolders } from 'app/features/manage-dashboards/state/actions'; import { createFolder, getFolderById, searchFolders } from 'app/features/manage-dashboards/state/actions';
import { DashboardSearchHit } from 'app/features/search/types'; import { DashboardSearchHit } from 'app/features/search/types';
@ -25,6 +25,7 @@ export interface Props {
filter?: FolderPickerFilter; filter?: FolderPickerFilter;
allowEmpty?: boolean; allowEmpty?: boolean;
showRoot?: boolean; showRoot?: boolean;
onClear?: () => void;
accessControlMetadata?: boolean; accessControlMetadata?: boolean;
/** /**
* Skips loading all folders in order to find the folder matching * Skips loading all folders in order to find the folder matching
@ -116,11 +117,16 @@ export class FolderPicker extends PureComponent<Props, State> {
return options; return options;
}; };
onFolderChange = (newFolder: SelectableValue<number>) => { onFolderChange = (newFolder: SelectableValue<number>, actionMeta: ActionMeta) => {
if (!newFolder) { if (!newFolder) {
newFolder = { value: 0, label: this.props.rootName }; newFolder = { value: 0, label: this.props.rootName };
} }
if (actionMeta.action === 'clear' && this.props.onClear) {
this.props.onClear();
return;
}
this.setState( this.setState(
{ {
folder: newFolder, folder: newFolder,
@ -130,13 +136,17 @@ export class FolderPicker extends PureComponent<Props, State> {
}; };
createNewFolder = async (folderName: string) => { createNewFolder = async (folderName: string) => {
// @ts-ignore
const newFolder = await createFolder({ title: folderName }); const newFolder = await createFolder({ title: folderName });
let folder = { value: -1, label: 'Not created' }; let folder = { value: -1, label: 'Not created' };
if (newFolder.id > -1) { if (newFolder.id > -1) {
appEvents.emit(AppEvents.alertSuccess, ['Folder Created', 'OK']); appEvents.emit(AppEvents.alertSuccess, ['Folder Created', 'OK']);
folder = { value: newFolder.id, label: newFolder.title }; folder = { value: newFolder.id, label: newFolder.title };
await this.onFolderChange(folder); this.setState(
{
folder: newFolder,
},
() => this.props.onChange({ id: newFolder.value!, title: newFolder.label! })
);
} else { } else {
appEvents.emit(AppEvents.alertError, ['Folder could not be created']); appEvents.emit(AppEvents.alertError, ['Folder could not be created']);
} }
@ -190,7 +200,8 @@ export class FolderPicker extends PureComponent<Props, State> {
render() { render() {
const { folder } = this.state; const { folder } = this.state;
const { enableCreateNew, inputId } = this.props; const { enableCreateNew, inputId, onClear } = this.props;
const isClearable = typeof onClear === 'function';
return ( return (
<div data-testid={selectors.components.FolderPicker.containerV2}> <div data-testid={selectors.components.FolderPicker.containerV2}>
@ -205,6 +216,7 @@ export class FolderPicker extends PureComponent<Props, State> {
loadOptions={this.debouncedSearch} loadOptions={this.debouncedSearch}
onChange={this.onFolderChange} onChange={this.onFolderChange}
onCreateOption={this.createNewFolder} onCreateOption={this.createNewFolder}
isClearable={isClearable}
/> />
</div> </div>
); );

19
public/app/plugins/panel/alertlist/module.tsx
View File

@ -3,13 +3,13 @@ import React from 'react';
import { PanelPlugin } from '@grafana/data'; import { PanelPlugin } from '@grafana/data';
import { config, DataSourcePicker } from '@grafana/runtime'; import { config, DataSourcePicker } from '@grafana/runtime';
import { TagsInput } from '@grafana/ui'; import { TagsInput } from '@grafana/ui';
import { RuleFolderPicker } from 'app/features/alerting/unified/components/rule-editor/RuleFolderPicker'; import { FolderPicker } from 'app/core/components/Select/FolderPicker';
import { import {
ALL_FOLDER, ALL_FOLDER,
GENERAL_FOLDER, GENERAL_FOLDER,
ReadonlyFolderPicker, ReadonlyFolderPicker,
} from '../../../core/components/Select/ReadonlyFolderPicker/ReadonlyFolderPicker'; } from 'app/core/components/Select/ReadonlyFolderPicker/ReadonlyFolderPicker';
import { PermissionLevelString } from 'app/types';
import { AlertList } from './AlertList'; import { AlertList } from './AlertList';
import { alertListPanelMigrationHandler } from './AlertListMigrationHandler'; import { alertListPanelMigrationHandler } from './AlertListMigrationHandler';
@ -238,12 +238,15 @@ const unifiedAlertList = new PanelPlugin<UnifiedAlertListOptions>(UnifiedAlertLi
defaultValue: null, defaultValue: null,
editor: function RenderFolderPicker(props) { editor: function RenderFolderPicker(props) {
return ( return (
<RuleFolderPicker <FolderPicker
{...props}
enableReset={true} enableReset={true}
onChange={({ title, id }) => { showRoot={false}
return props.onChange({ title, id }); allowEmpty={true}
}} initialTitle={props.value?.title}
initialFolderId={props.value?.id}
permissionLevel={PermissionLevelString.View}
onClear={() => props.onChange('')}
{...props}
/> />
); );
}, },