fast.html
text/html
Filename: fast.html
Type: text/html
Part: 0
<!DOCTYPE html>
<html>
<head>
<title>Fast</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": "Hash Join",
"Parallel Aware": false,
"Async Capable": false,
"Join Type": "Inner",
"Startup Cost": 9.20,
"Total Cost": 27.22,
"Plan Rows": 513,
"Plan Width": 75,
"Actual Startup Time": 0.021,
"Actual Total Time": 0.022,
"Actual Rows": 0,
"Actual Loops": 1,
"Inner Unique": true,
"Hash Cond": "(test_run.test_id = test.id)",
"Shared Hit Blocks": 2,
"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": "Nested Loop",
"Parent Relationship": "Outer",
"Parallel Aware": false,
"Async Capable": false,
"Join Type": "Inner",
"Startup Cost": 0.57,
"Total Cost": 17.22,
"Plan Rows": 513,
"Plan Width": 41,
"Actual Startup Time": 0.021,
"Actual Total Time": 0.021,
"Actual Rows": 0,
"Actual Loops": 1,
"Inner Unique": false,
"Shared Hit Blocks": 2,
"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": "regression_run_id_85efa600",
"Relation Name": "regression",
"Alias": "regression",
"Startup Cost": 0.28,
"Total Cost": 8.29,
"Plan Rows": 1,
"Plan Width": 8,
"Actual Startup Time": 0.021,
"Actual Total Time": 0.021,
"Actual Rows": 0,
"Actual Loops": 1,
"Index Cond": "(run_id = '019a3799-9f30-7ee6-952b-ba296105f7aa'::uuid)",
"Rows Removed by Index Recheck": 0,
"Shared Hit Blocks": 2,
"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": "Index Scan",
"Parent Relationship": "Inner",
"Parallel Aware": false,
"Async Capable": false,
"Scan Direction": "Forward",
"Index Name": "test_run_regression_id_a62fbd59",
"Relation Name": "test_run",
"Alias": "test_run",
"Startup Cost": 0.30,
"Total Cost": 8.70,
"Plan Rows": 23,
"Plan Width": 41,
"Actual Startup Time": 0.000,
"Actual Total Time": 0.000,
"Actual Rows": 0,
"Actual Loops": 0,
"Index Cond": "(regression_id = regression.id)",
"Rows Removed by Index Recheck": 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
}
]
},
{
"Node Type": "Hash",
"Parent Relationship": "Inner",
"Parallel Aware": false,
"Async Capable": false,
"Startup Cost": 5.50,
"Total Cost": 5.50,
"Plan Rows": 250,
"Plan Width": 34,
"Actual Startup Time": 0.000,
"Actual Total Time": 0.000,
"Actual Rows": 0,
"Actual Loops": 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,
"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.000,
"Actual Total Time": 0.000,
"Actual Rows": 0,
"Actual Loops": 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": 329,
"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.900,
"Triggers": [
],
"Execution Time": 0.062
}
]
`
const app = createApp({
data() {
return {
query: query,
plan: plan,
}
},
})
app.use(plugin, { defaultProps: { theme: "light" } })
app.component("pev2", pev2.Plan)
app.mount("#app")
</script>