fix(ui): alerting polish (#14982)

* fix(ui): allow creating of check from first time widget * refactor(ui): polish layout of endpoint dropdown * refactor(ui): provide default URLs in endpoint overlay form Co-Authored-By: Andrew Watkins <[email protected]> * refactor(ui): ensure edit endpoint can be canceled Co-Authored-By: Andrew Watkins <[email protected]> * refactor(ui): move endpoint error out of footer Co-Authored-By: Andrew Watkins <[email protected]> * refactor(ui): appease the linter * fix(ui): use correct slack and http url defaults * chore(ui): remove obsolete stylesheet * fix(ui): remove GET and PUT options from http method dropdown * fix(ui): capitalize form labels in endpoint form * fix(ui): change default endpoint name to be type agnostic * fix(ui): appease linter * refactor(ui): shrink check message template field * refactor(ui): reverse sort of threshold levels in check builder
influxdata · Sep 5, 2019 · 0a3d580 · 0a3d580
1 parent 77a5953
commit 0a3d580
Show file tree

Hide file tree

Showing 20 changed files with 344 additions and 204 deletions.
diff --git a/ui/src/alerting/components/AlertingIndex.scss b/ui/src/alerting/components/AlertingIndex.scss
@@ -30,7 +30,7 @@
 */
 
 .alerting-first-time {
-  border: $ix-border solid $c-ocean;
+  border: $ix-border solid $c-sapphire;
 
   h1,
   h5 {
@@ -43,9 +43,9 @@
   }
 
   h5 {
-    margin-bottom: 0;
     line-height: 1.5em;
     font-weight: 500;
+    margin-bottom: 1.5em;
 
     strong {
       font-weight: 900;

diff --git a/ui/src/alerting/components/CheckCards.tsx b/ui/src/alerting/components/CheckCards.tsx
@@ -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'
@@ -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 => (
@@ -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"
       >
@@ -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>
     )

diff --git a/ui/src/alerting/components/ChecksColumn.tsx b/ui/src/alerting/components/ChecksColumn.tsx
@@ -65,6 +65,7 @@ const ChecksColumn: FunctionComponent<Props> = ({
       <CheckCards
         checks={checks}
         showFirstTimeWidget={noAlertingResourcesExist}
+        onCreateCheck={handleClick}
       />
     </AlertsColumnHeader>
   )

diff --git a/ui/src/alerting/components/builder/AlertBuilder.scss b/ui/src/alerting/components/builder/AlertBuilder.scss
@@ -24,7 +24,7 @@
     height: auto;
   }
   textarea {
-    height: 180px;
+    height: 90px;
   }
 }
 

diff --git a/ui/src/alerting/components/builder/ThresholdConditions.tsx b/ui/src/alerting/components/builder/ThresholdConditions.tsx
@@ -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']} />
     </>
   )
 }

diff --git a/ui/src/alerting/components/endpoints/AuthMethodTypeDropdown.tsx b/ui/src/alerting/components/endpoints/AuthMethodTypeDropdown.tsx
@@ -63,7 +63,6 @@ const AuthMethodTypeDropdown: FC<Props> = ({selectedType, onSelectType}) => {
     <Dropdown
       button={button}
       menu={menu}
-      widthPixels={160}
       testID="http-authMethod-change--dropdown"
     />
   )

diff --git a/ui/src/alerting/components/endpoints/EditEndpointOverlay.tsx b/ui/src/alerting/components/endpoints/EditEndpointOverlay.tsx
@@ -52,6 +52,7 @@ const EditEndpointOverlay: FC<Props> = ({
           <Overlay.Body />
           <EndpointOverlayContents
             onSave={handleEditEndpoint}
+            onCancel={handleDismiss}
             saveButtonText="Edit Notification Endpoint"
           />
         </Overlay.Container>

diff --git a/ui/src/alerting/components/endpoints/EndpointOptionsHTTP.tsx b/ui/src/alerting/components/endpoints/EndpointOptionsHTTP.tsx
@@ -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'
 
@@ -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>
   )
 }
 

diff --git a/ui/src/alerting/components/endpoints/EndpointOptionsPagerDuty.tsx b/ui/src/alerting/components/endpoints/EndpointOptionsPagerDuty.tsx
@@ -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
@@ -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>
   )
 }