| <!DOCTYPE html> |
| <html lang="en" style="overflow: auto;"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>Session Results - Web Platform Test</title> |
| <link rel="stylesheet" href="css/bulma-0.7.5/bulma.min.css" /> |
| <link rel="stylesheet" href="css/fontawesome-5.7.2.min.css" /> |
| <!-- <link rel="stylesheet" href="css/result.css" /> --> |
| <script src="lib/utils.js"></script> |
| <script src="lib/wave-service.js"></script> |
| <script src="lib/ui.js"></script> |
| <style> |
| .site-logo { |
| max-width: 300px; |
| margin: 0 0 30px -15px; |
| } |
| </style> |
| </head> |
| <body> |
| <script> |
| let token = null; |
| window.onload = () => { |
| const query = utils.parseQuery(location.search); |
| token = query.token; |
| if (token) { |
| resultUi.render(); |
| resultUi.refreshData(); |
| } else { |
| location.href = WEB_ROOT + "overview.html" + location.search; |
| } |
| WaveService.addRecentSession(token); |
| }; |
| const resultUi = { |
| state: { |
| details: null, |
| results: null, |
| referenceSessions: [], |
| lastCompletedTests: [], |
| malfunctioningTests: [], |
| addLabelVisible: false, |
| }, |
| refreshData: (toUpdate) => { |
| WaveService.readStatus(function (config) { |
| resultUi.state.reportsEnabled = config.reportsEnabled; |
| resultUi.renderApiResults(); |
| }); |
| switch (toUpdate) { |
| case "test_completed": |
| resultUi.refreshSessionStatus(() => { |
| resultUi.refreshSessionResults(() => { |
| resultUi.renderApiResults(); |
| }); |
| }); |
| resultUi.refreshLastCompletedTests(() => { |
| resultUi.renderLastCompletedTests(); |
| }); |
| break; |
| case "status": |
| resultUi.refreshSessionStatus(() => { |
| resultUi.renderControls(); |
| resultUi.renderSessionDetails(); |
| }); |
| break; |
| case "": |
| case null: |
| case undefined: |
| resultUi.refreshSessionConfiguration(() => { |
| resultUi.refreshSessionStatus(() => { |
| resultUi.refreshSessionResults(() => { |
| resultUi.refreshReferenceSessions(() => |
| resultUi.renderReferenceSessions() |
| ); |
| resultUi.renderControls(); |
| resultUi.renderSessionDetails(); |
| resultUi.renderApiResults(); |
| resultUi.renderExportView(); |
| resultUi.refreshLastCompletedTests(() => { |
| resultUi.renderLastCompletedTests(); |
| }); |
| resultUi.refreshMalfunctioningTests(() => { |
| resultUi.renderMalfunctioningTests(); |
| }); |
| }); |
| }); |
| }); |
| break; |
| } |
| }, |
| refreshSessionConfiguration(callback = () => {}) { |
| WaveService.readSession(token, (configuration) => { |
| resultUi.state.configuration = configuration; |
| callback(configuration); |
| }); |
| }, |
| refreshSessionStatus(callback = () => {}) { |
| WaveService.readSessionStatus(token, (status) => { |
| resultUi.state.status = status; |
| if (status.status !== "completed" && status.status !== "aborted") |
| WaveService.addSessionEventListener( |
| token, |
| resultUi.handleSessionEvent |
| ); |
| callback(status); |
| }); |
| }, |
| refreshReferenceSessions(callback = () => {}) { |
| const { configuration } = resultUi.state; |
| if (!configuration) return; |
| const { referenceTokens } = configuration; |
| if (!referenceTokens) return; |
| WaveService.readMultipleSessions(referenceTokens, (configuration) => { |
| resultUi.state.referenceSessions = configuration; |
| resultUi.renderReferenceSessions(); |
| callback(configuration); |
| }); |
| }, |
| refreshSessionResults(callback = () => {}) { |
| WaveService.readResultsCompact(token, (results) => { |
| resultUi.state.results = results; |
| callback(results); |
| }); |
| }, |
| refreshLastCompletedTests(callback = () => {}) { |
| if (resultUi.state.configuration.isPublic) return; |
| WaveService.readLastCompletedTests(token, ["timeout"], (tests) => { |
| resultUi.state.lastCompletedTests = tests; |
| callback(); |
| }); |
| }, |
| refreshMalfunctioningTests(callback = () => {}) { |
| WaveService.readMalfunctioningTests(token, (tests) => { |
| resultUi.state.malfunctioningTests = tests; |
| callback(); |
| }); |
| }, |
| handleSessionEvent(message) { |
| resultUi.refreshData(message.type); |
| }, |
| openResultsOverview() { |
| location.href = WEB_ROOT + "overview.html"; |
| }, |
| stopSession() { |
| WaveService.stopSession(token, resultUi.refreshData); |
| }, |
| deleteSession() { |
| WaveService.deleteSession(token, () => |
| resultUi.openResultsOverview() |
| ); |
| }, |
| showDeleteModal() { |
| const modal = UI.getElement("delete-modal"); |
| const className = modal.getAttribute("class"); |
| modal.setAttribute("class", className + " is-active"); |
| }, |
| hideDeleteModal() { |
| const modal = UI.getElement("delete-modal"); |
| let className = modal.getAttribute("class"); |
| className = className.replace(" is-active", ""); |
| modal.setAttribute("class", className); |
| }, |
| downloadApiResultJson(api) { |
| const { results } = resultUi.state; |
| WaveService.downloadApiResult(token, api); |
| }, |
| openHtmlReport(api) { |
| const { results } = resultUi.state; |
| if (results[api].complete != results[api].total) return; |
| WaveService.readReportUri(token, api, function (uri) { |
| window.open(uri, "_blank"); |
| }); |
| }, |
| downloadFinishedApiJsons() { |
| WaveService.downloadAllApiResults(token); |
| }, |
| downloadHtmlZip() { |
| WaveService.downloadResultsOverview(token); |
| }, |
| downloadResults() { |
| if (resultUi.state.status.status !== "completed") return; |
| WaveService.downloadResults(token); |
| }, |
| addMalfunctioningTest(testPath) { |
| const { malfunctioningTests } = resultUi.state; |
| if (malfunctioningTests.indexOf(testPath) !== -1) return; |
| malfunctioningTests.push(testPath); |
| WaveService.updateMalfunctioningTests( |
| token, |
| malfunctioningTests, |
| () => { |
| resultUi.renderMalfunctioningTests(); |
| } |
| ); |
| resultUi.renderLastCompletedTests(); |
| }, |
| removeMalfunctioningTest(testPath) { |
| const { malfunctioningTests } = resultUi.state; |
| malfunctioningTests.splice(malfunctioningTests.indexOf(testPath), 1); |
| WaveService.updateMalfunctioningTests( |
| token, |
| malfunctioningTests, |
| () => { |
| resultUi.renderMalfunctioningTests(); |
| } |
| ); |
| resultUi.renderLastCompletedTests(); |
| }, |
| isTestOnMalfunctioningList(test) { |
| const { malfunctioningTests } = resultUi.state; |
| return malfunctioningTests.indexOf(test) !== -1; |
| }, |
| showExcluded() { |
| resultUi.state.showExcluded = true; |
| resultUi.renderSessionDetails(); |
| }, |
| hideExcluded() { |
| resultUi.state.showExcluded = false; |
| resultUi.renderSessionDetails(); |
| }, |
| addLabel() { |
| const label = UI.getElement("session-label-input").value; |
| if (!label) return; |
| const { configuration } = resultUi.state; |
| configuration.labels.push(label); |
| WaveService.updateLabels(token, configuration.labels); |
| resultUi.renderSessionDetails(); |
| UI.getElement("session-label-input").focus(); |
| }, |
| removeLabel(index) { |
| const { configuration } = resultUi.state; |
| configuration.labels.splice(index, 1); |
| WaveService.updateLabels(token, configuration.labels); |
| resultUi.renderSessionDetails(); |
| }, |
| showAddLabel() { |
| resultUi.state.addLabelVisible = true; |
| resultUi.renderSessionDetails(); |
| UI.getElement("session-label-input").focus(); |
| }, |
| hideAddLabel() { |
| resultUi.state.addLabelVisible = false; |
| resultUi.renderSessionDetails(); |
| }, |
| render() { |
| const resultView = UI.createElement({ |
| className: "section", |
| children: [ |
| { |
| className: "container", |
| style: "margin-bottom: 2em", |
| children: [ |
| { |
| className: "columns", |
| children: [ |
| { |
| className: "column", |
| children: [ |
| { |
| element: "img", |
| src: "res/wavelogo_2016.jpg", |
| className: "site-logo", |
| }, |
| ], |
| }, |
| { |
| className: "column is-narrow", |
| children: { |
| className: "button is-dark is-outlined", |
| onclick: resultUi.openResultsOverview, |
| children: [ |
| { |
| element: "span", |
| className: "icon", |
| children: [ |
| { |
| element: "i", |
| className: "fas fa-arrow-left", |
| }, |
| ], |
| }, |
| { |
| text: "Results Overview", |
| element: "span", |
| }, |
| ], |
| }, |
| }, |
| ], |
| }, |
| { |
| className: "container", |
| children: { |
| className: "columns", |
| children: [ |
| { |
| className: "column", |
| children: { className: "title", text: "Result" }, |
| }, |
| { |
| className: "column is-narrow", |
| children: { id: "controls" }, |
| }, |
| ], |
| }, |
| }, |
| ], |
| }, |
| { |
| id: "session-details", |
| className: "container", |
| style: "margin-bottom: 2em", |
| }, |
| { |
| id: "last-completed-tests", |
| className: "container", |
| style: "margin-bottom: 2em", |
| }, |
| { |
| id: "api-results", |
| className: "container", |
| style: "margin-bottom: 2em", |
| }, |
| { |
| id: "timeout-files", |
| className: "container", |
| style: "margin-bottom: 2em", |
| }, |
| { |
| id: "export", |
| className: "container", |
| style: "margin-bottom: 2em", |
| }, |
| { |
| id: "malfunctioning-tests", |
| className: "container", |
| style: "margin-bottom: 2em", |
| }, |
| ], |
| }); |
| const root = UI.getRoot(); |
| root.innerHTML = ""; |
| root.appendChild(resultView); |
| resultUi.renderControls(); |
| resultUi.renderSessionDetails(); |
| resultUi.renderApiResults(); |
| resultUi.renderExportView(); |
| }, |
| renderControls() { |
| const { state } = resultUi; |
| if (!state.status) return; |
| const { status } = state.status; |
| const { isPublic } = state.configuration; |
| const controlsView = UI.createElement({ |
| className: "field is-grouped is-grouped-multiline", |
| }); |
| if ( |
| status && |
| status !== "aborted" && |
| status !== "completed" && |
| status !== "pending" |
| ) { |
| const pauseResumeButton = UI.createElement({ |
| id: "pause-resume-button", |
| className: "control button is-dark is-outlined", |
| onclick: function () { |
| if (status === "running") { |
| WaveService.pauseSession(token, resultUi.refreshData); |
| } else { |
| WaveService.startSession(token, resultUi.refreshData); |
| } |
| }, |
| children: [ |
| { |
| element: "span", |
| className: "icon", |
| children: [ |
| { |
| element: "i", |
| className: |
| status === "running" ? "fas fa-pause" : "fas fa-play", |
| }, |
| ], |
| }, |
| { |
| text: status === "running" ? "Pause" : "Resume", |
| element: "span", |
| }, |
| ], |
| }); |
| controlsView.appendChild(pauseResumeButton); |
| } |
| |
| if (status && status !== "aborted" && status !== "completed") { |
| const stopButton = UI.createElement({ |
| id: "stop-button", |
| className: "control button is-dark is-outlined", |
| onclick: resultUi.stopSession, |
| children: [ |
| { |
| element: "span", |
| className: "icon", |
| children: [ |
| { |
| element: "i", |
| className: "fas fa-square", |
| }, |
| ], |
| }, |
| { |
| text: "Stop", |
| element: "span", |
| }, |
| ], |
| }); |
| controlsView.appendChild(stopButton); |
| } |
| if (!isPublic) { |
| const deleteButton = UI.createElement({ |
| id: "delete-button", |
| className: "control button is-dark is-outlined", |
| onclick: resultUi.showDeleteModal, |
| children: [ |
| { |
| element: "span", |
| className: "icon", |
| children: [ |
| { |
| element: "i", |
| className: "fas fa-trash-alt", |
| }, |
| ], |
| }, |
| { |
| text: "Delete", |
| element: "span", |
| }, |
| ], |
| }); |
| controlsView.appendChild(deleteButton); |
| } |
| |
| const deleteModal = UI.createElement({ |
| id: "delete-modal", |
| className: "modal", |
| children: [ |
| { |
| className: "modal-background", |
| onclick: resultUi.hideDeleteModal, |
| }, |
| { |
| className: "modal-card", |
| children: [ |
| { |
| className: "modal-card-head", |
| children: [ |
| { |
| element: "p", |
| className: "modal-card-title", |
| text: "Delete Session", |
| }, |
| ], |
| }, |
| { |
| className: "modal-card-body", |
| children: [ |
| { |
| element: "p", |
| text: "Are you sure you want to delete this session?", |
| }, |
| { element: "p", text: "This action cannot be undone." }, |
| ], |
| }, |
| { |
| className: "modal-card-foot", |
| children: [ |
| { |
| className: "button is-danger", |
| text: "Delete Session", |
| onclick: resultUi.deleteSession, |
| }, |
| { |
| className: "button", |
| text: "Cancel", |
| onclick: resultUi.hideDeleteModal, |
| }, |
| ], |
| }, |
| ], |
| }, |
| ], |
| }); |
| controlsView.appendChild(deleteModal); |
| |
| const controls = UI.getElement("controls"); |
| controls.innerHTML = ""; |
| controls.appendChild(controlsView); |
| }, |
| renderSessionDetails() { |
| const { state } = resultUi; |
| const { configuration, status, results } = state; |
| if (!configuration || !status) return; |
| const sessionDetailsView = UI.createElement({ |
| style: "margin-bottom: 20px", |
| }); |
| |
| const heading = UI.createElement({ |
| text: "Session details", |
| className: "title is-4", |
| }); |
| sessionDetailsView.appendChild(heading); |
| |
| const getTagStyle = (status) => { |
| switch (status) { |
| case "completed": |
| return "is-success"; |
| case "running": |
| return "is-info"; |
| case "aborted": |
| return "is-danger"; |
| case "paused": |
| return "is-warning"; |
| case "pending": |
| return "is-primary"; |
| } |
| }; |
| if (status.dateFinished) { |
| if (state.durationInterval) clearInterval(state.durationInterval); |
| } else if (status.dateStarted) { |
| if (!state.durationInterval) |
| state.durationInterval = setInterval(() => { |
| UI.getElement("duration").innerHTML = utils.millisToTimeString( |
| Date.now() - status.dateStarted.getTime() |
| ); |
| }, 1000); |
| } |
| |
| const { addLabelVisible } = state; |
| const { showExcluded } = state; |
| |
| const tokenField = UI.createElement({ |
| className: "field is-horizontal", |
| children: [ |
| { |
| className: "field-label", |
| children: { className: "label", text: "Token" }, |
| }, |
| { |
| className: "field-body", |
| children: { |
| className: "field", |
| children: { |
| className: "control", |
| text: configuration.token, |
| }, |
| }, |
| }, |
| ], |
| }); |
| sessionDetailsView.appendChild(tokenField); |
| |
| const userAgentField = UI.createElement({ |
| className: "field is-horizontal", |
| children: [ |
| { |
| className: "field-label", |
| children: { className: "label", text: "User Agent" }, |
| }, |
| { |
| className: "field-body", |
| children: { |
| className: "field", |
| children: { |
| className: "control", |
| text: configuration.userAgent || "", |
| }, |
| }, |
| }, |
| ], |
| }); |
| sessionDetailsView.appendChild(userAgentField); |
| |
| const testPathsField = UI.createElement({ |
| className: "field is-horizontal", |
| children: [ |
| { |
| className: "field-label", |
| children: { className: "label", text: "Test Paths" }, |
| }, |
| { |
| className: "field-body", |
| children: { |
| className: "field", |
| children: { |
| className: "control", |
| text: configuration.tests.include |
| .reduce((text, test) => text + test + ", ", "") |
| .slice(0, -2), |
| }, |
| }, |
| }, |
| ], |
| }); |
| sessionDetailsView.appendChild(testPathsField); |
| |
| const excludedTestsField = UI.createElement({ |
| className: "field is-horizontal", |
| children: [ |
| { |
| className: "field-label", |
| children: { className: "label", text: "Excluded Test Paths" }, |
| }, |
| { |
| className: "field-body", |
| children: { |
| className: "field", |
| children: { |
| className: "control", |
| children: [ |
| { |
| element: "span", |
| text: configuration.tests.exclude.length, |
| }, |
| { |
| element: "span", |
| className: "button is-small is-rounded", |
| style: "margin-left: 10px", |
| text: showExcluded ? "hide" : "show", |
| onClick: showExcluded |
| ? resultUi.hideExcluded |
| : resultUi.showExcluded, |
| }, |
| showExcluded |
| ? { |
| style: |
| "max-height: 250px; overflow: auto; margin-bottom: 10px", |
| children: configuration.tests.exclude.map( |
| (test) => ({ |
| text: test, |
| }) |
| ), |
| } |
| : null, |
| ], |
| }, |
| }, |
| }, |
| ], |
| }); |
| sessionDetailsView.appendChild(excludedTestsField); |
| |
| const referenceSessionField = UI.createElement({ |
| style: "display: none", |
| id: "reference-session-field", |
| className: "field is-horizontal", |
| children: [ |
| { |
| className: "field-label", |
| children: { className: "label", text: "Reference Sessions" }, |
| }, |
| { |
| className: "field-body", |
| children: { |
| className: "field", |
| children: { |
| className: "control", |
| children: { id: "reference-sessions" }, |
| }, |
| }, |
| }, |
| ], |
| }); |
| sessionDetailsView.appendChild(referenceSessionField); |
| |
| const totalTestFilesField = UI.createElement({ |
| className: "field is-horizontal", |
| children: [ |
| { |
| className: "field-label", |
| children: { className: "label", text: "Total Test Files" }, |
| }, |
| { |
| className: "field-body", |
| children: { |
| className: "field", |
| children: { |
| className: "control", |
| text: Object.keys(results).reduce( |
| (sum, api) => (sum += results[api].total), |
| 0 |
| ), |
| }, |
| }, |
| }, |
| ], |
| }); |
| sessionDetailsView.appendChild(totalTestFilesField); |
| |
| const statusField = UI.createElement({ |
| className: "field is-horizontal", |
| children: [ |
| { |
| className: "field-label", |
| children: { className: "label", text: "Status" }, |
| }, |
| { |
| className: "field-body", |
| children: { |
| className: "field", |
| children: { |
| className: `control tag ${getTagStyle(status.status)}`, |
| text: status.status, |
| }, |
| }, |
| }, |
| ], |
| }); |
| sessionDetailsView.appendChild(statusField); |
| |
| const timeoutsField = UI.createElement({ |
| className: "field is-horizontal", |
| children: [ |
| { |
| className: "field-label", |
| children: { className: "label", text: "Test Timeouts" }, |
| }, |
| { |
| className: "field-body", |
| children: { |
| className: "field", |
| children: { |
| className: `control`, |
| text: Object.keys(configuration.timeouts).reduce( |
| (text, timeout) => |
| `${text}${timeout}: ${ |
| configuration.timeouts[timeout] / 1000 |
| }s\n`, |
| "" |
| ), |
| }, |
| }, |
| }, |
| ], |
| }); |
| sessionDetailsView.appendChild(timeoutsField); |
| |
| if (status.dateStarted) { |
| const startedField = UI.createElement({ |
| className: "field is-horizontal", |
| children: [ |
| { |
| className: "field-label", |
| children: { className: "label", text: "Date Started" }, |
| }, |
| { |
| className: "field-body", |
| children: { |
| className: "field", |
| children: { |
| className: `control`, |
| text: new Date(status.dateStarted).toLocaleString(), |
| }, |
| }, |
| }, |
| ], |
| }); |
| sessionDetailsView.appendChild(startedField); |
| } |
| |
| if (status.dateFinished) { |
| const finishedField = UI.createElement({ |
| className: "field is-horizontal", |
| children: [ |
| { |
| className: "field-label", |
| children: { className: "label", text: "Date Finished" }, |
| }, |
| { |
| className: "field-body", |
| children: { |
| className: "field", |
| children: { |
| className: `control`, |
| text: new Date(status.dateFinished).toLocaleString(), |
| }, |
| }, |
| }, |
| ], |
| }); |
| sessionDetailsView.appendChild(finishedField); |
| } |
| |
| if (status.dateStarted) { |
| const durationField = UI.createElement({ |
| className: "field is-horizontal", |
| children: [ |
| { |
| className: "field-label", |
| children: { className: "label", text: "Duration" }, |
| }, |
| { |
| className: "field-body", |
| children: { |
| className: "field", |
| children: { |
| className: `control`, |
| id: "duration", |
| text: utils.millisToTimeString( |
| status.dateFinished |
| ? status.dateFinished.getTime() - |
| status.dateStarted.getTime() |
| : Date.now() - status.dateStarted.getTime() |
| ), |
| }, |
| }, |
| }, |
| ], |
| }); |
| sessionDetailsView.appendChild(durationField); |
| } |
| |
| const labelsField = UI.createElement({ |
| className: "field is-horizontal", |
| children: [ |
| { |
| className: "field-label", |
| children: { className: "label", text: "Labels" }, |
| }, |
| { |
| className: "field-body", |
| children: { |
| className: "field is-grouped is-grouped-multiline", |
| children: configuration.labels |
| .map((label, index) => ({ |
| className: "control", |
| children: { |
| className: "tags has-addons", |
| children: [ |
| { |
| element: "span", |
| className: "tag is-info", |
| text: label, |
| }, |
| { |
| element: "a", |
| className: "tag is-delete", |
| onClick: () => resultUi.removeLabel(index), |
| }, |
| ], |
| }, |
| })) |
| .concat( |
| resultUi.state.configuration.isPublic |
| ? [] |
| : addLabelVisible |
| ? [ |
| { |
| className: "control field is-grouped", |
| children: [ |
| { |
| element: "input", |
| className: "input is-small control", |
| style: "width: 10rem", |
| id: "session-label-input", |
| type: "text", |
| onKeyUp: (event) => |
| event.keyCode === 13 |
| ? resultUi.addLabel() |
| : null, |
| }, |
| { |
| className: |
| "button is-dark is-outlined is-small is-rounded control", |
| text: "save", |
| onClick: resultUi.addLabel, |
| }, |
| { |
| className: |
| "button is-dark is-outlined is-small is-rounded control", |
| text: "cancel", |
| onClick: resultUi.hideAddLabel, |
| }, |
| ], |
| }, |
| ] |
| : [ |
| { |
| className: "button is-rounded is-small", |
| text: "Add", |
| onClick: resultUi.showAddLabel, |
| }, |
| ] |
| ), |
| }, |
| }, |
| ], |
| }); |
| sessionDetailsView.appendChild(labelsField); |
| |
| const sessionDetails = UI.getElement("session-details"); |
| sessionDetails.innerHTML = ""; |
| sessionDetails.appendChild(sessionDetailsView); |
| resultUi.renderReferenceSessions(); |
| }, |
| renderReferenceSessions() { |
| const { referenceSessions } = resultUi.state; |
| if (!referenceSessions || referenceSessions.length === 0) return; |
| const referenceSessionsList = UI.createElement({ |
| className: "field is-grouped is-grouped-multiline", |
| }); |
| const getBrowserIcon = (browser) => { |
| switch (browser.toLowerCase()) { |
| case "firefox": |
| return "fab fa-firefox"; |
| case "edge": |
| return "fab fa-edge"; |
| case "chrome": |
| case "chromium": |
| return "fab fa-chrome"; |
| case "safari": |
| case "webkit": |
| return "fab fa-safari"; |
| } |
| }; |
| referenceSessions.forEach((session) => { |
| const { token, browser } = session; |
| const referenceSessionItem = UI.createElement({ |
| className: |
| "control button is-dark is-small is-rounded is-outlined", |
| onClick: () => WaveService.openSession(token), |
| children: [ |
| { |
| element: "span", |
| className: "icon", |
| children: { |
| element: "i", |
| className: getBrowserIcon(browser.name), |
| }, |
| }, |
| { |
| element: "span", |
| text: token.split("-").shift(), |
| }, |
| ], |
| }); |
| referenceSessionsList.appendChild(referenceSessionItem); |
| }); |
| const referenceSessionsTarget = UI.getElement("reference-sessions"); |
| referenceSessionsTarget.innerHTML = ""; |
| referenceSessionsTarget.appendChild(referenceSessionsList); |
| const field = UI.getElement("reference-session-field"); |
| field.style["display"] = "flex"; |
| }, |
| renderLastCompletedTests() { |
| if (resultUi.state.configuration.isPublic) return; |
| const lastCompletedTestsView = UI.createElement({}); |
| |
| const heading = UI.createElement({ |
| className: "title is-4", |
| children: [ |
| { element: "span", text: "Last Timed-Out Test Files" }, |
| { |
| element: "span", |
| className: "title is-7", |
| text: " (most recent first)", |
| }, |
| ], |
| }); |
| lastCompletedTestsView.appendChild(heading); |
| |
| const { lastCompletedTests } = resultUi.state; |
| const testsTable = UI.createElement({ |
| element: "table", |
| className: "table", |
| style: "min-width: 100%", |
| children: [ |
| { |
| element: "thead", |
| children: [ |
| { |
| element: "tr", |
| children: [ |
| { element: "td", text: "Test File" }, |
| { element: "td", text: "Malfunctioning List" }, |
| ], |
| }, |
| ], |
| }, |
| { |
| element: "tbody", |
| children: lastCompletedTests.map(({ path, status }) => ({ |
| element: "tr", |
| children: [ |
| { element: "td", text: path }, |
| { |
| element: "td", |
| children: [ |
| { |
| element: "button", |
| className: "button is-dark is-outlined is-small", |
| onClick: () => resultUi.addMalfunctioningTest(path), |
| title: "Add to malfunctioning tests list.", |
| children: [ |
| { |
| element: "span", |
| className: "icon", |
| children: [ |
| { |
| element: "i", |
| className: resultUi.isTestOnMalfunctioningList( |
| path |
| ) |
| ? "fas fa-check" |
| : "fas fa-plus", |
| }, |
| ], |
| }, |
| ], |
| }, |
| ], |
| }, |
| ], |
| })), |
| }, |
| ], |
| }); |
| if (lastCompletedTests.length > 0) { |
| lastCompletedTestsView.appendChild( |
| UI.createElement({ |
| className: "container", |
| style: "overflow-x: auto;", |
| id: "last-completed-overflow", |
| children: testsTable, |
| }) |
| ); |
| } else { |
| const noTestsLabel = UI.createElement({ |
| text: "- No Timed-Out Tests -", |
| style: "text-align: center", |
| }); |
| lastCompletedTestsView.appendChild(noTestsLabel); |
| } |
| |
| UI.saveScrollPosition("last-completed-overflow"); |
| |
| const lastCompletedTestsElement = UI.getElement( |
| "last-completed-tests" |
| ); |
| lastCompletedTestsElement.innerHTML = ""; |
| lastCompletedTestsElement.appendChild(lastCompletedTestsView); |
| |
| UI.loadScrollPosition("last-completed-overflow"); |
| }, |
| renderApiResults() { |
| const { results, status } = resultUi.state; |
| |
| const apiResultsView = UI.createElement({ |
| style: "margin-bottom: 20px", |
| }); |
| |
| const heading = UI.createElement({ |
| text: "API Results", |
| className: "title is-4", |
| }); |
| apiResultsView.appendChild(heading); |
| |
| if (!results) { |
| const loadingIndicator = UI.createElement({ |
| className: "level", |
| children: { |
| element: "span", |
| className: "level-item", |
| children: [ |
| { |
| element: "i", |
| className: "fas fa-spinner fa-pulse", |
| }, |
| { |
| style: "margin-left: 0.4em;", |
| text: "Loading results ...", |
| }, |
| ], |
| }, |
| }); |
| apiResultsView.appendChild(loadingIndicator); |
| |
| const apiResults = UI.getElement("api-results"); |
| apiResults.innerHTML = ""; |
| apiResults.appendChild(apiResultsView); |
| return; |
| } |
| |
| const width = status.status === "running" ? "7.5em" : "auto"; |
| const header = UI.createElement({ |
| element: "thead", |
| children: [ |
| { |
| element: "tr", |
| children: [ |
| { element: "th", text: "API" }, |
| { element: "th", text: "Pass", style: `min-width: ${width}` }, |
| { element: "th", text: "Fail", style: `min-width: ${width}` }, |
| { |
| element: "th", |
| text: "Timeout", |
| style: `min-width: ${width}`, |
| }, |
| { |
| element: "th", |
| text: "Not Run", |
| style: `min-width: ${width}`, |
| }, |
| { |
| element: "th", |
| text: "Test Files Run", |
| style: `min-width: ${width}`, |
| }, |
| { element: "th", text: "Export" }, |
| ], |
| }, |
| ], |
| }); |
| |
| const apis = Object.keys(results).sort((apiA, apiB) => |
| apiA.toLowerCase() > apiB.toLowerCase() ? 1 : -1 |
| ); |
| |
| const rows = apis.map((api) => { |
| const { |
| complete = 0, |
| pass = 0, |
| fail = 0, |
| timeout = 0, |
| timeoutfiles = [], |
| not_run: notRun = 0, |
| total, |
| } = results[api]; |
| isDone = results[api].complete == results[api].total; |
| const totalTestResults = pass + fail + timeout + notRun; |
| return UI.createElement({ |
| element: "tr", |
| style: "white-space: nowrap", |
| children: [ |
| { element: "td", text: api }, |
| { |
| element: "td", |
| children: { |
| style: `color: hsl(141, 71%, 38%); overflow: visible; white-space: nowrap; width: ${width}`, |
| text: `${pass} (${utils.percent(pass, totalTestResults)}%)`, |
| }, |
| }, |
| { |
| element: "td", |
| children: { |
| className: "has-text-danger", |
| style: `overflow: visible; white-space: nowrap; width: ${width}`, |
| text: `${fail} (${utils.percent(fail, totalTestResults)}%)`, |
| }, |
| }, |
| { |
| element: "td", |
| children: { |
| style: `color: hsl(48, 100%, 40%); overflow: visible; white-space: nowrap; width: ${width}`, |
| text: `${timeout} (${utils.percent( |
| timeout, |
| totalTestResults |
| )}%)`, |
| }, |
| }, |
| { |
| element: "td", |
| children: { |
| className: "has-text-info", |
| style: `overflow: visible; white-space: nowrap; width: ${width}`, |
| text: `${notRun} (${utils.percent( |
| notRun, |
| totalTestResults |
| )}%)`, |
| }, |
| }, |
| { |
| element: "td", |
| children: { |
| style: `overflow: visible; white-space: nowrap; width: ${width}`, |
| text: `${complete}/${total} (${utils.percent( |
| complete, |
| total |
| )}%)`, |
| }, |
| }, |
| { |
| element: "td", |
| children: { |
| className: "field has-addons", |
| children: [ |
| { |
| className: "control", |
| children: { |
| className: "button is-dark is-outlined is-small", |
| onclick: () => resultUi.downloadApiResultJson(api), |
| text: "json", |
| title: `Download results of ${api} API as JSON file.`, |
| }, |
| }, |
| resultUi.state.reportsEnabled |
| ? { |
| className: "control", |
| children: { |
| className: "button is-dark is-outlined is-small", |
| disabled: !isDone, |
| onclick: () => resultUi.openHtmlReport(api), |
| text: "report", |
| title: `Show results of ${api} API in WPT Report format.`, |
| }, |
| } |
| : null, |
| ], |
| }, |
| }, |
| ], |
| }); |
| }); |
| |
| const { pass, fail, timeout, not_run, complete, total } = apis.reduce( |
| (sum, api) => { |
| Object.keys(sum).forEach( |
| (key) => (sum[key] += results[api][key] ? results[api][key] : 0) |
| ); |
| return sum; |
| }, |
| { complete: 0, total: 0, pass: 0, fail: 0, timeout: 0, not_run: 0 } |
| ); |
| const totalTestResults = pass + fail + timeout + not_run; |
| |
| const footer = UI.createElement({ |
| element: "tfoot", |
| children: [ |
| { |
| element: "tr", |
| children: [ |
| { element: "th", text: "Total" }, |
| { |
| element: "th", |
| children: { |
| style: `color: hsl(141, 71%, 38%); overflow: visible; white-space: nowrap; width: ${width}`, |
| text: `${pass} (${utils.percent( |
| pass, |
| totalTestResults |
| )}%)`, |
| }, |
| }, |
| { |
| element: "th", |
| children: { |
| style: `overflow: visible; white-space: nowrap; width: ${width}`, |
| className: "has-text-danger", |
| text: `${fail} (${utils.percent( |
| fail, |
| totalTestResults |
| )}%)`, |
| }, |
| }, |
| { |
| element: "th", |
| children: { |
| style: `color: hsl(48, 100%, 40%); overflow: visible; white-space: nowrap; width: ${width}`, |
| text: `${timeout} (${utils.percent( |
| timeout, |
| totalTestResults |
| )}%)`, |
| }, |
| }, |
| { |
| element: "th", |
| children: { |
| style: `overflow: visible; white-space: nowrap; width: ${width}`, |
| className: "has-text-info", |
| text: `${not_run} (${utils.percent( |
| not_run, |
| totalTestResults |
| )}%)`, |
| }, |
| }, |
| { |
| element: "th", |
| children: { |
| style: `overflow: visible; white-space: nowrap; width: ${width}`, |
| text: `${complete}/${total} (${utils.percent( |
| complete, |
| total |
| )}%)`, |
| }, |
| }, |
| { element: "th" }, |
| ], |
| }, |
| ], |
| }); |
| |
| const resultsTable = UI.createElement({ |
| className: "container", |
| style: "overflow-x: auto", |
| id: "results-overflow", |
| children: { |
| element: "table", |
| className: "table", |
| id: "results-table", |
| style: |
| "width: 100%; min-width: 30em; border-radius: 3px; border: 2px solid hsl(0, 0%, 86%);", |
| children: [header, { element: "tbody", children: rows }, footer], |
| }, |
| }); |
| apiResultsView.appendChild(resultsTable); |
| |
| UI.saveScrollPosition("results-overflow"); |
| |
| const apiResults = UI.getElement("api-results"); |
| apiResults.innerHTML = ""; |
| apiResults.appendChild(apiResultsView); |
| |
| UI.loadScrollPosition("results-overflow"); |
| }, |
| renderExportView() { |
| const { status } = resultUi.state; |
| if (!status) return; |
| |
| const exportElement = UI.getElement("export"); |
| exportElement.innerHTML = ""; |
| |
| const heading = UI.createElement({ |
| className: "title is-4", |
| text: "Export", |
| }); |
| exportElement.appendChild(heading); |
| |
| const resultsField = UI.createElement({ |
| className: "field is-horizontal", |
| children: [ |
| { |
| className: "field-label", |
| children: { className: "label", text: "Results" }, |
| }, |
| { |
| className: "field-body", |
| children: { |
| className: "control columns", |
| style: "width: 100%", |
| children: [ |
| { |
| className: "column is-9", |
| text: |
| "Download results for import into other WMAS Test Suite instances.", |
| }, |
| { |
| className: "column is-3", |
| children: { |
| className: |
| "button is-dark is-outlined is-small is-fullwidth", |
| onClick: resultUi.downloadResults, |
| disabled: status.status !== "completed", |
| children: [ |
| { |
| element: "span", |
| className: "icon", |
| children: { |
| element: "i", |
| className: "fas fa-file-archive", |
| }, |
| }, |
| { element: "span", text: "Download Zip" }, |
| ], |
| }, |
| }, |
| ], |
| }, |
| }, |
| ], |
| }); |
| exportElement.appendChild(resultsField); |
| |
| const jsonField = UI.createElement({ |
| className: "field is-horizontal", |
| children: [ |
| { |
| className: "field-label", |
| children: { |
| className: "label", |
| text: "All JSON Files", |
| }, |
| }, |
| { |
| className: "field-body", |
| children: { |
| className: "control columns", |
| style: "width: 100%", |
| children: [ |
| { |
| className: "column is-9", |
| text: |
| "Download JSON files containing results of completed test files.", |
| }, |
| { |
| className: "column is-3", |
| children: { |
| className: |
| "button is-dark is-outlined is-small is-fullwidth", |
| onclick: resultUi.downloadFinishedApiJsons, |
| children: [ |
| { |
| element: "span", |
| className: "icon", |
| children: { |
| element: "i", |
| className: "fas fa-file-archive", |
| }, |
| }, |
| { element: "span", text: "Download Zip" }, |
| ], |
| }, |
| }, |
| ], |
| }, |
| }, |
| ], |
| }); |
| exportElement.appendChild(jsonField); |
| |
| const htmlField = UI.createElement({ |
| className: "field is-horizontal", |
| children: [ |
| { |
| className: "field-label", |
| children: { |
| className: "label", |
| text: "Session result HTML", |
| }, |
| }, |
| { |
| className: "field-body", |
| children: { |
| className: "control columns", |
| style: "width: 100%", |
| children: [ |
| { |
| className: "column is-9", |
| text: |
| "Download this sessions result as standalone HTML page, similar to this page.", |
| }, |
| { |
| className: "column is-3", |
| children: { |
| className: |
| "button is-dark is-outlined is-small is-fullwidth", |
| onClick: resultUi.downloadHtmlZip, |
| children: [ |
| { |
| element: "span", |
| className: "icon", |
| children: { |
| element: "i", |
| className: "fas fa-code", |
| }, |
| }, |
| { element: "span", text: "Download HTML" }, |
| ], |
| }, |
| }, |
| ], |
| }, |
| }, |
| ], |
| }); |
| exportElement.appendChild(htmlField); |
| }, |
| renderMalfunctioningTests() { |
| const malfunctioningTestsView = UI.createElement({}); |
| const heading = UI.createElement({ |
| className: "title is-4", |
| text: "Malfunctioning Tests", |
| }); |
| malfunctioningTestsView.appendChild(heading); |
| |
| const { malfunctioningTests } = resultUi.state; |
| const testsTable = UI.createElement({ |
| element: "table", |
| className: "table", |
| style: "min-width: 100%", |
| children: [ |
| { |
| element: "thead", |
| children: [ |
| { |
| element: "tr", |
| children: [ |
| { element: "td", text: "Test File" }, |
| { element: "td", text: "" }, |
| ], |
| }, |
| ], |
| }, |
| { |
| element: "tbody", |
| children: malfunctioningTests.map((path) => ({ |
| element: "tr", |
| children: [ |
| { element: "td", text: path }, |
| { |
| element: "td", |
| children: resultUi.state.configuration.isPublic |
| ? null |
| : { |
| element: "button", |
| className: "button is-dark is-outlined is-small", |
| onClick: () => |
| resultUi.removeMalfunctioningTest(path), |
| title: "Remove from malfunctioning tests list.", |
| children: [ |
| { |
| element: "span", |
| className: "icon", |
| children: [ |
| { |
| element: "i", |
| className: "fas fa-trash-alt", |
| }, |
| ], |
| }, |
| ], |
| }, |
| }, |
| ], |
| })), |
| }, |
| ], |
| }); |
| if (malfunctioningTests.length > 0) { |
| malfunctioningTestsView.appendChild( |
| UI.createElement({ |
| className: "container", |
| style: "overflow-x: auto", |
| id: "malfunctioning-overflow", |
| children: testsTable, |
| }) |
| ); |
| } else { |
| const noTestsLabel = UI.createElement({ |
| text: "- No Tests Available -", |
| style: "text-align: center", |
| }); |
| malfunctioningTestsView.appendChild(noTestsLabel); |
| } |
| |
| UI.saveScrollPosition("malfunctioning-overflow"); |
| |
| const malfunctioningTestsElement = UI.getElement( |
| "malfunctioning-tests" |
| ); |
| malfunctioningTestsElement.innerHTML = ""; |
| malfunctioningTestsElement.appendChild(malfunctioningTestsView); |
| |
| UI.loadScrollPosition("malfunctioning-overflow"); |
| }, |
| }; |
| </script> |
| </body> |
| </html> |
