Merge pull request #536 from ibi-group/deploy-improvements

landonreed · web-flow · commit a106298860c9 · 2020-03-16T09:42:31.000-04:00
Deploy improvements
diff --git a/.flowconfig b/.flowconfig
@@ -2,6 +2,7 @@
 .*/node_modules/config-chain/.*
 .*/node_modules/fbjs/flow/.*
 .*/node_modules/immutable/.*
+.*/node_modules/jju/examples.*
 .*/node_modules/mapbox.js/docs/examples/.*
 .*/node_modules/nock/node_modules/changelog/examples/.*
 .*/node_modules/npmconf/.*
diff --git a/i18n/english.yml b/i18n/english.yml
@@ -282,10 +282,16 @@ components:
         delete: Remove
         ec2Info:
           amiId: AMI ID
+          buildAmiId: Graph build AMI ID
+          buildImageDescription: New Image Description
+          buildImageName: New Image Name
+          buildInstanceType: Graph build instance type
           instanceCount: Instance count
           instanceType: Instance type
           iamInstanceProfileArn: IAM Instance Profile ARN
           keyName: Key file name
+          recreateBuildImage: Recreate Build Image after Graph Build?
+          region: Region name
           securityGroupId: Security Group ID
           subnetId: Subnet ID
           targetGroupArn: Target Group ARN (load balancer)
