Merge pull request #1948 from codyrancher/receiver-auth-fields

Adding tls and auth fields to the email and webhook receivers
2021-02-23 13:40:52 -07:00 · 2021-02-23 13:40:52 -07:00 · 7133705db8
parent 27acb6590d a646f80d57
commit 7133705db8
16 changed files with 189 additions and 79 deletions
--- a/assets/styles/base/_color.scss
+++ b/assets/styles/base/_color.scss
@ -66,5 +66,8 @@

 .bg-disabled {
  background-color: var(--disabled-bg) !important;
+}
+
+.text-disabled {
  color: var(--disabled-text) !important;
 }
--- a/assets/styles/base/_variables.scss
+++ b/assets/styles/base/_variables.scss
@ -10,6 +10,8 @@ $column-gutter: 1.75%;

 $sideways-tabs-width: 200px;

+$array-list-remove-margin: 75px;
+
 $z-indexes: (
  zero: 0,
  default: 1,
--- a/assets/styles/global/_button.scss
+++ b/assets/styles/global/_button.scss
@ -102,7 +102,11 @@ button,
 .btn.disabled,
 .btn[disabled],
 fieldset[disabled] .btn {
-  @extend .bg-disabled;
+  &:not(.role-link) {
+    @extend .bg-disabled;
+  }
+  
+  @extend .text-disabled;
  cursor: not-allowed;
  border: solid thin var(--input-disabled-border);
 }
--- a/components/form/ArrayList.vue
+++ b/components/form/ArrayList.vue
@ -289,8 +289,6 @@ export default {
 </template>

 <style lang="scss" scoped>
-  $remove: 75;
-
  .title {
    margin-bottom: 10px;

@ -298,7 +296,7 @@ export default {

  .box {
    display: grid;
-    grid-template-columns: auto #{$remove}px;
+    grid-template-columns: auto $array-list-remove-margin;
    align-items: center;

    margin-bottom: 10px;
--- a/edit/logging-flow/index.vue
+++ b/edit/logging-flow/index.vue
@ -307,7 +307,8 @@ export default {

    <Tabbed :side-tabs="true" @changed="tabChanged($event)">
      <Tab name="match" :label="t('logging.flow.matches.label')" :weight="3">
-        <ArrayListGrouped v-model="matches">
+        <Banner color="info" class="mt-0" label="Configure which container logs will be pulled from" />
+        <ArrayListGrouped v-model="matches" :add-label="t('ingress.rules.addRule')" :default-add-value="{}" :mode="mode">
          <template #default="props">
            <Match
              class="rule mb-20"
--- a/edit/monitoring.coreos.com.receiver/auth.vue
+++ b/edit/monitoring.coreos.com.receiver/auth.vue
@ -0,0 +1,45 @@
+<script>
+import LabeledInput from '@/components/form/LabeledInput';
+
+export default {
+  components: { LabeledInput },
+  props:      {
+    mode: {
+      type:     String,
+      required: true,
+    },
+    value: {
+      type:     Object,
+      required: true
+    }
+  },
+  data() {
+    this.$set(this.value, 'basic_auth', this.value.basic_auth || {});
+
+    return {};
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="row">
+      <div class="col span-6">
+        <h3>Auth</h3>
+      </div>
+    </div>
+    <div class="row mb-20">
+      <div class="col span-6">
+        <LabeledInput v-model="value.basic_auth.username" :mode="mode" label="Username" />
+      </div>
+      <div class="col span-6">
+        <LabeledInput v-model="value.basic_auth.password" :mode="mode" label="Password" type="password" autocomplete="password" />
+      </div>
+    </div>
+    <div class="row mb-20">
+      <div class="col span-6">
+        <LabeledInput v-model="value.basic_auth.bearer_token" :mode="mode" label="Bearer Token" />
+      </div>
+    </div>
+  </div>
+</template>
--- a/edit/monitoring.coreos.com.receiver/index.vue
+++ b/edit/monitoring.coreos.com.receiver/index.vue
@ -145,6 +145,7 @@ export default {
    :mode="mode"
    :resource="value"
    :subtypes="[]"
+    :can-yaml="false"
    :errors="errors"
    @error="e=>errors = e"
    @finish="saveOverride"
@ -198,9 +199,7 @@ export default {
          :add-label="t('monitoringReceiver.addButton', { type: t(receiverType.label) })"
        >
          <template #default="props">
-            <div :class="{'pt-30': !isView}">
-              <component :is="getComponent(receiverType.name)" :value="props.row.value" :mode="mode" />
-            </div>
+            <component :is="getComponent(receiverType.name)" :value="props.row.value" :mode="mode" />
          </template>
        </ArrayListGrouped>
      </Tab>
--- a/edit/monitoring.coreos.com.receiver/tls.vue
+++ b/edit/monitoring.coreos.com.receiver/tls.vue
@ -0,0 +1,45 @@
+<script>
+import LabeledInput from '@/components/form/LabeledInput';
+
+export default {
+  components: { LabeledInput },
+  props:      {
+    mode: {
+      type:     String,
+      required: true,
+    },
+    value: {
+      type:     Object,
+      required: true
+    }
+  },
+  data() {
+    this.$set(this.value, 'tls_config', this.value.tls_config || {});
+
+    return {};
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="row">
+      <div class="col span-6">
+        <h3>SSL</h3>
+      </div>
+    </div>
+    <div class="row mb-20">
+      <div class="col span-6">
+        <LabeledInput v-model="value.tls_config.ca_file" :mode="mode" label="CA File Path" placeholder="e.g. ./ca-file.csr" />
+      </div>
+    </div>
+    <div class="row mb-20">
+      <div class="col span-6">
+        <LabeledInput v-model="value.tls_config.cert_file" :mode="mode" label="Cert File Path" placeholder="e.g. ./cert-file.crt" />
+      </div>
+      <div class="col span-6">
+        <LabeledInput v-model="value.tls_config.key_file" :mode="mode" label="Key File Path" placeholder="e.g. ./key-file.pfx" />
+      </div>
+    </div>
+  </div>
+</template>
--- a/edit/monitoring.coreos.com.receiver/types/email.vue
+++ b/edit/monitoring.coreos.com.receiver/types/email.vue
@ -1,9 +1,12 @@
 <script>
 import LabeledInput from '@/components/form/LabeledInput';
 import Checkbox from '@/components/form/Checkbox';
+import TLS from '../tls';

 export default {
-  components: { Checkbox, LabeledInput },
+  components: {
+    Checkbox, LabeledInput, TLS
+  },
  props:      {
    mode: {
      type:     String,
@ -15,6 +18,7 @@ export default {
    }
  },
  data() {
+    this.$set(this.value, 'http_config', this.value.http_config || {});
    this.$set(this.value, 'send_resolved', this.value.send_resolved || false);
    this.$set(this.value, 'require_tls', this.value.require_tls || false);

@ -25,6 +29,11 @@ export default {

 <template>
  <div>
+    <div class="row">
+      <div class="col span-12">
+        <h3>Target</h3>
+      </div>
+    </div>
    <div class="row mb-20">
      <div class="col span-6">
        <LabeledInput v-model="value.to" :mode="mode" label="Default Recepient Address" placeholder="e.g. admin@example.com" />
@ -49,13 +58,14 @@ export default {
        <Checkbox v-model="value.require_tls" :mode="mode" class="mt-20" label="Use TLS" />
      </div>
    </div>
-    <div class="row">
+    <div class="row mb-20">
      <div class="col span-6">
        <LabeledInput v-model="value.auth_username" :mode="mode" label="Username" placeholder="e.g. John" />
      </div>
      <div class="col span-6">
-        <LabeledInput v-model="value.auth_password" :mode="mode" label="Password" />
+        <LabeledInput v-model="value.auth_password" :mode="mode" label="Password" type="password" autocomplete="password" />
      </div>
    </div>
+    <TLS v-model="value.http_config" class="mb-20" :mode="mode" />
  </div>
 </template>
--- a/edit/monitoring.coreos.com.receiver/types/opsgenie.vue
+++ b/edit/monitoring.coreos.com.receiver/types/opsgenie.vue
@ -120,6 +120,11 @@ export default {

 <template>
  <div>
+    <div class="row">
+      <div class="col span-12">
+        <h3>Target</h3>
+      </div>
+    </div>
    <div class="row mb-20">
      <div class="col span-12">
        <LabeledInput v-model="value.api_key" :mode="mode" label="API Key" />
@ -138,12 +143,14 @@ export default {
        <h3>Responders</h3>
        <ArrayList v-model="responders" :mode="mode" :default-add-value="defaultResponder" :show-header="true">
          <template v-slot:column-headers>
-            <div class="row mb-10">
-              <div class="col span-6">
-                <span class="text-label">Type</span>
-              </div>
-              <div class="col span-6 send-to">
-                <span class="text-label">Send To</span>
+            <div class="responders-heading">
+              <div class="row" :class="{'mb-15': isView, 'mb-10': !isView}">
+                <div class="col span-6">
+                  <span class="text-label">Type</span>
+                </div>
+                <div class="col span-6 send-to">
+                  <span class="text-label">Send To</span>
+                </div>
              </div>
            </div>
          </template>
@ -151,12 +158,13 @@ export default {
            <div class="row responder">
              <div class="col span-6">
                <span v-if="isView">{{ typeLabel(scope.row.value.type) }}</span>
-                <Select v-else v-model="scope.row.value.type" :mode="mode" label="Type" :options="TYPES" />
+                <Select v-else v-model="scope.row.value.type" :mode="mode" :options="TYPES" />
              </div>
-              <div class="col-span-6 target">
+              <div class="col-span-6 target-container">
                <span v-if="isView">{{ targetLabel(scope.row.value.target) }}: {{ scope.row.value.value }}</span>
                <InputWithSelect
                  v-else
+                  class="target"
                  :mode="mode"
                  :options="TARGETS"
                  :select-value="scope.row.value.target"
@ -173,26 +181,23 @@ export default {
 </template>

 <style lang="scss" scoped>
-.send-to {
-  margin-left: -35px;
-}
-.responder {
-  &, .target {
-    width: 100%;
+  .responders-heading {
+    display: grid;
+    grid-template-columns: auto $array-list-remove-margin;
  }

-  .unlabeled-select ::v-deep {
-    height: $input-height;
-  }
-
-  .target ::v-deep {
-    & .input-container {
-      height: $input-height;
+  .responder {
+    &, .target-container {
+      width: 100%;
    }

-    & .unlabeled-select {
+    .target-container ::v-deep .unlabeled-select {
      min-width: 35%;
+      height: 100%;
+    }
+
+    .target {
+      height: 100%;
    }
  }
-}
 </style>
--- a/edit/monitoring.coreos.com.receiver/types/pagerduty.vue
+++ b/edit/monitoring.coreos.com.receiver/types/pagerduty.vue
@ -5,19 +5,17 @@ import Checkbox from '@/components/form/Checkbox';

 export default {
  components: {
-    Checkbox,
-    LabeledInput,
-    LabeledSelect,
+    Checkbox, LabeledInput, LabeledSelect
  },
-  props: {
+  props:      {
    mode: {
      type:     String,
      required: true,
    },
    value: {
      type:     Object,
-      required: true,
-    },
+      required: true
+    }
  },
  data() {
    this.$set(this.value, 'http_config', this.value.http_config || {});
@ -25,7 +23,7 @@ export default {

    const integrationMapping = {
      'Events API v2': 'routing_key',
-      Prometheus:      'service_key',
+      Prometheus:      'service_key'
    };

    const integrationTypeOptions = Object.keys(integrationMapping);
@ -33,7 +31,7 @@ export default {
    return {
      integrationMapping,
      integrationTypeOptions,
-      integrationType: this.value.routing_key ? integrationTypeOptions[0] : integrationTypeOptions[1]
+      integrationType: this.value.service_key ? integrationTypeOptions[1] : integrationTypeOptions[0]
    };
  },
  watch: {
@ -41,49 +39,33 @@ export default {
      this.integrationTypeOptions.forEach((option) => {
        this.value[this.integrationMapping[option]] = null;
      });
-    },
-  },
+    }
+  }
 };
 </script>

 <template>
  <div>
-    <div class="row mb-10">
-      <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 class="row">
+      <div class="col span-12">
+        <h3>Target</h3>
+      </div>
+    </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>
-    <p class="helper-text text-right mb-20">
-      <t k="monitoringReceiver.pagerduty.info" :raw="true" />
-    </p>
    <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/"
-        />
+        <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"
-      />
+      <Checkbox v-model="value.send_resolved" :mode="mode" label="Enable send resolved alerts" />
    </div>
  </div>
 </template>
--- a/edit/monitoring.coreos.com.receiver/types/slack.vue
+++ b/edit/monitoring.coreos.com.receiver/types/slack.vue
@ -34,6 +34,11 @@ export default {

 <template>
  <div>
+    <div class="row">
+      <div class="col span-12">
+        <h3>Target</h3>
+      </div>
+    </div>
    <div class="row mb-20">
      <div class="col span-12">
        <LabeledInput
--- a/edit/monitoring.coreos.com.receiver/types/webhook.vue
+++ b/edit/monitoring.coreos.com.receiver/types/webhook.vue
@ -1,9 +1,13 @@
 <script>
 import LabeledInput from '@/components/form/LabeledInput';
 import Checkbox from '@/components/form/Checkbox';
+import TLS from '../tls';
+import Auth from '../auth';

 export default {
-  components: { Checkbox, LabeledInput },
+  components: {
+    Auth, Checkbox, LabeledInput, TLS
+  },
  props:      {
    mode: {
      type:     String,
@ -25,6 +29,11 @@ export default {

 <template>
  <div>
+    <div class="row">
+      <div class="col span-12">
+        <h3>Target</h3>
+      </div>
+    </div>
    <div class="row mb-20">
      <div class="col span-12">
        <LabeledInput v-model="value.url" :mode="mode" label="URL" />
@ -35,8 +44,10 @@ export default {
        <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>
+    <TLS v-model="value.http_config" class="mb-20" :mode="mode" />
+    <Auth v-model="value.http_config" :mode="mode" />
  </div>
 </template>
--- a/edit/networking.k8s.io.ingress/Certificates.vue
+++ b/edit/networking.k8s.io.ingress/Certificates.vue
@ -87,7 +87,7 @@ export default {
    :row-actions="false"
  />
  <div v-else>
-    <ArrayListGrouped v-model="value.spec.tls" :add-label="t('ingress.certificates.addCertificate')" :default-add-value="defaultAddValue">
+    <ArrayListGrouped v-model="value.spec.tls" :add-label="t('ingress.certificates.addCertificate')" :default-add-value="defaultAddValue" :mode="mode">
      <template #default="props">
        <Certificate
          v-model="props.row.value"
--- a/edit/networking.k8s.io.ingress/Rules.vue
+++ b/edit/networking.k8s.io.ingress/Rules.vue
@ -109,7 +109,7 @@ export default {
    />
  </div>
  <div v-else>
-    <ArrayListGrouped v-model="value.spec.rules" :add-label="t('ingress.rules.addRule')" :default-add-value="{}" @add="onAdd">
+    <ArrayListGrouped v-model="value.spec.rules" :add-label="t('ingress.rules.addRule')" :default-add-value="{}" :mode="mode" @add="onAdd">
      <template #default="props">
        <Rule
          ref="lastRule"
--- a/models/monitoring.coreos.com.receiver.js
+++ b/models/monitoring.coreos.com.receiver.js
@ -115,7 +115,7 @@ export default {
  receiverTypes() {
    const types = RECEIVERS_TYPES
      .filter(type => type.name !== 'custom' && this.spec[type.key]?.length > 0)
-      .map(type => type.label);
+      .map(type => this.t(type.label));

    const expectedKeys = RECEIVERS_TYPES.map(type => type.key).filter(key => key !== 'custom');

@ -125,7 +125,7 @@ export default {
      .filter(key => !expectedKeys.includes(key));

    if (customKeys.length > 0) {
-      const customLabel = RECEIVERS_TYPES.find(type => type.name === 'custom').label;
+      const customLabel = this.t(RECEIVERS_TYPES.find(type => type.name === 'custom').label);

      types.push(customLabel);
    }