<commit_before><template>
  <div id="main" class="panel panel-default">
    <div class="panel-heading">
      <i class="bi bi-bar-chart-steps"></i> Pool Status
    </div>
    <div class="panel-body">
      <table class="table">
        <tbody>
          <tr>
            <td>Pool ID:</td>
            <td>
              <a :href="pool.hook_url">{{ pool.pool_id }}</a>
            </td>
          </tr>
          <tr>
            <td>Pool Name:</td>
            <td>{{ pool.pool_name }}</td>
          </tr>
          <tr>
            <td>Platform:</td>
            <td>{{ pool.platform }}</td>
          </tr>
          <tr>
            <td>Size:</td>
            <td>{{ pool.size }}</td>
          </tr>
          <tr>
            <td>CPU:</td>
            <td>{{ pool.cpu }}</td>
          </tr>
          <tr>
            <td>Cycle Time:</td>
            <td>
              {{ formatDateRelative(new Date(pool.cycle_time * 1000), 0, "") }}
            </td>
          </tr>
          <tr>
            <td>Max. Run Time:</td>
            <td>
              {{
                formatDateRelative(new Date(pool.max_run_time * 1000), 0, "")
              }}
            </td>
          </tr>
        </tbody>
      </table>
      <hr />
      <p>Displaying {{ currentEntries }}/{{ totalEntries }} entries.</p>
      <div class="pagination">
        <span class="step-links">
          <a
            v-on:click="prevPage"
            v-show="currentPage > 1"
            class="bi bi-caret-left-fill"
          ></a>
          <span class="current">
            Page {{ currentPage }} of {{ totalPages }}.
          </span>
          <a
            v-on:click="nextPage"
            v-show="currentPage < totalPages"
            data-toggle="tooltip"
            data-placement="top"
            title=""
            class="bi bi-caret-right-fill dimgray"
            data-original-title="Next"
          ></a>
        </span>
      </div>
    </div>
    <table class="table table-condensed table-hover table-bordered table-db">
      <thead>
        <tr>
          <th
            v-on:click="sortBy('task_id')"
            :class="{ active: sortKey === 'task_id' }"
            width="50px"
          >
            Task
          </th>
          <th
            v-on:click="sortBy('run_id')"
            :class="{ active: sortKey === 'run_id' }"
            width="15px"
          >
            Run
          </th>
          <th
            v-on:click="sortBy('state')"
            :class="{ active: sortKey === 'state' }"
            width="25px"
          >
            State
          </th>
          <th
            v-on:click="sortBy('created')"
            :class="{ active: sortKey === 'created' }"
            width="60px"
          >
            Created
          </th>
          <th
            v-on:click="sortBy('started')"
            :class="{ active: sortKey === 'started' }"
            width="60px"
          >
            Started
          </th>
          <th
            v-on:click="sortBy('resolved')"
            :class="{ active: sortKey === 'resolved' }"
            width="60px"
          >
            Resolved
          </th>
          <th
            v-on:click="sortBy('expires')"
            :class="{ active: sortKey === 'expires' }"
            width="60px"
          >
            Expires
          </th>
          <th width="150px">Status Data</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="task in tasks" :key="task.id">
          <td>
            <a :href="task.task_url">{{ task.task_id }}</a>
          </td>
          <td>{{ task.run_id }}</td>
          <td>
            <span
              class="label"
              :class="{
                'label-default': task.state === 'pending',
                'label-warning': task.state === 'exception',
                'label-primary': task.state === 'running',
                'label-danger': task.state === 'failed',
                'label-success': task.state === 'completed',
              }"
              >{{ task.state }}</span
            >
          </td>
          <td>
            {{ task.created | formatDate }}<br />{{
              task.created | formatDateAgo
            }}
          </td>
          <td v-if="task.started !== null">
            {{ task.started | formatDate }}<br />{{
              formatDateRelative(task.created, task.started, "later")
            }}
          </td>
          <td v-else>N/A</td>
          <td v-if="task.resolved !== null">
            {{ task.resolved | formatDate }}<br />{{
              formatDateRelative(
                task.started !== null ? task.started : task.created,
                task.resolved,
                "later"
              )
            }}
          </td>
          <td v-else>N/A</td>
          <td>
            {{ task.expires | formatDate }}<br />{{
              new Date(task.expires) > new Date()
                ? formatDateRelative(new Date(), task.expires, "from now")
                : formatDateRelative(task.expires)
            }}
          </td>
          <td v-if="task.status_data">
            <pre>{{ task.status_data }}</pre>
          </td>
          <td v-else>N/A</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import _throttle from "lodash/throttle";
import swal from "sweetalert";
import * as api from "../../api";
import {
  formatClientTimestamp,
  formatDateRelative,
  E_SERVER_ERROR,
  parseHash,
} from "../../helpers";

