impala/www/queries.tmpl

<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->
{{> www/common-header.tmpl }}

<style>
#json_profile_chooser {
  display: none;
}
</style>

<h2>Queries</h2>
<p class="lead">This page lists all running queries, completed queries that are archived
in memory, and imported query profiles.
<p>The in-memory archive size is controlled by <samp>--query_log_size</samp>
and <samp>--query_log_size_in_bytes</samp> command line parameters.
The length of the statements are controlled by <samp>--query_stmt_size</samp>
command line parameter.</p>

<h3>{{num_executing_queries}} queries in flight</h3>

<table class='table table-hover table-border'>
  <tr>
    <th title="{{tips_query_id}}">Query ID</th>
    <th title="{{tips_action_cancel}}">Action</th>
    <th title="{{tips_user}}">User</th>
    <th title="{{tips_default_db}}">Default Db</th>
    <th title="{{tips_query_type}}">Query Type</th>
    <th title="{{tips_start_time}}">Start Time</th>
    <th>
      <span title="{{tips_first_fetch}}">First&nbsp;Fetch</span>
      <hr style="margin-top:0px;margin-bottom:0px;"/>
      <span title="{{tips_client_fetch_duration}}">Client&nbsp;Fetch&nbsp;Duration</span>
    </th>
    <th>
      <span title="{{tips_duration}}">Duration</span>
      <hr style="margin-top:0px;margin-bottom:0px;"/>
      <!-- Using &nbsp; instead of ' ' prevents line breaks in the table header. -->
      <span title="{{tips_queued_duration}}">Queued&nbsp;Duration</span>
    </th>
    <th>
      <span title="{{tips_mem_usage}}">Mem&nbsp;Usage</span>
      <hr style="margin-top:0px;margin-bottom:0px;"/>
      <span title="{{tips_mem_estimate}}">Mem&nbsp;Estimate</span>
    </th>
    <th>
      <span title="{{tips_scan_progress}}">Scan&nbsp;Progress</span>
      <hr style="margin-top:0px;margin-bottom:0px;"/>
      <span title="{{tips_query_progress}}">Query&nbsp;Progress</span>
    </th>
    <th>
      <span title="{{tips_bytes_read}}">Bytes&nbsp;Read</span>
      <hr style="margin-top:0px;margin-bottom:0px;"/>
      <span title="{{tips_bytes_sent}}">Bytes&nbsp;Sent</span>
    </th>
    <th title="{{tips_state}}">State</th>
    <th title="{{tips_last_event}}">Last Event</th>
    <th title="{{tips_rows_fetched}}"># rows fetched</th>
    <th title="{{tips_resource_pool}}">Resource Pool</th>
    <th title="{{tips_coordinator_slots}}">Coordinator Slots</th>
    <th title="{{tips_executor_slots}}">Executor Slots</th>
    <th title="{{tips_statement}}">Statement</th>
  </tr>
{{! filter to get just executing queries from in_flight_queries}}
{{#in_flight_queries}}
{{?executing}}
  <tr>
    <td style="min-width:150px;word-break:break-all;"><a href='{{ __common__.host-url }}/query_plan?query_id={{query_id}}'>{{query_id}}</a></td>
    <td><a href='{{ __common__.host-url }}/cancel_query?query_id={{query_id}}'>Cancel</a></td>
    <td>{{effective_user}}</td>
    <td>{{default_db}}</td>
    <td><samp>{{stmt_type}}</samp></td>
    <td>{{start_time}}</td>
    <td>{{first_fetch}}<hr style="margin-top:0px;margin-bottom:0px;"/>{{client_fetch_duration}}</td>
    <td>{{duration}}<hr style="margin-top:0px;margin-bottom:0px;"/>{{queued_duration}}</td>
    <td>{{mem_usage}}<hr style="margin-top:0px;margin-bottom:0px;"/>{{mem_est}}</td>
    <td>{{progress}}<hr style="margin-top:0px;margin-bottom:0px;"/>{{query_progress}}</td>
    <td>{{bytes_read}}<hr style="margin-top:0px;margin-bottom:0px;"/>{{bytes_sent}}</td>
    <td><samp>{{state}}</samp></td>
    <td><samp>{{last_event}}</samp></td>
    <td>{{rows_fetched}}</td>
    <td>{{resource_pool}}</td>
    <td>{{coordinator_slots}}</td>
    <td>{{executor_slots}}</td>
    <td><samp>{{stmt}}</samp></td>
  </tr>
{{/executing}}
{{/in_flight_queries}}
</table>

<h3>
  {{num_waiting_queries}} waiting to be closed
  <sup><a href='#' data-toggle="tooltip" title="{{waiting-tooltip}}">[?]</a></sup>
</h3>

<table class='table table-hover table-border'>
  <tr>
    <th title="{{tips_query_id}}">Query ID</th>
    <th title="{{tips_action_close}}">Action</th>
    <th title="{{tips_user}}">User</th>
    <th title="{{tips_default_db}}">Default Db</th>
    <th title="{{tips_query_type}}">Query Type</th>
    <th title="{{tips_start_time}}">Start Time</th>
    <th title="{{tips_waiting_time}}">Waiting Time</th>
    <th>
      <span title="{{tips_first_fetch}}">First&nbsp;Fetch</span>
      <hr style="margin-top:0px;margin-bottom:0px;"/>
      <span title="{{tips_client_fetch_duration}}">Client&nbsp;Fetch&nbsp;Duration</span>
    </th>
    <th>
      <span title="{{tips_duration}}">Duration</span>
      <hr style="margin-top:0px;margin-bottom:0px;"/>
      <span title="{{tips_queued_duration}}">Queued&nbsp;Duration</span>
    </th>
    <th>
      <span title="{{tips_mem_usage}}">Mem&nbsp;Usage</span>
      <hr style="margin-top:0px;margin-bottom:0px;"/>
      <span title="{{tips_mem_estimate}}">Mem&nbsp;Estimate</span>
    </th>
    <th>
      <span title="{{tips_scan_progress}}">Scan&nbsp;Progress</span>
      <hr style="margin-top:0px;margin-bottom:0px;"/>
      <span title="{{tips_query_progress}}">Query&nbsp;Progress</span>
    </th>
    <th>
      <span title="{{tips_bytes_read}}">Bytes&nbsp;Read</span>
      <hr style="margin-top:0px;margin-bottom:0px;"/>
      <span title="{{tips_bytes_sent}}">Bytes&nbsp;Sent</span>
    </th>
    <th title="{{tips_state}}">State</th>
    <th title="{{tips_last_event}}">Last Event</th>
    <th title="{{tips_rows_fetched}}"># rows fetched</th>
    <th title="{{tips_resource_pool}}">Resource Pool</th>
    <th title="{{tips_coordinator_slots}}">Coordinator Slots</th>
    <th title="{{tips_executor_slots}}">Executor Slots</th>
    <th title="{{tips_statement}}">Statement</th>
  </tr>
{{! filter to get just waiting queries from in_flight_queries}}
{{#in_flight_queries}}
{{?waiting}}
  <tr>
    <td style="min-width:150px;word-break:break-all;"><a href='{{ __common__.host-url }}/query_plan?query_id={{query_id}}'>{{query_id}}</a></td>
    <td><a href='{{ __common__.host-url }}/cancel_query?query_id={{query_id}}'>Close</a></td>
    <td>{{effective_user}}</td>
    <td>{{default_db}}</td>
    <td><samp>{{stmt_type}}</samp></td>
    <td>{{start_time}}</td>
    <td>{{waiting_time}}</td>
    <td>{{first_fetch}}<hr style="margin-top:0px;margin-bottom:0px;"/>{{client_fetch_duration}}</td>
    <td>{{duration}}<hr style="margin-top:0px;margin-bottom:0px;"/>{{queued_duration}}</td>
    <td>{{mem_usage}}<hr style="margin-top:0px;margin-bottom:0px;"/>{{mem_est}}</td>
    <td>{{progress}}<hr style="margin-top:0px;margin-bottom:0px;"/>{{query_progress}}</td>
    <td>{{bytes_read}}<hr style="margin-top:0px;margin-bottom:0px;"/>{{bytes_sent}}</td>
    <td><samp>{{state}}</samp></td>
    <td><samp>{{last_event}}</samp></td>
    <td>{{rows_fetched}}</td>
    <td>{{resource_pool}}</td>
    <td>{{coordinator_slots}}</td>
    <td>{{executor_slots}}</td>
    <td><samp>{{stmt}}</samp></td>
  </tr>
{{/waiting}}
{{/in_flight_queries}}
</table>

<h3>Last {{completed_log_size}} Completed Queries</h3>

<table class='table table-hover table-border'>
  <tr>
    <th title="{{tips_query_id}}">Query ID</th>
    <th title="{{tips_user}}">User</th>
    <th title="{{tips_default_db}}">Default Db</th>
    <th title="{{tips_query_type}}">Query Type</th>
    <th title="{{tips_start_time}}">Start Time</th>
    <th title="{{tips_end_time}}">End Time</th>
    <th>
      <span title="{{tips_first_fetch}}">First&nbsp;Fetch</span>
      <hr style="margin-top:0px;margin-bottom:0px;"/>
      <span title="{{tips_client_fetch_duration}}">Client&nbsp;Fetch&nbsp;Duration</span>
    </th>
    <th>
      <span title="{{tips_duration}}">Duration</span>
      <hr style="margin-top:0px;margin-bottom:0px;"/>
      <span title="{{tips_queued_duration}}">Queued&nbsp;Duration</span>
    </th>
    <th>
      <span title="{{tips_mem_usage}}">Mem&nbsp;Usage</span>
      <hr style="margin-top:0px;margin-bottom:0px;"/>
      <span title="{{tips_mem_estimate}}">Mem&nbsp;Estimate</span>
    </th>
    <th>
      <span title="{{tips_scan_progress}}">Scan&nbsp;Progress</span>
      <hr style="margin-top:0px;margin-bottom:0px;"/>
      <span title="{{tips_query_progress}}">Query&nbsp;Progress</span>
    </th>
    <th>
      <span title="{{tips_bytes_read}}">Bytes&nbsp;Read</span>
      <hr style="margin-top:0px;margin-bottom:0px;"/>
      <span title="{{tips_bytes_sent}}">Bytes&nbsp;Sent</span>
    </th>
    <th title="{{tips_state}}">State</th>
    <th title="{{tips_rows_fetched}}"># rows fetched</th>
    <th title="{{tips_resource_pool}}">Resource Pool</th>
    <th title="{{tips_coordinator_slots}}">Coordinator Slots</th>
    <th title="{{tips_executor_slots}}">Executor Slots</th>
    <th title="{{tips_statement}}">Statement</th>
  </tr>
{{#completed_queries}}
  <tr>
    <td style="min-width:150px;word-break:break-all;"><a href='{{ __common__.host-url }}/query_plan?query_id={{query_id}}'>{{query_id}}</a></td>
    <td>{{effective_user}}</td>
    <td>{{default_db}}</td>
    <td><samp>{{stmt_type}}</samp></td>
    <td>{{start_time}}</td>
    <td>{{end_time}}</td>
    <td>{{first_fetch}}<hr style="margin-top:0px;margin-bottom:0px;"/>{{client_fetch_duration}}</td>
    <td>{{duration}}<hr style="margin-top:0px;margin-bottom:0px;"/>{{queued_duration}}</td>
    <td>{{mem_usage}}<hr style="margin-top:0px;margin-bottom:0px;"/>{{mem_est}}</td>
    <td>{{progress}}<hr style="margin-top:0px;margin-bottom:0px;"/>{{query_progress}}</td>
    <td>{{bytes_read}}<hr style="margin-top:0px;margin-bottom:0px;"/>{{bytes_sent}}</td>
    <td><samp>{{state}}</samp></td>
    <td>{{rows_fetched}}</td>
    <td>{{resource_pool}}</td>
    <td>{{coordinator_slots}}</td>
    <td>{{executor_slots}}</td>
    <td><samp>{{stmt}}</samp></td>
  </tr>
{{/completed_queries}}
</table>

<h3 id="imported_queries_header">
  0 Imported Query Profiles
  <sup><a href='#' data-toggle="tooltip" title="These are locally stored queries parsed from JSON query profiles.">[?]</a></sup>
  <input id="json_profile_chooser" type="file" accept=".json" onchange="startProfilesUpload();" multiple/>
  <label for="json_profile_chooser">
    <span class="btn btn-primary">Import JSON Profile</span>
  </label>
  <input id="clear_profiles_button" type="button" class="btn btn-primary" title="Clear All" onclick="clearProfiles();" value="X"/>
  <span id="error_message" class="alert-sm alert-danger" style="display: none;"></span>
</h3>

<table id="imported_queries_table" class='table table-hover table-border'>
  <tr>
    <th title="{{tips_query_id}}">Query ID</th>
    <th title="{{tips_user}}">User</th>
    <th title="{{tips_default_db}}">Default Db</th>
    <th title="{{tips_query_type}}">Query Type</th>
    <th title="{{tips_start_time}}">Start Time</th>
    <th title="{{tips_end_time}}">End Time</th>
    <th>
      <span title="{{tips_bytes_read}}">Bytes&nbsp;Read</span>
      <hr style="margin-top:0px;margin-bottom:0px;"/>
      <span title="{{tips_bytes_sent}}">Bytes&nbsp;Sent</span>
    </th>
    <th title="{{tips_state}}">State</th>
    <th title="{{tips_rows_fetched}}"># rows fetched</th>
    <th title="{{tips_resource_pool}}">Resource Pool</th>
    <th title="{{tips_statement}}">Statement</th>
    <th>Delete</th>
  </tr>
</table>

<h3>Query Locations</h3>

<table class='table table-hover table-bordered'>
  <tr>
    <th>Location</th>
    <th>Backend Id</th>
    <th>Number of running queries with fragments on this host</th>
  </tr>
{{#query_locations}}
  <tr>
    <td>{{location}}</td>
    <td>{{backend_id}}</td>
    <td>{{count}}</td>
  </tr>
{{/query_locations}}
</table>
<script>
  const db_open_req = indexedDB.open("imported_queries");
  let db;

  const profile_parse_worker = new Worker(
      "{{ __common__.host-url }}/www/scripts/queries/profileParseWorker.js");
  let query_processor_start_time, raw_total_size, compressed_total_size, upload_count;

  function insertRowVal(row, val) {
    row.insertCell().innerHTML = val;
  }

  function setScrollReload() {
    localStorage.setItem("imported", "T");
    window.location.reload();
  }

  function deleteProfile(el) {
    const row = el.parentElement.parentElement;
    const profile_store = db.transaction("profiles", "readwrite").objectStore("profiles");
    profile_store.delete(row.cells[0].textContent).onsuccess = () => {
      setScrollReload();
    };
  }

  function showImportedQueriesStatusMessage(status_message) {
    error_message.style.display = "unset";
    error_message.textContent = status_message;
  }

  function clearProfiles() {
    indexedDB.deleteDatabase("imported_queries");
    showImportedQueriesStatusMessage("Clearing imported query profiles in progress."
        + " Do not close/refresh the page.");
    setTimeout(setScrollReload, 1000);
  }

  function startProfilesUpload() {
    raw_total_size = 0;
    compressed_total_size = 0;
    upload_count = 0;
    query_processor_start_time = Date.now();
    showImportedQueriesStatusMessage("Query profiles import in progress."
        + " Do not close/refresh the page.");
    uploadProfile();
  }

  function uploadProfile() {
    json_profile_chooser.disabled = true;
    const file_reader = new FileReader();
    file_reader.readAsText(json_profile_chooser.files[upload_count]);
    file_reader.onload = (e) => {
      profile_parse_worker.postMessage(e.target.result);
    };
  }

  profile_parse_worker.onmessage = (e) => {
    if (e.data.error) {
      showImportedQueriesStatusMessage("Error parsing some JSON profiles");
      setTimeout(setScrollReload, 1500);
      console.log(e.data.error);
      return;
    }
    const profile_store = db.transaction("profiles", "readwrite").objectStore("profiles");
    profile_store.put(e.data).onsuccess = () => {
      raw_total_size += json_profile_chooser.files[upload_count].size;
      compressed_total_size += e.data.profile.length;
      upload_count++;
      if (upload_count >= json_profile_chooser.files.length) {
        console.log("Raw total size : " + getReadableSize(raw_total_size, 2));
        console.log("Compressed total size : "
            + getReadableSize(compressed_total_size, 2));
        console.log("Query Profile(s) Processing time : " + getReadableTimeMS(Date.now()
            - query_processor_start_time));
        setTimeout(setScrollReload, 2000);
      } else {
        // Recursively call uploadProfile() until all selected JSON profiles
        // are parsed and stored
        uploadProfile();
      }
    };
  };

  db_open_req.onupgradeneeded = (e) => {
    db = e.target.result;
    const profile_store = db.createObjectStore("profiles", { keyPath : "id" });

    profile_store.createIndex("start_time", "start_time");
  };

  db_open_req.onsuccess = (e) => {
    db = e.target.result;
    db.onerror = (e) => {
      console.log("IndexedDB error");
      console.log(e);
    }

    const profile_store = db.transaction("profiles", "readonly").objectStore("profiles");
    const count_req = profile_store.count();

    count_req.onsuccess = () => {
      if (count_req.result) {
        imported_queries_header.innerHTML = imported_queries_header.innerHTML
            .replace("0", String(count_req.result));
      } else {
        clear_profiles_button.remove();
      }
    };

    profile_store.index("start_time").openCursor(null, "prev").onsuccess = (e) => {
      const cursor = e.target.result;
      if (cursor) {
        const query = cursor.value;
        const row = imported_queries_table.insertRow();
        const query_link = document.createElement("a");
        query_link.href = `{{ __common__.host-url }}/query_timeline?query_id=${query.id}&imported=true`;
        query_link.innerHTML = query.id;
        insertRowVal(row, query_link.outerHTML);
        insertRowVal(row, query.user);
        insertRowVal(row, query.default_db);
        insertRowVal(row, query.type);
        insertRowVal(row, query.start_time);
        insertRowVal(row, query.end_time);
        insertRowVal(row, `${query.bytes_read}
          <hr style="margin-top:0px;margin-bottom:0px;"/>${query.bytes_sent}`);
        insertRowVal(row, query.state);
        insertRowVal(row, query.rows_fetched);
        insertRowVal(row, query.resource_pool);
        insertRowVal(row, query.coordinator_slots);
        insertRowVal(row, query.executor_slots);
        insertRowVal(row, query.statement);
        const deleteButton = document.createElement("input");
        deleteButton.type = "button";
        deleteButton.value = "X";
        deleteButton.className = "btn btn-primary";
        deleteButton.setAttribute("onclick", "deleteProfile(this);");
        insertRowVal(row, deleteButton.outerHTML);
        cursor.continue();
      }
    };
  };

  window.onload = () => {
    if (localStorage.getItem("imported") === "T") {
      imported_queries_header.scrollIntoView({ behavior : "instant", block : "start" });
      localStorage.setItem("imported", "F");
    }
  };
</script>
{{> www/common-footer.tmpl }}