TWLogAIAN:Grid.jsの選択プラグインが動かないので自前で選択処理を作った

今朝は４時半から開発開始です。
昨日作ったログを選択してクリップボードにコピーする機能に大きな問題が見つかりました。Grid.jsのプラグイン

Selection Plugin | Grid.js

を使ってログを選択していたのですが、何故か１回目のログ表示では快適に選択できますが、２回目以降は選択のイベントが発生しないため動作しません。昨夜からいろいろ試してみましたが、まったく解決できませんでした。
単にGrid.jsだけならば問題ないのかもしれませんが、私が使っているのは
Wails + Svelte+ Primer/CSS + Grid.jsの環境なので前例のないものだと思います。結局、このプラグインは諦めて自前で選択機能を作ることにしました。

ログを選択してクリップボードへコピーする機能の改善 · twsnmp/TWLogAIAN@18acc60

ポイントは、カラムのヘッダに

  {
    id: "select",
    name: "",
    width: "5%",
    sort: false,
    formatter: (cell, row) => {
      return h('input', {
        type: 'checkbox',
        onChange: () => {
          const key = row.cells[3].data
          if (selectLogMap.has(key)) {
            selectLogMap.delete(key); 
          } else {
            selectLogMap.set(key,true);
          }
        }
      });
    },
  },{

のようにチェックボックスをつけてチェックしたら選択リストを更新する
ようにしました。この修正で安定して動作するようになりました。
久しぶりにかなり苦労しました。

その後、ログタイプのインポート機能をつけました。

ログタイプのインポート機能

extractortypes:
- key: TWPCAP_STATS
  name: TWPCAPの統計情報
  grok: type=Stats,total=%{BASE10NUM:total},count=%{BASE10NUM:count},ps=%{BASE10NUM:ps}
  timefield: ""
  ipfields: ""
  macfields: ""
  view: ""
- key: TWPCAP_IPTOMAC
  name: TWPCAPのIPとMACアドレス
  grok: type=IPToMAC,ip=%{IP:ip},mac=%{MAC:mac},count=%{BASE10NUM:count},change=%{BASE10NUM:chnage},dhcp=%{BASE10NUM:dhcp}
  timefield: ""
  ipfields: ip
  macfields: mac
  view: ""

のような定義ファイルをインポートすれば、

拡張ログタイプがメニューに表示される様子

のようにログタイプのメニューが増えます。

更に、ログのリストの表示を切り替えできるようにしました。

ログ表示の切り替え

タイムオンリーの場合に選択してコピーできます。抽出データのリストも表示できるようにしました。

抽出データの表示例

もちろんEXCELやCSVへエクスポートできます。
Grid.jsの問題の山を越えたら快調に開発がするみました。でも、今朝は時間切れです。

明日に続く