[WIP] Widgets Alerting Feature

components/widget.js

@@ -2,12 +2,13 @@ import styled from 'styled-components'
 import { size } from 'polished'
 import LoadingIndicator from './loading-indicator'
 import ErrorIcon from './error-icon'
+import { NONE } from '../lib/alert'
 
 const Container = styled.div`
   ${size('20em')}
   align-items: center;
   background-color: ${props => props.theme.palette.canvasColor};
-  border: 1px solid ${props => props.theme.palette.borderColor};
+  border: 1px solid ${props => props.theme.atoms.Widget[props.alertSeverity].border};
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -19,19 +20,19 @@ const Title = styled.h1`
   text-align: center;
 `
 
-export default ({ children, error = false, loading = false, title = '' }) => {
+export default ({ children, hasError = false, isLoading = false, alertSeverity = NONE, title = '' }) => {
   let content
 
-  if (loading) {
+  if (isLoading) {
     content = <LoadingIndicator />
-  } else if (error) {
+  } else if (hasError) {
     content = <ErrorIcon />
   } else {
     content = <div>{children}</div>
   }
 
   return (
-    <Container>
+    <Container alertSeverity={alertSeverity}>
       {title ? <Title>{title}</Title> : ''}
       {content}
     </Container>

components/widgets/bitbucket/pull-request-count.js

@@ -1,9 +1,10 @@
 import { Component } from 'react'
 import fetch from 'isomorphic-unfetch'
-import { object, string, number, array } from 'yup'
+import { array, object, string, number } from 'yup'
 import Widget from '../../widget'
 import Counter from '../../counter'
 import { basicAuthHeader } from '../../../lib/auth'
+import { severity, NONE } from '../../../lib/alert'
 
 const schema = object().shape({
   url: string().url().required(),
@@ -12,7 +13,11 @@ const schema = object().shape({
   interval: number(),
   title: string(),
   users: array().of(string()),
-  authKey: string()
+  authKey: string(),
+  alert: array(object({
+    severity: string().required(),
+    value: number().required()
+  }))
 })
 
 export default class BitbucketPullRequestCount extends Component {
@@ -24,16 +29,17 @@ export default class BitbucketPullRequestCount extends Component {
 
   state = {
     count: 0,
-    error: false,
-    loading: true
+    hasError: false,
+    isLoading: true,
+    alertSeverity: NONE
   }
 
   componentDidMount () {
     schema.validate(this.props)
       .then(() => this.fetchInformation())
       .catch((err) => {
         console.error(`${err.name} @ ${this.constructor.name}`, err.errors)
-        this.setState({ error: true, loading: false })
+        this.setState({ hasError: true, isLoading: false })
       })
   }
 
@@ -42,7 +48,7 @@ export default class BitbucketPullRequestCount extends Component {
   }
 
   async fetchInformation () {
-    const { authKey, url, project, repository, users } = this.props
+    const { authKey, url, project, repository, users, alert } = this.props
     const opts = authKey ? { headers: basicAuthHeader(authKey) } : {}
 
     try {
@@ -56,19 +62,24 @@ export default class BitbucketPullRequestCount extends Component {
         count = json.size
       }
 
-      this.setState({ count, error: false, loading: false })
-    } catch (error) {
-      this.setState({ error: true, loading: false })
+      this.setState({
+        count,
+        hasError: false,
+        isLoading: false,
+        alertSeverity: severity(count, alert)
+      })
+    } catch (err) {
+      this.setState({ hasError: true, isLoading: false, alertSeverity: NONE })
     } finally {
       this.timeout = setTimeout(() => this.fetchInformation(), this.props.interval)
     }
   }
 
   render () {
-    const { count, error, loading } = this.state
+    const { count, hasError, isLoading, alertSeverity } = this.state
     const { title } = this.props
     return (
-      <Widget title={title} loading={loading} error={error}>
+      <Widget title={title} isLoading={isLoading} hasError={hasError} alertSeverity={alertSeverity}>
         <Counter value={count} />
       </Widget>
     )

components/widgets/elasticsearch/hit-count.js

@@ -1,16 +1,21 @@
 import { Component } from 'react'
 import fetch from 'isomorphic-unfetch'
-import { object, string, number } from 'yup'
+import { array, object, string, number } from 'yup'
 import Widget from '../../widget'
 import Counter from '../../counter'
 import { basicAuthHeader } from '../../../lib/auth'
+import { severity, NONE } from '../../../lib/alert'
 
 const schema = object().shape({
   url: string().url().required(),
   index: string().required(),
   query: string().required(),
   interval: number(),
-  title: string()
+  title: string(),
+  alert: array(object({
+    severity: string().required(),
+    value: number().required()
+  }))
 })
 
 export default class ElasticsearchHitCount extends Component {
@@ -21,16 +26,17 @@ export default class ElasticsearchHitCount extends Component {
 
   state = {
     count: 0,
-    error: false,
-    loading: true
+    hasError: false,
+    isLoading: true,
+    alertSeverity: NONE
   }
 
   componentDidMount () {
     schema.validate(this.props)
       .then(() => this.fetchInformation())
       .catch((err) => {
         console.error(`${err.name} @ ${this.constructor.name}`, err.errors)
-        this.setState({ error: true, loading: false })
+        this.setState({ hasError: true, isLoading: false })
       })
   }
 
@@ -39,26 +45,33 @@ export default class ElasticsearchHitCount extends Component {
   }
 
   async fetchInformation () {
-    const { authKey, index, query, url } = this.props
+    const { authKey, index, query, url, alert } = this.props
     const opts = authKey ? { headers: basicAuthHeader(authKey) } : {}
 
     try {
       const res = await fetch(`${url}/${index}/_search?q=${query}`, opts)
       const json = await res.json()
+      const total = json.hits.total
 
-      this.setState({ count: json.hits.total, error: false, loading: false })
-    } catch (error) {
-      this.setState({ error: true, loading: false })
+      this.setState({
+        count: total,
+        hasError: false,
+        isLoading: false,
+        alertSeverity: severity(total, alert)
+      })
+    } catch (err) {
+      this.setState({ hasError: true, isLoading: false, alertSeverity: NONE })
     } finally {
       this.timeout = setTimeout(() => this.fetchInformation(), this.props.interval)
     }
   }
 
   render () {
-    const { count, error, loading } = this.state
+    const { count, hasError, isLoading, alertSeverity } = this.state
     const { title } = this.props
+
     return (
-      <Widget title={title} loading={loading} error={error}>
+      <Widget title={title} isLoading={isLoading} hasError={hasError} alertSeverity={alertSeverity}>
         <Counter value={count} />
       </Widget>
     )

components/widgets/github/issue-count.js

@@ -1,16 +1,21 @@
 import { Component } from 'react'
 import fetch from 'isomorphic-unfetch'
-import { object, string, number } from 'yup'
+import { array, object, string, number } from 'yup'
 import Widget from '../../widget'
 import Counter from '../../counter'
 import { basicAuthHeader } from '../../../lib/auth'
+import { severity, NONE } from '../../../lib/alert'
 
 const schema = object().shape({
   owner: string().required(),
   repository: string().required(),
   interval: number(),
   title: string(),
-  authKey: string()
+  authKey: string(),
+  alert: array(object({
+    severity: string().required(),
+    value: number().required()
+  }))
 })
 
 export default class GitHubIssueCount extends Component {
@@ -21,16 +26,17 @@ export default class GitHubIssueCount extends Component {
 
   state = {
     count: 0,
-    error: false,
-    loading: true
+    hasError: false,
+    isLoading: true,
+    alertSeverity: NONE
   }
 
   componentDidMount () {
     schema.validate(this.props)
       .then(() => this.fetchInformation())
       .catch((err) => {
         console.error(`${err.name} @ ${this.constructor.name}`, err.errors)
-        this.setState({ error: true, loading: false })
+        this.setState({ hasError: true, isLoading: false })
       })
   }
 
@@ -39,26 +45,32 @@ export default class GitHubIssueCount extends Component {
   }
 
   async fetchInformation () {
-    const { authKey, owner, repository } = this.props
+    const { authKey, owner, repository, alert } = this.props
     const opts = authKey ? { headers: basicAuthHeader(authKey) } : {}
 
     try {
       const res = await fetch(`https://api.github.com/repos/${owner}/${repository}`, opts)
       const json = await res.json()
