Skip to content

N
nexpie-grafana-theme
Commit 3fbdcf10 by Tobias Skarhed Committed by GitHub
Options

Form migrations: Teams and alert list (#23810) 

* Basic migration

* Update test

* Fix feedback
parent e4d492fd
Showing with 148 additions and 158 deletions
public/app/features/alerting/AlertRuleItem.tsx
......@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
// @ts-ignore
import Highlighter from 'react-highlight-words';
import { AlertRule } from '../../types';
import { Icon, IconName } from '@grafana/ui';
import { Icon, IconName, Button, Tooltip, LinkButton, HorizontalGroup } from '@grafana/ui';
export interface Props {
rule: AlertRule;
......@@ -43,16 +43,19 @@ class AlertRuleItem extends PureComponent<Props> {
</div>
<div className="alert-rule-item__actions">
<button
className="btn btn-small btn-inverse alert-list__btn width-2"
title="Pausing an alert rule prevents it from executing"
onClick={onTogglePause}
>
<Icon name={rule.state === 'paused' ? 'play' : 'pause'} />
</button>
<a className="btn btn-small btn-inverse alert-list__btn width-2" href={ruleUrl} title="Edit alert rule">
<Icon name="cog" />
</a>
<HorizontalGroup spacing="sm">
<Tooltip placement="bottom" content="Pausing an alert rule prevents it from executing">
<Button
variant="secondary"
size="sm"
icon={rule.state === 'paused' ? 'play' : 'pause'}
onClick={onTogglePause}
/>
</Tooltip>
<Tooltip placement="right" content="Edit alert rule">
<LinkButton size="sm" variant="secondary" href={ruleUrl} icon="cog" />
</Tooltip>
</HorizontalGroup>
</div>
</li>
);
......
public/app/features/alerting/AlertRuleList.test.tsx
......@@ -127,7 +127,7 @@ describe('Functions', () => {
describe('State filter changed', () => {
it('should update location', () => {
const { instance } = setup();
const mockEvent = { target: { value: 'alerting' } } as React.ChangeEvent<HTMLSelectElement>;
const mockEvent = { value: 'alerting' };
instance.onStateFilterChanged(mockEvent);
......
public/app/features/alerting/AlertRuleList.tsx
......@@ -10,8 +10,9 @@ import { AlertRule, CoreEvents, StoreState } from 'app/types';
import { getAlertRulesAsync, togglePauseAlertRule } from './state/actions';
import { getAlertRuleItems, getSearchQuery } from './state/selectors';
import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
import { NavModel } from '@grafana/data';
import { NavModel, SelectableValue } from '@grafana/data';
import { setSearchQuery } from './state/reducers';
import { Button, Select } from '@grafana/ui';
export interface Props {
navModel: NavModel;
......@@ -27,13 +28,13 @@ export interface Props {
export class AlertRuleList extends PureComponent<Props, any> {
stateFilters = [
{ text: 'All', value: 'all' },
{ text: 'OK', value: 'ok' },
{ text: 'Not OK', value: 'not_ok' },
{ text: 'Alerting', value: 'alerting' },
{ text: 'No Data', value: 'no_data' },
{ text: 'Paused', value: 'paused' },
{ text: 'Pending', value: 'pending' },
{ label: 'All', value: 'all' },
{ label: 'OK', value: 'ok' },
{ label: 'Not OK', value: 'not_ok' },
{ label: 'Alerting', value: 'alerting' },
{ label: 'No Data', value: 'no_data' },
{ label: 'Paused', value: 'paused' },
{ label: 'Pending', value: 'pending' },
];
componentDidMount() {
......@@ -58,9 +59,9 @@ export class AlertRuleList extends PureComponent<Props, any> {
return 'all';
}
onStateFilterChanged = (evt: React.ChangeEvent<HTMLSelectElement>) => {
onStateFilterChanged = (option: SelectableValue) => {
this.props.updateLocation({
query: { state: evt.target.value },
query: { state: option.value },
});
};
......@@ -108,15 +109,17 @@ export class AlertRuleList extends PureComponent<Props, any> {
<label className="gf-form-label">States</label>
<div className="gf-form-select-wrapper width-13">
<select className="gf-form-input" onChange={this.onStateFilterChanged} value={this.getStateFilter()}>
{this.stateFilters.map(this.alertStateFilterOption)}
</select>
<Select
options={this.stateFilters}
onChange={this.onStateFilterChanged}
value={this.getStateFilter()}
/>
</div>
</div>
<div className="page-action-bar__spacer" />
<a className="btn btn-secondary" onClick={this.onOpenHowTo}>
<Button variant="secondary" onClick={this.onOpenHowTo}>
How to add an alert
</a>
</Button>
</div>
<section>
<ol className="alert-rule-list">
......
public/app/features/alerting/__snapshots__/AlertRuleItem.test.tsx.snap
......@@ -60,24 +60,32 @@ exports[`Render should render component 1`] = `
<div
className="alert-rule-item__actions"
>
<button
className="btn btn-small btn-inverse alert-list__btn width-2"
onClick={[MockFunction]}
title="Pausing an alert rule prevents it from executing"
<Component
spacing="sm"
>
<Icon
name="pause"
/>
</button>
<a
className="btn btn-small btn-inverse alert-list__btn width-2"
href="https://something.something.darkside?editPanel=1&tab=alert"
title="Edit alert rule"
>
<Icon
name="cog"
/>
</a>
<Component
content="Pausing an alert rule prevents it from executing"
placement="bottom"
>
<Button
icon="pause"
onClick={[MockFunction]}
size="sm"
variant="secondary"
/>
</Component>
<Component
content="Edit alert rule"
placement="right"
>
<LinkButton
href="https://something.something.darkside?editPanel=1&tab=alert"
icon="cog"
size="sm"
variant="secondary"
/>
</Component>
</Component>
</div>
</li>
`;
public/app/features/alerting/__snapshots__/AlertRuleList.test.tsx.snap
......@@ -32,65 +32,53 @@ exports[`Render should render alert rules 1`] = `
<div
className="gf-form-select-wrapper width-13"
>
<select
className="gf-form-input"
<Select
onChange={[Function]}
options={
Array [
Object {
"label": "All",
"value": "all",
},
Object {
"label": "OK",
"value": "ok",
},
Object {
"label": "Not OK",
"value": "not_ok",
},
Object {
"label": "Alerting",
"value": "alerting",
},
Object {
"label": "No Data",
"value": "no_data",
},
Object {
"label": "Paused",
"value": "paused",
},
Object {
"label": "Pending",
"value": "pending",
},
]
}
value="all"
>
<option
key="all"
value="all"
>
All
</option>
<option
key="ok"
value="ok"
>
OK
</option>
<option
key="not_ok"
value="not_ok"
>
Not OK
</option>
<option
key="alerting"
value="alerting"
>
Alerting
</option>
<option
key="no_data"
value="no_data"
>
No Data
</option>
<option
key="paused"
value="paused"
>
Paused
</option>
<option
key="pending"
value="pending"
>
Pending
</option>
</select>
/>
</div>
</div>
<div
className="page-action-bar__spacer"
/>
<a
className="btn btn-secondary"
<Button
onClick={[Function]}
variant="secondary"
>
How to add an alert
</a>
</Button>
</div>
<section>
<ol
......@@ -176,65 +164,53 @@ exports[`Render should render component 1`] = `
<div
className="gf-form-select-wrapper width-13"
>
<select
className="gf-form-input"
<Select
onChange={[Function]}
options={
Array [
Object {
"label": "All",
"value": "all",
},
Object {
"label": "OK",
"value": "ok",
},
Object {
"label": "Not OK",
"value": "not_ok",
},
Object {
"label": "Alerting",
"value": "alerting",
},
Object {
"label": "No Data",
"value": "no_data",
},
Object {
"label": "Paused",
"value": "paused",
},
Object {
"label": "Pending",
"value": "pending",
},
]
}
value="all"
>
<option
key="all"
value="all"
>
All
</option>
<option
key="ok"
value="ok"
>
OK
</option>
<option
key="not_ok"
value="not_ok"
>
Not OK
</option>
<option
key="alerting"
value="alerting"
>
Alerting
</option>
<option
key="no_data"
value="no_data"
>
No Data
</option>
<option
key="paused"
value="paused"
>
Paused
</option>
<option
key="pending"
value="pending"
>
Pending
</option>
</select>
/>
</div>
</div>
<div
className="page-action-bar__spacer"
/>
<a
className="btn btn-secondary"
<Button
onClick={[Function]}
variant="secondary"
>
How to add an alert
</a>
</Button>
</div>
<section>
<ol
......
public/app/features/teams/TeamList.tsx
import React, { PureComponent } from 'react';
import { hot } from 'react-hot-loader';
import Page from 'app/core/components/Page/Page';
import { DeleteButton } from '@grafana/ui';
import { DeleteButton, LinkButton } from '@grafana/ui';
import { NavModel } from '@grafana/data';
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import { OrgRole, StoreState, Team } from 'app/types';
......@@ -109,9 +109,9 @@ export class TeamList extends PureComponent<Props, any> {
<div className="page-action-bar__spacer" />
<a className={`btn btn-primary${disabledClass}`} href={newTeamHref}>
New team
</a>
<LinkButton className={disabledClass} href={newTeamHref}>
New Team
</LinkButton>
</div>
<div className="admin-list-table">
......
public/app/features/teams/__snapshots__/TeamList.test.tsx.snap
......@@ -52,12 +52,12 @@ exports[`Render should render teams table 1`] = `
<div
className="page-action-bar__spacer"
/>
<a
className="btn btn-primary"
<LinkButton
className=""
href="org/teams/new"
>
New team
</a>
New Team
</LinkButton>
</div>
<div
className="admin-list-table"
......@@ -387,12 +387,12 @@ exports[`Render when feature toggle editorsCanAdmin is turned on and signedin us
<div
className="page-action-bar__spacer"
/>
<a
className="btn btn-primary disabled"
<LinkButton
className=" disabled"
href="#"
>
New team
</a>
New Team
</LinkButton>
</div>
<div
className="admin-list-table"
......@@ -514,12 +514,12 @@ exports[`Render when feature toggle editorsCanAdmin is turned on and signedin us
<div
className="page-action-bar__spacer"
/>
<a
className="btn btn-primary"
<LinkButton
className=""
href="org/teams/new"
>
New team
</a>
New Team
</LinkButton>
</div>
<div
className="admin-list-table"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment