TWSNMP FC: データストアのページ追加

最近は猫と起きるタイミング会いません。朝４時ぐらいに騒いでいたらしいのですが、私は気づかず、かみさんがお世話をしたようです。私が５時半に起きると猫は寝ていました。温かいのでそれほど文句も言いません。

今日はお休みなので朝６時からずっとTWSNMP FCの開発をしています。一昨日作ったバックアップやデータストア情報の裏側の処理結果を表示するためのページを追加しました。設定のページも細かく分離しました。Influxdbとの連携を設定するページも独立して作りました。

設定画面は作るパターンに慣れてきたのでスムーズに開発できるます。
次にデータストアの情報を表示するページです。復刻版では、

のような表示ですが、TWSNMP FCでは、ちょっと凝った画面にしようといろいろモニタするデータを改善して

のようにしました。いろいろやっているうちに時間がたっていきます。黄色い枠の中に表示している数値を見ると、

数値の表示が人間には優しくないのに気づきました。経過時間が秒数ではいったい何時間なのか？サイズはいったい何MBなのか？復刻版では、GO言語のパッケージを使って数値などを人間も分かりやすい形式にフォーマットしていました。

dustin/go-humanize

でもTWSNMP FCでは、GO言語側では表示のための処理をしないことにしたのでJavaScript側でできないか探しました。ありました。

Numeral.js

これを使って数値のフォーマットを整える処理を

    this.dbStats.Duration = numeral(r.DBStats.Duration).format('00:00:00')
   this.dbStats.Size = numeral(r.DBStats.Size).format('0.000b')
   this.dbStats.TotalWrite = numeral(r.DBStats.TotalWrite).format('0,0')
   this.dbStats.Speed =
     numeral(r.DBStats.Speed).format('0.000a') + ' Write/Sec'
   this.dbStats.PeakSpeed =
     numeral(r.DBStats.PeakSpeed).format('0.000a') + ' Write/Sec'
   this.dbStats.AvgSpeed =
     numeral(r.DBStats.AvgSpeed).format('0.000a') + ' Write/Sec'

のように書くと、

のように分かりやすくなりました。

今日の作業は、

データストアとInfluxdbのページを追加、バックアップ機能の整理 · twsnmp/twsnmpfc@c372654

と

numeralを利用してデータストア情報の数値を人間が認識しやすくした · twsnmp/twsnmpfc@556f5d9

です。

気がつけば、今日は１０時間もプログラム作っていました。その間、猫は部屋が温かいのでずっと寝ていました。
明日に続く。