Improve Jenkins build status (#25)

* Complete JenkinsBadge and add loading indicator

* Fix wrong indentation

* Improve legibility

Author: danielbayerlein

components/loading-indicator.js

@@ -1,5 +1,4 @@
 import styled, { keyframes } from 'styled-components'
-import { size } from 'polished'
 
 const rotation = keyframes`
   0% {
@@ -28,8 +27,9 @@ const turn = keyframes`
 `
 
 const Svg = styled.svg`
-  ${size('5em')}
   animation: ${rotation} 1.4s linear infinite;
+  height: ${props => props.size};
+  width: ${props => props.size};
 `
 
 const Circle = styled.circle`
@@ -43,8 +43,12 @@ const Circle = styled.circle`
   transform-origin: center;
 `
 
-export default () => (
-  <Svg viewBox='0 0 66 66'>
-    <Circle cx='33' cy='33' r='30' />
-  </Svg>
-)
+export default ({ size = 'medium' }) => {
+  const svgSize = size === 'small' ? '1.75em' : '5em'
+
+  return (
+    <Svg viewBox='0 0 66 66' size={svgSize}>
+      <Circle cx='33' cy='33' r='30' />
+    </Svg>
+  )
+}

components/widgets/jenkins/index.js

@@ -4,6 +4,7 @@ import styled from 'styled-components'
 import Widget from '../../widget'
 import Table, { Th, Td } from '../../table'
 import Badge from '../../badge'
+import LoadingIndicator from '../../loading-indicator'
 
 const JenkinsBadge = styled(Badge)`
   background-color: ${props => {
@@ -14,7 +15,10 @@ const JenkinsBadge = styled(Badge)`
         return props.theme.palette.warnColor
       case 'SUCCESS':
         return props.theme.palette.successColor
-      default:
+      case 'ABORTED':
+      case 'NOT_BUILT':
+        return props.theme.palette.disabledColor
+      default: // null = 'In Progress'
         return 'transparent'
     }
   }}
@@ -77,7 +81,11 @@ export default class Jenkins extends Component {
                 <Th>{build.name}</Th>
                 <Td>
                   <a href={build.url} title={build.result}>
-                    <JenkinsBadge status={build.result} />
+                    {
+                      build.result
+                      ? <JenkinsBadge status={build.result} />
+                      : <LoadingIndicator size='small' />
+                    }
                   </a>
                 </Td>
               </tr>

styles/dark-theme.js

@@ -1,4 +1,5 @@
 const colors = {
+  grey400: '#bdbdbd',
   grey700: '#616161',
   grey800: '#424242',
   grey: '#303030',
@@ -25,6 +26,7 @@ export default {
     warnColor: colors.amber500,
     warnSecondaryColor: colors.orange500,
     successColor: colors.green500,
-    successSecondaryColor: colors.lime500
+    successSecondaryColor: colors.lime500,
+    disabledColor: colors.grey400
   }
 }

styles/light-theme.js

@@ -1,6 +1,7 @@
 const colors = {
   grey50: '#fafafa',
   grey200: '#eeeeee',
+  grey400: '#bdbdbd',
   grey900: '#212121',
   white: '#ffffff',
   cyan500: '#00bcd4',
@@ -25,6 +26,7 @@ export default {
     warnColor: colors.amberA700,
     warnSecondaryColor: colors.orangeA700,
     successColor: colors.greenA700,
-    successSecondaryColor: colors.lightGreenA700
+    successSecondaryColor: colors.lightGreenA700,
+    disabledColor: colors.grey400
   }
 }