New UI for the report

Ghpr.Controller.ts/Ghpr.Controller.ts.csproj

@@ -40,6 +40,9 @@
     <Content Include="report\src\js\plotly.min.js">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Content>
+    <Content Include="report\src\logo.svg">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Content>
     <Content Include="report\src\octicons\alert.svg">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Content>
@@ -577,7 +580,7 @@
     <Content Include="report\src\style\build.css">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Content>
-    <Content Include="report\src\style\github.css">
+    <Content Include="report\src\style\ghpr.css">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Content>
     <Content Include="report\tests\index.html">
@@ -677,4 +680,7 @@
     <TypeScriptSourceMap>false</TypeScriptSourceMap>
   </PropertyGroup>
   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />
+  <PropertyGroup>
+    <PostBuildEvent>if $(ConfigurationName) == Debug (xcopy "$(TargetDir)report\*.*" "C:\_GHPReporter_NUnit_Report" /r /y /e)</PostBuildEvent>
+  </PropertyGroup>
 </Project>

Ghpr.Controller.ts/controller/common/ReportPageUpdater.ts

@@ -16,29 +16,53 @@ class ReportPageUpdater {
         document.getElementById("finish").innerHTML = `<b>Finish datetime:</b> ${DateFormatter.format(latestRun.runInfo.finish)}`;
         document.getElementById("duration").innerHTML = `<b>Duration:</b> ${DateFormatter.diff(latestRun.runInfo.start, latestRun.runInfo.finish)}`;
     }
-    
+
     private static updateReportName(reportName: string): void {
         if (reportName === undefined) {
             reportName = "GHPReport";
         }
         document.getElementById("report-name").innerHTML = `${reportName}`;
     }
 
