mailinabox/management/reporting/ui/panel-user-activity.html

<div>
  
  <b-modal ref="message_headers_modal" hide-header no-fade ok-only no-close-on-backdrop size="lg" scrollable>
    <message-headers-view :user_id="data_user_id" :lmtp_id="lmtp_id"></message-headers-view>
  </b-modal>
    
  <datalist id="panel-ua-users">
    <option v-for="user in all_users">{{ user }}</option>
  </datalist>

  <b-form @submit.prevent="getChartData()" class="d-flex">
    <b-input-group class="mb-3" style="width:30em">
      <b-form-input ref="user_id_input" class="h-auto" :autofocus="data_user_id===null" list="panel-ua-users" @change="sync_user_id" placeholder="Enter a user id/email address"></b-form-input>
      <b-input-group-append>
        <b-button variant="primary" @click="change_user">Change user</b-button>
      </b-input-group-append>
    </b-input-group>
    <b-alert variant="warning" class="ml-2" :show="sent_mail && sent_mail.items.length>=get_row_limit() || received_mail && received_mail.items.length>=get_row_limit() || imap_details && imap_details.items.length>=get_row_limit()"><sup>*</sup> Tables limited to {{ get_row_limit() }} rows <router-link to="/settings"><b-icon icon="gear-fill"></b-icon></router-link></b-alert>
    <b-form-checkbox class="ml-auto" v-model="show_only_flagged" @change="show_only_flagged_change()">Flagged only</b-form-checkbox>
  </b-form>

  <b-tabs content-class="mt2" v-model="tab_index" v-if="sent_mail && received_mail">
    <b-tab>
      <template #title>
        Sent mail<sup v-if="sent_mail.items.length >= get_row_limit()">*</sup> ({{sent_mail.unique_sends}} &rarr; {{sent_mail.items.length}})
      </template>
      <b-table
        class="sticky-table-header-0 bg-light"
        small
        :filter="show_only_flagged_filter"
        :filter-function="table_filter_cb"
        tbody-tr-class="cursor-pointer"
        details-td-class="cursor-default"
        @row-clicked="row_clicked"
        :items="sent_mail.items"
        :fields="sent_mail.fields">
        <template #row-details="row">
          <b-card>
            <div><strong>Relay</strong>: {{row.item.relay}}</div>
            <div v-if="row.item.service != 'lmtp'"><strong>Connection</strong>:{{ row.item.delivery_connection_info }}</div>
            <div><strong>Delivery</strong>: {{row.item.delivery_info}}</div>
            <div v-if="row.item.spam_result"><strong>Spam score</strong>: {{sent_mail.x_fields.spam_score.formatter(row.item.spam_score)}}</div>
          </b-card>
        </template>
        
      </b-table>
    </b-tab>
    
    <b-tab>
      <template #title>
        Received mail<sup v-if="received_mail.items.length >= get_row_limit()">*</sup> ({{received_mail.items.length}})
      </template>
      <b-table
        class="sticky-table-header-0 bg-light"
        small
        :filter="show_only_flagged_filter"
        :filter-function="table_filter_cb"
        tbody-tr-class="cursor-pointer"
        details-td-class="cursor-default"
        @row-clicked="row_clicked"
        :items="received_mail.items"
        :fields="received_mail.fields">
        <template #cell(envelope_from)='data'>
          <wbr-text :text="data.value" :text_break_threshold="15"></wbr-text>
        </template>
        <template #row-details="row">
          <b-card>
            <div><strong>Remote sender</strong>: {{ row.item.remote_host }}[{{ row.item.remote_ip }}]</div>
            <div><strong>Connection disposition</strong>: {{ disposition_formatter(row.item.disposition) }}</div>
            <div v-if="row.item.orig_to"><strong>Sent to alias</strong>: {{ row.item.orig_to }}</div>
            <div v-if="row.item.dkim_reason"><strong>Dkim reason</strong>: {{row.item.dkim_reason}}</div>
            <div v-if="row.item.dmarc_reason"><strong>Dmarc reason</strong>: {{row.item.dmarc_reason}}</div>
            <div v-if="row.item.postgrey_reason"><strong>Postgrey reason</strong>: {{row.item.postgrey_reason}}</div>
            <div v-if="row.item.postgrey_delay"><strong>Postgrey delay</strong>: {{received_mail.x_fields.postgrey_delay.formatter(row.item.postgrey_delay)}}</div>
            <div v-if="row.item.spam_result"><strong>Spam score</strong>: {{received_mail.x_fields.spam_score.formatter(row.item.spam_score)}}</div>
            <div v-if="row.item.message_id"><strong>Message-ID</strong>: {{ row.item.message_id }}</div>
            <div v-if="row.item.failure_info"><strong>Failure info</strong>: {{row.item.failure_info}}</div>
            <div v-if="row.item.lmtp_id"><a href="#" @click.prevent.stop="show_message_headers(row.item.lmtp_id)">Message headers</a></div>
          </b-card>
        </template>
      </b-table>
    </b-tab>


    <b-tab>
      <template #title>
        IMAP Connections
      </template>

      <b-table
        tbody-tr-class="cursor-pointer"
        selectable
        select-mode="single"
        :filter="show_only_flagged_filter"
        :filter-function="table_filter_cb"
        :items="imap_conn_summary.items"
        :fields="imap_conn_summary.fields"
        @row-clicked="load_imap_details">
      </b-table>       

      <div v-if="imap_details" class="bg-white">
        <div class="mt-3 text-center bg-info p-1">{{imap_details._desc}} ({{imap_details.items.length}} rows<sup v-if="imap_details.items.length >= get_row_limit()">*</sup>)</div>
        <b-table
          class="sticky-table-header-0"
          small
          :items="imap_details.items"
          :fields="imap_details.fields">
        </b-table>
      </div>
      
    </b-tab>

  </b-tabs>
</div>