Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui): alerting polish #14982

Merged
merged 15 commits into from
Sep 5, 2019
Merged

fix(ui): alerting polish #14982

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
d400ee5
fix(ui): allow creating of check from first time widget
alexpaxton Sep 5, 2019
a09a512
refactor(ui): polish layout of endpoint dropdown
alexpaxton Sep 5, 2019
5e4667d
refactor(ui): provide default URLs in endpoint overlay form
alexpaxton Sep 5, 2019
36cc649
refactor(ui): ensure edit endpoint can be canceled
alexpaxton Sep 5, 2019
44ffc56
refactor(ui): move endpoint error out of footer
alexpaxton Sep 5, 2019
78375cd
refactor(ui): appease the linter
alexpaxton Sep 5, 2019
57a4a2c
fix(ui): use correct slack and http url defaults
alexpaxton Sep 5, 2019
8fa812e
chore(ui): remove obsolete stylesheet
alexpaxton Sep 5, 2019
a04c054
fix(ui): remove GET and PUT options from http method dropdown
alexpaxton Sep 5, 2019
a9e884b
fix(ui): capitalize form labels in endpoint form
alexpaxton Sep 5, 2019
ed7651c
fix(ui): change default endpoint name to be type agnostic
alexpaxton Sep 5, 2019
2d39601
chore(ui): Merge branch 'master' into fix/alerting-polish
alexpaxton Sep 5, 2019
44f79cc
fix(ui): appease linter
alexpaxton Sep 5, 2019
b1f5efc
refactor(ui): shrink check message template field
alexpaxton Sep 5, 2019
5ff4fc1
refactor(ui): reverse sort of threshold levels in check builder
alexpaxton Sep 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ui/src/alerting/components/AlertingIndex.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
*/