+      const total = json.open_issues_count
 
-      this.setState({ count: json.open_issues_count, error: false, loading: false })
-    } catch (error) {
-      this.setState({ error: true, loading: false })
+      this.setState({
+        count: total,
+        hasError: false,
+        isLoading: false,
+        alertSeverity: severity(total, alert)
+      })
+    } catch (err) {
+      this.setState({ hasError: true, isLoading: false, alertSeverity: NONE })
     } finally {
       this.timeout = setTimeout(() => this.fetchInformation(), this.props.interval)
     }
   }
 
   render () {
-    const { count, error, loading } = this.state
+    const { count, hasError, isLoading, alertSeverity } = this.state
     const { title } = this.props
     return (
-      <Widget title={title} loading={loading} error={error}>
+      <Widget title={title} isLoading={isLoading} hasError={hasError} alertSeverity={alertSeverity}>
         <Counter value={count} />
       </Widget>
     )

components/widgets/jenkins/job-status.js

@@ -46,16 +46,16 @@ export default class JenkinsJobStatus extends Component {
   }
 
   state = {
-    loading: true,
-    error: false
+    isLoading: true,
+    hasError: false
   }
 
   componentDidMount () {
     schema.validate(this.props)
       .then(() => this.fetchInformation())
       .catch((err) => {
         console.error(`${err.name} @ ${this.constructor.name}`, err.errors)
-        this.setState({ error: true, loading: false })
+        this.setState({ hasError: true, isLoading: false })
       })
   }
 
@@ -82,20 +82,20 @@ export default class JenkinsJobStatus extends Component {
         })
       )
 
-      this.setState({ error: false, loading: false, builds })
-    } catch (error) {
-      this.setState({ error: true, loading: false })
+      this.setState({ hasError: false, isLoading: false, builds })
+    } catch (err) {
+      this.setState({ hasError: true, isLoading: false })
     } finally {
       this.timeout = setTimeout(() => this.fetchInformation(), this.props.interval)
     }
   }
 
   render () {
-    const { loading, error, builds } = this.state
+    const { isLoading, hasError, builds } = this.state
     const { title } = this.props
 
     return (
-      <Widget title={title} error={error} loading={loading}>
+      <Widget title={title} hasError={hasError} isLoading={isLoading}>
         <Table>
           <tbody>
             {builds && builds.map(build => (