[7.x] [Watcher] Support scheme field when creating a Threshold alert with a Webhook action (#53757)

x-pack/legacy/plugins/watcher/__jest__/client_integration/helpers/watch_create_threshold.helpers.ts

@@ -104,4 +104,5 @@ export type TestSubjects =
   | 'webhookPathInput'
   | 'webhookPortInput'
   | 'webhookMethodSelect'
+  | 'webhookSchemeSelect'
   | 'webhookUsernameInput';

x-pack/legacy/plugins/watcher/__jest__/client_integration/watch_create_threshold.test.tsx

@@ -487,6 +487,7 @@ describe('<ThresholdWatchEdit /> create route', () => {
           const METHOD = 'put';
           const HOST = 'localhost';
           const PORT = '9200';
+          const SCHEME = 'http';
           const PATH = '/test';
           const USERNAME = 'test_user';
           const PASSWORD = 'test_password';
@@ -510,6 +511,7 @@ describe('<ThresholdWatchEdit /> create route', () => {
           form.setInputValue('webhookMethodSelect', METHOD);
           form.setInputValue('webhookHostInput', HOST);
           form.setInputValue('webhookPortInput', PORT);
+          form.setInputValue('webhookSchemeSelect', SCHEME);
           form.setInputValue('webhookPathInput', PATH);
           form.setInputValue('webhookUsernameInput', USERNAME);
           form.setInputValue('webhookPasswordInput', PASSWORD);
@@ -534,6 +536,7 @@ describe('<ThresholdWatchEdit /> create route', () => {
                 method: METHOD,
                 host: HOST,
                 port: Number(PORT),
+                scheme: SCHEME,
                 path: PATH,
                 body:
                   '{\n  "message": "Watch [{{ctx.metadata.name}}] has exceeded the threshold"\n}', // Default

x-pack/legacy/plugins/watcher/common/models/action/webhook_action.js

@@ -16,6 +16,7 @@ export class WebhookAction extends BaseAction {
     this.method = props.method;
     this.host = props.host;
     this.port = props.port;
+    this.scheme = props.scheme;
     this.path = props.path;
     this.body = props.body;
     this.contentType = props.contentType;
@@ -30,6 +31,7 @@ export class WebhookAction extends BaseAction {
       method: this.method,
       host: this.host,
       port: this.port,
+      scheme: this.scheme,
       path: this.path,
       body: this.body,
       contentType: this.contentType,
@@ -47,6 +49,7 @@ export class WebhookAction extends BaseAction {
       method: json.method,
       host: json.host,
       port: json.port,
+      scheme: json.scheme,
       path: json.path,
       body: json.body,
       contentType: json.contentType,
@@ -72,6 +75,10 @@ export class WebhookAction extends BaseAction {
       optionalFields.method = this.method;
     }
 
+    if (this.scheme) {
+      optionalFields.scheme = this.scheme;
+    }
+
     if (this.body) {
       optionalFields.body = this.body;
     }
@@ -108,7 +115,7 @@ export class WebhookAction extends BaseAction {
     const webhookJson = json && json.actionJson && json.actionJson.webhook;
     const { errors } = this.validateJson(json.actionJson);
 
-    const { path, method, body, auth, headers } = webhookJson;
+    const { path, method, scheme, body, auth, headers } = webhookJson;
 
     const optionalFields = {};
 
@@ -120,6 +127,10 @@ export class WebhookAction extends BaseAction {
       optionalFields.method = method;
     }
 
+    if (scheme) {
+      optionalFields.scheme = scheme;
+    }
+
     if (body) {
       optionalFields.body = body;
     }

x-pack/legacy/plugins/watcher/common/types/action_types.ts

@@ -56,6 +56,7 @@ export interface WebhookAction extends BaseAction {
   method?: 'head' | 'get' | 'post' | 'put' | 'delete';
   host: string;
   port: number;
+  scheme?: 'http' | 'https';
   path?: string;
   body?: string;
   username?: string;

x-pack/legacy/plugins/watcher/public/np_ready/application/models/action/webhook_action.js

@@ -11,23 +11,21 @@ import { i18n } from '@kbn/i18n';
 export class WebhookAction extends BaseAction {
   constructor(props = {}) {
     super(props);
-
     const defaultJson = JSON.stringify(
       { message: 'Watch [{{ctx.metadata.name}}] has exceeded the threshold' },
       null,
       2
     );
     this.body = get(props, 'body', props.ignoreDefaults ? null : defaultJson);
-
     this.method = get(props, 'method');
     this.host = get(props, 'host');
     this.port = get(props, 'port');
+    this.scheme = get(props, 'scheme', 'http');
     this.path = get(props, 'path');
     this.username = get(props, 'username');
     this.password = get(props, 'password');
     this.contentType = get(props, 'contentType');
-
-    this.fullPath = `${this.host}:${this.port}${this.path}`;
+    this.fullPath = `${this.host}:${this.port}${this.path ? '/' + this.path : ''}`;
   }
 
   validate() {
@@ -112,6 +110,7 @@ export class WebhookAction extends BaseAction {
       method: this.method,
       host: this.host,
       port: this.port,
+      scheme: this.scheme,
       path: this.path,
       body: this.body,
       username: this.username,

x-pack/legacy/plugins/watcher/public/np_ready/application/sections/watch_edit/components/threshold_watch_edit/action_fields/webhook_action_fields.tsx

@@ -29,13 +29,15 @@ interface Props {
 
 const HTTP_VERBS = ['head', 'get', 'post', 'put', 'delete'];
 
+const SCHEME = ['http', 'https'];
+
 export const WebhookActionFields: React.FunctionComponent<Props> = ({
   action,
   editAction,
   errors,
   hasErrors,
 }) => {
-  const { method, host, port, path, body, username, password } = action;
+  const { method, host, port, scheme, path, body, username, password } = action;
 
   useEffect(() => {
     editAction({ key: 'contentType', value: 'application/json' }); // set content-type for threshold watch to json by default
@@ -65,6 +67,27 @@ export const WebhookActionFields: React.FunctionComponent<Props> = ({
           </EuiFormRow>
         </EuiFlexItem>
 
+        <EuiFlexItem>
+          <EuiFormRow
+            label={i18n.translate(
+              'xpack.watcher.sections.watchEdit.threshold.webhookAction.schemeFieldLabel',
+              {
+                defaultMessage: 'Scheme',
+              }
+            )}
+          >
+            <EuiSelect
+              name="scheme"
+              value={scheme}
+              data-test-subj="webhookSchemeSelect"
+              options={SCHEME.map(verb => ({ text: verb, value: verb }))}
+              onChange={e => {
+                editAction({ key: 'scheme', value: e.target.value });
+              }}
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+
         <EuiFlexItem>
           <ErrableFormRow
             id="webhookHost"