slow.html
text/html
Filename: slow.html
Type: text/html
Part: 1
<!DOCTYPE html>
<html>
<head>
<title>Slow</title>
<meta charset="UTF-8" />
<script src="https://unpkg.com/vue@3.5.22/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vue-tippy@6.7.1/dist/vue-tippy.iife.prod.js"></script>
<script src="https://unpkg.com/pev2@1.17.0/dist/pev2.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.3.8/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://unpkg.com/pev2@1.17.0/dist/pev2.css" />
</head>
<body>
<div id="app">
<pev2 :plan-source="plan" :plan-query="query" class="vh-100" />
</div>
</body>
</html>
<script>
const { createApp } = Vue
const { plugin } = VueTippy // required by pev2 since v1.16
const query = `
SELECT "test_run"."id", "test_run"."test_id", "test_run"."regression_id", "test_run"."status", "test_run"."wall_time", "test_run"."seed", "test"."id", "test"."name"
FROM "test_run"
INNER JOIN "regression" ON ("test_run"."regression_id" = "regression"."id")
INNER JOIN "test" ON ("test_run"."test_id" = "test"."id")
WHERE "regression"."run_id" = '019a3799-9f30-7ee6-952b-ba296105f7aa';
`
const plan = `
[
{
"Plan": {
"Node Type": "Nested Loop",
"Parallel Aware": false,
"Async Capable": false,
"Join Type": "Inner",
"Startup Cost": 8.29,
"Total Cost": 22.75,
"Plan Rows": 1,
"Plan Width": 75,
"Actual Startup Time": 17.548,
"Actual Total Time": 17.550,
"Actual Rows": 0,
"Actual Loops": 1,
"Inner Unique": true,
"Join Filter": "(test_run.regression_id = regression.id)",
"Rows Removed by Join Filter": 0,
"Shared Hit Blocks": 74963,
"Shared Read Blocks": 0,
"Shared Dirtied Blocks": 0,
"Shared Written Blocks": 0,
"Local Hit Blocks": 0,
"Local Read Blocks": 0,
"Local Dirtied Blocks": 0,
"Local Written Blocks": 0,
"Temp Read Blocks": 0,
"Temp Written Blocks": 0,
"Plans": [
{
"Node Type": "Hash Join",
"Parent Relationship": "Outer",
"Parallel Aware": false,
"Async Capable": false,
"Join Type": "Inner",
"Startup Cost": 8.29,
"Total Cost": 14.74,
"Plan Rows": 1,
"Plan Width": 75,
"Actual Startup Time": 17.548,
"Actual Total Time": 17.549,
"Actual Rows": 0,
"Actual Loops": 1,
"Inner Unique": false,
"Hash Cond": "(test.id = test_run.test_id)",
"Shared Hit Blocks": 74963,
"Shared Read Blocks": 0,
"Shared Dirtied Blocks": 0,
"Shared Written Blocks": 0,
"Local Hit Blocks": 0,
"Local Read Blocks": 0,
"Local Dirtied Blocks": 0,
"Local Written Blocks": 0,
"Temp Read Blocks": 0,
"Temp Written Blocks": 0,
"Plans": [
{
"Node Type": "Seq Scan",
"Parent Relationship": "Outer",
"Parallel Aware": false,
"Async Capable": false,
"Relation Name": "test",
"Alias": "test",
"Startup Cost": 0.00,
"Total Cost": 5.50,
"Plan Rows": 250,
"Plan Width": 34,
"Actual Startup Time": 0.003,
"Actual Total Time": 0.004,
"Actual Rows": 1,
"Actual Loops": 1,
"Shared Hit Blocks": 1,
"Shared Read Blocks": 0,
"Shared Dirtied Blocks": 0,
"Shared Written Blocks": 0,
"Local Hit Blocks": 0,
"Local Read Blocks": 0,
"Local Dirtied Blocks": 0,
"Local Written Blocks": 0,
"Temp Read Blocks": 0,
"Temp Written Blocks": 0
},
{
"Node Type": "Hash",
"Parent Relationship": "Inner",
"Parallel Aware": false,
"Async Capable": false,
"Startup Cost": 8.28,
"Total Cost": 8.28,
"Plan Rows": 1,
"Plan Width": 41,
"Actual Startup Time": 17.532,
"Actual Total Time": 17.533,
"Actual Rows": 0,
"Actual Loops": 1,
"Hash Buckets": 1024,
"Original Hash Buckets": 1024,
"Hash Batches": 1,
"Original Hash Batches": 1,
"Peak Memory Usage": 8,
"Shared Hit Blocks": 74962,
"Shared Read Blocks": 0,
"Shared Dirtied Blocks": 0,
"Shared Written Blocks": 0,
"Local Hit Blocks": 0,
"Local Read Blocks": 0,
"Local Dirtied Blocks": 0,
"Local Written Blocks": 0,
"Temp Read Blocks": 0,
"Temp Written Blocks": 0,
"Plans": [
{
"Node Type": "Index Scan",
"Parent Relationship": "Outer",
"Parallel Aware": false,
"Async Capable": false,
"Scan Direction": "Forward",
"Index Name": "test_run_test_id_85a7b38c",
"Relation Name": "test_run",
"Alias": "test_run",
"Startup Cost": 0.25,
"Total Cost": 8.28,
"Plan Rows": 1,
"Plan Width": 41,
"Actual Startup Time": 17.531,
"Actual Total Time": 17.531,
"Actual Rows": 0,
"Actual Loops": 1,
"Shared Hit Blocks": 74962,
"Shared Read Blocks": 0,
"Shared Dirtied Blocks": 0,
"Shared Written Blocks": 0,
"Local Hit Blocks": 0,
"Local Read Blocks": 0,
"Local Dirtied Blocks": 0,
"Local Written Blocks": 0,
"Temp Read Blocks": 0,
"Temp Written Blocks": 0
}
]
}
]
},
{
"Node Type": "Seq Scan",
"Parent Relationship": "Inner",
"Parallel Aware": false,
"Async Capable": false,
"Relation Name": "regression",
"Alias": "regression",
"Startup Cost": 0.00,
"Total Cost": 8.00,
"Plan Rows": 1,
"Plan Width": 8,
"Actual Startup Time": 0.000,
"Actual Total Time": 0.000,
"Actual Rows": 0,
"Actual Loops": 0,
"Filter": "(run_id = '019a3799-9f30-7ee6-952b-ba296105f7aa'::uuid)",
"Rows Removed by Filter": 0,
"Shared Hit Blocks": 0,
"Shared Read Blocks": 0,
"Shared Dirtied Blocks": 0,
"Shared Written Blocks": 0,
"Local Hit Blocks": 0,
"Local Read Blocks": 0,
"Local Dirtied Blocks": 0,
"Local Written Blocks": 0,
"Temp Read Blocks": 0,
"Temp Written Blocks": 0
}
]
},
"Planning": {
"Shared Hit Blocks": 332,
"Shared Read Blocks": 0,
"Shared Dirtied Blocks": 0,
"Shared Written Blocks": 0,
"Local Hit Blocks": 0,
"Local Read Blocks": 0,
"Local Dirtied Blocks": 0,
"Local Written Blocks": 0,
"Temp Read Blocks": 0,
"Temp Written Blocks": 0
},
"Planning Time": 0.872,
"Triggers": [
],
"Execution Time": 17.602
}
]
`
const app = createApp({
data() {
return {
query: query,
plan: plan,
}
},
})
app.use(plugin, { defaultProps: { theme: "light" } })
app.component("pev2", pev2.Plan)
app.mount("#app")
</script>