EventBridgeのcron確認ページを作ってみた #React

はじめに

この記事は、ミロゴス Advent Calendar 2022 10日目の記事です。

EventBridgeのcron式を確認するサイトが無さそうだったので、簡易作成し、github pagesで公開してみました。

機能としては入力したcron式に対して、次回実行時間・その次の実行時間を表示する というシンプルなものになっています。

✳︎ 実装はNextJsで行っています。
✳︎ サッと作ったので、うまく動いていない部分あるかと思います。
　（リポジトリ公開しているので、contributeしていただけると嬉しいです）

リポジトリ
 ページはこちら

実装

メインのparser部分はこちらの方のpackageをお借りしています。
https://github.com/beemhq/aws-cron-parser
下記の本体で「awsCronParser」としてimportしています。

今回は大きな実装でもないため create next app で新規環境を作成し、index.tsxを書き換える形で進めています。

本体(index.tsx)

index.tsx

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import awsCronParser from "aws-cron-parser";
import { useState, useEffect } from "react";
import { useForm } from "react-hook-form";

type FormData = {
  expression: string
}

export default function Home() {
  const {
    register,
    watch
  } = useForm<FormData>();

  const [result, setResult] = useState('');
  const [next, setNext] = useState('');
  const input = watch('expression')

  useEffect(() => {
    try {
      const numberOfSpace = input.match(/ /g);
      if (numberOfSpace?.length! === 5) {
        const cron = awsCronParser.parse(input);
        const occurrence = awsCronParser.next(cron, new Date())!
        const afterNext = awsCronParser.next(cron, occurrence)!

        setResult(occurrence.toUTCString());
        setNext(afterNext.toUTCString()!);
      } else {
        setResult('');
      }
    } catch {
      setResult('');
    }
  }, [input]);

  return (
    <div className={styles.container}>
      <Head>
        <title>AWS Cron Checker</title>
        <meta name="description" content="Checking the aws cron expression" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.main_title}>AWS Cron Checker</h1>
        {result && <h2>Next execution time</h2>}
        {result && <h2 className={styles.result}>{ result }</h2>}
        {result && next && <h3>After next</h3>}
        {result && next && <h3>next: { next }</h3>}
        <div>
          <input className={styles.input_field} {...register('expression')} placeholder="0 9 ? * 5 *"/>
        </div>
        <table className={styles.rule_table}>
          <thead>
            <tr>
              <th>Field</th>
              <th>Values</th>
              <th>Wildcards</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Minutes</td>
              <td>0-59</td>
              <td>, - * /</td>
            </tr>
            <tr>
              <td>Hours</td>
              <td>0-23</td>
              <td>, - * /</td>
            </tr>
            <tr>
              <td>Day-of-month</td>
              <td>1-31</td>
              <td>, - * ? / L W</td>
            </tr>
            <tr>
              <td>Month</td>
              <td>1-12 or JAN-DEC</td>
              <td>, - * /</td>
            </tr>
            <tr>
              <td>Day-of-week</td>
              <td>1-7 or SUN-SAT</td>
              <td>, - * ? L #</td>
            </tr>
            <tr>
              <td>Year</td>
              <td>1970-2199</td>
              <td>, - * /</td>
            </tr>
          </tbody>
        </table>
      </main>
    </div>
  )
}

今回フォームへの入力監視はuseFormを利用しており、値の変更をuseEffectで検知しています。
useForm便利なので、どんどん使っていきたいですね。

まとめ

今回は packageを利用してサクッと実装してみました。
個人的にフロントエンドがかなり弱いので、引き続きアウトプット頑張りたいなと思います。