Merge pull request #7 from sillydong/master

Fix NavDropdown and Add Username/Password support

src/components/Main.js

@@ -285,7 +285,7 @@ class Main extends Component {
   _onQuerySubmit= (e) => {
     e.preventDefault();
 
-    InfluxAPI.getQueryResults(this.state.server.url, this.state.database, this.state.queryText);
+    InfluxAPI.getQueryResults(this.state.server.url,this.state.server.username, this.state.server.password, this.state.database, this.state.queryText);
   }
 
   //  Data changed:
@@ -307,4 +307,4 @@ class Main extends Component {
   };
 }
 
-export default Main;
+export default Main;

src/components/NavBar.js

@@ -7,7 +7,7 @@ import {
   Nav,
   NavItem,
   NavLink,
-  NavDropdown,
+  Dropdown,
   DropdownToggle,
   DropdownItem,
   DropdownMenu,
@@ -114,7 +114,7 @@ class NavServerList extends Component {
     let currentServer = this.props.currentserver.name;
 
     return (
-      <NavDropdown isOpen={this.state.serverdropdownisOpen} toggle={this.serverdropdowntoggle}>
+      <Dropdown isOpen={this.state.serverdropdownisOpen} toggle={this.serverdropdowntoggle}>
         <DropdownToggle nav caret>
           Server: {currentServer}
         </DropdownToggle>
@@ -123,7 +123,7 @@ class NavServerList extends Component {
               return <DropdownItem key={index} onClick={this.itemclick}>{server.name}</DropdownItem>;
           }, this)}
         </DropdownMenu>
-      </NavDropdown>
+      </Dropdown>
     );
   }
 
@@ -165,7 +165,7 @@ class NavDatabaseList extends Component {
       let currentDatabase = this.props.currentdatabase;
 
       return (
-        <NavDropdown isOpen={this.state.databasedropdownisOpen} toggle={this.dbdropdowntoggle}>
+        <Dropdown isOpen={this.state.databasedropdownisOpen} toggle={this.dbdropdowntoggle}>
           <DropdownToggle nav caret>
             Database: {currentDatabase}
           </DropdownToggle>
@@ -174,7 +174,7 @@ class NavDatabaseList extends Component {
                 return <DropdownItem key={index} onClick={this.itemclick}>{database}</DropdownItem>;
             }, this)}
           </DropdownMenu>
-        </NavDropdown>
+        </Dropdown>
       );
     }
 

src/components/Settings.js

@@ -55,12 +55,14 @@ class Settings extends Component {
                       <tr>
                         <th>Name</th>
                         <th>Url</th>
+                        <th>Username</th>
+                        <th>Password</th>
                         <th>Actions</th>
                       </tr>
                     </thead>
                     <tbody>
                       {this.state.Servers.map(function(server, index) {
-                          return <tr key={index}><td>{server.name}</td><td>{server.url}</td><td><DeleteButton name={server.name} onDelete={this._onRemoveServerClick} /></td></tr>;
+                          return <tr key={index}><td>{server.name}</td><td>{server.url}</td><td>{server.username}</td><td>{server.password && "*"}</td><td><DeleteButton name={server.name} onDelete={this._onRemoveServerClick} /></td></tr>;
                       }, this)}
                     </tbody>
                   </table>
@@ -78,6 +80,16 @@ class Settings extends Component {
                         <input type="url" className="form-control" id="txtAddUrl" value={this.state.AddServerUrl} onChange={this._onAddServerUrlChange} placeholder="http://dev.server:8086" required/>
                       </div>
 
+                      <div className="col">
+                        <label className="sr-only" htmlFor="txtAddUsername">Username</label>
+                        <input type="text" className="form-control" id="txtAddUsername" value={this.state.AddServerUsername} onChange={this._onAddServerUsernameChange} placeholder="username" autoComplete="off"/>
+                      </div>
+
+                      <div className="col">
+                        <label className="sr-only" htmlFor="txtAddPassword">Password</label>
+                        <input type="password" className="form-control" id="txtAddPassword" value={this.state.AddServerPassword} onChange={this._onAddServerPasswordChange} placeholder="password" autoComplete="off"/>
+                      </div>
+
                       <div className="col">
                         <button type="submit" className="btn btn-secondary">Add</button>
                       </div>
@@ -107,6 +119,18 @@ class Settings extends Component {
     });
   }
 
