Merge pull request #1865 from codyrancher/additional-receivers

Adding PagerDuty and OpsGenie receivers
2020-11-19 15:22:59 -07:00 · 2020-11-19 15:22:59 -07:00 · 89fb6c8f00
parent a5823f3a0b dfdad395a4
commit 89fb6c8f00
6 changed files with 162 additions and 32 deletions
--- a/config/product/monitoring.js
+++ b/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' },
-          email_configs:   { type: `array[${ RECEIVER_EMAIL }]` },
-          slack_configs:   { type: `array[${ RECEIVER_SLACK }]` },
-          webhook_configs: { type: `array[${ RECEIVER_WEBHOOK }]` }
+          name:              { type: 'string' },
+          email_configs:     { type: `array[${ RECEIVER_EMAIL }]` },
+          slack_configs:     { type: `array[${ RECEIVER_SLACK }]` },
+          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',
--- a/config/types.js
+++ b/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',
--- a/edit/monitoring.coreos.com.receiver/index.vue
+++ b/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">
-            <InfoBox class="pt-40">
-              <component :is="getComponent(receiverType.name)" :value="scope.row.value" :mode="mode" />
-            </InfoBox>
+          <template #default="props">
+            <div class="pt-30">
+              <component :is="getComponent(receiverType.name)" :value="props.row.value" :mode="mode" />
+            </div>
          </template>
-          <template v-slot:remove-button="scope">
-            <button class="btn role-link close" @click="scope.remove">
-              <i class="icon icon-2x icon-x" />
-            </button>
-          </template>
-        </ArrayList>
+        </ArrayListGrouped>
      </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>
--- a/edit/monitoring.coreos.com.receiver/types/opsgenie.vue
+++ b/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>
--- a/edit/monitoring.coreos.com.receiver/types/pagerduty.vue
+++ b/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>
--- a/models/monitoring.coreos.com.receiver.js
+++ b/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',