IPアドレスの一覧表の形式を修正

目次

GLIPAHサイトのIPアドレスの一覧表の形式を変更します。

これまでの一覧表は以下の形式です。

idIPアドレスアクセス日時
2xx.xx.xx.xx2020/05/31 21:46:18
1xx.xx.xx.xx2020/05/31 21:46:17

これを以下の形式に変更します。

IPアドレスアクセス回数初回のアクセス日時最新のアクセス日時
xx.xx.xx.xx22020/05/31 21:46:182020/05/31 21:46:18
yy.yy.yy.yy102020/05/31 21:46:172020/05/31 21:46:17

IPアドレスごとにまとめて、各IPアドレスごとにアクセス回数、初回と最新のアクセス日時を表示します。 各行は初回のアクセス日時が新しいIPアドレスが上にソートします。 これは、次にIPアドレスごとに、なんらかの処理、たとえばGoogleアナリティクスのフィルターとして登録したことを記録するための準備です。

影響するテストをスキップ

一覧表をHTMLレベルで確認するテストは修正が一区切りするまでエラーになるため、スキップさせます。

テストケースの見直し

一覧表の修正にあわせて、テストケースを見直します。 以下は、現状のHTMLレベルで確認するテストケースです。

ケース1

IPアドレスとアクセス日時をipHistory配列に設定します。

IPアドレスアクセス日時
zz.zz.zz.zz2020-04-30 12:34:56

以下のように表示されます。

IPアドレスアクセス回数初回のアクセス日時最新のアクセス日時
zz.zz.zz.zz12020-04-30 12:34:562020-04-30 12:34:56

ケース2

IPアドレスとアクセス日時をipHistory配列に設定します。

IPアドレスアクセス日時
zz.zz.zz.zz2020-04-30 12:34:56
yy.yy.yy.yy2020-05-01 11:11:11
IPアドレスアクセス回数初回のアクセス日時最新のアクセス日時
yy.yy.yy.yy12020-05-01 11:11:112020-05-01 11:11:11
zz.zz.zz.zz12020-04-30 12:34:562020-04-30 12:34:56

ケース3

axios.getとDateをモックにして、テストデータを返します。

IPアドレスアクセス日時
ab.cd.ef.gh2020-05-06 01:02:03

以下のように表示されます。

IPアドレスアクセス回数初回のアクセス日時最新のアクセス日時
ab.cd.ef.gh12020-05-06 01:02:032020-05-06 01:02:03

ケース4

axios.getとDateをモックにして、テストデータを返します。

IPアドレスアクセス日時
ab.cd.ef.gh2020-05-06 01:02:03
ab.cd.ef.gh2020-05-06 01:02:03
IPアドレスアクセス回数初回のアクセス日時最新のアクセス日時
ab.cd.ef.gh22020-05-06 01:02:032020-05-06 01:02:03

ケース5

axios.getとDateをモックにして、テストデータを返します。

IPアドレスアクセス日時
ab.cd.ef.gh2020-05-06 01:02:03
11.22.33.442020-05-10 00:11:22

以下のように表示されます。

IPアドレスアクセス回数初回のアクセス日時最新のアクセス日時
11.22.33.4412020-05-10 00:11:222020-05-10 00:11:22
ab.cd.ef.gh12020-05-06 01:02:032020-05-06 01:02:03

上記のテストケースのうち、以下のように変更します。

  • テストケース1と2はテストケース3と5と重複しているため、削除します。

  • ケース4の2回目のアクセス日時を2020-05-07 03:49:38に変更して、初回のアクセス日時と最新アクセス日時の違うテストをします。

あわせて以下のテストケースを追加します。追加するテストケースは、axios.getとDateをモックにしてテストデータを返します。

ケース6

3回とも同じIPアドレスからのアクセス、日時の順にアクセスされています。

IPアドレスアクセス日時
ab.cd.ef.gh2020-05-06 01:02:03
ab.cd.ef.gh2020-05-21 07:23:39
ab.cd.ef.gh2020-06-01 22:11:00
IPアドレスアクセス回数初回のアクセス日時最新のアクセス日時
ab.cd.ef.gh32020-05-06 01:02:032020-06-01 22:11:00

ケース7

3回とも同じIPアドレスからのアクセス、アクセスの順序が入れ替わっています。

IPアドレスアクセス日時
ab.cd.ef.gh2020-05-06 01:02:03
ab.cd.ef.gh2020-06-01 22:11:00
ab.cd.ef.gh2020-05-21 07:23:39
IPアドレスアクセス回数初回のアクセス日時最新のアクセス日時
ab.cd.ef.gh32020-05-06 01:02:032020-06-01 22:11:00

ケース8

3回目に別のIPアドレスからアクセスされています。

IPアドレスアクセス日時
ab.cd.ef.gh2020-05-06 01:02:03
ab.cd.ef.gh2020-06-01 22:11:00
11.22.33.442020-06-10 00:11:22
IPアドレスアクセス回数初回のアクセス日時最新のアクセス日時
11.22.33.4412020-06-10 00:11:222020-06-10 00:11:22
ab.cd.ef.gh22020-05-06 01:02:032020-06-01 22:11:00

ケース9

2回めに別のIPアドレスからアクセスされています。

IPアドレスアクセス日時
ab.cd.ef.gh2020-05-06 01:02:03
11.22.33.442020-05-10 00:11:22
ab.cd.ef.gh2020-06-01 22:11:00
IPアドレスアクセス回数初回のアクセス日時最新のアクセス日時
11.22.33.4412020-05-10 00:11:222020-05-10 00:11:22
ab.cd.ef.gh22020-05-06 01:02:032020-06-01 22:11:00

ケース10

初回のアクセス日時の更新を確認します。

IPアドレスアクセス日時
ab.cd.ef.gh2020-06-01 22:11:00
ab.cd.ef.gh2020-05-06 01:02:03
11.22.33.442020-05-10 00:11:22
IPアドレスアクセス回数初回のアクセス日時最新のアクセス日時
11.22.33.4412020-05-10 00:11:222020-05-10 00:11:22
ab.cd.ef.gh22020-05-06 01:02:032020-06-01 22:11:00

プログラムの修正

テンプレートを以下のように修正します。

        <thead>
          <tr>
            <th>IPアドレス</th>
            <th>アクセス回数</th>
            <th>初回のアクセス日時</th>
            <th>最新のアクセス日時</th>
          </tr>
        </thead>
        <tbody v-for="item in ipHistory" :key="item.ipAddress">
          <tr>
            <td>{{ item.ipAddress }}</td>
            <td>{{ item.accessCount }}</td>
            <td>{{ item.firstAccessDate }}</td>
            <td>{{ item.lastAccessDate }}</td>
          </tr>
        </tbody>

ipHistory配列への代入を以下のように修正します。

    addIpHistory(id, ipAddress, accessDate) {
      const index = this.ipHistory.findIndex(
        address => address.ipAddress === ipAddress
      );
      if (index == -1) {
        this.ipHistory.unshift({
          id: id,
          ipAddress: ipAddress,
          accessCount: 1,
          firstAccessDate: accessDate,
          lastAccessDate: accessDate
        });
      } else {
        if (this.ipHistory[index].firstAccessDate > accessDate) {
          this.ipHistory[index].firstAccessDate = accessDate;
        }
        if (this.ipHistory[index].lastAccessDate < accessDate) {
          this.ipHistory[index].lastAccessDate = accessDate;
        }
        this.ipHistory[index].accessCount++;
      }
    },