Merge pull request #82 from telekom/refactoring/virtual-log-view

Refactoring/virtual log view

Author: Mike Reiche

report-ng/app/package-lock.json

@@ -38,6 +38,7 @@
         "aurelia-fetch-client": "^1.8.2",
         "aurelia-templating": "^1.10.4",
         "aurelia-typed-observable-plugin": "^0.4.2",
+        "aurelia-ui-virtualization": "^1.0.0-rc2",
         "highlight.js": "^10.3.2",
         "moment": "^2.29.1",
         "moment-duration-format": "^2.3.2",

report-ng/app/package.json

@@ -61,57 +61,6 @@ html {
     overflow: hidden;
 }
 
-.code-view {
-    padding: 0.5em;
-    font-size: 14px;
-    background-color: #2b2b2b;
-    //@extend .secondary;
-    //border: 2px solid #495561; /*gray-300*/
-    //border-radius: 2px;
-    //word-break: break-all;
-    overflow-x: auto;
-    color: #c0dee0;
-    line-height: 1.5em;
-    font-family: monospace;
-    word-break: break-all;
-
-    a {
-        color: cornflowerblue;
-    }
-    //a:visited {
-    //    color: #c0dee0;
-    //}
-    //
-    //.line {
-    //    padding: 0.3em;
-    //}
-
-    .error {
-        background: darken($failed, 36)
-    }
-
-    .warn {
-        background: darken($skipped, 36)
-    }
-
-    .indicator {
-        width:1rem;
-        display: inline-block;
-    }
-
-    .number {
-        width:2rem;
-        color: #808080 !important;
-    }
-
-    .line {
-        padding: 0.1rem 0.4rem;
-    }
-    .pre {
-        white-space: pre;
-    }
-}
-
 .clickable {
     cursor: pointer;
 }

report-ng/app/src/app.scss

@@ -167,9 +167,12 @@ export class Classes extends AbstractViewModel {
                         uniqueClasses[classStatistic.classContext.fullClassName] = true;
                         uniqueStatuses[methodDetails.methodContext.resultStatus] = true;
                         this._filteredMethodDetails.push(methodDetails);
-                    })
+                    });
+
                 });
 
+
+
             // Sort by method name
             //this._filteredMethodDetails = this._filteredMethodDetails.sort((a, b) => a.methodContext.contextValues.name.localeCompare(b.methodContext.contextValues.name));
             // Sort by run index

report-ng/app/src/components/classes/classes.ts

@@ -0,0 +1,67 @@
+/*!
+ * Testerra
+ *
+ * (C) 2021, Mike Reiche,  T-Systems Multimedia Solutions GmbH, Deutsche Telekom AG
+ *
+ * Deutsche Telekom AG and all other contributors /
+ * copyright owners license this file to you under the Apache
+ * License, Version 2.0 (the "License"); you may not use this
+ * file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+@import "styles/statuses";
+
+.code-view {
+    padding: 0.5em;
+    font-size: 14px;
+    background-color: #2b2b2b;
+    color: #c0dee0;
+    line-height: 1.5em;
+    font-family: monospace;
+    word-break: break-all;
+    width: fit-content;
+    min-width: 100%;
+
+    a {
+        color: cornflowerblue;
+    }
+    //a:visited {
+    //    color: #c0dee0;
+    //}
+    //
+    //.line {
+    //    padding: 0.3em;
+    //}
+
+    .error {
+        background: darken($failed, 36)
+    }
+
+    .warn {
+        background: darken($skipped, 36)
+    }
+
+    .indicator {
+        width:1rem;
+        display: inline-block;
+    }
+
+    .number {
+        width:2rem;
+        color: #808080 !important;
+    }
+
+    .line {
+        padding: 2px 4px;
+    }
+}

report-ng/app/src/components/code-view/code-view.scss

@@ -27,20 +27,21 @@ import hljs from "highlight.js/lib/core";
 import java from 'highlight.js/lib/languages/java';
 import 'highlight.js/styles/darcula.css';
 import IScriptSource = data.IScriptSource;
+import './code-view.scss'
 
 @autoinject()
 export class CodeView {
     private _hljs = hljs;
 
-    constructor() {
-        this._hljs.registerLanguage("java", java);
-    }
-
-    @bindable({bindingMode: bindingMode.toView})
+    @bindable({defaultBindingMode: bindingMode.toView})
     source:IScriptSource;
 
-    @bindable({bindingMode: bindingMode.toView})
+    @bindable({defaultBindingMode: bindingMode.toView})
     markClass:string = "error";
+
+    constructor() {
+        this._hljs.registerLanguage("java", java);
+    }
     //
     // sourceChanged() {
     //     console.log(this.source);

report-ng/app/src/components/code-view/code-view.ts

@@ -23,7 +23,7 @@
   <require from="../test-duration-card/test-duration-card"></require>
   <require from="../test-results-card/test-results-card"></require>
   <require from="../test-classes-card/test-classes-card"></require>
-
+    <mdc-linear-progress if.bind="_loading"></mdc-linear-progress>
     <mdc-layout-grid>
         <mdc-layout-grid-inner>
             <mdc-layout-grid-cell span="3">

report-ng/app/src/components/dashboard/dashboard.html

@@ -59,6 +59,7 @@ export class Dashboard extends AbstractViewModel {
     private _breakdownFilter:IFilter;
     private _classFilter:IFilter;
     private _topFailureAspects:FailureAspectStatistics[];
+    private _loading = true;
 
     constructor(
         private _statusConverter: StatusConverter,
@@ -156,6 +157,8 @@ export class Dashboard extends AbstractViewModel {
                         }
                     }
                 });
+
+            this._loading = false;
         });
     };
 

report-ng/app/src/components/dashboard/dashboard.ts

@@ -47,7 +47,7 @@ export interface ILayoutComparisonContext {
 
 @autoinject
 export class LayoutComparison {
-    @bindable({bindingMode:bindingMode.toView}) context:ILayoutComparisonContext;
+    @bindable({defaultBindingMode:bindingMode.toView}) context:ILayoutComparisonContext;
     private _images:ICompareImages;
     private _actualImageElement:HTMLImageElement;
     private _expectedImageElement:HTMLImageElement;

report-ng/app/src/components/layout-comparison/layout-comparison.ts

@@ -29,10 +29,10 @@ import IFile = data.IFile;
 @autoinject()
 export class LazyImage {
 
-    @bindable({bindingMode: bindingMode.toView})
+    @bindable({defaultBindingMode: bindingMode.toView})
     fileId:string;
 
-    @bindable({bindingMode: bindingMode.toView})
+    @bindable({defaultBindingMode: bindingMode.toView})
     class:string;
 
     private _file:IFile;