Updating the pagerduty and opsgenier receivers

- Adding the responders field to opsgenie
- Providing some helper text to pagerduty

rancher/dashboard#1216

config/product/monitoring.js

@@ -25,7 +25,7 @@ export function init(store) {
     PROMETHEUSRULE,
     PROMETHEUS,
     SPOOFED: {
-      RECEIVER, RECEIVER_SPEC, RECEIVER_EMAIL, RECEIVER_SLACK, RECEIVER_WEBHOOK, RECEIVER_PAGERDUTY, RECEIVER_OPSGENIE, RECEIVER_HTTP_CONFIG,
+      RECEIVER, RECEIVER_SPEC, RECEIVER_EMAIL, RECEIVER_SLACK, RECEIVER_WEBHOOK, RECEIVER_PAGERDUTY, RECEIVER_OPSGENIE, RECEIVER_HTTP_CONFIG, RESPONDER,
       ROUTE, ROUTE_SPEC
     }
   } = MONITORING;
@@ -104,10 +104,10 @@ export function init(store) {
         id:              RECEIVER_OPSGENIE,
         type:            'schema',
         resourceFields:  {
-          api_url:       { type: 'string' },
           api_key:       { type: 'string' },
           http_config:   { type: RECEIVER_HTTP_CONFIG },
-          send_resolved: { type: 'boolean' }
+          send_resolved: { type: 'boolean' },
+          responders:    { type: `array[${ RESPONDER }]` }
         }
       },
       {
@@ -124,7 +124,17 @@ export function init(store) {
         type:           'schema',
         resourceFields: { proxy_url: { type: 'string' } }
       },
+      {
+        id:             RESPONDER,
+        type:           'schema',
+        resourceFields: {
+          type:     { type: 'string' },
+          id:       { type: 'string' },
+          name:     { type: 'string' },
+          username: { type: 'string' },
 
+        }
+      }
     ],
     getInstances: () => getAllReceivers(store.dispatch)
   });

config/types.js

@@ -91,6 +91,7 @@ export const MONITORING = {
     RECEIVER_PAGERDUTY:   'monitoring.coreos.com.receiver.pagerduty',
     RECEIVER_OPSGENIE:    'monitoring.coreos.com.receiver.opsgenie',
     RECEIVER_HTTP_CONFIG: 'monitoring.coreos.com.receiver.httpconfig',
+    RESPONDER:            'monitoring.coreos.com.receiver.responder',
     ROUTE:                'monitoring.coreos.com.route',
     ROUTE_SPEC:           'monitoring.coreos.com.route.spec',
   }

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

