Skip to content

Commit

Permalink
Merge branch 'estebanreyl/buildlogsWithAccesibility' of https://githu…
Browse files Browse the repository at this point in the history 
…b.com/AzureCR/vscode-docker into estebanreyl/buildlogsWithAccesibility
  • Loading branch information
@jvstokes
jvstokes committed Aug 21, 2018
2 parents fc4a477 + a423a3b commit e645cbf
Show file tree
Hide file tree
Showing 9 changed files with 302 additions and 148 deletions.
12 changes: 7 additions & 5 deletions commands/azureCommands/acr-build-logs-utils/logProvider.ts
View file
Expand Up @@ -51,22 +51,24 @@ export class LogContentProvider implements vscode.TextDocumentContentProvider {
font-size: var(--vscode-editor-font-size);
font-family: var(--vscode-editor-font-family);
}
pre{
#force{
font-size: var(--vscode-editor-font-size);
font-family: var(--vscode-editor-font-family);
font-family: monospace;
font-size: var(--font-size);
font-weight: var(--font-weight);
}
.r{
color:lightcoral;
color:var(--vscode-terminal-ansiBrightRed);
}
.g{
color:lightgreen;
color:var(--vscode-terminal-ansiBrightGreen);
}
</style>
</head>
<body>
<pre>${processedLog}</pre>
<pre><span id="force">${processedLog}</span></pre>
</body>
</html>`
}
Expand Down
61 changes: 57 additions & 4 deletions commands/azureCommands/acr-build-logs-utils/logScripts.js
View file
Expand Up @@ -13,12 +13,16 @@ var modalObject = {
overlay: document.querySelector('.overlay')
};

var triangles = {
'down': ' △',
'up': ' ▽'
}

// Main
let content = document.querySelector('#core');
const vscode = acquireVsCodeApi();
setLoadMoreListener();
setTableSorter();
window.addEventListener("resize", manageWidth);

modalObject.overlay.addEventListener('click', (event) => {
if (event.target === modalObject.overlay) {
Expand All @@ -42,13 +46,13 @@ function sortTable(n, dir = "asc", holdDir = false) {
currentN = n;
let table, rows, switching, i, x, y, shouldSwitch, switchcount = 0;
let cmpFunc = acquireCompareFunction(n);
table = document.getElementById("coreParent");
table = document.getElementById("core");
switching = true;
//Set the sorting direction to ascending:

while (switching) {
switching = false;
rows = table.querySelectorAll(".accordion");
rows = table.querySelectorAll(".holder");
for (i = 0; i < rows.length - 1; i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("TD")[n];
Expand Down Expand Up @@ -77,6 +81,19 @@ function sortTable(n, dir = "asc", holdDir = false) {
}
}
}

let sortColumns = document.querySelectorAll(".sort");
if (sortColumns[n - 1].innerHTML === triangles['down']) {
sortColumns[n - 1].innerHTML = triangles['up'];
} else if (sortColumns[n - 1].innerHTML === triangles['up']) {
sortColumns[n - 1].innerHTML = triangles['down'];
} else {
for (cell of sortColumns) {
cell.innerHTML = ' ';
}
sortColumns[n - 1].innerHTML = triangles['down'];
}

}

function acquireCompareFunction(n) {
Expand Down Expand Up @@ -133,6 +150,7 @@ window.addEventListener('message', event => {
} else if (message.type === 'endContinued') {
sortTable(currentN, currentDir, true);
} else if (message.type === 'end') {
window.addEventListener("resize", manageWidth);
manageWidth();
}

Expand All @@ -142,11 +160,17 @@ function setSingleAccordion(item) {
item.addEventListener('click', function () {
this.classList.toggle('active');
this.querySelector('.arrow').classList.toggle('activeArrow');
var panel = this.nextElementSibling;
let panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.display = 'none';
panel.style.maxHeight = null;
let index = openAccordions.indexOf(panel);
if (index > -1) {
openAccordions.splice(index, 1);
}
} else {
openAccordions.push(panel);
setAccordionTableWidth();
panel.style.display = 'table-row';
let paddingTop = +panel.style.paddingTop.split('px')[0];
let paddingBottom = +panel.style.paddingBottom.split('px')[0];
Expand Down Expand Up @@ -202,4 +226,33 @@ function manageWidth() {
let width = parseInt(getComputedStyle(topRowCells[i]).width);
headerCells[i].style.width = width + "px";
}
setAccordionTableWidth();
}

let openAccordions = [];

function setAccordionTableWidth() {
let topRow = document.querySelector("#core tr");
let topRowCells = topRow.querySelectorAll("td");
let topWidths = [];
for (let cell of topRowCells) {
topWidths.push(parseInt(getComputedStyle(cell).width));
}
for (acc of openAccordions) {
let cells = acc.querySelectorAll(".innerTable td");
cells[0].style.width = topWidths[0];
cells[5].style.width = topWidths[1] + topWidths[2] + topWidths[3] + topWidths[4] + topWidths[5];
cells[2].style.width = topWidths[6];
for (let i = 3; i < cells.length; i++) {
if ((i + 2) % 4 === 1) {
cells[i].style.width = topWidths[0] + "px";
} else if ((i + 2) % 4 === 2) {
cells[i].style.width = (topWidths[1] + topWidths[2]) + "px";
} else if ((i + 2) % 4 === 3) {
cells[i].style.width = (topWidths[3] + topWidths[4]) + "px";
} else if ((i + 2) % 4 === 0) {
cells[i].style.width = topWidths[5] + "px";
}
}
}
}
3 changes: 1 addition & 2 deletions commands/azureCommands/acr-build-logs-utils/stylesheet.css
View file
Expand Up @@ -100,11 +100,10 @@ h2 {
font-family: var(--vscode-editor-font-family);
}

#coreParent{
#core {
margin-top: 1cm;
}


#headerTable {
font-size: var(--vscode-editor-font-size);
font-family: var(--vscode-editor-font-family);
Expand Down
117 changes: 63 additions & 54 deletions commands/azureCommands/acr-build-logs.ts
View file
Expand Up @@ -27,6 +27,7 @@ export async function viewBuildLogs(context: AzureRegistryNode | AzureRepository
let resourceGroup: string = registry.id.slice(registry.id.search('resourceGroups/') + 'resourceGroups/'.length, registry.id.search('/providers/'));

const client = AzureUtilityManager.getInstance().getContainerRegistryManagementClient(subscription);

let logData: LogData = new LogData(client, registry, resourceGroup);
const filterFunction = context ? getFilterFunction(context) : undefined;
try {
Expand All @@ -43,22 +44,26 @@ export async function viewBuildLogs(context: AzureRegistryNode | AzureRepository
itemType = 'repository';
} else if (context && context instanceof AzureImageNode) {
itemType = 'image';

} else {
itemType = 'registry';
}
vscode.window.showInformationMessage(`This ${itemType} has no associated build logs`);
return;
}

let links: { url?: string, id: number }[] = [];

links.sort((a, b): number => { return a.id - b.id });
let webViewTitle: string = registry.name;
if (context instanceof AzureRepositoryNode || context instanceof AzureImageNode) {
webViewTitle += (context ? '/' + context.label : '');
if (context && context instanceof AzureImageNode) {
logData.getLink(0).then((url) => {
if (url !== 'requesting') {
openLog(url, logData.logs[0].buildId); //-----------------------------------------------------Need to use filter
}
});
} else {
let webViewTitle: string = registry.name;
if (context instanceof AzureRepositoryNode || context instanceof AzureImageNode) {
webViewTitle += (context ? '/' + context.label : '');
}
createWebview(webViewTitle, logData);
}
createWebview(webViewTitle, logData);

}

//# WEBVIEW COMPONENTS
Expand Down Expand Up @@ -95,39 +100,41 @@ function addLogsToWebView(panel: vscode.WebviewPanel, logData: LogData, startIte
'type': 'populate',
'id': i,
'logComponent': `
<tr id= "btn${i}" class="accordion">
<td class = 'arrowHolder'><div class = "arrow">&#x25f9</div></td>
<td class = 'widthControl'>${name}</td>
<td class = 'widthControl'>${buildTask}</td>
<td class ='status widthControl ${log.status}'>${log.status}</td>
<td class = 'widthControl'>${createTime}</td>
<td class = 'widthControl'>${timeElapsed}</td>
<td class = 'widthControl'>${osType}</td>
</tr>
<tr class="panel">
<td colspan = "7">
<div class= "paddingDiv overflowX">
<table class="innerTable">
<tr>
<td class = "arrowHolder">&#160</td>
<td colspan = "5" class = "borderLimit widthControl5">Output Images</td>
<td class = "widthControl lastTd" rowspan = "300">
<div class = "button-holder">
<button id= "log${i}" class="viewLog">Open Logs</button>
</div>
</td>
</tr>
<tr>
<td class = "arrowHolder">&#160</td>
<td colspan = "2" class = "borderLimit widthControl2">Tag</th>
<td colspan = "2" class = "widthControl3">Repository</td>
<td class = "widthControl">Digest</td>
</tr>
${imageOutput}
</table>
</div>
</td>
</tr>`
<tbody class = "holder">
<tr id= "btn${i}" class="accordion">
<td class = 'arrowHolder'><div class = "arrow">&#x25f9</div></td>
<td class = 'widthControl'>${name}</td>
<td class = 'widthControl'>${buildTask}</td>
<td class ='status widthControl ${log.status}'>${log.status}</td>
<td class = 'widthControl'>${createTime}</td>
<td class = 'widthControl'>${timeElapsed}</td>
<td class = 'widthControl'>${osType}</td>
</tr>
<tr class="panel">
<td colspan = "7">
<div class= "paddingDiv overflowX">
<table class="innerTable">
<tr>
<td class = "arrowHolder">&#160</td>
<td colspan = "5" class = "borderLimit widthControl5">Output Images</td>
<td class = "widthControl lastTd" rowspan = "300">
<div class = "button-holder">
<button id= "log${i}" class="viewLog">Open Logs</button>
</div>
</td>
</tr>
<tr>
<td class = "arrowHolder">&#160</td>
<td colspan = "2" class = "borderLimit widthControl2">Tag</th>
<td colspan = "2" class = "widthControl3">Repository</td>
<td class = "widthControl">Digest</td>
</tr>
${imageOutput}
</table>
</div>
</td>
</tr>
</tbody>`
});
}
if (startItem) {
Expand Down Expand Up @@ -190,19 +197,16 @@ function getWebviewContent(scriptFile: vscode.Uri, stylesheet: vscode.Uri): stri
<div id = "header">
<table id="headerTable">
<th class = 'arrowHolder'></td>
<th class = 'widthControl'>Build Name </th>
<th class = 'widthControl'>BuildTask </th>
<th class = 'widthControl'>Status </th>
<th class = 'widthControl'>Created </th>
<th class = 'widthControl'>Elapsed Time </th>
<th class = 'widthControl'>Platform </th>
<th class = 'widthControl'>Build Name<span class="sort"> </span></th>
<th class = 'widthControl'>BuildTask<span class="sort"> </span></th>
<th class = 'widthControl'>Status<span class="sort"> </span></th>
<th class = 'widthControl'>Created<span class="sort"> &#9661</span></th>
<th class = 'widthControl'>Elapsed Time<span class="sort"> </span></th>
<th class = 'widthControl'>Platform<span class="sort"> </span></th>
<td></td>
</table>
</div>
<table id = 'coreParent'>
<tbody id = 'core'>
</tbody>
<table id = 'core'>
</table>
<div class = 'loadMoreBtn'>
<button id= "loadBtn" class="viewLog">Load More Logs</button>
Expand All @@ -215,8 +219,7 @@ function getWebviewContent(scriptFile: vscode.Uri, stylesheet: vscode.Uri): stri
</div>
<script src= "${scriptFile}"></script>
</body>
`;
</body>`;
}
/** Setup communication with the webview sorting out received mesages from its javascript file */
function setupCommunication(panel: vscode.WebviewPanel, logData: LogData): void {
Expand Down Expand Up @@ -252,7 +255,13 @@ function createLogView(text: string, title: string): void {
console.log(error);
}

// ///TODO: temporarily testing with the opentext, trying to save
// let bool;
// console.log("here");
// vscode.workspace.openTextDocument(uri).then((doc) => {
// console.log("inside openTextDocument lambda function");
// bool = doc.save(); ///want to make this async, wasn't able to make lambda asyc
// console.log(bool);
// return vscode.window.showTextDocument(doc, vscode.ViewColumn.Active + 1, true);
// });

Expand Down

0 comments on commit e645cbf

Please sign in to comment.