.alerting-first-time {
border: $ix-border solid $c-ocean;
border: $ix-border solid $c-sapphire;

h1,
h5 {
Expand All @@ -43,9 +43,9 @@
}

h5 {
margin-bottom: 0;
line-height: 1.5em;
font-weight: 500;
margin-bottom: 1.5em;

strong {
font-weight: 900;
Expand Down
30 changes: 26 additions & 4 deletions ui/src/alerting/components/CheckCards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,15 @@ import React, {FunctionComponent} from 'react'

//Components
import CheckCard from 'src/alerting/components/CheckCard'
import {EmptyState, ResourceList, Panel, Gradients} from '@influxdata/clockface'
import {
EmptyState,
ResourceList,
Panel,
Gradients,
Button,
IconFont,
ComponentColor,
} from '@influxdata/clockface'

// Types
import {Check} from 'src/types'
Expand All @@ -12,18 +20,23 @@ import {ComponentSize} from '@influxdata/clockface'
interface Props {
checks: Check[]
showFirstTimeWidget: boolean
onCreateCheck: () => void
}

const CheckCards: FunctionComponent<Props> = ({
checks,
showFirstTimeWidget,
onCreateCheck,
}) => {
return (
<>
<ResourceList>
<ResourceList.Body
emptyState={
<EmptyChecksList showFirstTimeWidget={showFirstTimeWidget} />
<EmptyChecksList
showFirstTimeWidget={showFirstTimeWidget}
onCreateCheck={onCreateCheck}
/>
}
>
{checks.map(check => (
Expand All @@ -37,15 +50,17 @@ const CheckCards: FunctionComponent<Props> = ({

interface EmptyProps {
showFirstTimeWidget: boolean
onCreateCheck: () => void
}

const EmptyChecksList: FunctionComponent<EmptyProps> = ({
showFirstTimeWidget,
onCreateCheck,
}) => {
if (showFirstTimeWidget) {
return (
<Panel
gradient={Gradients.GundamPilot}
gradient={Gradients.PolarExpress}
size={ComponentSize.Large}
className="alerting-first-time"
>
Expand All @@ -58,8 +73,15 @@ const EmptyChecksList: FunctionComponent<EmptyProps> = ({
<h5>
Welcome to our new Monitoring & Alerting feature!
<br />
Try creating a <strong>Check</strong> to get started
To get started try creating a Check:
</h5>
<Button
size={ComponentSize.Medium}
color={ComponentColor.Primary}
onClick={onCreateCheck}
text="Create a Check"
icon={IconFont.Plus}
/>
</Panel.Body>
</Panel>
)
Expand Down
1 change: 1 addition & 0 deletions ui/src/alerting/components/ChecksColumn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ const ChecksColumn: FunctionComponent<Props> = ({
<CheckCards
checks={checks}
showFirstTimeWidget={noAlertingResourcesExist}
onCreateCheck={handleClick}
/>
</AlertsColumnHeader>
)
Expand Down
2 changes: 1 addition & 1 deletion ui/src/alerting/components/builder/AlertBuilder.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
height: auto;
}
textarea {
height: 180px;
height: 90px;
}
}

Expand Down
6 changes: 3 additions & 3 deletions ui/src/alerting/components/builder/ThresholdConditions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@ const ThresholdConditions: FC<Props> = ({check}) => {
}
return (
<>
<ThresholdCondition level="OK" threshold={thresholds['OK']} />
<ThresholdCondition level="INFO" threshold={thresholds['INFO']} />
<ThresholdCondition level="WARN" threshold={thresholds['WARN']} />
<ThresholdCondition level="CRIT" threshold={thresholds['CRIT']} />
<ThresholdCondition level="WARN" threshold={thresholds['WARN']} />
<ThresholdCondition level="INFO" threshold={thresholds['INFO']} />
<ThresholdCondition level="OK" threshold={thresholds['OK']} />
</>
)
}
Expand Down
1 change: 0 additions & 1 deletion ui/src/alerting/components/endpoints/AuthMethodTypeDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,6 @@ const AuthMethodTypeDropdown: FC<Props> = ({selectedType, onSelectType}) => {
<Dropdown
button={button}
menu={menu}
widthPixels={160}
testID="http-authMethod-change--dropdown"
/>
)
Expand Down
1 change: 1 addition & 0 deletions ui/src/alerting/components/endpoints/EditEndpointOverlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ const EditEndpointOverlay: FC<Props> = ({
<Overlay.Body />
<EndpointOverlayContents
onSave={handleEditEndpoint}
onCancel={handleDismiss}
saveButtonText="Edit Notification Endpoint"
/>
</Overlay.Container>
Expand Down
159 changes: 98 additions & 61 deletions ui/src/alerting/components/endpoints/EndpointOptionsHTTP.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,15 @@
import React, {FC, ChangeEvent} from 'react'

// Components
import {Input, FormElement, InputType, TextArea} from '@influxdata/clockface'
import {
Input,
FormElement,
InputType,
TextArea,
Panel,
Grid,
Columns,
} from '@influxdata/clockface'
import MethodTypeDropdown from 'src/alerting/components/endpoints/MethodTypeDropdown'
import AuthMethodTypeDropdown from 'src/alerting/components/endpoints/AuthMethodTypeDropdown'

Expand Down Expand Up @@ -33,66 +41,95 @@ const EndpointOptionsHTTP: FC<Props> = ({
onChangeParameter,
}) => {
return (
<>
<FormElement label="URL">
<Input name="url" value={url} onChange={onChange} required={true} />
</FormElement>
<FormElement label="HTTP method">
<MethodTypeDropdown
onSelectType={onChangeParameter('method')}
selectedType={method}
/>
</FormElement>
<FormElement label="auth method">
<AuthMethodTypeDropdown
onSelectType={onChangeParameter('authMethod')}
selectedType={authMethod}
/>
</FormElement>
{authMethod === 'bearer' && (
<FormElement label="Token">
<Input
name="token"
value={token}
onChange={onChange}
type={InputType.Password}
/>
</FormElement>
)}
{authMethod === 'basic' && (
<>
<FormElement label="username">
<Input
name="username"
value={username}
onChange={onChange}
type={
username && username.includes('secret: ')
? InputType.Password
: InputType.Text
}
/>
</FormElement>
<FormElement label="password">
<Input
name="password"
value={password}
type={InputType.Password}
onChange={onChange}
/>
</FormElement>
</>
)}
<FormElement label="Content Template">
<TextArea
rows={2}
className="endpoint-description--textarea"
name="contentTemplate"
value={contentTemplate}
onChange={onChange}
/>
</FormElement>
</>
<Panel>
<Panel.Header>
<Panel.Title>HTTP Options</Panel.Title>
</Panel.Header>
<Panel.Body>
<Grid>
<Grid.Row>
<Grid.Column widthSM={Columns.Six}>
<FormElement label="HTTP Method">
<MethodTypeDropdown
onSelectType={onChangeParameter('method')}
selectedType={method}
/>
</FormElement>
</Grid.Column>
<Grid.Column widthSM={Columns.Six}>
<FormElement label="Auth Method">
<AuthMethodTypeDropdown
onSelectType={onChangeParameter('authMethod')}
selectedType={authMethod}
/>
</FormElement>
</Grid.Column>
<Grid.Column widthXS={Columns.Twelve}>
<FormElement label="URL">
<Input
name="url"
value={url}
onChange={onChange}
required={true}
/>
</FormElement>
</Grid.Column>

{authMethod === 'bearer' && (
<Grid.Column widthXS={Columns.Twelve}>
<FormElement label="Token">
<Input
name="token"
value={token}
onChange={onChange}
type={InputType.Password}
/>
</FormElement>
</Grid.Column>
)}
{authMethod === 'basic' && (
<>
<Grid.Column widthSM={Columns.Six}>
<FormElement label="Username">
<Input
name="username"
value={username}
onChange={onChange}
type={
username && username.includes('secret: ')
? InputType.Password
: InputType.Text
}
/>
</FormElement>
</Grid.Column>
<Grid.Column widthSM={Columns.Six}>
<FormElement label="Password">
<Input
name="password"
value={password}
type={InputType.Password}
onChange={onChange}
/>
</FormElement>
</Grid.Column>
</>
)}
<Grid.Column widthXS={Columns.Twelve}>
<FormElement label="Content Template">
<TextArea
rows={2}
className="endpoint-description--textarea"
name="contentTemplate"
value={contentTemplate}
onChange={onChange}
/>
</FormElement>
</Grid.Column>
</Grid.Row>
</Grid>
</Panel.Body>
</Panel>
)
}

Expand Down
53 changes: 33 additions & 20 deletions ui/src/alerting/components/endpoints/EndpointOptionsPagerDuty.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import React, {FC, ChangeEvent} from 'react'

// Components
import {Input, FormElement, InputType} from '@influxdata/clockface'
import {Input, FormElement, InputType, Panel, Grid} from '@influxdata/clockface'

interface Props {
url: string
Expand All @@ -12,25 +12,38 @@ interface Props {

const EndpointOptionsPagerDuty: FC<Props> = ({url, routingKey, onChange}) => {
return (
<>
<FormElement label="URL">
<Input
name="url"
value={url}
testID="pagerduty-url"
onChange={onChange}
/>
</FormElement>
<FormElement label="Routing Key">
<Input
name="routingKey"
value={routingKey}
testID="pagerduty-routing-key"
onChange={onChange}
type={InputType.Password}
/>
</FormElement>
</>
<Panel>
<Panel.Header>
<Panel.Title>Pagerduty Options</Panel.Title>
</Panel.Header>
<Panel.Body>
<Grid>
<Grid.Row>
<Grid.Column>
<FormElement label="URL">
<Input
name="url"
value={url}
testID="pagerduty-url"
onChange={onChange}
/>
</FormElement>
</Grid.Column>
<Grid.Column>
<FormElement label="Routing Key">
<Input
name="routingKey"
value={routingKey}
testID="pagerduty-routing-key"
onChange={onChange}
type={InputType.Password}
/>
</FormElement>
</Grid.Column>
</Grid.Row>
</Grid>
</Panel.Body>
</Panel>
)
}

Expand Down
Loading