+    private static updateProjectName(projectName: string): void {
+        if (projectName === undefined) {
+            projectName = "GHPReport";
+        }
+        document.getElementById("project-name").innerHTML = `${projectName}`;
+    }
+
     private static updateCopyright(coreVersion: string): void {
         document.getElementById("copyright").innerHTML = `Copyright 2015 - 2018 © GhpReporter (version ${coreVersion})`;
     }
 
     private static updateRunsList(runs: Array<RunDto>): void {
-        let list = "";
+        let fullList = "";
+        let recentList = "";
+        let runsResultsList = "";
         const c = runs.length;
         for (let i = 0; i < c; i++) {
             const r = runs[i];
             if (r.name === "") {
                 r.name = `${DateFormatter.format(r.runInfo.start)} - ${DateFormatter.format(r.runInfo.finish)}`;
             }
-            list += `<li id=$run-${r.runInfo.guid}>Run #${c - i - 1}: <a href="./runs/index.html?runGuid=${r.runInfo.guid}">${r.name}</a></li>`;
+            fullList += `<li id=$run-${r.runInfo.guid}>Run #${c - i - 1}: <a href="./runs/index.html?runGuid=${r.runInfo.guid}">${r.name}</a></li>`;
+            recentList += `<li id=$run-${r.runInfo.guid}><div class="width-full text-bold">
+                            <a class="d-flex flex-items-baseline f5 mb-2" href="./runs/index.html?runGuid=${r.runInfo.guid}">${r.name}</a>
+                            </div></li>`;
+            const bb = i === c - 1 ? "" : "border-bottom";
+            let passed = r.summary.success === r.summary.total;
+            const status = passed ? "All tests passed" : "Some errors detected";
+            const statusIconPath = passed ? "./src/octicons/check.svg" : "./src/octicons/alert.svg"; 
+            runsResultsList +=`<div class="mx-4 py-2 my-2 ${bb}"><div class="mb-3">
+                    <a class="f6 text-bold link-gray-dark d-flex no-underline wb-break-all">${r.name}</a>
+                    <p class="f6 text-gray mb-2"><img src="${statusIconPath}" class="ghpr-tabicon" alt=""/>
+                        <b style="padding-left: 10px;">Status:</b> ${status}
+                    </p>
+                </div></div>`;
         }
-        document.getElementById("all-runs").innerHTML = list;
+        document.getElementById("all-runs").innerHTML = fullList;
+        document.getElementById("recent-runs").innerHTML = recentList;
+        document.getElementById("runs-results").innerHTML = runsResultsList;
     }
 
     private static updateRunsInfo(runs: Array<RunDto>, totalFiles: number): void {
@@ -101,9 +125,12 @@ class ReportPageUpdater {
             { x: failedX,  y: failedY,  name: "failed",       customdata: runGuids, type: t, hoverinfo: hi, marker: { color: Color.failed } },
             { x: passedX,  y: passedY,  name: "passed",       customdata: runGuids, type: t, hoverinfo: hi, marker: { color: Color.passed } }
         ];
+
+        const barsDiv = document.getElementById("runs-bars");
+
+        var size = this.getPlotSize(barsDiv);
 
-        const barsDiv = document.getElementById("runs-bars") as any;
-        Plotly.newPlot(barsDiv, plotlyData, {
+        var layout = {
             title: "Runs statistics",
             xaxis: {
                 tickvals: tickvals,
@@ -114,26 +141,44 @@ class ReportPageUpdater {
                 title: "Tests number"
             },
             barmode: "stack",
-            bargap: 0.01
-        });
+            bargap: 0.01,
+            width: size.width,
+            height: size.height
+        };
+
+        Plotly.react(barsDiv, plotlyData, layout);
 
-        barsDiv.on("plotly_click", (eventData: any) => {
+        (barsDiv as any).on("plotly_click", (eventData: any) => {
             var url = `./runs/index.html?runGuid=${eventData.points[0].customdata}`;
             var win = window.open(url, "_blank");
             win.focus();
         });
     }
 
+    static getPlotSize(plotDiv: HTMLElement): any {
+        var p = plotDiv.parentElement.parentElement.parentElement.parentElement;
+        var w = p.offsetWidth;
+        var h = p.offsetHeight;
+        return { width: 0.95 * w, height: 0.85 * h};
+    }
+
     static updatePage(): void {
         Controller.init(PageType.TestRunsPage, (dataService: IDataService, reportSettings: ReportSettingsDto) => {
             dataService.fromPage(PageType.TestRunsPage).getLatestRuns((runs: Array<RunDto>, total: number) => {
                 const latestRun = runs[0];
+                this.updateProjectName(reportSettings.projectName);
                 this.updateReportName(reportSettings.reportName);
                 this.updateLatestRunInfo(latestRun);
                 this.updatePlotlyBars(runs);
                 this.updateRunsInfo(runs, total);
                 this.updateRunsList(runs);
                 this.updateCopyright(reportSettings.coreVersion);
+
+                window.addEventListener("resize", () => {
+                    const barsDiv = document.getElementById("runs-bars");
+                    var size = this.getPlotSize(barsDiv);
+                    Plotly.relayout(barsDiv, { width: size.width, height: size.height });
+                });
             });
         });
     }

Ghpr.Controller.ts/controller/common/RunPageUpdater.ts

@@ -22,6 +22,13 @@ class RunPageUpdater {
         document.getElementById("copyright").innerHTML = `Copyright 2015 - 2018 © GhpReporter (version ${coreVersion})`;
     }
 
+    private static updateReportName(reportName: string): void {
+        if (reportName === undefined) {
+            reportName = "GHPReport";
+        }
+        document.getElementById("report-name").innerHTML = `${reportName}`;
+    }
+
     private static updateRunInformation(run: RunDto): void {
         document.getElementById("name").innerHTML = `<b>Name:</b> ${run.name}`;
         document.getElementById("sprint").innerHTML = `<b>Sprint:</b> ${run.sprint}`;
@@ -34,6 +41,46 @@ class RunPageUpdater {
         document.getElementById("page-title").innerHTML = run.name;
     }
 
+    static getSummaryPlotSize(plotDiv: HTMLElement): any {
+        var p = plotDiv.parentElement;
+        var w = Math.max(300, Math.min(p.offsetWidth, 800));
+        var h = Math.max(400, Math.min(p.offsetHeight, 500));
+        return { width: 0.95 * w, height: 0.95 * h };
+    }
+
+    static getTimelinePlotSize(plotDiv: HTMLElement): any {
+        var p = plotDiv.parentElement.parentElement.parentElement;
+        var w = Math.max(300, Math.min(p.offsetWidth, 1000));
+        var h = Math.max(400, Math.min(p.offsetHeight, 500));
+        return { width: 1.00 * w, height: 1.00 * h };
+    }
+
+    private static updateBriefResults(run: RunDto): void {
+        const s = run.summary;
+        document.getElementById("run-results").innerHTML = `<div class="mx-4 py-2 border-bottom"><div>
+            <a class="f6 text-bold link-gray-dark d-flex no-underline wb-break-all">Total</a>
+            <p class="f6 text-gray mb-2">${s.total}</p>
+            </div></div><div class="mx-4 py-2 border-bottom"><div>
+            <a class="f6 text-bold link-gray-dark d-flex no-underline wb-break-all">Success</a>
+            <p class="f6 text-gray mb-2">${s.success}</p>
+            </div></div><div class="mx-4 py-2 border-bottom"><div>
+            <a class="f6 text-bold link-gray-dark d-flex no-underline wb-break-all">Errors</a>
+            <p class="f6 text-gray mb-2">${s.errors}</p>
+            </div></div><div class="mx-4 py-2 border-bottom"><div>
+            <a class="f6 text-bold link-gray-dark d-flex no-underline wb-break-all">Failures</a>
+            <p class="f6 text-gray mb-2">${s.failures}</p>
+            </div></div><div class="mx-4 py-2 border-bottom"><div>
+            <a class="f6 text-bold link-gray-dark d-flex no-underline wb-break-all">Inconclusive</a>
+            <p class="f6 text-gray mb-2">${s.inconclusive}</p>
+            </div></div><div class="mx-4 py-2 border-bottom"><div>
+            <a class="f6 text-bold link-gray-dark d-flex no-underline wb-break-all">Ignored</a>
+            <p class="f6 text-gray mb-2">${s.ignored}</p>
+            </div></div><div class="mx-4 py-2 border-bottom"><div>
+            <a class="f6 text-bold link-gray-dark d-flex no-underline wb-break-all">Unknown</a>
+            <p class="f6 text-gray mb-2">${s.unknown}</p>
+            </div></div>`;
+    }
+
     private static updateSummary(run: RunDto): void {
         const s = run.summary;
         document.getElementById("total").innerHTML = `<b>Total:</b> ${s.total}`;
@@ -43,16 +90,19 @@ class RunPageUpdater {
         document.getElementById("inconclusive").innerHTML = `<b>Inconclusive:</b> ${s.inconclusive}`;
         document.getElementById("ignored").innerHTML = `<b>Ignored:</b> ${s.ignored}`;
         document.getElementById("unknown").innerHTML = `<b>Unknown:</b> ${s.unknown}`;
-        
+
         const pieDiv = document.getElementById("summary-pie");
-        Plotly.react(pieDiv,
-        [
+
+        var size = this.getSummaryPlotSize(pieDiv);
+
+        var data = [
             {
                 values: [s.success, s.errors, s.failures, s.inconclusive, s.ignored, s.unknown],
                 labels: ["Passed", "Broken", "Failed", "Inconclusive", "Ignored", "Unknown"],
                 marker: {
                     colors: [
-                        Color.passed, Color.broken, Color.failed, Color.inconclusive, Color.ignored, Color.unknown],
+                        Color.passed, Color.broken, Color.failed, Color.inconclusive, Color.ignored, Color.unknown
+                    ],
                     line: {
                         color: "white",
                         width: 2
@@ -68,18 +118,30 @@ class RunPageUpdater {
                 type: "pie",
                 hole: 0.35
             }
-        ],
-        {
-            margin: { t: 0 }
-        });
+        ];
+
+        var layout = {
+            margin: { t: 20 },
+            width: size.width,
+            height: size.height
+        };
+
+        Plotly.react(pieDiv, data, layout);
     }
 
     private static addTest(t: TestRunDto, c: number, i: number): void {
         const ti = t.testInfo;
         const color = TestRunHelper.getColor(t);
+        const result = TestRunHelper.getResult(t);
         const testHref = `./../tests/index.html?testGuid=${ti.guid}&itemName=${t.testInfo.itemName}`;
-        const testLi = `<li id="test-${ti.guid}" style="color: ${color};" class="${TestRunHelper.getResult(t)}">
+        const testLi = `<li id="test-${ti.guid}" class="${result}" style="color: white;">
+            <span class="ghpr-test-list-span" style="background-color: ${color};"></span>
             <a href="${testHref}"> ${t.name}</a></li>`;
+        const failedTestLi = `<li><div class="width-full text-bold">
+                                <span class="ghpr-test-list-span" style="background-color: ${color};"></span>
+                                <a class="f5 mb-2" href="${testHref}"> ${t.name}</a>
+                              </div></li>`;
+
         this.plotlyTimelineData.push(
             {
                 x: [DateFormatter.format(ti.start), DateFormatter.format(ti.finish)],
@@ -132,6 +194,9 @@ class RunPageUpdater {
                         document.getElementById(ids[j - 1]).getElementsByTagName("ul")[0].innerHTML += li;
                     } else {
                         document.getElementById(ids[j - 1]).getElementsByTagName("ul")[0].innerHTML += testLi;
+                        if (result === TestResult.Failed) {
+                            document.getElementById("recent-test-failures").innerHTML += failedTestLi;
+                        }
                     }
                 }
             }
@@ -201,33 +266,49 @@ class RunPageUpdater {
             dataService.fromPage(PageType.TestRunPage).getRun(runGuid, (runDto: RunDto) => {
                 UrlHelper.insertParam("runGuid", runDto.runInfo.guid);
                 this.plotlyTimelineData = new Array();
+                this.updateReportName(reportSettings.reportName);
                 this.updateRunInformation(runDto);
                 this.updateSummary(runDto);
+                this.updateBriefResults(runDto);
                 this.updateTitle(runDto);
                 this.updateTestFilterButtons();
                 this.updateTestsList(runDto);
                 this.updateTimeline();
                 this.updateCopyright(reportSettings.coreVersion);
+
+                window.addEventListener("resize", () => {
+                    const summaryPieDiv = document.getElementById("summary-pie");
+                    var summarySize = this.getSummaryPlotSize(summaryPieDiv);
+                    Plotly.relayout(summaryPieDiv, { width: summarySize.width, height: summarySize.height });
+                    const timelinePieDiv = document.getElementById("run-timeline-chart");
+                    var timelineSize = this.getTimelinePlotSize(timelinePieDiv);
+                    Plotly.relayout(timelinePieDiv, { width: timelineSize.width, height: timelineSize.height });
+                });
             });
         });
     }
 
     static updateTimeline(): void {
         const timelineDiv = document.getElementById("run-timeline-chart");
-        Plotly.react(timelineDiv, this.plotlyTimelineData, {
+        var size = this.getTimelinePlotSize(timelineDiv);
+        var layout = {
             title: "Timeline",
             yaxis: {
                 showgrid: false,
                 zeroline: false,
                 showline: false,
                 showticklabels: false
-            }
-        });
+            },
+            width: size.width,
+            height: size.height
+        };
+        Plotly.react(timelineDiv, this.plotlyTimelineData, layout);
     }
 
     static updateTestsList(run: RunDto): void {
         document.getElementById("btn-back").setAttribute("href", `./../index.html`);
         document.getElementById("all-tests").innerHTML = "";
+        document.getElementById("recent-test-failures").innerHTML = "";
         var index = 0;
         Controller.init(PageType.TestRunPage, (dataService: IDataService, reportSettings: ReportSettingsDto) => {
             dataService.fromPage(PageType.TestRunPage).getRunTests(run, (testRunDto: TestRunDto, c: number, i: number) => {

Ghpr.Controller.ts/controller/common/TabsHelper.ts

@@ -6,7 +6,7 @@ class TabsHelper {
             return;
         }
         UrlHelper.insertParam("currentTab", idToShow);
-        const tabs = document.getElementsByClassName("tabnav-tab");
+        const tabs = document.getElementsByClassName("ghpr-tab-a");
         for (let i = 0; i < tabs.length; i++) {
             tabs[i].classList.remove("selected");
         }