Merge pull request #1865 from codyrancher/additional-receivers

Adding PagerDuty and OpsGenie receivers

config/product/monitoring.js

@@ -23,7 +23,7 @@ export function init(store) {
     PROMETHEUSRULE,
     PROMETHEUS,
     SPOOFED: {
-      RECEIVER, RECEIVER_SPEC, RECEIVER_EMAIL, RECEIVER_SLACK, RECEIVER_WEBHOOK, RECEIVER_HTTP_CONFIG,
+      RECEIVER, RECEIVER_SPEC, RECEIVER_EMAIL, RECEIVER_SLACK, RECEIVER_WEBHOOK, RECEIVER_PAGERDUTY, RECEIVER_OPSGENIE, RECEIVER_HTTP_CONFIG,
       ROUTE, ROUTE_SPEC
     }
   } = MONITORING;
@@ -57,10 +57,12 @@ export function init(store) {
         id:                RECEIVER_SPEC,
         type:              'schema',
         resourceFields:    {
-          name:            { type: 'string' },
+          name:              { type: 'string' },
-          email_configs:   { type: `array[${ RECEIVER_EMAIL }]` },
+          email_configs:     { type: `array[${ RECEIVER_EMAIL }]` },
-          slack_configs:   { type: `array[${ RECEIVER_SLACK }]` },
+          slack_configs:     { type: `array[${ RECEIVER_SLACK }]` },
-          webhook_configs: { type: `array[${ RECEIVER_WEBHOOK }]` }
+          pagerduty_configs: { type: `array[${ RECEIVER_PAGERDUTY }]` },
+          opsgenie_configs:  { type: `array[${ RECEIVER_OPSGENIE }]` },
+          webhook_configs:   { type: `array[${ RECEIVER_WEBHOOK }]` }
         }
       },
       {
@@ -86,6 +88,26 @@ export function init(store) {
           send_resolved: { type: 'boolean' }
         }
       },
