feat({backup,job}/overview): clearer state (#2023)

Fixes #1958

.gitignore

@@ -1,6 +1,7 @@
 /dist/
 /node_modules/
 /src/common/intl/locales/index.js
+/src/common/themes/index.js
 
 npm-debug.log
 npm-debug.log.*

package.json

@@ -126,6 +126,7 @@
     "redux-thunk": "^2.0.1",
     "reselect": "^2.2.1",
     "standard": "^8.4.0",
+    "styled-components": "^1.4.4",
     "superagent": "^3.5.0",
     "tar-stream": "^1.5.2",
     "vinyl": "^2.0.0",

src/common/intl/messages.js

@@ -227,6 +227,8 @@ var messages = {
   jobTag: 'Tag',
   jobScheduling: 'Scheduling',
   jobState: 'State',
+  jobStateEnabled: 'Enabled',
+  jobStateDisabled: 'Disabled',
   jobTimezone: 'Timezone',
   jobServerTimezone: 'Server',
   runJob: 'Run job',
@@ -1243,6 +1245,8 @@ var messages = {
   logDeleteAll: 'Delete all logs',
   logDeleteAllTitle: 'Delete all logs',
   logDeleteAllMessage: 'Are you sure you want to delete all the logs?',
+  logIndicationToEnable: 'Click to enable',
+  logIndicationToDisable: 'Click to disable',
   reportBug: 'Report a bug',
 
   // ----- IPs ------

src/common/state-button.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import ActionButton from './action-button'
+import propTypes from './prop-types'
+
+const Button = styled(ActionButton)`
+  background-color: ${p => p.theme[`${p.state ? 'enabled' : 'disabled'}StateBg`]}
+  border: 2px solid ${p => p.theme[`${p.state ? 'enabled' : 'disabled'}StateColor`]}
+  color: ${p => p.theme[`${p.state ? 'enabled' : 'disabled'}StateColor`]}
+`
+
+const StateButton = ({
+  disabledHandler,
+  disabledLabel,
+  disabledTooltip,
+
+  enabledLabel,
+  enabledTooltip,
+  enabledHandler,
+
+  state,
+  ...props
+}) =>
+  <Button
+    handler={state ? enabledHandler : disabledHandler}
+    tooltip={state ? enabledTooltip : disabledTooltip}
+    {...props}
+    icon={state ? 'running' : 'halted'}
+    size='small'
+    state={state}
+  >
+    {state ? enabledLabel : disabledLabel}
+  </Button>
+
+export default propTypes({
+  state: propTypes.bool.isRequired
+})(StateButton)

src/common/themes/base.js

@@ -0,0 +1,6 @@
+export default {
+  disabledStateBg: '#fff',
+  disabledStateColor: '#c0392b',
+  enabledStateBg: '#fff',
+  enabledStateColor: '#27ae60'
+}

src/xo-app/backup/overview/index.js

@@ -1,6 +1,5 @@
 import _ from 'intl'
 import ActionRowButton from 'action-row-button'
-import ActionToggle from 'action-toggle'
 import Component from 'base-component'
 import filter from 'lodash/filter'
 import find from 'lodash/find'
@@ -13,6 +12,7 @@ import map from 'lodash/map'
 import orderBy from 'lodash/orderBy'
 import React from 'react'
 import SortedTable from 'sorted-table'
+import StateButton from 'state-button'
 import Tooltip from 'tooltip'
 import { addSubscriptions } from 'utils'
 import { ButtonGroup } from 'react-bootstrap-4/lib'
@@ -56,7 +56,9 @@ const JOB_COLUMNS = [
   },
   {
     name: _('jobTag'),
-    itemRenderer: ({ scheduleTag }) => scheduleTag
+    itemRenderer: ({ scheduleTag }) => scheduleTag,
+    default: true,
+    sortCriteria: ({ scheduleTag }) => scheduleTag
   },
   {
     name: _('jobScheduling'),
@@ -70,11 +72,17 @@ const JOB_COLUMNS = [
   },
   {
     name: _('jobState'),
-    itemRenderer: ({ schedule, scheduleToggleValue }) => <ActionToggle
+    itemRenderer: ({ schedule, scheduleToggleValue }) => <StateButton
-      value={scheduleToggleValue}
+      disabledLabel={_('jobStateDisabled')}
-      handler={scheduleToggleValue ? disableSchedule : enableSchedule}
+      disabledHandler={enableSchedule}
+      disabledTooltip={_('logIndicationToEnable')}
+
+      enabledLabel={_('jobStateEnabled')}
+      enabledHandler={disableSchedule}
+      enabledTooltip={_('logIndicationToDisable')}
+
       handlerParam={schedule.id}
-      size='small'
+      state={scheduleToggleValue}
     />,
     sortCriteria: 'scheduleToggleValue'
   },

src/xo-app/index.js

@@ -6,11 +6,13 @@ import isArray from 'lodash/isArray'
 import map from 'lodash/map'
 import React from 'react'
 import Shortcuts from 'shortcuts'
+import themes from 'themes'
 import _, { IntlProvider } from 'intl'
 import { blockXoaAccess } from 'xoa-updater'
 import { connectStore, routes } from 'utils'
 import { Notification } from 'notification'
 import { ShortcutManager } from 'react-shortcuts'
+import { ThemeProvider } from 'styled-components'
 import { TooltipViewer } from 'tooltip'
 import { Container, Row, Col } from 'grid'
 // import {
@@ -178,22 +180,24 @@ export default class XoApp extends Component {
     const blocked = signedUp && blockXoaAccess(trial) // If we are under expired or unstable trial (signed up only)
 
     return <IntlProvider>
-      <DocumentTitle title='Xen Orchestra'>
+      <ThemeProvider theme={themes.base}>
-        <div style={CONTAINER_STYLE}>
+        <DocumentTitle title='Xen Orchestra'>
-          <Shortcuts name='XoApp' handler={this._shortcutsHandler} targetNodeSelector='body' stopPropagation={false} />
+          <div style={CONTAINER_STYLE}>
-          <Menu ref='menu' />
+            <Shortcuts name='XoApp' handler={this._shortcutsHandler} targetNodeSelector='body' stopPropagation={false} />
-          <div ref='bodyWrapper' style={BODY_WRAPPER_STYLE}>
+            <Menu ref='menu' />
-            <div style={BODY_STYLE}>
+            <div ref='bodyWrapper' style={BODY_WRAPPER_STYLE}>
-              {blocked
+              <div style={BODY_STYLE}>
-                ? <XoaUpdates />
+                {blocked
-                : signedUp ? this.props.children : <p>Still loading</p>}
+                  ? <XoaUpdates />
+                  : signedUp ? this.props.children : <p>Still loading</p>}
+              </div>
             </div>
+            <Modal />
+            <Notification />
+            <TooltipViewer />
           </div>
-          <Modal />
+        </DocumentTitle>
-          <Notification />
+      </ThemeProvider>
-          <TooltipViewer />
-        </div>
-      </DocumentTitle>
     </IntlProvider>
   }
 }

src/xo-app/jobs/overview/index.js

@@ -1,6 +1,5 @@
 import _ from 'intl'
 import ActionRowButton from 'action-row-button'
-import ActionToggle from 'action-toggle'
 import filter from 'lodash/filter'
 import find from 'lodash/find'
 import forEach from 'lodash/forEach'
@@ -10,6 +9,7 @@ import LogList from '../../logs'
 import map from 'lodash/map'
 import orderBy from 'lodash/orderBy'
 import React, { Component } from 'react'
+import StateButton from 'state-button'
 import Tooltip from 'tooltip'
 import Upgrade from 'xoa-upgrade'
 import { addSubscriptions } from 'utils'
@@ -104,21 +104,21 @@ export default class Overview extends Component {
     const { id } = schedule
 
     return (
-      <ActionToggle
+      <StateButton
-        value={this.state.scheduleTable[id]}
+        disabledLabel={_('jobStateDisabled')}
-        handler={this._updateScheduleState}
+        disabledHandler={enableSchedule}
+        disabledTooltip={_('logIndicationToEnable')}
+
+        enabledLabel={_('jobStateEnabled')}
+        enabledHandler={disableSchedule}
+        enabledTooltip={_('logIndicationToDisable')}
+
         handlerParam={id}
-        size='small' />
+        state={this.state.scheduleTable[id]}
+      />
     )
   }
 
-  _updateScheduleState = id => {
-    const enabled = this.state.scheduleTable[id]
-    const method = enabled ? disableSchedule : enableSchedule
-
-    return method(id)
-  }
-
   _getIsScheduleUserMissing = createSelector(
     () => this.state.schedules,
     () => this.props.users,

yarn.lock

@@ -1153,6 +1153,10 @@ bowser@^0.7.2:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/bowser/-/bowser-0.7.3.tgz#4fc0cb4e0e2bdd9b394df0d2038c32c2cc2712c8"
 
+bowser@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.6.0.tgz#37fc387b616cb6aef370dab4d6bd402b74c5c54d"
+
 brace-expansion@^1.0.0:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.6.tgz#7197d7eaa9b87e648390ea61fc66c84427420df9"
@@ -1660,6 +1664,10 @@ color-space@^1.14.3:
     husl "^5.0.0"
     mumath "^3.0.0"
 
+colors@0.5.x:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-0.5.1.tgz#7d0023eaeb154e8ee9fce75dcb923d0ed1667774"
+
 combine-source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/combine-source-map/-/combine-source-map-0.6.1.tgz#9b4a09c316033d768e0f11e029fa2730e079ad96"
@@ -1830,6 +1838,16 @@ crypto-browserify@^3.0.0:
     public-encrypt "^4.0.0"
     randombytes "^2.0.0"
 
+css-color-list@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/css-color-list/-/css-color-list-0.0.1.tgz#8718e8695ae7a2cc8787be8715f1c008a7f28b15"
+  dependencies:
+    css-color-names "0.0.1"
+
+css-color-names@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.1.tgz#5d0548fa256456ede4a9a0c2ac7ab19d3eb1ad81"
+
 css-select@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
@@ -1839,6 +1857,14 @@ css-select@~1.2.0:
     domutils "1.5.1"
     nth-check "~1.0.1"
 
+css-to-react-native@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-1.0.6.tgz#728c7e774e56536558a0ecaa990d9507c43a4ac4"
+  dependencies:
+    css-color-list "0.0.1"
+    fbjs "^0.8.5"
+    nearley "^2.7.7"
+
 css-tree@1.0.0-alpha17:
   version "1.0.0-alpha17"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha17.tgz#7ab95ab72c533917af8be54313fec81841c5223a"
@@ -2272,6 +2298,10 @@ directory-encoder@^0.7.2:
     handlebars "^1.3.0"
     img-stats "^0.5.2"
 
+discontinuous-range@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
+
 disposables@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/disposables/-/disposables-1.0.1.tgz#064727a25b54f502bd82b89aa2dfb8df9f1b39e3"
@@ -2754,7 +2784,7 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
-fbjs@^0.8.1, fbjs@^0.8.4:
+fbjs@^0.8.1, fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.7, fbjs@^0.8.8:
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.8.tgz#02f1b6e0ea0d46c24e0b51a2d24df069563a5ad6"
   dependencies:
@@ -3026,6 +3056,14 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+glamor@^2.20.12:
+  version "2.20.24"
+  resolved "https://registry.yarnpkg.com/glamor/-/glamor-2.20.24.tgz#a299af2eec687322634ba38e4a0854d8743d2041"
+  dependencies:
+    babel-runtime "^6.18.0"
+    fbjs "^0.8.8"
+    object-assign "^4.1.0"
+
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -3506,6 +3544,10 @@ husl@^5.0.0:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/husl/-/husl-5.0.3.tgz#ee272aaff1bebe40df3588ed007b70de7e679788"
 
+hyphenate-style-name@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"
+
 iconv-lite@0.4, iconv-lite@~0.4.13:
   version "0.4.15"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
@@ -3588,6 +3630,13 @@ inline-source-map@~0.6.0:
   dependencies:
     source-map "~0.5.3"
 
+inline-style-prefixer@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-2.0.5.tgz#c153c7e88fd84fef5c602e95a8168b2770671fe7"
+  dependencies:
+    bowser "^1.0.0"
+    hyphenate-style-name "^1.0.1"
+
 inquirer@^0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-0.12.0.tgz#1ef2bfd63504df0bc75785fff8c2c41df12f077e"
@@ -3750,6 +3799,10 @@ is-fullwidth-code-point@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
 
+is-function@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
+
 is-glob@^2.0.0, is-glob@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
@@ -3799,6 +3852,12 @@ is-path-inside@^1.0.0:
   dependencies:
     path-is-inside "^1.0.1"
 
+is-plain-object@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.1.tgz#4d7ca539bc9db9b737b8acb612f2318ef92f294f"
+  dependencies:
+    isobject "^1.0.0"
+
 is-posix-bracket@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
@@ -3877,6 +3936,10 @@ isexe@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-1.1.2.tgz#36f3e22e60750920f5e7241a476a8c6a42275ad0"
 
+isobject@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-1.0.2.tgz#f0f9b8ce92dd540fa0740882e3835a2e022ec78a"
+
 isobject@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
@@ -5003,6 +5066,14 @@ natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
 
+nearley@^2.7.7:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.8.0.tgz#7f88b503e3b373503f5c7e5b3b52bf134c86145b"
+  dependencies:
+    nomnom "~1.6.2"
+    railroad-diagrams "^1.0.0"
+    randexp "^0.4.2"
+
 next-tick@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
@@ -5082,6 +5153,13 @@ node-sass@^4.2.0:
     sass-graph "^2.1.1"
     stdout-stream "^1.4.0"
 
+nomnom@~1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/nomnom/-/nomnom-1.6.2.tgz#84a66a260174408fc5b77a18f888eccc44fb6971"
+  dependencies:
+    colors "0.5.x"
+    underscore "~1.4.4"
+
 "nopt@2 || 3", nopt@~3.0.6:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
@@ -5712,6 +5790,17 @@ querystring@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
 
+railroad-diagrams@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz#eb7e6267548ddedfb899c1b90e57374559cddb7e"
+
+randexp@^0.4.2:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/randexp/-/randexp-0.4.5.tgz#ffe3a80c3f666cd71e6b008e477e584c1a32ff3e"
+  dependencies:
+    discontinuous-range "1.0.0"
+    ret "~0.1.10"
+
 random-password@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/random-password/-/random-password-0.1.2.tgz#128f1302c65bfeef2ab5094c3e6da63b852e7be6"
@@ -6288,6 +6377,10 @@ restore-cursor@^1.0.1:
     exit-hook "^1.0.0"
     onetime "^1.0.0"
 
+ret@~0.1.10:
+  version "0.1.14"
+  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.14.tgz#58c636837b12e161f8a380cf081c6a230fd1664e"
+
 right-align@^0.1.1:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
@@ -6698,6 +6791,19 @@ strip-json-comments@~1.0.1, strip-json-comments@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91"
 
+styled-components@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-1.4.4.tgz#c944de423d8ae2363f2ba4ff8fc26d367e7dfa8f"
+  dependencies:
+    buffer "^5.0.2"
+    css-to-react-native "^1.0.6"
+    fbjs "^0.8.7"
+    glamor "^2.20.12"
+    inline-style-prefixer "^2.0.5"
+    is-function "^1.0.1"
+    is-plain-object "^2.0.1"
+    supports-color "^3.1.2"
+
 subarg@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/subarg/-/subarg-1.0.0.tgz#f62cf17581e996b48fc965699f54c06ae268b8d2"
@@ -6989,6 +7095,10 @@ uncontrollable@^3.1.3:
   dependencies:
     invariant "^2.1.0"
 
+underscore@~1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.4.4.tgz#61a6a32010622afa07963bf325203cf12239d604"
+
 undertaker-registry@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/undertaker-registry/-/undertaker-registry-1.0.0.tgz#2da716c765999d8c94b9f9ed2c006df4923b052b"