Create filter setting dialog for each tab

[msaltnet]

activator 버튼

      <v-tooltip bottom>
        <template v-slot:activator="{ on, attrs }">
          <v-btn icon class="mx-1"
            v-bind="attrs"
            v-on="on"
            @click.stop="dialog = true">
            <v-icon>mdi-filter</v-icon>
          </v-btn>
        </template>
        <span>Tag: {{ getTagFilter }}</span><br>
        <span>Message: {{ getMessageFilter }}</span>
      </v-tooltip>

dialog

    <v-dialog
      v-model="dialog"
      max-width="500"
    >
      <v-card>
        <v-card-title class="headline">{{ tabName }} Filter Settings</v-card-title>

        <v-card-text>
          <v-container>
            <v-row>
              <v-col cols="9">
                <v-text-field label="Tag" v-model="tagFilter"></v-text-field>
              </v-col>
              <v-col cols="3">
                <v-checkbox
                  v-model="tagCheckbox"
                  label="regex"
                ></v-checkbox>
              </v-col>
              <v-col cols="9">
                <v-text-field label="Message" v-model="messageFilter"></v-text-field>
              </v-col>
              <v-col cols="3">
                <v-checkbox
                  v-model="messageCheckbox"
                  label="regex"
                ></v-checkbox>
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>
      </v-card>
    </v-dialog>

computed value

  computed: {
    getTagFilter: function() {
      return this.tagFilter == '' ? '-' : this.tagFilter;
    },
    getMessageFilter: function() {
      return this.messageFilter == '' ? '-' : this.messageFilter;
    }
  },

method

    onFilterSettingOkButtonClicked: function () {
      console.log(`tag ${this.tagFilter}, message ${this.messageFilter}`);
      this.dialog = false;
    },
...
show: this.filterLogLevel(line) && this.filterTag(line) && this.filterMessage(line)
...
    // 07-10 14:51:21.337+0900 I/RESOURCED( 2617): heart-battery.c:....
    filterTag: function (line) {
      if (this.tagFilter == '')
        return true;

      const LOG_LEVEL_CHAR_START_POSITION = 26;
      let tagEndIndex = line.indexOf('(');
      let tag = line.substring(LOG_LEVEL_CHAR_START_POSITION, tagEndIndex);
      tag = tag.replace(/\s/g, '');
      return tag === this.tagFilter;
    },
    // 07-10 14:51:21.337+0900 I/RESOURCED( 2617): heart-battery.c:....
    filterMessage: function (line) {
      if (this.messageFilter == '')
        return true;

      return -1 != line.indexOf(this.messageFilter);
    },

[msaltnet]

6585392ead8d9bbda01def49999a39362f88dd1f