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

Adding tls and auth fields to the email and webhook receivers

assets/styles/base/_color.scss

@@ -66,5 +66,8 @@
 
 .bg-disabled {
   background-color: var(--disabled-bg) !important;
+}
+
+.text-disabled {
   color: var(--disabled-text) !important;
 }

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,

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);
 }

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;

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"

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>

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" />
-              <component :is="getComponent(receiverType.name)" :value="props.row.value" :mode="mode" />
-            </div>
           </template>
         </ArrayListGrouped>
       </Tab>

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>

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>

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="responders-heading">
-              <div class="col span-6">
+              <div class="row" :class="{'mb-15': isView, 'mb-10': !isView}">
-                <span class="text-label">Type</span>
+                <div class="col span-6">
-              </div>
+                  <span class="text-label">Type</span>
-              <div class="col span-6 send-to">
+                </div>
-                <span class="text-label">Send To</span>
+                <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 {
+  .responders-heading {
-  margin-left: -35px;
+    display: grid;
-}
+    grid-template-columns: auto $array-list-remove-margin;
-.responder {
-  &, .target {
-    width: 100%;
   }
 
-  .unlabeled-select ::v-deep {
+  .responder {
-    height: $input-height;
+    &, .target-container {
-  }
+      width: 100%;
-
-  .target ::v-deep {
-    & .input-container {
-      height: $input-height;
     }
 
-    & .unlabeled-select {
+    .target-container ::v-deep .unlabeled-select {
       min-width: 35%;
+      height: 100%;
+    }
+
+    .target {
+      height: 100%;
     }
   }
-}
 </style>

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

@@ -5,19 +5,17 @@ import Checkbox from '@/components/form/Checkbox';
 
 export default {
   components: {
-    Checkbox,
+    Checkbox, LabeledInput, LabeledSelect
-    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="row">
-      <div class="col span-6">
+      <div class="col span-12">
-        <LabeledSelect
+        <h3>Target</h3>
-          v-model="integrationType"
+      </div>
-          :options="integrationTypeOptions"
+    </div>
-          :mode="mode"
+    <div class="row mb-20">
-          label="Integration Type"
+      <div class="col span-6">
-        />
+        <LabeledSelect v-model="integrationType" :options="integrationTypeOptions" :mode="mode" label="Integration Type" />
-      </div>
+      </div>
-      <div class="col span-6">
+      <div class="col span-6">
-        <LabeledInput
+        <LabeledInput v-model="value[integrationMapping[integrationType]]" :mode="mode" label="Default Integration Key" />
-          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
+        <LabeledInput v-model="value.http_config.proxy_url" :mode="mode" label="Proxy URL" placeholder="e.g. http://my-proxy/" />
-          v-model="value.http_config.proxy_url"
-          :mode="mode"
-          label="Proxy URL"
-          placeholder="e.g. http://my-proxy/"
-        />
       </div>
     </div>
     <div class="row">
-      <Checkbox
+      <Checkbox v-model="value.send_resolved" :mode="mode" label="Enable send resolved alerts" />
-        v-model="value.send_resolved"
-        :mode="mode"
-        label="Enable send resolved alerts"
-      />
     </div>
   </div>
 </template>

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

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>

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"

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"

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);
     }