mirror of
https://github.com/danbulant/mysqlExporter
synced 2026-06-14 20:21:02 +00:00
243 lines
No EOL
8 KiB
HTML
243 lines
No EOL
8 KiB
HTML
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MySQL exporter</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">Loading...</div>
|
|
|
|
<style>
|
|
body {
|
|
margin: 30px auto;
|
|
max-width: 900px;
|
|
line-height: 1.6;
|
|
font-size: 18px;
|
|
color: #444;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
* {
|
|
font-family: 'Noto Sans', sans-serif;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
font-family: Simplifica;
|
|
line-height: 1.2
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: rgb(0, 140, 255);
|
|
}
|
|
|
|
a:visited {
|
|
color: rgb(153, 0, 255);
|
|
}
|
|
|
|
table,
|
|
th,
|
|
td {
|
|
border: 1px solid black;
|
|
border-collapse: collapse;
|
|
word-break: normal;
|
|
text-align: center;
|
|
}
|
|
|
|
table {
|
|
width: 900px;
|
|
width: min(90vw, 900px);
|
|
table-layout: fixed;
|
|
}
|
|
|
|
th {
|
|
padding: 10px;
|
|
}
|
|
|
|
td {
|
|
padding: 5px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
tr:hover {
|
|
background-color: rgb(214, 214, 214);
|
|
}
|
|
|
|
.privileges {
|
|
word-break: normal;
|
|
}
|
|
|
|
.key {
|
|
width: 30px;
|
|
}
|
|
|
|
.extra {
|
|
width: 35px;
|
|
}
|
|
|
|
.null,
|
|
.default {
|
|
width: 50px;
|
|
}
|
|
|
|
.head {
|
|
background-color: #444;
|
|
color: white;
|
|
}
|
|
</style>
|
|
|
|
<!-- <?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="24"
|
|
width="24" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
|
|
<g transform="translate(0 -1028.4)">
|
|
<g transform="matrix(.70711 .70711 -.70711 .70711 740.06 298.16)">
|
|
<path
|
|
d="m10.541 1028.9c-3.3134 0-5.9997 2.6-5.9997 6 0 3.3 2.6863 6 5.9997 6 3.314 0 6-2.7 6-6 0-3.4-2.686-6-6-6zm0 2c1.105 0 2 0.9 2 2s-0.895 2-2 2c-1.1042 0-1.9997-0.9-1.9997-2s0.8955-2 1.9997-2z"
|
|
fill="#f39c12" />
|
|
<g fill="#f1c40f">
|
|
<path
|
|
d="m10 0c-3.3137 0-6 2.6863-6 6s2.6863 6 6 6c3.314 0 6-2.6863 6-6s-2.686-6-6-6zm0 2c1.105 0 2 0.8954 2 2s-0.895 2-2 2c-1.1046 0-2-0.8954-2-2s0.8954-2 2-2z"
|
|
transform="translate(0 1028.4)" />
|
|
<rect height="2" width="6" y="1039.4" x="7" />
|
|
<path d="m8 13v9l2 2 2-2v-1l-2-1 2-1v-1l-1-1 1-1v-3z" transform="translate(0 1028.4)" />
|
|
</g>
|
|
<path d="m11 1041.4v4l1-1v-3h-1zm0 4v2.5l1-0.5v-1l-1-1zm0 3.5v2.5l1-1v-1l-1-0.5z" fill="#f39c12" />
|
|
<path d="m9 1041.4v10l1 1v-4-7h-1z" fill="#f39c12" />
|
|
</g>
|
|
</g>
|
|
</svg> -->
|
|
|
|
|
|
<script>
|
|
const app = document.getElementById("app");
|
|
|
|
function htmlToElement(html) {
|
|
var template = document.createElement('template');
|
|
html = html.trim(); // Never return a text node of whitespace as the result
|
|
template.innerHTML = html;
|
|
return template.content.firstChild;
|
|
}
|
|
|
|
(async () => {
|
|
if (window.location.hostname !== "localhost") {
|
|
console.warn("Fetching info supported only from localhost!");
|
|
return;
|
|
}
|
|
|
|
var dbRes = await fetch("/database");
|
|
var db = await dbRes.json();
|
|
if (!dbRes.ok) return console.warn("Couldn't fetch data");
|
|
|
|
app.innerText = "";
|
|
|
|
const appTitle = document.createElement("h1");
|
|
appTitle.innerText = "Data dictionary of " + db.name;
|
|
app.appendChild(appTitle);
|
|
const date = document.createElement("p");
|
|
date.innerText = "Loading table information...";
|
|
app.appendChild(date);
|
|
|
|
var res = await fetch("/tables");
|
|
var tables = await res.json();
|
|
var re = await fetch("/fieldsIgnored");
|
|
var fieldsIgnored = await re.json();
|
|
fieldsIgnored = fieldsIgnored.map(el => el.toLowerCase());
|
|
|
|
date.innerText = "Generating data dictionary...";
|
|
|
|
for (var table in tables) {
|
|
var data = tables[table];
|
|
var tableEl = document.createElement("table");
|
|
var title = document.createElement("h2");
|
|
|
|
title.innerText = table;
|
|
app.appendChild(title);
|
|
|
|
if (!data.columns) {
|
|
console.error(data);
|
|
app.appendChild(htmlToElement(`<p>${data}<p>`));
|
|
continue;
|
|
}
|
|
|
|
try {
|
|
var comment = document.createElement("p");
|
|
comment.innerText = data.comment[0].table_comment;
|
|
app.appendChild(comment);
|
|
} catch (e) {}
|
|
|
|
function addField(fieldName) {
|
|
return fieldsIgnored.includes(fieldName.toLowerCase()) ? "" :
|
|
`<th class='${fieldName.toLowerCase()}'>${fieldName}</th>`;
|
|
}
|
|
|
|
var head = htmlToElement(`
|
|
<tr class="head">
|
|
${addField("Field")}
|
|
${addField("Type")}
|
|
${addField("Collation")}
|
|
${addField("Null")}
|
|
${addField("Key")}
|
|
${addField("Default")}
|
|
${addField("Extra")}
|
|
${addField("Privileges")}
|
|
${addField("Comment")}
|
|
</tr>
|
|
`);
|
|
|
|
tableEl.appendChild(head);
|
|
for (var column of data.columns) {
|
|
var el = document.createElement("tr");
|
|
for (var field in column) {
|
|
if (fieldsIgnored.includes(field.toLowerCase())) continue;
|
|
var td = document.createElement("td");
|
|
td.className = field.toLowerCase();
|
|
|
|
switch (field.toLowerCase()) {
|
|
case "privileges":
|
|
column[field] = column[field].split(",").join(", ");
|
|
break;
|
|
case "null":
|
|
let cb = document.createElement("input");
|
|
cb.type = "checkbox";
|
|
cb.checked = column[field] === "YES";
|
|
cb.disabled = true;
|
|
column[field] = cb;
|
|
case "extra":
|
|
if (column[field] === "auto_increment") {
|
|
column[field] = "AI";
|
|
td.title = "Auto increment";
|
|
}
|
|
}
|
|
|
|
if (column[field]) {
|
|
if (column[field] instanceof HTMLElement) {
|
|
td.appendChild(column[field]);
|
|
} else {
|
|
td.innerText = column[field];
|
|
}
|
|
} else if (field == "Default") {
|
|
td.innerText = "null";
|
|
}
|
|
el.appendChild(td);
|
|
}
|
|
|
|
tableEl.appendChild(el);
|
|
}
|
|
|
|
app.appendChild(tableEl);
|
|
}
|
|
|
|
var d = new Date();
|
|
date.innerHTML = `Generated ${d.toString()}.
|
|
<br>Number of tables: ${Object.keys(tables).length}
|
|
<br>Host: ${db.host}`;
|
|
})()
|
|
</script>
|
|
</body>
|
|
|
|
</html> |