thevar1able/ClickHouse
1
0
Fork 0
mirror of https://github.com/ClickHouse/ClickHouse.git synced 2024-11-25 17:12:03 +00:00
Code Issues Packages Projects Releases Wiki Activity
4ae1b51cbd
ClickHouse/praktika/json.html

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

652 lines
24 KiB
HTML
Raw Normal View History

CI: FastTest with praktika
2024-10-01 19:19:35 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>praktika report</title>
<link rel="icon" href="https://w4z3pajszlbkfcw2wcylfei5km0xmwag.lambda-url.us-east-1.on.aws/" type="image/x-icon">
<style>
#footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #1F1F1C;
color: white;
padding: 15px 20px;
font-size: 14px;
display: flex;
justify-content: space-between; /* Align left and right parts */
align-items: center;
z-index: 1000;
box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2);
}
#footer .left a::before {
content: none;
}
/* make some space around '/' in the navigation line */
#footer .left span.separator {
margin-left: 5px;
margin-right: 5px;
}
#footer .right {
display: flex;
justify-content: flex-end;
}
#footer a {
color: white;
text-decoration: none;
}
#footer .right a::before {
content: "#";
margin-left: 10px;
color: #e0e0e0;
}
#footer a:hover {
text-decoration: underline;
}
#title {
margin: 0;
padding: 0;
display: block;
font-size: 14px;
color: black;
text-align: center;
}
body {
font-family: monospace, sans-serif;
padding: 20px;
max-width: 100%; /* Ensure the layout spans the full width of the page */
margin: auto;
padding-bottom: 60px;
background-color: white;
}
h1 {
text-align: center;
color: #333;
}
#layout-container {
display: flex;
align-items: flex-start; /* Align the content/links and table at the top */
}
#left-side {
display: flex;
flex-direction: column;
width: 300px; /* Fixed width for the left side */
flex-shrink: 0; /* Prevent the left side from shrinking */
}
#content {
padding: 10px;
margin-top: 15px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
#links {
margin-top: 10px;
padding: 15px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}
#links a {
display: block;
margin-bottom: 5px;
padding: 5px 10px;
background-color: #D5D5D5;
color: black;
text-decoration: none;
border-radius: 5px;
}
#links a:hover {
background-color: #D5D5D5;
}
#results-table-container {
flex-grow: 1; /* Allow the table to take remaining space */
margin-left: 20px;
padding: 15px;
margin-top: 0;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 0;
}
th.name-column, td.name-column {
max-width: 400px; /* Set the maximum width for the column */
white-space: nowrap; /* Prevent text from wrapping */
overflow: hidden; /* Hide the overflowed text */
text-overflow: ellipsis; /* Show ellipsis (...) for overflowed text */
}
th.info-column, td.info-column {
max-width: 400px; /* Set the maximum width for the column */
white-space: nowrap; /* Prevent text from wrapping */
overflow: hidden; /* Hide the overflowed text */
text-overflow: ellipsis; /* Show ellipsis (...) for overflowed text */
}
th, td {
padding: 8px;
border: 1px solid #ddd;
text-align: left;
}
th {
background-color: #f4f4f4;
}
.status-success {
color: green;
font-weight: bold;
}
.status-fail {
color: red;
font-weight: bold;
}
.status-pending {
color: #d4a017;
font-weight: bold;
}
.status-broken {
color: purple;
font-weight: bold;
}
.status-run {
color: blue;
font-weight: bold;
}
.status-error {
color: darkred;
font-weight: bold;
}
.status-other {
color: grey;
font-weight: bold;
}
.json-key {
font-weight: bold;
margin-top: 10px;
}
.json-value {
margin-left: 20px;
}
.json-value a {
color: #007bff;
text-decoration: none;
}
.json-value a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1 id="title">Loading...</h1>
<div id="layout-container">
<div id="left-side">
<div id="content"></div>
<div id="links"></div>
</div>
<div id="results-table-container">
<div id="results-table"></div>
</div>
</div>
<footer id="footer">
<div class="left"></div>
<div class="right">|</div>
</footer>
<script>
// Function to format timestamp to "DD-mmm-YYYY HH:MM:SS.MM"
function formatTimestamp(timestamp, showDate = true) {
const date = new Date(timestamp * 1000);
const day = String(date.getDate()).padStart(2, '0');
const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const month = monthNames[date.getMonth()];
const year = date.getFullYear();
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
const milliseconds = String(date.getMilliseconds()).padStart(2, '0');
// If showDate is true, return date and time, otherwise return only time
return showDate
? `${day}-${month}-${year} ${hours}:${minutes}:${seconds}.${milliseconds}`
: `${hours}:${minutes}:${seconds}.${milliseconds}`;
}
// Function to determine status class based on value
function getStatusClass(status) {
const lowerStatus = status.toLowerCase();
if (lowerStatus.includes('success') || lowerStatus === 'ok') return 'status-success';
if (lowerStatus.includes('fail')) return 'status-fail';
if (lowerStatus.includes('pending')) return 'status-pending';
if (lowerStatus.includes('broken')) return 'status-broken';
if (lowerStatus.includes('run')) return 'status-run';
if (lowerStatus.includes('error')) return 'status-error';
return 'status-other';
}
// Function to format duration from seconds to "HH:MM:SS"
function formatDuration(durationInSeconds) {
// Check if the duration is empty, null, or not a number
if (!durationInSeconds || isNaN(durationInSeconds)) {
return '';
}
// Ensure duration is a floating-point number
const duration = parseFloat(durationInSeconds);
// Calculate hours, minutes, seconds, and milliseconds
const hours = Math.floor(duration / 3600);
const minutes = Math.floor((duration % 3600) / 60);
const seconds = Math.floor(duration % 60);
const milliseconds = Math.floor((duration % 1) * 100); // Get first two digits of milliseconds
// Format hours, minutes, and seconds with leading zeros
const formattedHours = String(hours).padStart(2, '0');
const formattedMinutes = String(minutes).padStart(2, '0');
const formattedSeconds = String(seconds).padStart(2, '0');
const formattedMilliseconds = String(milliseconds).padStart(2, '0');
// Return the formatted duration
return `${formattedHours}:${formattedMinutes}:${formattedSeconds}.${formattedMilliseconds}`;
}
// Function to create key-value elements with formatting
function createKeyValueElements(key, value, parentElement) {
// Define fields to exclude
const excludedFields = ['html_link', 'files'];
// Skip processing if the key is in the excluded fields
if (excludedFields.includes(key)) {
return;
}
const keyElement = document.createElement('div');
keyElement.className = 'json-key';
keyElement.textContent = key + ':';
const valueElement = document.createElement('div');
valueElement.className = 'json-value';
if (key === 'duration') {
if (value === null) {
// Set initial value to 0 and add a unique ID or data attribute to identify the duration element
valueElement.textContent = '00:00:00';
valueElement.setAttribute('id', 'duration-value');
} else {
// Format the duration if it's a valid number
valueElement.textContent = formatDuration(value);
}
} else if (typeof value === 'string' && (value.startsWith('http://') || value.startsWith('https://'))) {
const link = document.createElement('a');
link.href = value;
link.textContent = value.split('/').pop();
link.target = '_blank'; // Open in new tab
valueElement.appendChild(link);
} else if (typeof value === 'number' && key.toLowerCase().includes('time')) {
// Convert timestamp to formatted date if key contains 'time'
const formattedDate = formatTimestamp(value);
valueElement.textContent = formattedDate;
} else if (typeof value === 'string' && key.toLowerCase().includes('status')) {
// Add status formatting based on value
valueElement.classList.add('status-value');
valueElement.classList.add(getStatusClass(value));
valueElement.textContent = value;
} else if (typeof value === 'string' && value.includes('\n')) {
// Handle multiline strings by converting '\n' to <br> elements
const lines = value.split('\n');
lines.forEach((line, index) => {
valueElement.appendChild(document.createTextNode(line));
if (index < lines.length - 1) {
valueElement.appendChild(document.createElement('br'));
}
});
} else if (typeof value === 'object' && !Array.isArray(value)) {
// Handle nested objects
const nestedContainer = document.createElement('div');
nestedContainer.className = 'json-container';
for (const nestedKey in value) {
if (value.hasOwnProperty(nestedKey)) {
createKeyValueElements(nestedKey, value[nestedKey], nestedContainer);
}
}
valueElement.appendChild(nestedContainer);
} else {
valueElement.textContent = value;
}
parentElement.appendChild(keyElement);
parentElement.appendChild(valueElement);
}
function navigatePath(jsonObj, nameArray) {
let baseParams = new URLSearchParams(window.location.search);
let keysToDelete = [];
baseParams.forEach((value, key) => {
if (key.startsWith('name_')) {
keysToDelete.push(key); // Collect the keys to delete
}
});
keysToDelete.forEach((key) => baseParams.delete(key));
let pathNames = [];
let pathLinks = [];
let currentObj = jsonObj;
// Add the first entry (root level)
baseParams.set(`name_0`, currentObj.name);
pathNames.push(currentObj.name);
pathLinks.push(`<span class="separator">/</span><a href="${window.location.pathname}?${baseParams.toString()}">${currentObj.name}</a>`);
// Iterate through the nameArray starting at index 0
for (const [index, name] of nameArray.entries()) {
if (index === 0) continue;
if (currentObj && Array.isArray(currentObj.results)) {
const nextResult = currentObj.results.find(result => result.name === name);
if (nextResult) {
baseParams.set(`name_${index}`, nextResult.name);
pathNames.push(nextResult.name); // Correctly push nextResult name, not currentObj.name
pathLinks.push(`<span class="separator">/</span><a href="${window.location.pathname}?${baseParams.toString()}">${nextResult.name}</a>`);
currentObj = nextResult; // Move to the next object in the hierarchy
} else {
console.error(`Name "${name}" not found in results array.`);
return null; // Name not found in results array
}
} else {
console.error(`Current object is not structured as expected.`);
return null; // Current object is not structured as expected
}
}
const footerLeft = document.querySelector('#footer .left');
footerLeft.innerHTML = pathLinks.join('');
return currentObj;
}
// Define the fixed columns globally, so both functions can use it
const columns = ['name', 'status', 'start_time', 'duration', 'info'];
function createResultsTable(results, nest_level) {
if (results && Array.isArray(results) && results.length > 0) {
const table = document.createElement('table');
const thead = document.createElement('thead');
const tbody = document.createElement('tbody');
// Get the current URL parameters
const currentUrl = new URL(window.location.href);
// Create table headers based on the fixed columns
const headerRow = document.createElement('tr');
columns.forEach(column => {
const th = document.createElement('th');
th.textContent = column;
th.style.cursor = 'pointer'; // Make headers clickable
th.addEventListener('click', () => sortTable(results, column, tbody, nest_level)); // Add click event to sort the table
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
// Create table rows
populateTableRows(tbody, results, columns, nest_level);
table.appendChild(thead);
table.appendChild(tbody);
return table;
}
return null;
}
function populateTableRows(tbody, results, columns, nest_level) {
const currentUrl = new URL(window.location.href); // Get the current URL
// Clear existing rows if re-rendering (used in sorting)
tbody.innerHTML = '';
results.forEach((result, index) => {
const row = document.createElement('tr');
columns.forEach(column => {
const td = document.createElement('td');
const value = result[column];
if (column === 'name') {
// Create a link for the name field, using name_X
const link = document.createElement('a');
const newUrl = new URL(currentUrl); // Create a fresh copy of the URL for each row
newUrl.searchParams.set(`name_${nest_level}`, value); // Use backticks for string interpolation
link.href = newUrl.toString();
link.textContent = value;
td.classList.add('name-column');
td.appendChild(link);
} else if (column === 'status') {
// Apply status formatting
const span = document.createElement('span');
span.className = getStatusClass(value);
span.textContent = value;
td.appendChild(span);
} else if (column === 'start_time') {
// Format and display the start_time as a timestamp
td.textContent = value ? formatTimestamp(value, false) : '';
} else if (column === 'duration') {
// Format and display the duration
td.textContent = value ? formatDuration(value) : '';
} else if (column === 'info') {
// For info and other columns, just display the value
td.textContent = value || '';
td.classList.add('info-column');
}
row.appendChild(td);
});
tbody.appendChild(row);
});
}
function sortTable(results, key, tbody, nest_level) {
// Find the table header element for the given key
let th = null;
const tableHeaders = document.querySelectorAll('th'); // Select all table headers
tableHeaders.forEach(header => {
if (header.textContent.trim().toLowerCase() === key.toLowerCase()) {
th = header;
}
});
if (!th) {
console.error(`No table header found for key: ${key}`);
return;
}
// Determine the current sort direction
let ascending = th.getAttribute('data-sort-direction') === 'asc' ? false : true;
// Toggle the sort direction for the next click
th.setAttribute('data-sort-direction', ascending ? 'asc' : 'desc');
// Sort the results array by the given key
results.sort((a, b) => {
if (a[key] < b[key]) return ascending ? -1 : 1;
if (a[key] > b[key]) return ascending ? 1 : -1;
return 0;
});
// Re-populate the table with sorted data
populateTableRows(tbody, results, columns, nest_level);
}
function loadJSON(PR, sha, nameParams) {
const titleElement = document.getElementById('title');
let lastModifiedTime = null;
const task = nameParams[0].toLowerCase();
// Construct the URL dynamically based on PR, sha, and name_X
const baseUrl = window.location.origin + window.location.pathname.replace('/json.html', '');
const path = `${baseUrl}/${encodeURIComponent(PR)}/${encodeURIComponent(sha)}/result_${task}.json`;
fetch(path, { cache: "no-cache" })
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
lastModifiedTime = response.headers.get('Last-Modified');
return response.json();
})
.then(data => {
const contentDiv = document.getElementById('content');
const linksDiv = document.getElementById('links');
const resultsDiv = document.getElementById('results-table');
const footerRight = document.querySelector('#footer .right');
let targetData = navigatePath(data, nameParams);
let nest_level = nameParams.length;
if (targetData) {
titleElement.style.display = 'none';
// Handle links
if (Array.isArray(targetData.links) && targetData.links.length > 0) {
targetData.links.forEach(link => {
const a = document.createElement('a');
a.href = link;
a.textContent = link.split('/').pop();
a.target = '_blank';
linksDiv.appendChild(a);
});
}
// Handle footer links if present
if (Array.isArray(data.aux_links) && data.aux_links.length > 0) {
data.aux_links.forEach(link => {
const a = document.createElement('a');
a.href = link;
a.textContent = link.split('/').pop();
a.target = '_blank';
footerRight.appendChild(a);
});
}
// Remove 'name', 'links', and 'results' from main data to display
const mainData = { ...targetData };
delete mainData.name;
delete mainData.links;
delete mainData.aux_links;
const resultsData = mainData.results;
delete mainData.results;
// Display main content and check if duration is null
for (const [key, value] of Object.entries(mainData)) {
createKeyValueElements(key, value, contentDiv);
}
// Handle duration update if duration is null and start_time exists
if (mainData.duration === null && mainData.start_time) {
let duration = Math.floor(Date.now() / 1000 - mainData.start_time);
const durationElement = document.getElementById('duration-value');
const intervalId = setInterval(() => {
duration++;
durationElement.textContent = formatDuration(duration);
}, 1000);
}
// If 'results' exists and is non-empty, create the table
if (Array.isArray(resultsData) && resultsData.length > 0) {
const table = createResultsTable(resultsData, nest_level);
if (table) {
resultsDiv.appendChild(table);
}
}
} else {
titleElement.textContent = 'Object Not Found';
titleElement.style.display = 'block';
}
// Set up auto-reload if Last-Modified header is present
if (lastModifiedTime) {
setInterval(() => {
checkForUpdate(path, lastModifiedTime);
}, 30000); // 30000 milliseconds = 30 seconds
}
})
.catch(error => {
console.error('Error loading JSON:', error);
titleElement.textContent = 'Error loading data';
titleElement.style.display = 'block';
});
}
// Function to check if the JSON file is updated
function checkForUpdate(path, lastModifiedTime) {
fetch(path, { method: 'HEAD' })
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const newLastModifiedTime = response.headers.get('Last-Modified');
if (newLastModifiedTime && new Date(newLastModifiedTime) > new Date(lastModifiedTime)) {
// If the JSON file has been updated, reload the page
window.location.reload();
}
})
.catch(error => {
console.error('Error checking for update:', error);
});
}
// Initialize the page and load JSON from URL parameter
function init() {
const urlParams = new URLSearchParams(window.location.search);
const PR = urlParams.get('PR');
const sha = urlParams.get('sha');
const root_name = urlParams.get('name_0');
const nameParams = [];
urlParams.forEach((value, key) => {
if (key.startsWith('name_')) {
const index = parseInt(key.split('_')[1], 10);
nameParams[index] = value;
}
});
if (PR && sha && root_name) {
loadJSON(PR, sha, nameParams);
} else {
document.getElementById('title').textContent = 'Error: Missing required URL parameters: PR, sha, or name_0';
}
}
window.onload = init;
</script>
</body>
</html>
Reference in New Issue Copy Permalink