WIP edit ifql service

ui/src/ifql/components/IFQLHeader.tsx

@@ -0,0 +1,65 @@
+import React, {PureComponent} from 'react'
+import {connect} from 'react-redux'
+
+import IFQLOverlay from 'src/ifql/components/IFQLOverlay'
+import {OverlayContext} from 'src/shared/components/OverlayTechnology'
+import {
+  showOverlay as showOverlayAction,
+  ShowOverlay,
+} from 'src/shared/actions/overlayTechnology'
+
+import {Service} from 'src/types'
+
+interface Props {
+  showOverlay: ShowOverlay
+  service: Service
+  onGetTimeSeries: () => void
+}
+
+class IFQLHeader extends PureComponent<Props> {
+  public render() {
+    const {onGetTimeSeries, service} = this.props
+
+    return (
+      <div className="page-header full-width">
+        <div className="page-header__container">
+          <div className="page-header__left">
+            <h1 className="page-header__title">Time Machine</h1>
+          </div>
+          <div className="page-header__right">
+            <a onClick={this.overlay} href="#" />
+            <button
+              className="btn btn-sm btn-primary"
+              onClick={onGetTimeSeries}
+            >
+              Get Data!
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  private overlay() {
+    const {showOverlay, service} = this.props
+
+    showOverlay(
+      <OverlayContext.Consumer>
+        {({onDismissOverlay}) => (
+          <IFQLOverlay
+            mode="edit"
+            service={service}
+            onDismiss={onDismissOverlay}
+          />
+        )}
+      </OverlayContext.Consumer>,
+      {}
+    )
+  }
+}
+
+const mdtp = {
+  showOverlay: showOverlayAction,
+}
+
+export default connect(null, mdtp)(IFQLHeader)

ui/src/ifql/components/IFQLOverlay.tsx

@@ -3,20 +3,30 @@ import {connect} from 'react-redux'
 
 import IFQLForm from 'src/ifql/components/IFQLForm'
 
-import {Source, NewService, Notification} from 'src/types'
+import {Service, Source, NewService, Notification} from 'src/types'
 
 import {notify as notifyAction} from 'src/shared/actions/notifications'
 import {
+  updateServiceAsync,
+  UpdateServiceAsync,
   createServiceAsync,
   CreateServiceAsync,
 } from 'src/shared/actions/services'
-import {ifqlCreated, ifqlNotCreated} from 'src/shared/copy/notifications'
+
+import {
+  ifqlCreated,
+  ifqlNotCreated,
+  ifqlNotUpdated,
+} from 'src/shared/copy/notifications'
 
 interface Props {
-  source: Source
+  mode: string
+  source?: Source
+  service?: Service
   onDismiss: () => void
   notify: (message: Notification) => void
   createService: CreateServiceAsync
+  updateService: UpdateServiceAsync
 }
 
 interface State {
@@ -44,7 +54,11 @@ class IFQLOverlay extends PureComponent<Props, State> {
     )
   }
 
-  private get defaultService(): NewService {
+  private get defaultService(): NewService | Service {
+    if (this.props.mode === 'edit') {
+      return this.props.service
+    }
+
     return {
       name: 'IFQL',
       url: this.url,
@@ -62,8 +76,32 @@ class IFQLOverlay extends PureComponent<Props, State> {
     this.setState({service: {...this.state.service, ...update}})
   }
 
-  private handleSubmit = async e => {
+  private handleSubmit = (e): void => {
     e.preventDefault()
+    if (this.props.mode === 'edit') {
+      this.handleEdit()
+      return
+    }
+
+    this.handleCreate()
+  }
+
+  private handleEdit = async (): Promise<void> => {
+    const {notify, onDismiss, updateService} = this.props
+    const {service} = this.state
+
+    try {
+      await updateService(service)
+    } catch (error) {
+      notify(ifqlNotUpdated(error.message))
+      return
+    }
+
+    notify(ifqlCreated)
+    onDismiss()
+  }
+
+  private handleCreate = async (): Promise<void> => {
     const {notify, source, onDismiss, createService} = this.props
 
     const {service} = this.state
@@ -90,6 +128,7 @@ class IFQLOverlay extends PureComponent<Props, State> {
 const mdtp = {
   notify: notifyAction,
   createService: createServiceAsync,
+  updateService: updateServiceAsync,
 }
 
 export default connect(null, mdtp)(IFQLOverlay)

ui/src/ifql/containers/CheckServices.tsx

@@ -50,7 +50,11 @@ export class CheckServices extends PureComponent<Props & WithRouterProps> {
     showOverlay(
       <OverlayContext.Consumer>
         {({onDismissOverlay}) => (
-          <IFQLOverlay onDismiss={onDismissOverlay} source={source} />
+          <IFQLOverlay
+            mode="new"
+            source={source}
+            onDismiss={onDismissOverlay}
+          />
         )}
       </OverlayContext.Consumer>,
       {}

ui/src/ifql/containers/IFQLPage.tsx

@@ -2,9 +2,10 @@ import React, {PureComponent} from 'react'
 import {connect} from 'react-redux'
 import _ from 'lodash'
 
-import {ErrorHandling} from 'src/shared/decorators/errors'
 import CheckServices from 'src/ifql/containers/CheckServices'
 import TimeMachine from 'src/ifql/components/TimeMachine'
+import IFQLHeader from 'src/ifql/components/IFQLHeader'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 import KeyboardShortcuts from 'src/shared/components/KeyboardShortcuts'
 
 import {notify as notifyAction} from 'src/shared/actions/notifications'
@@ -91,21 +92,10 @@ export class IFQLPage extends PureComponent<Props, State> {
         <IFQLContext.Provider value={this.handlers}>
           <KeyboardShortcuts onControlEnter={this.getTimeSeries}>
             <div className="page hosts-list-page">
-              <div className="page-header full-width">
-                <div className="page-header__container">
-                  <div className="page-header__left">
-                    <h1 className="page-header__title">Time Machine</h1>
-                  </div>
-                  <div className="page-header__right">
-                    <button
-                      className="btn btn-sm btn-primary"
-                      onClick={this.getTimeSeries}
-                    >
-                      Get Data!
-                    </button>
-                  </div>
-                </div>
-              </div>
+              <IFQLHeader
+                service={this.service}
+                onGetTimeSeries={this.getTimeSeries}
+              />
               <TimeMachine
                 data={data}
                 body={body}
@@ -125,6 +115,10 @@ export class IFQLPage extends PureComponent<Props, State> {
     )
   }
 
+  private get service(): Service {
+    return this.props.services[0]
+  }
+
   private get handlers(): Handlers {
     return {
       onAddNode: this.handleAddNode,

ui/src/shared/actions/services.ts

@@ -1,5 +1,6 @@
 import {Source, Service, NewService} from 'src/types'
 import {
+  updateService as updateServiceAJAX,
   getServices as getServicesAJAX,
   createService as createServiceAJAX,
 } from 'src/shared/apis'
@@ -130,3 +131,18 @@ export const createServiceAsync = (
     throw err.data
   }
 }
+
+export type UpdateServiceAsync = (
+  service: Service
+) => (dispatch) => Promise<void>
+export const updateServiceAsync = (service: Service) => async (
+  dispatch
+): Promise<void> => {
+  try {
+    const s = await updateServiceAJAX(service)
+    dispatch(updateService(s))
+  } catch (err) {
+    console.error(err.data)
+    throw err.data
+  }
+}

ui/src/shared/apis/index.ts

@@ -342,3 +342,18 @@ export const createService = async (
     throw error
   }
 }
+
+export const updateService = async (service: Service): Promise<Service> => {
+  try {
+    const {data} = await AJAX({
+      url: service.links.self,
+      method: 'PATCH',
+      data: service,
+    })
+
+    return data
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}

ui/src/shared/copy/notifications.ts

@@ -630,3 +630,8 @@ export const ifqlNotCreated = (message: string) => ({
   ...defaultErrorNotification,
   message,
 })
+
+export const ifqlNotUpdated = (message: string) => ({
+  ...defaultErrorNotification,
+  message,
+})