From 26296ef4612cabbf341c5a8b6e19ff3f60b84668 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Wed, 22 Mar 2017 17:15:45 -0700
Subject: [PATCH] Remove replication factor for OSS and simplify rf formatting

---
 ui/src/admin/components/DatabaseManager.js    |  4 +++
 ui/src/admin/components/DatabaseRow.js        | 32 +++++++++++--------
 ui/src/admin/components/DatabaseTable.js      |  7 +++-
 .../admin/containers/DatabaseManagerPage.js   |  3 +-
 ui/src/utils/formatting.js                    | 10 ++++++
 5 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/ui/src/admin/components/DatabaseManager.js b/ui/src/admin/components/DatabaseManager.js
index 5568de6a93..b9053052ce 100644
--- a/ui/src/admin/components/DatabaseManager.js
+++ b/ui/src/admin/components/DatabaseManager.js
@@ -4,6 +4,7 @@ import DatabaseTable from 'src/admin/components/DatabaseTable'
 const DatabaseManager = ({
   databases,
   notify,
+  isRFDisplayed,
   addDatabase,
   onEditDatabase,
   onKeyDownDatabase,
@@ -31,6 +32,7 @@ const DatabaseManager = ({
               key={db.links.self}
               database={db}
               notify={notify}
+              isRFDisplayed={isRFDisplayed}
               onEditDatabase={onEditDatabase}
               onKeyDownDatabase={onKeyDownDatabase}
               onCancelDatabase={onCancelDatabase}
@@ -53,6 +55,7 @@ const DatabaseManager = ({
 
 const {
   arrayOf,
+  bool,
   func,
   shape,
 } = PropTypes
@@ -61,6 +64,7 @@ DatabaseManager.propTypes = {
   databases: arrayOf(shape()),
   notify: func,
   addDatabase: func,
+  isRFDisplayed: bool,
   onEditDatabase: func,
   onKeyDownDatabase: func,
   onCancelDatabase: func,
diff --git a/ui/src/admin/components/DatabaseRow.js b/ui/src/admin/components/DatabaseRow.js
index e18ee85920..777e62414c 100644
--- a/ui/src/admin/components/DatabaseRow.js
+++ b/ui/src/admin/components/DatabaseRow.js
@@ -1,5 +1,5 @@
 import React, {PropTypes, Component} from 'react'
-import {formatRPDuration} from 'utils/formatting'
+import {formatInfiniteDuration} from 'utils/formatting'
 import YesNoButtons from 'src/shared/components/YesNoButtons'
 import onClickOutside from 'react-onclickoutside'
 
@@ -30,8 +30,11 @@ class DatabaseRow extends Component {
       retentionPolicy: {name, duration, replication, isDefault, isNew},
       retentionPolicy,
       database,
+      isRFDisplayed,
     } = this.props
 
+    const formattedDuration = formatInfiniteDuration(duration)
+
     if (this.state.isEditing) {
       return (
         <tr>
@@ -55,27 +58,27 @@ class DatabaseRow extends Component {
                 className="form-control"
                 name="name"
                 type="text"
-                defaultValue={duration}
+                defaultValue={formattedDuration}
                 placeholder="how long should data last"
                 onKeyDown={(e) => this.handleKeyDown(e, database)}
                 ref={(r) => this.duration = r}
               />
             </div>
           </td>
-          <td>
+          <td style={isRFDisplayed ? {} : {display: 'none'}}>
             <div className="admin-table--edit-cell">
               <input
                 className="form-control"
                 name="name"
                 type="number"
                 min="1"
-                defaultValue={replication || 1}
+                defaultValue={replication}
                 placeholder="how many nodes do you have"
                 onKeyDown={(e) => this.handleKeyDown(e, database)}
                 ref={(r) => this.replication = r}
               />
             </div>
-         </td>
+          </td>
           <td className="text-right">
             <YesNoButtons
               onConfirm={isNew ? this.handleCreate : this.handleUpdate}
@@ -88,12 +91,9 @@ class DatabaseRow extends Component {
 
     return (
       <tr>
-        <td onClick={this.handleStartEdit}>
-          {name}
-          {isDefault ? <span className="default-source-label">default</span> : null}
-        </td>
-        <td onClick={this.handleStartEdit}>{formatRPDuration(duration)}</td>
-        <td onClick={this.handleStartEdit}>{replication}</td>
+        <td onClick={this.handleStartEdit}> {name} {isDefault ? <span className="default-source-label">default</span> : null}</td>
+        <td onClick={this.handleStartEdit}>{formattedDuration}</td>
+        {isRFDisplayed ? <td onClick={this.handleStartEdit}>{replication}</td> : null}
         <td className="text-right">
           <button className="btn btn-xs btn-danger admin-table--delete">
             {`Delete ${name}`}
@@ -163,14 +163,19 @@ class DatabaseRow extends Component {
 
   getInputValues() {
     const name = this.name.value.trim()
-    const duration = this.duration.value.trim()
+    let duration = this.duration.value.trim()
     const replication = +this.replication.value.trim()
+    const {notify} = this.props
 
     if (!name || !duration || !replication) {
-      this.props.notify('error', 'Fields cannot be empty')
+      notify('error', 'Fields cannot be empty')
       return
     }
 
+    if (duration === '∞') {
+      duration = 'INF'
+    }
+
     return {
       name,
       duration,
@@ -201,6 +206,7 @@ DatabaseRow.propTypes = {
   onCreate: func,
   onUpdate: func,
   notify: func,
+  isRFDisplayed: bool,
 }
 
 export default onClickOutside(DatabaseRow)
diff --git a/ui/src/admin/components/DatabaseTable.js b/ui/src/admin/components/DatabaseTable.js
index ddebd33a2f..6ea510fcb9 100644
--- a/ui/src/admin/components/DatabaseTable.js
+++ b/ui/src/admin/components/DatabaseTable.js
@@ -5,11 +5,13 @@ import ConfirmButtons from 'src/admin/components/ConfirmButtons'
 const {
   func,
   shape,
+  bool,
 } = PropTypes
 
 const DatabaseTable = ({
   database,
   notify,
+  isRFDisplayed,
   onEditDatabase,
   onKeyDownDatabase,
   onCancelDatabase,
@@ -39,7 +41,7 @@ const DatabaseTable = ({
             <tr>
               <th>Retention Policy</th>
               <th>Duration</th>
-              <th>Replication Factor</th>
+              {isRFDisplayed ? <th>Replication Factor</th> : null}
               <th></th>
             </tr>
           </thead>
@@ -55,6 +57,7 @@ const DatabaseTable = ({
                     onCreate={onCreateRetentionPolicy}
                     onUpdate={onUpdateRetentionPolicy}
                     onRemove={onRemoveRetentionPolicy}
+                    isRFDisplayed={isRFDisplayed}
                   />
                 )
               })
@@ -70,6 +73,7 @@ DatabaseTable.propTypes = {
   onEditDatabase: func,
   database: shape(),
   notify: func,
+  isRFDisplayed: bool,
   onKeyDownDatabase: func,
   onCancelDatabase: func,
   onConfirmDatabase: func,
@@ -207,6 +211,7 @@ EditHeader.propTypes = {
   onKeyDown: func,
   onCancel: func,
   onConfirm: func,
+  isRFDisplayed: bool,
 }
 
 export default DatabaseTable
diff --git a/ui/src/admin/containers/DatabaseManagerPage.js b/ui/src/admin/containers/DatabaseManagerPage.js
index f49a56a666..1104368ed1 100644
--- a/ui/src/admin/containers/DatabaseManagerPage.js
+++ b/ui/src/admin/containers/DatabaseManagerPage.js
@@ -21,12 +21,13 @@ class DatabaseManagerPage extends Component {
   }
 
   render() {
-    const {databases, actions, notify} = this.props
+    const {source, databases, actions, notify} = this.props
 
     return (
       <DatabaseManager
         databases={databases}
         notify={notify}
+        isRFDisplayed={!!source.metaUrl}
         onKeyDownDatabase={this.handleKeyDownDatabase}
         onDatabaseDeleteConfirm={this.handleDatabaseDeleteConfirm}
         addDatabase={actions.addDatabase}
diff --git a/ui/src/utils/formatting.js b/ui/src/utils/formatting.js
index c089998981..a70bd585dd 100644
--- a/ui/src/utils/formatting.js
+++ b/ui/src/utils/formatting.js
@@ -15,6 +15,8 @@ export const formatBytes = (bytes) => {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
 
+// Using InfluxDB 1.2+ we should no longer need this formatter.
+// Times can now be submitted using multiple units i.e. 1d2h3m
 export const formatRPDuration = (duration) => {
   if (duration === '0' || duration === '0s') {
     return '∞';
@@ -38,3 +40,11 @@ export const formatRPDuration = (duration) => {
 
   return adjustedTime;
 }
+
+export const formatInfiniteDuration = (duration) => {
+  if (duration === '0' || duration === '0s' || duration === 'INF') {
+    return '∞';
+  }
+
+  return duration
+}