diff --git a/ui/package-lock.json b/ui/package-lock.json index 00ee5b583..61c947983 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -14116,11 +14116,6 @@ "lodash": "^4.17.15" } }, - "webpack-node-externals": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/webpack-node-externals/-/webpack-node-externals-2.5.2.tgz", - "integrity": "sha512-aHdl/y2N7PW2Sx7K+r3AxpJO+aDMcYzMQd60Qxefq3+EwhewSbTBqNumOsCE1JsCUNoyfGj5465N0sSf6hc/5w==" - }, "webpack-sources": { "version": "1.4.3", "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz", diff --git a/ui/src/features/components/SubmitBar/index.js b/ui/src/features/components/SubmitBar/index.js index 3c5becf1f..36a3f4113 100644 --- a/ui/src/features/components/SubmitBar/index.js +++ b/ui/src/features/components/SubmitBar/index.js @@ -1,14 +1,43 @@ import Button from "../../../components/Button"; import React from "react"; - -const SubmitBar = ({onSubmit, onCancel, loading, disabled}) => { - - return (
- {onCancel && } - -
); +const SubmitBar = ({ + onSubmit, + onCancel, + loading, + disabled, + onTest, + testDisabled, + showTestWebhookSuccessMsg, +}) => { + const buttonColor = showTestWebhookSuccessMsg && "green"; + const buttonIsInverted = !showTestWebhookSuccessMsg; + const buttonText = !showTestWebhookSuccessMsg ? "Test" : "Great, It Works!"; + return ( +
+ {onTest && ( + <> + + + )} + {onCancel && ( + + )} + +
+ ); }; export default SubmitBar; diff --git a/ui/src/features/components/WebhooksList/CollapsibleWebhook.js b/ui/src/features/components/WebhooksList/CollapsibleWebhook.js index a830ccf8f..1b97ca3c6 100644 --- a/ui/src/features/components/WebhooksList/CollapsibleWebhook.js +++ b/ui/src/features/components/WebhooksList/CollapsibleWebhook.js @@ -2,7 +2,7 @@ import React from 'react'; import CollapsibleItem from '../../../components/CollapsibleItem/CollapsibleItem'; import WebhookForm from './WebhookForm'; import { buildStateFromWebhook, createWebhookRequest } from './utils' -import { editWebhookSuccess, loading, webhookSuccess } from '../../redux/selectors/webhooksSelector'; +import { editWebhookSuccess, loading, webhookSuccess, testWebhookSuccess } from '../../redux/selectors/webhooksSelector'; import * as Actions from '../../redux/action'; import { connect } from 'react-redux'; import DeleteDialog from '../DeleteDialog'; @@ -34,6 +34,15 @@ export class CollapsibleWebhook extends React.Component { onChangeWebhook = (webhook) => { this.setState({ webhook }); }; + + hideTestWebhookSuccessMsg = () => { + this.props.setTestWebHookSuccess(false) + }; + + onTest = () => { + const { webhook } = this.state; + this.props.testWebhook(webhook.id); + }; onSubmit = () => { const { createMode } = this.props; @@ -57,6 +66,14 @@ export class CollapsibleWebhook extends React.Component { } } + toggleExpanded = () => { + const { createMode } = this.props; + if(!createMode) { + this.setState({ expanded: !this.state.expanded }) + this.hideTestWebhookSuccessMsg() + } + } + render () { const { expanded, showDeleteReportWarning, webhook } = this.state; const { createMode } = this.props; @@ -72,9 +89,7 @@ export class CollapsibleWebhook extends React.Component { return (
{ - !createMode && this.setState({ expanded: !this.state.expanded }) - }} + onClick={this.toggleExpanded} editable expanded={expanded} toggleable={!createMode} @@ -136,8 +151,10 @@ export class CollapsibleWebhook extends React.Component { }; generateBody = () => { + const { createMode, testWebHookSuccess } = this.props; + const showTestWebhookSuccessMsg = !createMode && testWebHookSuccess; return ( - ) } @@ -147,17 +164,20 @@ function mapStateToProps (state) { return { loading: loading(state), webhookSuccess: webhookSuccess(state), - editWebhookSuccess: editWebhookSuccess(state) + editWebhookSuccess: editWebhookSuccess(state), + testWebHookSuccess: testWebhookSuccess(state) } } const mapDispatchToProps = { createWebhook: Actions.createWebhook, getWebhooks: Actions.getWebhooks, + testWebhook: Actions.testWebhook, editWebhook: Actions.editWebhook, deleteWebhook: Actions.deleteWebHook, setWebhookSuccess: Actions.createWebHookSuccess, - setEditWebhookSuccess: Actions.editWebHookSuccess + setEditWebhookSuccess: Actions.editWebHookSuccess, + setTestWebHookSuccess: Actions.testWebHookSuccess, }; export default connect(mapStateToProps, mapDispatchToProps)(CollapsibleWebhook); diff --git a/ui/src/features/components/WebhooksList/WebhookForm.js b/ui/src/features/components/WebhooksList/WebhookForm.js index 6be56c97b..b48db2f0d 100644 --- a/ui/src/features/components/WebhooksList/WebhookForm.js +++ b/ui/src/features/components/WebhooksList/WebhookForm.js @@ -9,7 +9,7 @@ import UiSwitcher from "../../../components/UiSwitcher"; import SubmitBar from '../SubmitBar' import InfoToolTip from '../InfoToolTip'; -const WebhookForm = ({loading, onSubmit, onCancel, onChangeWebhook, webhook}) => { +const WebhookForm = ({loading, onSubmit, onCancel, onChangeWebhook, webhook, onTest, testDisabled, showTestWebhookSuccessMsg}) => { const onChangeProps = (props) => { const newWebhook = {...webhook, ...props}; @@ -78,7 +78,7 @@ const WebhookForm = ({loading, onSubmit, onCancel, onChangeWebhook, webhook}) =>
} /> - + ) diff --git a/ui/src/features/redux/action.js b/ui/src/features/redux/action.js index 96a4cd5cd..88e52ecbc 100644 --- a/ui/src/features/redux/action.js +++ b/ui/src/features/redux/action.js @@ -28,9 +28,11 @@ import { createWebHookSuccess, cleanErrors, editWebhook, + testWebhook, deleteWebHook, deleteWebHookSuccess, editWebHookSuccess, + testWebHookSuccess, } from './actions/webhooksActions'; import { clearStopJobSuccess, @@ -198,9 +200,11 @@ export { createWebHookSuccess, cleanErrors, editWebhook, + testWebhook, deleteWebHook, deleteWebHookSuccess, - editWebHookSuccess + editWebHookSuccess, + testWebHookSuccess }; //processors diff --git a/ui/src/features/redux/actions/webhooksActions.js b/ui/src/features/redux/actions/webhooksActions.js index cf5d6bcd3..85d8699f6 100644 --- a/ui/src/features/redux/actions/webhooksActions.js +++ b/ui/src/features/redux/actions/webhooksActions.js @@ -23,11 +23,18 @@ export const createWebHookFailure = (value) => ( export const editWebHookSuccess = (value) => ( {type: Types.EDIT_WEBHOOK_SUCCESS, value} ); +export const testWebHookSuccess = (value) => ( + {type: Types.TEST_WEBHOOK_SUCCESS, value} +); export const editWebHookFailure = (value) => ( {type: Types.EDIT_WEBHOOK_FAILURE, value} ); +export const testWebHookFailure = (value) => ( + {type: Types.TEST_WEBHOOK_FAILURE, value} +); + export const deleteWebHook = (id) => ( {type: Types.DELETE_WEBHOOK, id} ); @@ -55,3 +62,7 @@ export const cleanErrors = (value) => ( export const editWebhook = (body, id) => ( {type: Types.EDIT_WEBHOOK, body, id} ); + +export const testWebhook = (id) => ( + {type: Types.TEST_WEBHOOK, id} +); diff --git a/ui/src/features/redux/apis/webhooksApi.js b/ui/src/features/redux/apis/webhooksApi.js index a773c9c37..390d51897 100644 --- a/ui/src/features/redux/apis/webhooksApi.js +++ b/ui/src/features/redux/apis/webhooksApi.js @@ -8,6 +8,12 @@ export const getWebhooksApi = () => { }); }; +export const testWebhookApi = (id) => { + let url = `${env.PREDATOR_URL}/webhooks/${id}/test`; + return axios.post(url, { + headers: {} + }); +}; export const createWebhookApi = (body) => { let url = `${env.PREDATOR_URL}/webhooks`; diff --git a/ui/src/features/redux/reducers/webhooksReducer.js b/ui/src/features/redux/reducers/webhooksReducer.js index 5b1f69c5b..59290ca81 100644 --- a/ui/src/features/redux/reducers/webhooksReducer.js +++ b/ui/src/features/redux/reducers/webhooksReducer.js @@ -5,6 +5,7 @@ const initialState = Immutable.Map({ webhooks: [], create_webhook_success: false, edit_webhook_success: false, + test_webhook_success: false, webhook_error: undefined, get_webhooks_error: undefined, loading: false, @@ -18,6 +19,8 @@ export default function reduce(state = initialState, action = {}) { return state.set('delete_webhook_success', action.value); case Types.EDIT_WEBHOOK_SUCCESS: return state.set('edit_webhook_success', action.value); + case Types.TEST_WEBHOOK_SUCCESS: + return state.set('test_webhook_success', action.value); case Types.GET_WEBHOOKS_SUCCESS: return state.set('webhooks', action.value); case Types.LOADING: @@ -25,6 +28,7 @@ export default function reduce(state = initialState, action = {}) { case Types.GET_WEBHOOKS_FAILURE: case Types.CREATE_WEBHOOK_FAILUE: case Types.EDIT_WEBHOOK_FAILURE: + case Types.TEST_WEBHOOK_FAILURE: return state.set('webhook_error', action.value); case Types.CLEAN_ERRORS: return state.set('webhook_error', undefined); diff --git a/ui/src/features/redux/saga/webhooksSagas.js b/ui/src/features/redux/saga/webhooksSagas.js index 29636f1d5..e5012e3c4 100644 --- a/ui/src/features/redux/saga/webhooksSagas.js +++ b/ui/src/features/redux/saga/webhooksSagas.js @@ -1,7 +1,7 @@ import {put, takeLatest, call} from 'redux-saga/effects' import * as Actions from '../actions/webhooksActions' import * as Types from '../types/webhooks' -import {getWebhooksApi, createWebhookApi, editWebhookApi, deleteWebhookApi} from '../apis/webhooksApi' +import {getWebhooksApi, createWebhookApi, editWebhookApi, deleteWebhookApi, testWebhookApi} from '../apis/webhooksApi' export function* getWebhooks() { try { @@ -52,9 +52,22 @@ export function* deleteWebhook({id}) { yield put(Actions.setLoading(false)); } +export function* testWebhook({id}) { + try { + yield put(Actions.setLoading(true)); + const result = yield call(testWebhookApi, id); + yield put(Actions.testWebHookSuccess(true)); + } catch (e) { + yield put(Actions.testWebHookFailure(e)) + + } + yield put(Actions.setLoading(false)); +} + export function* webhooksRegister() { yield takeLatest(Types.GET_WEBHOOKS, getWebhooks); yield takeLatest(Types.CREATE_WEBHOOK, createWebhook); yield takeLatest(Types.EDIT_WEBHOOK, editWebhook); yield takeLatest(Types.DELETE_WEBHOOK, deleteWebhook); + yield takeLatest(Types.TEST_WEBHOOK, testWebhook); } diff --git a/ui/src/features/redux/selectors/webhooksSelector.js b/ui/src/features/redux/selectors/webhooksSelector.js index f6f4da940..e68171184 100644 --- a/ui/src/features/redux/selectors/webhooksSelector.js +++ b/ui/src/features/redux/selectors/webhooksSelector.js @@ -6,6 +6,7 @@ export const loading = (state) => state.WebhooksReducer.get('loading'); export const webhookSuccess = (state) => state.WebhooksReducer.get('create_webhook_success'); export const editWebhookSuccess = (state) => state.WebhooksReducer.get('edit_webhook_success'); export const deleteWebhookSuccess = (state) => state.WebhooksReducer.get('delete_webhook_success'); +export const testWebhookSuccess = (state) => state.WebhooksReducer.get('test_webhook_success'); export const webhookError = (state) => state.WebhooksReducer.get('webhook_error'); export const sortedWebhooksWithSpacer = createSelector(webhooks, (webhooks) => { diff --git a/ui/src/features/redux/types/webhooks.js b/ui/src/features/redux/types/webhooks.js index bc09efb9e..34d4c515c 100644 --- a/ui/src/features/redux/types/webhooks.js +++ b/ui/src/features/redux/types/webhooks.js @@ -16,5 +16,9 @@ export const DELETE_WEBHOOK = 'DELETE_WEBHOOK'; export const DELETE_WEBHOOK_SUCCESS = 'DELETE_WEBHOOK_SUCCESS'; export const DELETE_WEBHOOK_FAILURE = 'DELETE_WEBHOOK_FAILURE'; +export const TEST_WEBHOOK = 'TEST_WEBHOOK'; +export const TEST_WEBHOOK_SUCCESS = 'TEST_WEBHOOK_SUCCESS'; +export const TEST_WEBHOOK_FAILURE = 'TEST_WEBHOOK_FAILURE'; + export const LOADING = 'LOADING'; export const CLEAN_ERRORS = 'CLEAN_ERRORS';