+  _onAddServerUsernameChange = (e) => {
+    this.setState({
+      AddServerUsername: e.target.value
+    });
+  }
+
+  _onAddServerPasswordChange = (e) => {
+    this.setState({
+      AddServerPassword: e.target.value
+    });
+  }
+
   _onAddServerClick = (e) => {
     e.preventDefault();
 
@@ -126,22 +150,24 @@ class Settings extends Component {
 
     //  Add the server
     console.log("Adding server..." + this.state.AddServerName);
-    SettingsAPI.addServer(this.state.AddServerName, serverUrl);
+    SettingsAPI.addServer(this.state.AddServerName, serverUrl, this.state.AddServerUsername, this.state.AddServerPassword);
 
     //  If we have a current server:
     if(SettingsStore.haveCurrentServer()){
       //  Get the current server:
       let currentServer = SettingsStore.getCurrentServer();
 
       //  Reset the database list:
-      InfluxAPI.getDatabaseList(currentServer.url);
+      InfluxAPI.getDatabaseList(currentServer.url, currentServer.username, currentServer.password);
     }
 
     //  Clear the add server fields:
     this.setState(
       {
         AddServerName: "",
-        AddServerUrl: ""
+        AddServerUrl: "",
+        AddServerUsername: "",
+        AddServerPassword: "",
       }
     );
 

src/utils/InfluxAPI.js

@@ -5,7 +5,7 @@ import SettingsActions from '../actions/SettingsActions';
 class InfluxAPI {
 
         // Executes a query and gets the results
-        getQueryResults(serverurl, database, query){
+        getQueryResults(serverurl,username, password, database, query){
 
             if(serverurl === "" || database === "")
             {
@@ -16,8 +16,14 @@ class InfluxAPI {
             //  Set the request
             QueryActions.receiveQueryRequest(query, serverurl, database);
 
+            // build auth query params
+            let auth = ""
+            if (username !== undefined && username !== "" && password !== undefined && username !== "") {
+                auth = "&u=" + username + "&p=" + password
+            }
+
             //  Encode and Interpolate the values
-            let url = `${serverurl}/query?q=${encodeURIComponent(query)}&db=${database}`;
+            let url = `${serverurl}/query?q=${encodeURIComponent(query)}`+auth+`&db=${database}`;
             url = url.replace(/%20/g, "+");
 
             fetch(url, 
@@ -40,16 +46,22 @@ class InfluxAPI {
         }
 
         //  Gets the list of databases for the given server
-        getDatabaseList(serverurl) {
+        getDatabaseList(serverurl, username, password) {
 
             if(!serverurl)
             {
                 console.log("Can't execute query: server is blank"); 
                 return; 
             }
+
+            // build auth query params
+            let auth = ""
+            if(username !== undefined && password !== undefined){
+                auth = "&u="+username+"&p="+password
+            }
 
             //  Encode and Interpolate the values
-            let url = `${serverurl}/query?q=SHOW+DATABASES&db=`;
+            let url = `${serverurl}/query?q=SHOW+DATABASES`+auth+`&db=`;
             url = url.replace(/%20/g, "+");
 
             fetch(url, 
@@ -75,4 +87,4 @@ class InfluxAPI {
 
     }
 
-    export default new InfluxAPI();
+    export default new InfluxAPI();

src/utils/SettingsAPI.js

@@ -19,7 +19,7 @@ class SettingsAPI {
         }
 
         //  Adds a server to the list
-        addServer(name, url) {
+        addServer(name, url, username, password) {
             //  First, get the current list of servers
             let servers = store.get('servers') || [];
 
@@ -29,6 +29,8 @@ class SettingsAPI {
                 let newServer = {};
                 newServer.name = name;
                 newServer.url = url;
+                newServer.username = username;
+                newServer.password = password;
                 servers.push(newServer);
             }
 
@@ -72,4 +74,4 @@ class SettingsAPI {
 
     }
 
-    export default new SettingsAPI();
+    export default new SettingsAPI();