const pageSize = 100;<commit_msg>Add responsive class to TaskManager pool view.<commit_after><template>
  <div id="main" class="panel panel-default">
    <div class="panel-heading">
      <i class="bi bi-bar-chart-steps"></i> Pool Status
    </div>
    <div class="panel-body">
      <table class="table">
        <tbody>
          <tr>
            <td>Pool ID:</td>
            <td>
              <a :href="pool.hook_url">{{ pool.pool_id }}</a>
            </td>
          </tr>
          <tr>
            <td>Pool Name:</td>
            <td>{{ pool.pool_name }}</td>
          </tr>
          <tr>
            <td>Platform:</td>
            <td>{{ pool.platform }}</td>
          </tr>
          <tr>
            <td>Size:</td>
            <td>{{ pool.size }}</td>
          </tr>
          <tr>
            <td>CPU:</td>
            <td>{{ pool.cpu }}</td>
          </tr>
          <tr>
            <td>Cycle Time:</td>
            <td>
              {{ formatDateRelative(new Date(pool.cycle_time * 1000), 0, "") }}
            </td>
          </tr>
          <tr>
            <td>Max. Run Time:</td>
            <td>
              {{
                formatDateRelative(new Date(pool.max_run_time * 1000), 0, "")
              }}
            </td>
          </tr>
        </tbody>
      </table>
      <hr />
      <p>Displaying {{ currentEntries }}/{{ totalEntries }} entries.</p>
      <div class="pagination">
        <span class="step-links">
          <a
            v-on:click="prevPage"
            v-show="currentPage > 1"
            class="bi bi-caret-left-fill"
          ></a>
          <span class="current">
            Page {{ currentPage }} of {{ totalPages }}.
          </span>
          <a
            v-on:click="nextPage"
            v-show="currentPage < totalPages"
            data-toggle="tooltip"
            data-placement="top"
            title=""
            class="bi bi-caret-right-fill dimgray"
            data-original-title="Next"
          ></a>
        </span>
      </div>
    </div>
    <div class="table-responsive">
      <table class="table table-condensed table-hover table-bordered table-db">
        <thead>
          <tr>
            <th
              v-on:click="sortBy('task_id')"
              :class="{ active: sortKey === 'task_id' }"
              width="50px"
            >
              Task
            </th>
            <th
              v-on:click="sortBy('run_id')"
              :class="{ active: sortKey === 'run_id' }"
              width="15px"
            >
              Run
            </th>
            <th
              v-on:click="sortBy('state')"
              :class="{ active: sortKey === 'state' }"
              width="25px"
            >
              State
            </th>
            <th
              v-on:click="sortBy('created')"
              :class="{ active: sortKey === 'created' }"
              width="60px"
            >
              Created
            </th>
            <th
              v-on:click="sortBy('started')"
              :class="{ active: sortKey === 'started' }"
              width="60px"
            >
              Started
            </th>
            <th
              v-on:click="sortBy('resolved')"
              :class="{ active: sortKey === 'resolved' }"
              width="60px"
            >
              Resolved
            </th>
            <th
              v-on:click="sortBy('expires')"
              :class="{ active: sortKey === 'expires' }"
              width="60px"
            >
              Expires
            </th>
            <th width="150px">Status Data</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="task in tasks" :key="task.id">
            <td>
              <a :href="task.task_url">{{ task.task_id }}</a>
            </td>
            <td>{{ task.run_id }}</td>
            <td>
              <span
                class="label"
                :class="{
                  'label-default': task.state === 'pending',
                  'label-warning': task.state === 'exception',
                  'label-primary': task.state === 'running',
                  'label-danger': task.state === 'failed',
                  'label-success': task.state === 'completed',
                }"
                >{{ task.state }}</span
              >
            </td>
            <td>
              {{ task.created | formatDate }}<br />{{
                task.created | formatDateAgo
              }}
            </td>
            <td v-if="task.started !== null">
              {{ task.started | formatDate }}<br />{{
                formatDateRelative(task.created, task.started, "later")
              }}
            </td>
            <td v-else>N/A</td>
            <td v-if="task.resolved !== null">
              {{ task.resolved | formatDate }}<br />{{
                formatDateRelative(
                  task.started !== null ? task.started : task.created,
                  task.resolved,
                  "later"
                )
              }}
            </td>
            <td v-else>N/A</td>
            <td>
              {{ task.expires | formatDate }}<br />{{
                new Date(task.expires) > new Date()
                  ? formatDateRelative(new Date(), task.expires, "from now")
                  : formatDateRelative(task.expires)
              }}
            </td>
            <td v-if="task.status_data">
              <pre>{{ task.status_data }}</pre>
            </td>
            <td v-else>N/A</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import _throttle from "lodash/throttle";
import swal from "sweetalert";
import * as api from "../../api";
import {
  formatClientTimestamp,
  formatDateRelative,
  E_SERVER_ERROR,
  parseHash,
} from "../../helpers";

const pageSize = 100;
{'fraction_non_alphanumeric': 0.16355429684042835, 'fraction_numerical': 0.005487211257633419, 'mean_word_length': 1.1577238877219782, 'pattern_counts': {'":': 0, '<': 267, '<?xml version=': 0, '>': 269, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4883165', 'n_tokens_mistral': 3396, 'n_tokens_neox': 3255, 'n_words': 636}