@@ -169,7 +169,10 @@ export default {
         <Banner v-if="receiverType.name === 'slack'" color="info">
           Here's how you create <a href="https://rancher.slack.com/apps/A0F7XDUAZ-incoming-webhooks" target="_blank" rel="noopener noreferrer nofollow">Incoming Webhooks</a> for Slack.
         </Banner>
-        <Banner v-if="receiverType.name === 'custom'" color="info" label="The YAML provided here will be directly appended to your receiver within the Alertmanager Config Secret" />
+        <Banner v-if="!isView && receiverType.name === 'custom'" color="info" label="The YAML provided here will be directly appended to your receiver within the Alertmanager Config Secret" />
+        <Banner v-if="!isView && receiverType.name === 'pagerduty'" color="info">
+          Here's how you create an <a href="https://www.pagerduty.com/docs/guides/prometheus-integration-guide/" target="_blank" rel="noopener nofollow" class="flex-right">Integration Key</a> for PagerDuty
+        </Banner>
         <div class="provider mb-10">
           <h1>
             {{ receiverType.title }}
@@ -191,7 +194,7 @@ export default {
           :add-label="'Add ' + receiverType.label"
         >
           <template #default="props">
-            <div class="pt-30">
+            <div :class="{'pt-30': !isView}">
               <component :is="getComponent(receiverType.name)" :value="props.row.value" :mode="mode" />
             </div>
           </template>

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

@@ -1,9 +1,49 @@
 <script>
+import ArrayList from '@/components/form/ArrayList';
 import LabeledInput from '@/components/form/LabeledInput';
+import LabeledSelect from '@/components/form/LabeledSelect';
 import Checkbox from '@/components/form/Checkbox';
+import InputWithSelect from '@/components/form/InputWithSelect';
+import { _VIEW } from '@/config/query-params';
+
+export const TARGETS = [
+  {
+    label: 'Id',
+    value: 'id'
+  },
+  {
+    label: 'Name',
+    value: 'name'
+  },
+  {
+    label: 'Username',
+    value: 'username'
+  }
+];
+
+export const TYPES = [
+  {
+    label: 'Team',
+    value: 'team'
+  },
+  {
+    label: 'User',
+    value: 'user'
+  },
+  {
+    label: 'Escalation',
+    value: 'escalation'
+  },
+  {
+    label: 'Schedule',
+    value: 'schedule'
+  }
+];
 
 export default {
-  components: { Checkbox, LabeledInput },
+  components: {
+    ArrayList, Checkbox, InputWithSelect, LabeledInput, LabeledSelect
+  },
   props:      {
     mode: {
       type:     String,
@@ -17,29 +57,129 @@ export default {
   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);
+    this.$set(this.value, 'responders', this.value.responders || []);
 
-    return {};
+    const responders = this.value.responders.map((responder) => {
+      const target = TARGETS.find(target => responder[target.value]);
+
+      return {
+        type:   responder.type,
+        target: target.value,
+        value:  responder[target.value]
+      };
+    });
+
+    return {
+      defaultResponder: {
+        type:   TYPES[0].value,
+        target: TARGETS[0].value,
+        value:  ''
+      },
+      responders,
+      TARGETS,
+      TYPES
+    };
   },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    }
+  },
+
+  watch: {
+    responders: {
+      deep: true,
+      handler() {
+        const responders = this.responders.map((responder) => {
+          return {
+            type:               responder.type,
+            [responder.target]: responder.value
+          };
+        });
+
+        this.$set(this.value, 'responders', responders);
+      }
+    }
+  },
+
+  methods: {
+    updateResponder({ selected, text }, row) {
+      row.target = selected;
+      row.value = text;
+    },
+    typeLabel(type) {
+      return TYPES.find(t => t.value === type).label;
+    },
+    targetLabel(target) {
+      return TARGETS.find(t => t.value === target).label;
+    }
+  }
 };
 </script>
 
 <template>
   <div>
     <div class="row mb-20">
-      <div class="col span-6">
+      <div class="col span-12">
         <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">
+    <div class="row mb-20">
       <Checkbox v-model="value.send_resolved" :mode="mode" label="Enable send resolved alerts" />
     </div>
+    <div class="row">
+      <div class="col span-12">
+        <h3>Responders</h3>
+        <ArrayList v-model="responders" :mode="mode" :default-add-value="defaultResponder" :show-header="true">
+          <template v-slot:column-headers>
+            <div class="row" :class="{'mb-15': isView}">
+              <div class="col span-6">
+                <span class="text-label">Type</span>
+              </div>
+              <div class="col span-6">
+                <span class="text-label">Send To</span>
+              </div>
+            </div>
+          </template>
+          <template v-slot:columns="scope">
+            <div class="row responder">
+              <div class="col span-6">
+                <span v-if="isView">{{ typeLabel(scope.row.value.type) }}</span>
+                <LabeledSelect v-else v-model="scope.row.value.type" :mode="mode" label="Type" :options="TYPES" />
+              </div>
+              <div class="col-span-6 target">
+                <span v-if="isView">{{ targetLabel(scope.row.value.target) }}: {{ scope.row.value.value }}</span>
+                <InputWithSelect
+                  v-else
+                  :mode="mode"
+                  :options="TARGETS"
+                  :select-value="scope.row.value.target"
+                  :text-value="scope.row.value.value"
+                  @input="updateResponder($event, scope.row.value)"
+                />
+              </div>
+            </div>
+          </template>
+        </ArrayList>
+      </div>
+    </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+  .responder {
+    &, .target {
+      width: 100%;
+    }
+
+    .target ::v-deep .unlabeled-select {
+      min-width: 35%;
+    }
+  }
+</style>