diff --git a/lib/admin/components/ServerSettings.js b/lib/admin/components/ServerSettings.js
@@ -218,10 +218,16 @@ class ServerSettings extends Component<Props, State> {
             {otpServers && otpServers.length
               ? otpServers.map((server, index) => (
                 <CollapsiblePanel
-                  key={`server-${index}`}
-                  index={index}
-                  fields={SERVER_FIELDS}
+                  data={server}
                   defaultExpanded={!server.name}
+                  fields={SERVER_FIELDS}
+                  index={index}
+                  key={`server-${index}`}
+                  onChange={this._getOnChange}
+                  onRemove={this._onDeleteServer}
+                  onSave={this._onSaveServer}
+                  saveDisabled={!this.state.hasEdits}
+                  showButtonsOnBottom
                   testId={server.name ||
                     `[${this.messages('deployment.otpServers.serverPlaceholder')}]`}
                   title={server.name
@@ -231,11 +237,7 @@ class ServerSettings extends Component<Props, State> {
                     </span>
                     : `[${this.messages('deployment.otpServers.serverPlaceholder')}]`
                   }
-                  data={server}
-                  saveDisabled={!this.state.hasEdits}
-                  onRemove={this._onDeleteServer}
-                  onSave={this._onSaveServer}
-                  onChange={this._getOnChange}>
+                >
                   <ServerSpecialFields
                     index={index}
                     getOnChange={this._getOnChange}
diff --git a/lib/common/components/FormInput.js b/lib/common/components/FormInput.js
@@ -2,10 +2,11 @@
 
 import React from 'react'
 import {
+  Checkbox,
   Col,
-  FormGroup,
   ControlLabel,
-  FormControl
+  FormControl,
+  FormGroup
 } from 'react-bootstrap'
 
 import {getComponentMessages} from '../../common/util/config'
@@ -26,44 +27,69 @@ export default class FormInput extends React.Component<Props> {
 
   messages = getComponentMessages('FormInput')
 
-  render () {
-    const {field, messageRoot, shouldRender, value} = this.props
-    const prefix = messageRoot ? `${messageRoot}.` : ''
+  getPrefix = () => {
+    const {messageRoot} = this.props
+    return messageRoot ? `${messageRoot}.` : ''
+  }
+
+  renderCheckbox = () => {
+    const { field, onChange, value } = this.props
+    return (
+      <FormGroup>
+        <Checkbox checked={value} name={field.name} onChange={onChange}>
+          {this.messages(`${this.getPrefix()}${field.name}`)}
+          {field.required ? ' *' : ''}
+        </Checkbox>
+      </FormGroup>
+    )
+  }
+
+  renderLabelAndFormControl = () => {
+    const {field, onChange, value} = this.props
     const {effects, split, ...fieldProps} = field
+    const prefix = this.getPrefix()
+    const isSelect = field.type.indexOf('select') !== -1
+    return (
+      <FormGroup>
+        <ControlLabel>
+          {this.messages(`${prefix}${field.name}`)}
+          {field.required ? ' *' : ''}
+        </ControlLabel>
+        <FormControl
+          value={value === null ? '' : value}
+          {...fieldProps}
+          placeholder={isSelect
+            ? undefined
+            : field.placeholder || this.messages(`${prefix}${field.name}Placeholder`)
+          }
+          name={field.name}
+          children={field.children
+            ? field.children.sort((a, b) => {
+              if (a.value < b.value) return -1
+              if (a.value > b.value) return 1
+              return 0
+            }).map((o, i) => (
+              <option key={i} {...o} />
+            ))
+            : undefined
+          }
+          onChange={onChange} />
+      </FormGroup>
+    )
+  }
+
+  render () {
+    const {field, shouldRender} = this.props
     // If should render is false, do not render form element (for conditional
     // visibility of form elements).
     if (!shouldRender()) return null
     const isCheckbox = field.type === 'checkbox'
-    const isSelect = field.type.indexOf('select') !== -1
-    const checkboxProps = isCheckbox ? {checked: value} : {}
     return (
       <Col xs={field.width || 6}>
-        <FormGroup>
-          <ControlLabel>
-            {this.messages(`${prefix}${field.name}`)}
-            {field.required ? ' *' : ''}
-          </ControlLabel>
-          <FormControl
-            value={value === null ? '' : value}
-            {...checkboxProps} // adds checkbox props if type is checkbox
-            {...fieldProps}
-            placeholder={isCheckbox || isSelect
-              ? undefined
-              : field.placeholder || this.messages(`${prefix}${field.name}Placeholder`)
-            }
-            name={field.name}
-            children={field.children
-              ? field.children.sort((a, b) => {
-                if (a.value < b.value) return -1
-                if (a.value > b.value) return 1
-                return 0
-              }).map((o, i) => (
-                <option key={i} {...o} />
-              ))
-              : undefined
-            }
-            onChange={this.props.onChange} />
-        </FormGroup>
+        {isCheckbox
+          ? this.renderCheckbox()
+          : this.renderLabelAndFormControl()
+        }
       </Col>
     )
   }
diff --git a/lib/common/util/json.js b/lib/common/util/json.js
@@ -1,5 +1,7 @@
 // @flow
 
+import { analyze } from 'jju'
+
 /**
  * Check if a string is valid JSON.
  */
@@ -11,3 +13,28 @@ export function isValidJSON (str: string): boolean {
   }
   return true
 }
+
+/**
+ * Check if a string is valid JSONC that OTP should be able to
+ * parse. OTP allows comments and unquoted keys, but not other
+ * fancy stuff. See OTP json parser here:
+ * https://github.com/opentripplanner/OpenTripPlanner/blob/27f4ed0a86157bdd4c4bc3004fec25687768d373/src/main/java/org/opentripplanner/standalone/OTPMain.java#L190-L194
+ */
+export function isValidJSONC (str: string): boolean {
+  try {
+    const result = analyze(str)
+    if (
+      // if JSON has quotes with single quotes, it is invalid
+      result.quote_types.indexOf("'") > -1 ||
+        // if JSON has a multi-line quote, it is invalid
+        result.has_multi_line_quote ||
+        // if JSON has trailing commas, it is invalid
+        result.has_trailing_comma
+    ) {
+      return false
+    }
+    return true
+  } catch (e) {
+    return false
+  }
+}
diff --git a/lib/manager/components/CollapsiblePanel.js b/lib/manager/components/CollapsiblePanel.js
@@ -23,6 +23,7 @@ type Props = {
   onRemove?: number => void,
   onSave?: number => any,
   saveDisabled: boolean,
+  showButtonsOnBottom?: boolean,
   testId: string,
   title: Element<*> | string
 }
@@ -39,8 +40,40 @@ export default class CollapsiblePanel extends Component<Props> {
 
   _onSave = () => this.props.onSave && this.props.onSave(this.props.index)
 
+  renderButtonToolbar = () => {
+    const {onSave, saveDisabled} = this.props
+    return (
+      <ButtonToolbar className='pull-right'>
+        {/* Only render save button is onSave prop is defined */}
+        {typeof onSave === 'function' &&
+          <Button
+            bsSize='small'
+            bsStyle='primary'
+            data-test-id='save-item-button'
+            disabled={saveDisabled}
+            onClick={this._onSave}>
+            <Icon type='floppy-o' /> Save
+          </Button>
+        }
+        <Button
+          bsSize='small'
+          bsStyle='danger'
+          onClick={this._onRemove}>
+          <Icon type='trash-o' /> Delete
+        </Button>
+      </ButtonToolbar>
+    )
+  }
+
   render () {
-    const {data, defaultExpanded, fields, saveDisabled, testId, title} = this.props
+    const {
+      data,
+      defaultExpanded,
+      fields,
+      showButtonsOnBottom,
+      testId,
+      title
+    } = this.props
     return (
       <Panel
         collapsible
@@ -49,25 +82,7 @@ export default class CollapsiblePanel extends Component<Props> {
         header={<h5 style={{width: '100%', cursor: 'pointer'}}>{title}</h5>}
       >
         <Form>
-          <ButtonToolbar className='pull-right'>
-            {/* Only render save button is onSave prop is defined */}
-            {typeof this.props.onSave === 'function' &&
-              <Button
-                bsSize='small'
-                bsStyle='primary'
-                data-test-id='save-item-button'
-                disabled={saveDisabled}
-                onClick={this._onSave}>
-                <Icon type='floppy-o' /> Save
-              </Button>
-            }
-            <Button
-              bsSize='small'
-              bsStyle='danger'
-              onClick={this._onRemove}>
-              <Icon type='trash-o' /> Delete
-            </Button>
-          </ButtonToolbar>
+          {this.renderButtonToolbar()}
           {fields.map((f, i) =>
             <FormInput
               key={i}
@@ -77,6 +92,11 @@ export default class CollapsiblePanel extends Component<Props> {
           )}
           {/* Additional (usually more complex) fields can go here. */}
           {this.props.children}
+          {showButtonsOnBottom && (
+            <div style={{clear: 'both'}}>
+              {this.renderButtonToolbar()}
+            </div>
+          )}
         </Form>
       </Panel>
     )
diff --git a/lib/manager/components/CurrentDeploymentPanel.js b/lib/manager/components/CurrentDeploymentPanel.js
@@ -70,6 +70,10 @@ export default class CurrentDeploymentPanel extends Component<Props> {
     this.props.downloadBuildArtifact(this.props.deployment)
   }
 
+  _onClickDownloadReport = () => {
+    this.props.downloadBuildArtifact(this.props.deployment, 'graph-build-report.zip')
+  }
+
   _onClickDownloadGraph = () => {
     this.props.downloadBuildArtifact(this.props.deployment, 'Graph.obj')
   }
@@ -118,6 +122,7 @@ export default class CurrentDeploymentPanel extends Component<Props> {
               <ButtonToolbar>
                 <Button bsSize='xsmall' onClick={this._onClickDownloadGraph}><Icon type='ellipsis-h' /> Graph.obj</Button>
                 <Button bsSize='xsmall' onClick={this._onClickDownloadLogs}><Icon type='file-text-o' /> Build log</Button>
+                <Button bsSize='xsmall' onClick={this._onClickDownloadReport}><Icon type='file-zip-o' /> Graph build report</Button>
                 <Button bsSize='xsmall' onClick={this._onClickDownloadBundle}><Icon type='file-zip-o' /> Bundle</Button>
               </ButtonToolbar>
               <div style={{ margin: '20px 0' }}>
diff --git a/lib/manager/components/DeploymentViewer.js b/lib/manager/components/DeploymentViewer.js
@@ -32,7 +32,7 @@ import EditableTextField from '../../common/components/EditableTextField'
 import WatchButton from '../../common/containers/WatchButton'
 import {getComponentMessages, getConfigProperty} from '../../common/util/config'
 import {formatTimestamp, fromNow} from '../../common/util/date-time'
-import {isValidJSON} from '../../common/util/json'
+import {isValidJSONC} from '../../common/util/json'
 import {defaultTileURL} from '../../common/util/maps'
 import { versionsSorter } from '../../common/util/util'
 import {getServerDeployedTo} from '../util/deployment'
@@ -479,7 +479,7 @@ class CustomConfig extends Component<{
   _onSaveConfig = () => {
     const {deployment, name, updateDeployment} = this.props
     const value = this.state[name]
-    if (!isValidJSON(value)) return window.alert('Must provide valid JSON string.')
+    if (!isValidJSONC(value)) return window.alert('Must provide valid JSON string.')
     else {
       updateDeployment(deployment, {[name]: value})
       this.setState({[name]: undefined})
@@ -490,7 +490,7 @@ class CustomConfig extends Component<{
     const {deployment, name, label} = this.props
     const useCustom = deployment[name] !== null
     const value = this.state[name] || deployment[name]
-    const validJSON = isValidJSON(value)
+    const validJSON = isValidJSONC(value)
     return (
       <div>
         <h5>{label} configuration</h5>
diff --git a/lib/manager/util/deployment.js b/lib/manager/util/deployment.js
diff --git a/package.json b/package.json
diff --git a/yarn.lock b/yarn.lock