+      {
+        id:              RECEIVER_PAGERDUTY,
+        type:            'schema',
+        resourceFields:  {
+          routing_key:   { type: 'string' },
+          service_key:   { type: 'string' },
+          http_config:   { type: RECEIVER_HTTP_CONFIG },
+          send_resolved: { type: 'boolean' }
+        }
+      },
+      {
+        id:              RECEIVER_OPSGENIE,
+        type:            'schema',
+        resourceFields:  {
+          api_url:       { type: 'string' },
+          api_key:       { type: 'string' },
+          http_config:   { type: RECEIVER_HTTP_CONFIG },
+          send_resolved: { type: 'boolean' }
+        }
+      },
       {
         id:              RECEIVER_WEBHOOK,
         type:            'schema',

config/types.js

@@ -88,6 +88,8 @@ export const MONITORING = {
     RECEIVER_EMAIL:       'monitoring.coreos.com.receiver.email',
     RECEIVER_SLACK:       'monitoring.coreos.com.receiver.slack',
     RECEIVER_WEBHOOK:     'monitoring.coreos.com.receiver.webhook',
+    RECEIVER_PAGERDUTY:   'monitoring.coreos.com.receiver.pagerduty',
+    RECEIVER_OPSGENIE:    'monitoring.coreos.com.receiver.opsgenie',
     RECEIVER_HTTP_CONFIG: 'monitoring.coreos.com.receiver.httpconfig',
     ROUTE:                'monitoring.coreos.com.route',
     ROUTE_SPEC:           'monitoring.coreos.com.route.spec',

edit/monitoring.coreos.com.receiver/index.vue

@@ -1,6 +1,6 @@
 <script>
 import { MONITORING } from '@/config/types';
-import ArrayList from '@/components/form/ArrayList';
+import ArrayListGrouped from '@/components/form/ArrayListGrouped';
 import Loading from '@/components/Loading';
 import Banner from '@/components/Banner';
 import CruResource from '@/components/CruResource';
@@ -8,7 +8,6 @@ import GradientBox from '@/components/GradientBox';
 import LabeledInput from '@/components/form/LabeledInput';
 import Tabbed from '@/components/Tabbed';
 import Tab from '@/components/Tabbed/Tab';
-import InfoBox from '@/components/InfoBox';
 import YamlEditor, { EDITOR_MODES } from '@/components/YamlEditor';
 import CreateEditView from '@/mixins/create-edit-view';
 import { defaultAsyncData } from '@/components/ResourceDetail';
@@ -17,7 +16,7 @@ import { RECEIVERS_TYPES } from '@/models/monitoring.coreos.com.receiver';
 
 export default {
   components: {
-    ArrayList, Banner, CruResource, GradientBox, InfoBox, LabeledInput, Loading, Tabbed, Tab, YamlEditor
+    ArrayListGrouped, Banner, CruResource, GradientBox, LabeledInput, Loading, Tabbed, Tab, YamlEditor
   },
   mixins: [CreateEditView],
   asyncData(ctx) {
@@ -170,7 +169,7 @@ export default {
           :scrolling="false"
           :editor-mode="editorMode"
         />
-        <ArrayList
+        <ArrayListGrouped
           v-else
           v-model="value.spec[receiverType.key]"
           class="namespace-list"
@@ -178,17 +177,12 @@ export default {
           :default-add-value="{}"
           :add-label="'Add ' + receiverType.label"
         >
-          <template v-slot:columns="scope">
+          <template #default="props">
-            <InfoBox class="pt-40">
+            <div class="pt-30">
-              <component :is="getComponent(receiverType.name)" :value="scope.row.value" :mode="mode" />
+              <component :is="getComponent(receiverType.name)" :value="props.row.value" :mode="mode" />
-            </InfoBox>
+            </div>
           </template>
-          <template v-slot:remove-button="scope">
+        </ArrayListGrouped>
-            <button class="btn role-link close" @click="scope.remove">
-              <i class="icon icon-2x icon-x" />
-            </button>
-          </template>
-        </ArrayList>
       </Tab>
     </Tabbed>
   </CruResource>
@@ -257,18 +251,5 @@ export default {
       display: inline-block;
       vertical-align: middle;
     }
-
-    .box {
-      position: relative;
-    }
-
-    .remove {
-      position: absolute;
-
-      padding: 0px;
-
-      top: 0;
-      right: 0;
-    }
   }
 </style>

edit/monitoring.coreos.com.receiver/types/opsgenie.vue

@@ -0,0 +1,45 @@
+<script>
+import LabeledInput from '@/components/form/LabeledInput';
+import Checkbox from '@/components/form/Checkbox';
+
+export default {
+  components: { Checkbox, LabeledInput },
+  props:      {
+    mode: {
+      type:     String,
+      required: true,
+    },
+    value: {
+      type:     Object,
+      required: true
+    }
+  },
+  data() {
+    this.$set(this.value, 'http_config', this.value.http_config || {});
+    this.$set(this.value, 'send_resolved', typeof this.value.send_resolved === 'boolean' ? this.value.send_resolved : true);
+
+    return {};
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="row mb-20">
+      <div class="col span-6">
+        <LabeledInput v-model="value.api_key" :mode="mode" label="API Key" />
+      </div>
+      <div class="col span-6">
+        <LabeledInput v-model="value.api_url" :mode="mode" label="API Url" />
+      </div>
+    </div>
+    <div class="row mb-20">
+      <div class="col span-12">
+        <LabeledInput v-model="value.http_config.proxy_url" :mode="mode" label="Proxy URL" placeholder="e.g. http://my-proxy/" />
+      </div>
+    </div>
+    <div class="row">
+      <Checkbox v-model="value.send_resolved" :mode="mode" label="Enable send resolved alerts" />
+    </div>
+  </div>
+</template>

edit/monitoring.coreos.com.receiver/types/pagerduty.vue

@@ -0,0 +1,66 @@
+<script>
+import LabeledInput from '@/components/form/LabeledInput';
+import LabeledSelect from '@/components/form/LabeledSelect';
+import Checkbox from '@/components/form/Checkbox';
+
+export default {
+  components: {
+    Checkbox, LabeledInput, LabeledSelect
+  },
+  props:      {
+    mode: {
+      type:     String,
+      required: true,
+    },
+    value: {
+      type:     Object,
+      required: true
+    }
+  },
+  data() {
+    this.$set(this.value, 'http_config', this.value.http_config || {});
+    this.$set(this.value, 'send_resolved', typeof this.value.send_resolved === 'boolean' ? this.value.send_resolved : true);
+
+    const integrationMapping = {
+      'Events API v2': 'routing_key',
+      Prometheus:      'service_key'
+    };
+
+    const integrationTypeOptions = Object.keys(integrationMapping);
+
+    return {
+      integrationMapping,
+      integrationTypeOptions,
+      integrationType: this.value.service_key ? integrationTypeOptions[1] : integrationTypeOptions[0]
+    };
+  },
+  watch: {
+    integrationType() {
+      this.integrationTypeOptions.forEach((option) => {
+        this.value[this.integrationMapping[option]] = null;
+      });
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div class="row mb-20">
+      <div class="col span-6">
+        <LabeledSelect v-model="integrationType" :options="integrationTypeOptions" :mode="mode" label="Integration Type" />
+      </div>
+      <div class="col span-6">
+        <LabeledInput v-model="value[integrationMapping[integrationType]]" :mode="mode" label="Default Integration Key" />
+      </div>
+    </div>
+    <div class="row mb-20">
+      <div class="col span-12">
+        <LabeledInput v-model="value.http_config.proxy_url" :mode="mode" label="Proxy URL" placeholder="e.g. http://my-proxy/" />
+      </div>
+    </div>
+    <div class="row">
+      <Checkbox v-model="value.send_resolved" :mode="mode" label="Enable send resolved alerts" />
+    </div>
+  </div>
+</template>

models/monitoring.coreos.com.receiver.js

@@ -16,6 +16,20 @@ export const RECEIVERS_TYPES = [
     key:   'email_configs',
     logo:  require(`~/assets/images/icon-email.svg`)
   },
+  {
+    name:  'pagerduty',
+    label: 'PagerDuty',
+    title: 'PagerDuty Config',
+    key:   'pagerduty_configs',
+    logo:  require(`~/assets/images/icon-email.svg`)
+  },
+  {
+    name:  'opsgenie',
+    label: 'OpsGenie',
+    title: 'OpsGenie Config',
+    key:   'opsgenie_configs',
+    logo:  require(`~/assets/images/icon-email.svg`)
+  },
   {
     name:  'webhook',
     label: 'Webhook',