Related to set alert from database fields. Add generator options to configure alerts from database fields.

• Add Global site tag (gtag.js).
• Show cookie consent. If user disallow, analytics should be disabled.

When having many probes and notifications, it'll be helpful to be able to see the list of probes and notifications on the sidebar.

• Show the names of the probes under Probe menu on the sidebar.
• Show the names of the notification types under the Notifications menu on the sidebar.
• When a probe on the sidebar is clicked, scroll to that probe.
• When a notification on the sidebar is clicked, scroll to that notification.
• When user scrolls down the page, the sidebar should stay visible and sticky to the top.

When probe has no name, generate a default name from the URL. For example, https://hyperjump.tech becomes hyperjump_tech

Bug description

The radio button is clipped in Safari

Screenshot

System

• macOS Big Sur 11.2.3
• Safari 14.0.3
• Commit a4dd09e

Description

When user does not enter any URL to probe, the config generator include it in the generated config which cannot be run in Monika.

Demo

Bug description

Social media icons have no margins in Safari for Mac.

Screenshot

System

• macOS Big Sur 11.2.3
• Safari 14.0.3
• Commit a4dd09e

• Github actions to build and test on PR
• Github actions to deploy to Github Pages on merge to main
• Prettier
• ESLint
• Typescript type check

Use react-testing-library to add tests for the pages or components.

As Monika is currently support yaml file for configuration, add selection for generating config on yaml file.

Currently all the pages have not titles in the

• Page /. Title: Monika Configuration Generator. Description: Web app to generate configuration file for Monika, the open source and free monitoring tool.
• Page /what-do-you-want. Title: Monika Configuration Generator | Select what to monitor.
• Page /web-page: Monika Configuration Generator | Add website URL
• Page /notifications: Monika Configuration Generator | Add notifications
• Page /download: Monika Configuration Generator | Download
• Page /advanced: Monika Configuration Generator | Advanced

The arrow is too close to the right edge

Describe the bug
Vulnerability have been highlighted by npm audit in dependency of next js

To Reproduce
Steps to reproduce the behavior:

1. Run npm audit

Expected behavior
No vulnerabilities should be found.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. Ubuntu]
• Version [e.g. 20.04]

These pages haven't saved the input to context:

• api-entry.tsx
• web-form.tsx
• web-page.tsx

Use the react context to store the form data temporarily so that the configuration file can be generated and downloaded at the end.

Description

When importing existing JSON configuration, the incidentThreshold and recoveryThreshold is not shown correctly in the form.

Steps to reproduce

• Use this configuration file. Note that the threshold is 10.
• Import it to monika config generator.
• The threshold is 5 in the form. It should be 10.

{
  "notifications": [],
  "probes": [
    {
      "id": "2",
      "name": "github.com",
      "description": "Landing page of github.com",
      "interval": 20,
      "incidentThreshold": 10,
      "recoveryThreshold": 10,
      "requests": [
        {
          "url": "https://github.com"
        }
      ],
      "alerts": [
        {
          "query": "response.status < 200 or response.status > 299"
        },
        {
          "query": "response.time > 2000"
        }
      ]
    }
  ]
}

Expected result

• The threshold value should be 10.
• If the incidentThreshold and recoveryThreshold are different in the config file, use the bigger one.

Bug description

Application shows "An unexpected error has occurred." when existing configuration file is imported. And in the browser's console, there are lots of errors: "TypeError: Cannot convert undefined or null to object"

Step to reproduce

1. Open the landing page
2. Choose I have configuration file
3. Click Next
4. Select a monika.json

Expectation

• User should be able to import existing valid config file then edit them in /advanced page.
• If the file is not valid, e.g., not in JSON format, should show an alert to tell the user about the error.

Problem

User cannot enter notification because they are never navigated to notifications page.

Expectation

From the web-page, web-form, and api-entry, user should be navigated to notifications when clicking Next.

Problem

The config generator does not support the new notification channels yet.

Screenshot

Expected

• Support for Monika Whatsapp Notifier channel
• Support for Facebook Workplace channel

Since the subject is removed from Monika's notification, we don't need to show the subject field anymore.

In the landing page, add a box under the Next button with the following text.

If you use Visual Studio Code on a daily basis, you can write Monika configuration easily with the help of auto completion and validation by installing the YAML extension. More information can be found in our Creating Monika Configuration from Scratch using Autocomplete in Visual Studio Code blog post.

Problem

File names are inconsistent, some using camelCase, some PascalCase.

Solution

Let's use kebab-case. For file names that consist of more than a word, use dash (-) to concatenate. E.g., notification-context.tsx.

For consistency, change the footer in the config generator to be exactly the same with Monika's landing page.

User should be able to import their configuration file and edit them in monika-config-generator.

TODO

• Allow user to select their configuration file
• Show the page where user can edit their configuration file

Currently notification data from notifications page is stored in local state, please store it into notification Context.

Problem

Generated config file cannot be used Monika when SMTP notification is defined. The error is

 ›   Error: Failed to send message using SMTP, please check your SMTP 
 ›   notification config.
 ›   Message: No recipients defined

Step to reproduce

1. Open Monika config generator
2. Select I'm New to monika
3. Select web page
4. Enter few urls
5. On notification page, send email, specify SMTP server.
6. Generate config.
7. Use the config in Monika.

Expectation

The generated config should be usable in Monika

To reproduce:

1. Go to Advanced page https://monika-config.hyperjump.tech/advanced
2. Set the request to POST.
3. Select JSON as body type.
4. Try typing in the body area.

Cannot type anything.

The text is unreadable because of lack of color contrast

The documentation and also the interface of Sendgrid config require a sender value, but the form in config generator does not have the corresponding input field

Description

In Chrome (maybe in other browser too, haven't checked), when the cursor is hovering above a number field, it changes the value in that field when user scrolls up or down. See the video. This causes unexpected change.

Expected

The number value should not change when user scrolls.

• Use the same navigation header

• Use the same footer and background as https://whatsapp.hyperjump.tech/
• New favicon
• Link Monika logo to https://monika.hyperjump.tech/

When user clicks on Generate Config Button, this app should generate a valid configuration.

TODO

• Generate a valid config.json (collect data from context)
• Create a test to make sure the generated json file can be read and validated by Monika.

It should persist the entered URLs.

• Clicking download config file does not do anything
• Typo: "Click the download buttn below to get it."
• Clicking Start again does not do anything
• Clicking Back does not do anything

Clicking Next when "I have used Monika before" is selected does not do anything.

By default when running Monika without an alerts, it will be set as status-not-2xx and response-time-greater-than-2000-ms. This could be weird in Monika Config Generator as it allows user to input no alerts at all.

• Set the minimum alerts to 1
• When importing configuration without any alerts, set the alerts to status-not-2xx and response-time-greater-than-2000-ms
• When user tries to uncheck two alerts, make sure that when there is only 1 alert checkbox checked, the other alert checkbox should be disabled

Problem

• Nothing happens when user clicks Next in what-do-you-want page
• Nothing happens when user clicks Next in api-entry, web-page, and web-form.

Expected

• User should be able to navigate to web-page, web-form, or api-entry from what-do-you-want page.
• User should be able to navigate to download from web-page, web-form, or api-entry