Add video tab

report-ng/app/src/components/method-details/browser-info.html

@@ -0,0 +1,82 @@
+<!--
+  ~ Testerra
+  ~
+  ~ (C) 2020, 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.
+  -->
+
+<template>
+    <mdc-layout-grid class="pt0">
+        <mdc-card class="mb1" repeat.for="session of _sessionInformationArray" mdc-body1 id="${session.sessionId}">
+            <div mdc-subtitle2 class="card-headline">Session: ${session.sessionName}</div>
+            <mdc-list-divider></mdc-list-divider>
+            <div class="card-content">
+                <mdc-layout-grid-inner>
+                    <mdc-layout-grid-cell span="6">
+                        <ul class="mdc-list mdc-list--dense" mdc-caption>
+                            <div mdc-subtitle2>General information</div>
+                            <li class="mdc-custom-list-item">
+                                <span class="secondary sr1">ID</span>${session.sessionId}
+                            </li>
+                            <li class="mdc-custom-list-item">
+                                <span class="secondary sr1">Browser</span>${session.browserName}:${session.browserVersion}
+                            </li>
+                            <li class="mdc-custom-list-item">
+                                <span class="secondary sr1">User&nbsp;agent</span>${session.userAgent}
+                            </li>
+                            <li class="mdc-custom-list-item" if.bind="session.serverUrl.length>0">
+                                <span class="secondary sr1">Server</span><a href="${session.serverUrl}">${session.serverUrl}</a>
+                            </li>
+                            <li class="mdc-custom-list-item" if.bind="session.nodeUrl.length>0">
+                                <span class="secondary sr1">Node</span><a href="${session.nodeUrl}">${session.nodeUrl}</a>
+                            </li>
+                            <li class="mdc-custom-list-item" if.bind="session.videoId">
+                                <span class="secondary sr1">Video ID</span><a route-href="route: video; params.bind: {id: session.sessionId}">${session.videoId}</a>
+                            </li>
+
+                            <div mdc-subtitle2 class="mt1">Session metrics</div>
+                            <li class="mdc-custom-list-item" if.bind="session.sessionDuration>0">
+                                <span class="secondary sr1">Session duration</span>${session.sessionDuration}s
+                            </li>
+                            <li class="mdc-custom-list-item" if.bind="session.sessionStartDuration>0">
+                                <span class="secondary sr1">Session start duration</span>${session.sessionStartDuration}s
+                            </li>
+                            <li class="mdc-custom-list-item" if.bind="session.sessionStartTime>0">
+                                <span class="secondary sr1">Session start time</span>${_dateFormatter.toView(Number(session.sessionStartTime))}
+                            </li>
+
+                            <div mdc-subtitle2 class="mt1" if.bind="session.baseUrl">Base URL metrics</div>
+                            <li class="mdc-custom-list-item" if.bind="session.baseUrl">
+                                <span class="secondary sr1">Base URL</span><a href="${session.baseUrl}">${session.baseUrl}</a>
+                            </li>
+                            <li class="mdc-custom-list-item" if.bind="session.baseurlStartDuration>0">
+                                <span class="secondary sr1">Base URL start duration</span>${session.baseurlStartDuration}s
+                            </li>
+                            <li class="mdc-custom-list-item" if.bind="session.baseurlStartTime>0">
+                                <span class="secondary sr1">Base URL start time</span>${_dateFormatter.toView(Number(session.baseurlStartTime))}
+                            </li>
+                        </ul>
+                    </mdc-layout-grid-cell>
+                    <mdc-layout-grid-cell span="6">
+                        <div mdc-subtitle2>Capabilities</div>
+                        <div class="code-view capabilities-view">${session.capabilities|json}</div>
+                    </mdc-layout-grid-cell>
+                </mdc-layout-grid-inner>
+            </div>
+        </mdc-card>
+    </mdc-layout-grid>
+</template>

report-ng/app/src/components/method-details/browser-info.ts

