(我が家のPC運用)ダッシュボードで運用情報を確認


我が家の運用情報の確認

前回前々回とWindowsバッチによるバックアップ、イベントログ収集を実行する記事を書きました。
上記のコードは「こちら」に格納していますが、左記にあるバッチは実行結果をレポートファイルに出力するようにしています。
今回、これらのファイルを読み込んで画面に出力するPC運用情報表示アプリケーションをElectronで作成したので記事にしたいと思います。

画面について

画面はこのようになっています。

  • 1つの枠で、1つの運用バッチの実行結果を示します。
  • 成功や異常なしは青、異常がある場合は赤で表示します。
  • 詳細情報がある場合は枠内右に表示します。

枠をクリックで詳細情報の非表示/表示が切り替わります。すべての詳細を非表示にするとこのようになります。

アプリケーションの動きについて

PC運用情報表示アプリケーションは、各種運用バッチが出力するレポートファイルを読み込んで表示します。
イメージ図です。難しい処理はしていません。

複数のレポートファイルは一か所のフォルダ内に格納し決まった形式にする必要があります。

  • 「[HEAD]日時,結果」で実行結果を
  • 「[REPORT]日時,詳細」で詳細を複数行

例として、こんな感じです。

[REPORT][NOTICE!]2020/12/11 23:11:44,警告,(1006 マルウェア対策エンジンが、マルウェアまたは他の望ましくない可能性のあるソフトウェアを検出しました。)
[REPORT][NOTICE!]2020/12/13 00:39:50,警告,(1006 マルウェア対策エンジンが、マルウェアまたは他の望ましくない可能性のあるソフトウェアを検出しました。)
[REPORT]2020/12/11 22:04:30,情報,(1001 マルウェア対策スキャンが終了しました)
[REPORT]2020/12/10 03:05:36,情報,(2002 マルウェア対策のエンジンが正常に更新されました。)
[REPORT]2020/12/13 04:05:41,情報,(2000 マルウェア対策の定義が正常に更新されました。)
[HEAD]2020/12/13 23:50:06,異常発生

こちら」に公開しているコードを使用する場合、環境に合わせて以下の箇所をカスタマイズします。

  • main.js 以下の箇所でレポートファイルのパスを定義しています。
    // ここにレポートファイルのパスを定義する
    event.returnValue = app.getAppPath() + "\\sampleReport";
  • index.html レポートファイルを表示する属性です。
    <div class="area_report" id="area_report_bkup"></div>
    <div class="area_report" id="area_report_bwch"></div>
  • commonPcmaint.js レポートファイルを読み込む処理です。
    // 通知領域を読み込む
    readNotice() {
        this._parseAndDisplayReport("area_report_bkup", "report_bkup.txt", "バックアップ(データ)");
        this._parseAndDisplayReport("area_report_bwch", "report_bwch.txt", "ブラウザキャッシュ");