Notebooks(Alert): Mailjet Alert Test fails

[karel-rehor]

About the bug

Steps to reproduce:
List the minimal actions needed to reproduce the behavior.

1. In Mailjet setup an account and API integration using Curl. Copy and save the API Key and secret for later use in Influxdb UI.
2. Go to Influxdbv2 UI (note that during this test the feature flag 'notebooksNewEndpoints' was set)
3. Add test data to a bucket
4. Create an Alert Notebook
5. Use the test data to define the query
6. In the alert section choose Mailjet
7. Add the key and secret generated in the first step to the configuration.
8. Use the Mailjet verified account email for the from field, and in the to field add an email address to which you have access
9. Click Alert Test

Expected behavior:

Expected the Alert Test email to be sent.

Actual behavior:

A notification appears with a message: "Failed to send the test alert to Mailjet".
In the browser network monitoring tool the call to /query? returned HTTP 400.

Visual Proof:

About your environment

Environment info:

Testing with K8SIDPE Remocal.

Latest commit in project UI

commit 65592aad01b9ddd369107e63c22227b075b9dd23 (HEAD -> master, upstream/master, origin/master, origin/HEAD)
Author: Chitlange Sahas <chitlangesahas@gmail.com>
Date:   Fri Feb 4 10:58:12 2022 -0700

Latest K8SIDPE commit

commit c9fb1f2a56463875f4fd92ee15b9ff968f11e34c (HEAD -> master, origin/master, origin/HEAD)
Author: Wojciech Kocjan <wkocjan@influxdata.com>
Date:   Mon Feb 7 08:44:59 2022 +0100

Logs:

From console:

query.tsx:324 
 POST https://twodotoh-dev-bonitoo-kk.remocal.influxdev.co/api/v2/query?orgID=d2701d65408e72b3 400
basic	@	query.tsx:324
query	@	query.tsx:397
query	@	flow.query.tsx:156
handleTestEndpoint	@	view.tsx:337
callCallback	@	react-dom.development.js:3945
fn.___hb	@	honeybadger.js:495
invokeGuardedCallbackDev	@	react-dom.development.js:3994
invokeGuardedCallback	@	react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError	@	react-dom.development.js:4070
executeDispatch	@	react-dom.development.js:8243
processDispatchQueueItemsInOrder	@	react-dom.development.js:8275
processDispatchQueue	@	react-dom.development.js:8288
dispatchEventsForPlugins	@	react-dom.development.js:8299
(anonymous)	@	react-dom.development.js:8508
batchedEventUpdates$1	@	react-dom.development.js:22396
batchedEventUpdates	@	react-dom.development.js:3745
dispatchEventForPluginEventSystem	@	react-dom.development.js:8507
attemptToDispatchEvent	@	react-dom.development.js:6005
dispatchEvent	@	react-dom.development.js:5924
unstable_runWithPriority	@	scheduler.development.js:468
runWithPriority$1	@	react-dom.development.js:11276
discreteUpdates$1	@	react-dom.development.js:22413
discreteUpdates	@	react-dom.development.js:3756
dispatchDiscreteEvent	@	react-dom.development.js:5889
fn.___hb	@	honeybadger.js:495

Generated code

Here is the flux generated after clicking Alert Test

import "strings"
import "regexp"
import "influxdata/influxdb/schema"
import "influxdata/influxdb/secrets"
import "experimental"
import "array"
import "http"
import "influxdata/influxdb/secrets"

apiKey = secrets.get(key: "MailjetAPIKey")
apiSecrets = secrets.get(key: "MailjetSecret")

http.post(
    url: "https://api.mailjet.com/v3.1/send",
    headers: {"Content-type": "application/json", "Authorization": "Basic ${apiKey}:${apiSecret}"},
    data: bytes(
    v: "{
        \"Messages\": [{
          \"From\": {
            \"Email\": \"qa1@bonitoo4influxdata.com\"
          },
          \"To\": [{
            \"Email\": \"qaservice@bonitoo4influxdata.com\"
          }],
          \"Subject\": \"InfluxDB Alert\",
          \"TextPart\": \"This is a test notification\"
        }]
      }",
),
)

array.from(rows: [{value: 0}])
    |> yield(name: "ignore")

First problem is that the script declares the variable apiSecrets and then tries to use apiSecret.
The second problem is that the header Authorization value should be in Base64
https://datatracker.ietf.org/doc/html/rfc7617

The following script, using a hard coded Base64 string works in explorer. Note the string has been modified for safety reasons.

import "strings"
import "regexp"
import "influxdata/influxdb/schema"
import "influxdata/influxdb/secrets"
import "experimental"
import "array"
import "http"
import "influxdata/influxdb/secrets"

apiKey = secrets.get(key: "MailjetAPIKey")
apiSecrets = secrets.get(key: "MailjetSecret")

http.post(
    url: "https://api.mailjet.com/v3.1/send",
    headers: {"Content-type": "application/json", "Authorization": "Basic NWXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXYUZ2O0h1PEdxYkm="},
    data: bytes(
    v: "{
        \"Messages\": [{
          \"From\": {
            \"Email\": \"qa1@bonitoo4influxdata.com\"
          },
          \"To\": [{
            \"Email\": \"qaservice@bonitoo4influxdata.com\"
          }],
          \"Subject\": \"InfluxDB Alert 2\",
          \"TextPart\": \"This is a test notification\"
        }]
      }",
),
)

array.from(rows: [{value: 0}])
    |> yield(name: "ignore")

It also appears that many of the imports are unused.

Related issue

#3706

[karel-rehor]

Note that the http api has a method for generating the base64 authentication string.

https://docs.influxdata.com/flux/v0.x/stdlib/http/basicauth/

I tried it as follows, and it seems to work.

auth = http.basicAuth(u: "charms", p: "daniel")

http.post(
   url: "http://ec2-13-52-255-26.us-west-1.compute.amazonaws.com:3000", 
   data: bytes(v: "This is test notification number 9"),
   headers: {"Content-Type": "application/json", "Authentication": auth}
)