@@ -0,0 +1,119 @@
+/*
+ * Testerra
+ *
+ * (C) 2020, 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 {autoinject} from 'aurelia-framework';
+import {StatisticsGenerator} from "../../services/statistics-generator";
+import {data} from "../../services/report-model";
+import "./browser-info.scss"
+import {MetricType} from "../../services/report-model/framework_pb";
+import {ExecutionStatistics} from "../../services/statistic-models";
+import {
+    IntlDateFormatValueConverter
+} from "t-systems-aurelia-components/src/value-converters/intl-date-format-value-converter";
+import ISessionContext = data.SessionContext;
+
+@autoinject()
+export class BrowserInfo {
+    private _sessionContexts:ISessionContext[];
+    private _executionStatistics: ExecutionStatistics;
+    private _sessionInformationArray: ISessionInformation[];
+
+    constructor(
+        private _statistics: StatisticsGenerator,
+        private readonly _dateFormatter: IntlDateFormatValueConverter,
+    ) {
+        this._sessionInformationArray = [];
+    }
+
+    activate(
+        params: any,
+    ) {
+        this._statistics.getMethodDetails(params.methodId).then(methodDetails => {
+            this._sessionContexts = methodDetails.sessionContexts;
+        });
+
+        this._statistics.getExecutionStatistics().then(executionStatistics => {
+            this._executionStatistics = executionStatistics;
+        })
+
+        this._statistics.getSessionMetrics().then(sessionMetrics => {
+            sessionMetrics = sessionMetrics.filter(metric => this._sessionContexts.map(context => context.contextValues.id).includes(metric.sessionContextId))
+            sessionMetrics.forEach(metric => {
+                const sessionData = metric.metricsValues.find(value => value.metricType === MetricType.SESSION_LOAD);
+
+                const baseurlData = metric.metricsValues
+                    .filter(value => value.metricType === MetricType.BASEURL_LOAD)
+                    .filter(value => value.endTimestamp > 0)    // if there is no baseurl endTimestamp the baseurl data will not be displayed
+                    .find(() => true)
+
+                if (!(sessionData?.endTimestamp > 0)){      // if there is no session endTimestamp the related metric will be skipped
+                    return;
+                }
+
+                const sessionContext = this._executionStatistics.executionAggregate.sessionContexts[metric.sessionContextId];
+                const sessionInformation: ISessionInformation = {
+                    sessionName: sessionContext.contextValues.name,
+                    sessionId: sessionContext.contextValues.id,
+                    browserName: sessionContext.browserName,
+                    browserVersion: sessionContext.browserVersion,
+                    userAgent: sessionContext.userAgent,
+                    serverUrl: sessionContext.serverUrl,
+                    nodeUrl: sessionContext.nodeUrl,
+                    baseUrl: sessionContext.baseUrl,
+                    sessionDuration: (sessionContext.contextValues.endTime - sessionContext.contextValues.startTime) / 1000,
+                    sessionStartDuration: (sessionData.endTimestamp - sessionData.startTimestamp) / 1000,
+                    baseurlStartDuration: (baseurlData?.endTimestamp - baseurlData?.startTimestamp) / 1000,
+                    sessionStartTime: sessionData.startTimestamp,
+                    baseurlStartTime: baseurlData?.startTimestamp,
+                    capabilities: sessionContext.capabilities,
+                    videoId: sessionContext.videoId
+                }
+                this._sessionInformationArray.push(sessionInformation);
+            })
+        })
+
+        if(params.id){
+            window.setTimeout(() => {
+                // getting the DOM element that we found in logMessages
+                const element = document.getElementById(params.id);
+                element.scrollIntoView();
+            }, 1);
+        }
+    }
+}
+
+interface ISessionInformation {
+    sessionName: string,
+    sessionId: string,
+    browserName: string,
+    browserVersion: string,
+    userAgent,
+    serverUrl,
+    nodeUrl,
+    baseUrl,
+    sessionDuration: number,
+    sessionStartDuration: number,
+    baseurlStartDuration?: number,
+    sessionStartTime: number,
+    baseurlStartTime?: number,
+    capabilities?,
+    videoId?,
+}

report-ng/app/src/components/method-details/method.ts

@@ -84,15 +84,25 @@ export class Method {
                 }
             },
             {
-                route: 'sessions',
-                moduleId: PLATFORM.moduleName('./sessions'),
+                route: 'browser-info',
+                moduleId: PLATFORM.moduleName('./browser-info'),
                 nav: true,
-                name: "sessions",
-                title: 'Sessions',
+                name: "browser-info",
+                title: 'Browser Info',
                 settings: {
                     icon: "devices"
                 }
             },
+            {
+                route: 'video',
+                moduleId: PLATFORM.moduleName('./video'),
+                nav: true,
+                name: "video",
+                title: 'Video',
+                settings: {
+                    icon: "videocam"
+                }
+            },
             {
                 route: 'dependencies',
                 moduleId: PLATFORM.moduleName('./dependency-network'),
@@ -145,7 +155,7 @@ export class Method {
                         }
                         break;
                     }
-                    case "sessions": {
+                    case "browser-info": {
                         if (methodDetails.sessionContexts.length > 0) {
                             routeConfig.settings.count = methodDetails.sessionContexts.length;
                             routeConfig.nav = true;
@@ -154,6 +164,16 @@ export class Method {
                         }
                         break;
                     }
+                    case "video":{
+                        const contextsWithVideos = methodDetails.sessionContexts.filter(context => context.videoId?.length > 0)
+                        if(contextsWithVideos.length > 0){
+                            routeConfig.settings.count = methodDetails.sessionContexts.map(context => context.videoId).length;
+                            routeConfig.nav = true;
+                        } else {
+                            disableRoute(routeConfig);
+                        }
+                        break;
+                    }
                     case "details": {
                         if (methodDetails.numDetails > 0) {
                             routeConfig.nav = true;

report-ng/app/src/components/method-details/video.html

@@ -0,0 +1,50 @@
+/*
+* Testerra
+*
+* (C) 2023, Selina Natschke, Deutsche Telekom MMS 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.
+*/
+
+<template>
+    <mdc-layout-grid class="pt0">
+        <mdc-card class="mb1" repeat.for="sessionContext of _sessionContexts" mdc-body1 id="${sessionContext.contextValues.id}">
+            <div mdc-subtitle2 class="card-headline">Session: ${sessionContext.contextValues.name}</div>
+            <mdc-list-divider></mdc-list-divider>
+            <div class="card-content">
+                <mdc-layout-grid-inner>
+                    <mdc-layout-grid-cell span="10">
+                        <div>
+                            <lazy-video file-id.bind="sessionContext.videoId"></lazy-video>
+                        </div>
+                    </mdc-layout-grid-cell>
+                        <mdc-layout-grid-cell span="2">
+                            <div>
+                                <ul class="mdc-list mdc-list--dense" mdc-caption>
+                                    <li class="mdc-custom-list-item">
+                                        <span class="secondary sr1">Session ID</span><a route-href="route: browser-info; params.bind: {id: sessionContext.contextValues.id}">${sessionContext.contextValues.id}</a>
+                                    </li>
+                                    <li class="mdc-custom-list-item">
+                                        <span class="secondary sr1">Browser</span>${sessionContext.browserName}:${sessionContext.browserVersion}
+                                    </li>
+                                </ul>
+                            </div>
+                        </mdc-layout-grid-cell>
+                </mdc-layout-grid-inner>
+            </div>
+        </mdc-card>
+    </mdc-layout-grid>
+</template>