見出し画像

ログ分析ツール:GROK抽出パターンの編集画面の改善するアイデアを夜中に思いつく

今朝は7時まで寝てしまいました。先週は本業も忙しくて疲れていたのかもしれません。
夜中にログから情報を抽出するためのGROK抽出パターンを編集する画面を改善するアイデアを思いついたので作ってみました。
これまでの画面は、

のような感じで作った当時は画期的な方法と思っていましたが、昨日実戦で使ってみる入力する部分とカラー表示する部分が別れているのでと直感的ではないと思いました。選択してキー操作で変換するのも、すっかり忘れていました。これが気になったまま寝たので眠っている間も考えていたのかもしれません。やりたいことは、カラー表示する部分を選択してボタンで変換するような操作です。
最初は、

のようなWeb画面に表示するエディターを使う方法を考えてみました。
ちょっと大がかかりになりそうなので、やめました。
自分で、キー入力を処理して簡易なエディタを作ろうかと思いましたが、
これも大変そうなのでやめました。
発想を変えて、

  • 最初はカラー表示の部分だけにする

  • INPUTは細かく編集する時だけボタンで表示

  • カラー表示を選択して変換できる場合に変換ボタンを表示する

という方法にしました。
問題は、カラー表示(INPUTではない)部分のテキストを選択できるか?
というものです。Svelteの標準の方法では、だめなようですが

を使ってできました。これが解決できたので、作ってみました。

選択すると変換ボタンが有効になります。クリックすれば変換できます。

<開く>ボタンでINPUTを表示して細かな編集もできます。
これなら使えそうです。時間がたっても画面から使い方を思い出せそうです。
今度こそ、今回の改善は終わりにしようと思います。
午後から浦和レッズの試合があるので、ここまでをまとめてリリースしようと思います。

明日に続く

開発のための諸経費(機材、Appleの開発者、サーバー運用)に利用します。 ソフトウェアのマニュアルをnoteの記事で提供しています。 サポートによりnoteの運営にも貢献できるのでよろしくお願います。