From fbafc81c1f42ea44a2f77881f06a7b8aba60d04b Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Fri, 18 May 2018 17:06:02 -0700 Subject: [PATCH] WIP edit ifql service --- ui/src/ifql/components/IFQLHeader.tsx | 65 ++++++++++++++++++++++++ ui/src/ifql/components/IFQLOverlay.tsx | 49 ++++++++++++++++-- ui/src/ifql/containers/CheckServices.tsx | 6 ++- ui/src/ifql/containers/IFQLPage.tsx | 26 ++++------ ui/src/shared/actions/services.ts | 16 ++++++ ui/src/shared/apis/index.ts | 15 ++++++ ui/src/shared/copy/notifications.ts | 5 ++ 7 files changed, 160 insertions(+), 22 deletions(-) create mode 100644 ui/src/ifql/components/IFQLHeader.tsx diff --git a/ui/src/ifql/components/IFQLHeader.tsx b/ui/src/ifql/components/IFQLHeader.tsx new file mode 100644 index 0000000000..33310ce980 --- /dev/null +++ b/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 { + public render() { + const {onGetTimeSeries, service} = this.props + + return ( +
+
+
+

Time Machine

+
+
+ + +
+
+
+ ) + } + + private overlay() { + const {showOverlay, service} = this.props + + showOverlay( + + {({onDismissOverlay}) => ( + + )} + , + {} + ) + } +} + +const mdtp = { + showOverlay: showOverlayAction, +} + +export default connect(null, mdtp)(IFQLHeader) diff --git a/ui/src/ifql/components/IFQLOverlay.tsx b/ui/src/ifql/components/IFQLOverlay.tsx index 6c35875749..ec65fe8751 100644 --- a/ui/src/ifql/components/IFQLOverlay.tsx +++ b/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 { ) } - 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 { 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 => { + 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 => { const {notify, source, onDismiss, createService} = this.props const {service} = this.state @@ -90,6 +128,7 @@ class IFQLOverlay extends PureComponent { const mdtp = { notify: notifyAction, createService: createServiceAsync, + updateService: updateServiceAsync, } export default connect(null, mdtp)(IFQLOverlay) diff --git a/ui/src/ifql/containers/CheckServices.tsx b/ui/src/ifql/containers/CheckServices.tsx index d452a25637..e7951749ce 100644 --- a/ui/src/ifql/containers/CheckServices.tsx +++ b/ui/src/ifql/containers/CheckServices.tsx @@ -50,7 +50,11 @@ export class CheckServices extends PureComponent { showOverlay( {({onDismissOverlay}) => ( - + )} , {} diff --git a/ui/src/ifql/containers/IFQLPage.tsx b/ui/src/ifql/containers/IFQLPage.tsx index 07a6170d7e..d63c38c221 100644 --- a/ui/src/ifql/containers/IFQLPage.tsx +++ b/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 {
-
-
-
-

Time Machine

-
-
- -
-
-
+ { ) } + private get service(): Service { + return this.props.services[0] + } + private get handlers(): Handlers { return { onAddNode: this.handleAddNode, diff --git a/ui/src/shared/actions/services.ts b/ui/src/shared/actions/services.ts index 1c56e22f02..847d29e1b2 100644 --- a/ui/src/shared/actions/services.ts +++ b/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 +export const updateServiceAsync = (service: Service) => async ( + dispatch +): Promise => { + try { + const s = await updateServiceAJAX(service) + dispatch(updateService(s)) + } catch (err) { + console.error(err.data) + throw err.data + } +} diff --git a/ui/src/shared/apis/index.ts b/ui/src/shared/apis/index.ts index d81f9fd7a0..58434bf4df 100644 --- a/ui/src/shared/apis/index.ts +++ b/ui/src/shared/apis/index.ts @@ -342,3 +342,18 @@ export const createService = async ( throw error } } + +export const updateService = async (service: Service): Promise => { + try { + const {data} = await AJAX({ + url: service.links.self, + method: 'PATCH', + data: service, + }) + + return data + } catch (error) { + console.error(error) + throw error + } +} diff --git a/ui/src/shared/copy/notifications.ts b/ui/src/shared/copy/notifications.ts index 0f7091e065..5b1f764222 100644 --- a/ui/src/shared/copy/notifications.ts +++ b/ui/src/shared/copy/notifications.ts @@ -630,3 +630,8 @@ export const ifqlNotCreated = (message: string) => ({ ...defaultErrorNotification, message, }) + +export const ifqlNotUpdated = (message: string) => ({ + ...defaultErrorNotification, + message, +})