Add abiility to edit existing service

ui/src/ifql/components/IFQLForm.tsx

@@ -16,41 +16,33 @@ class IFQLForm extends PureComponent<Props> {
     const {service, onSubmit, onInputChange} = this.props
 
     return (
-      <div className="ifql-overlay">
-        <div className="template-variable-manager--header">
-          <div className="page-header__left">
-            <h1 className="page-header__title">Connect to IFQL</h1>
+      <div className="template-variable-manager--body">
+        <form onSubmit={onSubmit} style={{display: 'inline-block'}}>
+          <Input
+            name="url"
+            label="IFQL URL"
+            value={this.url}
+            placeholder={this.url}
+            onChange={onInputChange}
+          />
+          <Input
+            name="name"
+            label="Name"
+            value={service.name}
+            placeholder={service.name}
+            onChange={onInputChange}
+            maxLength={33}
+          />
+          <div className="form-group form-group-submit col-xs-12 text-center">
+            <button
+              className="btn btn-success"
+              type="submit"
+              data-test="submit-button"
+            >
+              {this.buttonText}
+            </button>
           </div>
-          <div className="page-header__right" />
-        </div>
-        <div className="template-variable-manager--body">
-          <form onSubmit={onSubmit} style={{display: 'inline-block'}}>
-            <Input
-              name="url"
-              label="IFQL URL"
-              value={this.url}
-              placeholder={this.url}
-              onChange={onInputChange}
-            />
-            <Input
-              name="name"
-              label="Name"
-              value={service.name}
-              placeholder={service.name}
-              onChange={onInputChange}
-              maxLength={33}
-            />
-            <div className="form-group form-group-submit col-xs-12 text-center">
-              <button
-                className="btn btn-success"
-                type="submit"
-                data-test="submit-button"
-              >
-                {this.buttonText}
-              </button>
-            </div>
-          </form>
-        </div>
+        </form>
       </div>
     )
   }

ui/src/ifql/components/IFQLHeader.tsx

@@ -18,7 +18,7 @@ interface Props {
 
 class IFQLHeader extends PureComponent<Props> {
   public render() {
-    const {onGetTimeSeries, service} = this.props
+    const {onGetTimeSeries} = this.props
 
     return (
       <div className="page-header full-width">
@@ -27,7 +27,9 @@ class IFQLHeader extends PureComponent<Props> {
             <h1 className="page-header__title">Time Machine</h1>
           </div>
           <div className="page-header__right">
-            <a onClick={this.overlay} href="#" />
+            <button onClick={this.overlay} className="btn btn-sm btn-default">
+              Edit Connection
+            </button>
             <button
               className="btn btn-sm btn-primary"
               onClick={onGetTimeSeries}
@@ -40,7 +42,7 @@ class IFQLHeader extends PureComponent<Props> {
     )
   }
 
-  private overlay() {
+  private overlay = () => {
     const {showOverlay, service} = this.props
 
     showOverlay(

ui/src/ifql/components/IFQLOverlay.tsx

@@ -30,7 +30,7 @@ interface Props {
 }
 
 interface State {
-  service: NewService
+  service: Service
 }
 
 const port = 8093
@@ -45,16 +45,29 @@ class IFQLOverlay extends PureComponent<Props, State> {
 
   public render() {
     return (
-      <IFQLForm
-        service={this.state.service}
-        onSubmit={this.handleSubmit}
-        onInputChange={this.handleInputChange}
-        exists={false}
-      />
+      <div className="ifql-overlay">
+        <div className="template-variable-manager--header">
+          <div className="page-header__left">
+            <h1 className="page-header__title">Connect to IFQL</h1>
+          </div>
+          <div className="page-header__right">
+            <span
+              className="page-header__dismiss"
+              onClick={this.props.onDismiss}
+            />
+          </div>
+        </div>
+        <IFQLForm
+          service={this.state.service}
+          onSubmit={this.handleSubmit}
+          onInputChange={this.handleInputChange}
+          exists={false}
+        />
+      </div>
     )
   }
 
-  private get defaultService(): NewService | Service {
+  private get defaultService(): NewService {
     if (this.props.mode === 'edit') {
       return this.props.service
     }

ui/src/ifql/containers/IFQLPage.tsx

@@ -92,10 +92,7 @@ export class IFQLPage extends PureComponent<Props, State> {
         <IFQLContext.Provider value={this.handlers}>
           <KeyboardShortcuts onControlEnter={this.getTimeSeries}>
             <div className="page hosts-list-page">
-              <IFQLHeader
-                service={this.service}
-                onGetTimeSeries={this.getTimeSeries}
-              />
+              {this.header}
               <TimeMachine
                 data={data}
                 body={body}
@@ -115,6 +112,18 @@ export class IFQLPage extends PureComponent<Props, State> {
     )
   }
 
+  private get header(): JSX.Element {
+    const {services} = this.props
+
+    if (!services.length) {
+      return null
+    }
+
+    return (
+      <IFQLHeader service={this.service} onGetTimeSeries={this.getTimeSeries} />
+    )
+  }
+
   private get service(): Service {
     return this.props.services[0]
   }

ui/src/shared/copy/notifications.ts

@@ -635,3 +635,8 @@ export const ifqlNotUpdated = (message: string) => ({
   ...defaultErrorNotification,
   message,
 })
+
+export const ifqlUpdated = {
+  ...defaultSuccessNotification,
+  message: 'Connection Updated. Rejoice!',
+}

ui/src/types/services.ts

@@ -6,6 +6,11 @@ export interface NewService {
   password?: string
   active: boolean
   insecureSkipVerify: boolean
+  links?: {
+    source: string
+    self: string
+    proxy: string
+  }
 }
 
 export interface Service {