Merge branch 'development' of github.com:SafeExamBrowser/seb-screen-p…

…roctoring-gui into SEBSP-150
SafeExamBrowser · Jul 9, 2024 · cb754a7 · cb754a7
2 parents 9f540c2 + 93face8
commit cb754a7
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 58 deletions.
diff --git a/client/src/components/views/search/SearchForm.vue b/client/src/components/views/search/SearchForm.vue
@@ -118,37 +118,37 @@
                         :title="$t('searchForm.metadataTitle')">
                             <v-expansion-panel-text>
 
-                                <!------------Metatdata: Url------------->
+                                <!------------Metatdata: Application / Website------------->
                                 <v-row align="center">
                                     <v-col cols="4">
-                                        {{ $t('searchForm.url') }}:
+                                        {{ $t('searchForm.applicationWebsite') }}:
                                     </v-col>
                                     <v-col cols="8">
                                         <v-text-field
                                             single-line
                                             hide-details
                                             density="compact"
                                             variant="outlined"
-                                            v-model="metadataUrlField"
-                                            :aria-label="$t('searchForm.url')"
-                                        ></v-text-field>
+                                            v-model="metadataApplicationField"
+                                            :aria-label="$t('searchForm.applicationWebsite')">
+                                        </v-text-field>
                                     </v-col>
                                 </v-row>
                                 <!----------------------------------->
 
-                                <!------------Metatdata: Window Title------------->
+                                <!------------Metatdata: Broswer Title------------->
                                 <v-row align="center">
                                     <v-col cols="4">
-                                        {{ $t('searchForm.applicationWebsite') }}:
+                                        Browser Title:
                                     </v-col>
                                     <v-col cols="8">
                                         <v-text-field
                                             single-line
                                             hide-details
                                             density="compact"
                                             variant="outlined"
-                                            v-model="metadataWindowTitleField"
-                                            :aria-label="$t('searchForm.applicationWebsite')">
+                                            v-model="metadataBrowserTitleField"
+                                            aria-label="Browser Title">
                                         </v-text-field>
                                     </v-col>
                                 </v-row>
@@ -165,13 +165,31 @@
                                             hide-details
                                             density="compact"
                                             variant="outlined"
-                                            v-model="metadataUserActionField"
+                                            v-model="metadataActivityDetailsField"
                                             :aria-label="$t('searchForm.activityDetails')">
                                         </v-text-field>
                                     </v-col>
                                 </v-row>
                                 <!----------------------------------->
 
+                                <!------------Metatdata: Url------------->
+                                <v-row align="center">
+                                    <v-col cols="4">
+                                        {{ $t('searchForm.url') }}:
+                                    </v-col>
+                                    <v-col cols="8">
+                                        <v-text-field
+                                            single-line
+                                            hide-details
+                                            density="compact"
+                                            variant="outlined"
+                                            v-model="metadataUrlField"
+                                            :aria-label="$t('searchForm.url')"
+                                        ></v-text-field>
+                                    </v-col>
+                                </v-row>
+                                <!----------------------------------->
+
                             </v-expansion-panel-text>
                         </v-expansion-panel>
                     </v-expansion-panels>
@@ -281,9 +299,12 @@
             loginName: string,
             ipAddress: string,
             machineName: string,
+
+            metadataApplication: string,
+            metadataBrowserTitle: string,
+            metadataActivityDetails: string,
             metadataUrl: string,
-            metadataWindowTitle: string,
-            metadataUserAction: string,
+
             fromTime: string,
             toTime: string,
             pageNumber: number
@@ -299,9 +320,10 @@
     const ipAddressField = ref<string>("");
     const machineNameField = ref<string>("");
 
+    const metadataApplicationField = ref<string>("");
+    const metadataBrowserTitleField = ref<string>("");
+    const metadataActivityDetailsField = ref<string>("");
     const metadataUrlField = ref<string>("");
-    const metadataWindowTitleField = ref<string>("");
-    const metadataUserActionField = ref<string>("");
 
     const timePeriodField = ref<number>(1);
     const timePeriodRadio = ref<boolean>(true);
@@ -327,9 +349,12 @@
             loginNameField.value, 
             ipAddressField.value,
             machineNameField.value, 
+
+            metadataApplicationField.value,
+            metadataBrowserTitleField.value, 
+            metadataActivityDetailsField.value, 
             metadataUrlField.value, 
-            metadataWindowTitleField.value, 
-            metadataUserActionField.value, 
+
             fromTime, 
             toTime,
             1
@@ -342,9 +367,12 @@
         loginNameField.value = "";
         ipAddressField.value = "";
         machineNameField.value = ""; 
+
+        metadataApplicationField.value = ""; 
+        metadataBrowserTitleField.value = "";  
+        metadataActivityDetailsField.value = ""; 
         metadataUrlField.value = ""; 
-        metadataWindowTitleField.value = "";
-        metadataUserActionField.value = "";
+        
         timePeriodField.value = 1;
         timePeriodRadio.value = true;
         timePeriodSelect.value = 2;

diff --git a/client/src/components/views/search/SearchPage.vue b/client/src/components/views/search/SearchPage.vue
@@ -141,9 +141,12 @@
     const searchParameters = ref<OptionalParSearchSessions>();
     let examNameSearch: string | null;
     let groupNameSearch: string | null;
+
+    let metadataSearchApplication: string | null;
+    let metadataSearchBrowserTitle: string | null;
+    let metadataSearchActivityDetails: string | null;
     let metadataSearchUrl: string | null;
-    let metadataSearchWindowTitle: string | null;
-    let metadataSearchAction: string | null;
+
     let loginNameSearch: string | null;
     let ipAddressSearch: string | null;
     let machineNameSearch: string | null;
@@ -168,9 +171,12 @@
         loginName: string, 
         ipAddress: string,
         machineName: string, 
-        metadataUrl: string, 
-        metadataWindowTitle: string, 
-        metadataUserAction: string, 
+
+        metadataApplication: string,
+        metadataBrowserTitle: string,
+        metadataActivityDetails: string,
+        metadataUrl: string,
+
         fromTime: string, 
         toTime: string,
         pageNumber: number
@@ -180,9 +186,12 @@
 
         examNameSearch = examName == "" ? null : examName;
         groupNameSearch = groupName == "" ? null : groupName;
+
+        metadataSearchApplication = metadataApplication == "" ? null : metadataApplication;
+        metadataSearchBrowserTitle = metadataBrowserTitle == "" ? null : metadataBrowserTitle;
+        metadataSearchActivityDetails = metadataActivityDetails == "" ? null : metadataActivityDetails;
         metadataSearchUrl = metadataUrl == "" ? null : metadataUrl;
-        metadataSearchWindowTitle = metadataWindowTitle == "" ? null : metadataWindowTitle;
-        metadataSearchAction = metadataUserAction == "" ? null : metadataUserAction;
+
         loginNameSearch = loginName == "" ? null : loginName;
         ipAddressSearch = ipAddress == "" ? null : ipAddress;
         machineNameSearch = machineName == "" ? null : machineName;
@@ -193,9 +202,12 @@
             clientName: loginNameSearch,
             clientIp: ipAddressSearch,
             clientMachineName: machineNameSearch,
+
+            screenProctoringMetadataApplication: metadataSearchApplication,
+            screenProctoringMetadataBrowser: metadataSearchBrowserTitle,
+            screenProctoringMetadataUserAction: metadataSearchActivityDetails,
             screenProctoringMetadataURL: metadataSearchUrl,
-            screenProctoringMetadataWindowTitle: metadataSearchWindowTitle,
-            screenProctoringMetadataUserAction: metadataSearchAction,
+
             fromTime: fromTime, 
             toTime: toTime,
             pageSize: 500,

diff --git a/client/src/components/views/search/SearchScreenshotsTable.vue b/client/src/components/views/search/SearchScreenshotsTable.vue
@@ -42,22 +42,6 @@
             </td>
         </template>
 
-        <template v-slot:item.activityDetails="{item}">
-            <td>
-                <div>
-                    {{metadataUtils.filterOutLetters(item.timelineScreenshotDataList[0].metaData.screenProctoringMetadataUserAction)}}
-                </div>
-            </td>
-        </template>
-
-        <template v-slot:item.url="{item}">
-            <td>
-                <div>
-                    {{item.timelineScreenshotDataList[0].metaData.screenProctoringMetadataURL}}
-                </div>
-            </td>
-        </template>
-
         <template v-slot:item.proctoringViewLink="{internalItem}">
             <v-btn 
                 @click="searchViewService.openProctoringView(timelineSearchResult!.sessionUUID, internalItem.columns.timestamp)" 
@@ -91,9 +75,13 @@
 
                     <td>
                     </td>
+
+                    <td>
+                        {{ screenshot.timelineScreenshotDataList[0].metaData.screenProctoringMetadataBrowser }}
+                    </td>
 
                     <td>
-                        {{ metadataUtils.filterOutLetters(screenshot.groupName + "(" + screenshot.timelineScreenshotDataList.length + ")") }}
+                        {{ screenshot.timelineScreenshotDataList[0].metaData.screenProctoringMetadataUserAction }}
                     </td>
 
                     <td>
@@ -128,7 +116,6 @@
     import * as searchViewService from "@/services/component-services/searchViewService";
     import * as groupingUtils from "@/utils/groupingUtils";
     import CustomTableHeader from "@/utils/table/CustomTableHeader.vue";
-    import * as metadataUtils from "@/utils/metadataUtils";
 
     const props = defineProps<{
         timelineSearchResult: SearchTimeline
@@ -142,8 +129,11 @@
     const screenshotTableHeaders = ref([
         {title: "Capture-Time", key: "timestamp", value: "timelineScreenshotDataList[0].timestamp", width: "10%"},
         {title: "Application / Website", key: "groupName", width: "20%"},
+
+        {title: "Browser Title", key: "browserTitle", value: "timelineScreenshotDataList[0].metaData.screenProctoringMetadataBrowser"},
         {title: "Activity Details", key: "activityDetails", value: "timelineScreenshotDataList[0].metaData.screenProctoringMetadataUserAction"},
         {title: "URL", key: "url", value: "timelineScreenshotDataList[0].metaData.screenProctoringMetadataURL"},
+
         {title: "Video", key: "proctoringViewLink", width: "1%"},
         {title: "", key: "data-table-expand"}
     ]);

diff --git a/client/src/components/views/search/SearchSessionTable.vue b/client/src/components/views/search/SearchSessionTable.vue
@@ -143,8 +143,9 @@
 
         const timelineSearchResponse: SearchTimeline | null = await searchViewService.searchTimeline(
             item.raw.sessionUUID, 
-            {
-                screenProctoringMetadataWindowTitle: props.searchParameters.screenProctoringMetadataWindowTitle, 
+            {   
+                screenProctoringMetadataApplication: props.searchParameters.screenProctoringMetadataApplication,
+                screenProctoringMetadataBrowser: props.searchParameters.screenProctoringMetadataBrowser,
                 screenProctoringMetadataUserAction: props.searchParameters.screenProctoringMetadataUserAction,
                 screenProctoringMetadataURL: props.searchParameters.screenProctoringMetadataURL
             });

diff --git a/client/src/i18n/locales/en.json b/client/src/i18n/locales/en.json
@@ -21,8 +21,8 @@
         "ipAddress": "IP Address",
         "machineName": "Machine name",
         "metadataTitle": "Metadata",
-        "url": "Url",
-        "applicationWebsite": "Application / Website",
+        "url": "URL",
+        "applicationWebsite": "Application",
         "activityDetails": "Activity details",
         "period": "Period",
         "last": "Last",

diff --git a/client/src/models/optionalParamters.ts b/client/src/models/optionalParamters.ts
@@ -32,9 +32,13 @@ type OptionalParSearchSessions = {
     clientMachineName?: string | null,
     clientOsName?: string,
     clientVersion?: string,
+
+    screenProctoringMetadataApplication?: string | null,
+    screenProctoringMetadataBrowser?: string | null,
+    screenProctoringMetadataUserAction?: string | null,
     screenProctoringMetadataURL?: string | null,
     screenProctoringMetadataWindowTitle?: string | null,
-    screenProctoringMetadataUserAction?: string | null,
+
     pageNumber?: number,
     pageSize?: number,
     sort?: string
@@ -51,16 +55,22 @@ type OptionalParSearchScreenshots = {
     clientMachineName?: string,
     clientOsName?: string,
     clientVersion?: string,
+
+    screenProctoringMetadataApplication?: string | null,
+    screenProctoringMetadataBrowser?: string | null,
+    screenProctoringMetadataUserAction?: string | null,
     screenProctoringMetadataURL?: string | null,
     screenProctoringMetadataWindowTitle?: string | null,
-    screenProctoringMetadataUserAction?: string | null,
+
     pageNumber?: number,
     pageSize?: number,
     sort?: string
 }
 
 type OptionalParSearchTimeline = {
+    screenProctoringMetadataApplication?: string | null,
+    screenProctoringMetadataBrowser?: string | null,
+    screenProctoringMetadataUserAction?: string | null,
     screenProctoringMetadataURL?: string | null,
     screenProctoringMetadataWindowTitle?: string | null,
-    screenProctoringMetadataUserAction?: string | null,
 }
diff --git a/client/src/models/session.ts b/client/src/models/session.ts
@@ -35,7 +35,9 @@ type Session = {
 }
 
 type MetaData = {
+    screenProctoringMetadataApplication?: string,
+    screenProctoringMetadataBrowser?: string
+    screenProctoringMetadataUserAction?: string,
     screenProctoringMetadataURL?: string;
     screenProctoringMetadataWindowTitle?: string,
-    screenProctoringMetadataUserAction?: string
 }
diff --git a/client/src/services/component-services/galleryViewService.ts b/client/src/services/component-services/galleryViewService.ts
@@ -56,9 +56,10 @@ export function navigateToProctoringView(screenshot: ScreenshotData | undefined,
 //=============metadata=========
 export function getScreenshotMetadata(currentScreenshotMetadata: MetaData | null | undefined): object{
     return {
+        "Application": currentScreenshotMetadata?.screenProctoringMetadataApplication,
+        "Browser Title": currentScreenshotMetadata?.screenProctoringMetadataBrowser,
+        "Activity Details:": currentScreenshotMetadata?.screenProctoringMetadataUserAction,
         "Url:": currentScreenshotMetadata?.screenProctoringMetadataURL,
         "Window Title:": currentScreenshotMetadata?.screenProctoringMetadataWindowTitle,
-        //temp solution
-        "Activity Details:": metadataUtils.filterOutLetters(currentScreenshotMetadata?.screenProctoringMetadataUserAction)
     };
 }
diff --git a/client/src/services/component-services/proctoringViewService.ts b/client/src/services/component-services/proctoringViewService.ts
@@ -32,17 +32,18 @@ export async function getScreenshotTimestamps(sessionId: string, timestamp: stri
 }
 //==============================
 
-
 //=============metadata=========
 export function getScreenshotMetadata(sliderTime: number, currentScreenshotMetadata: MetaData | null, additionalMetadataInfo: string, total: string): object{
     return {
         "Total:": total,
         "Date:": timeUtils.formatTimestampToDate(sliderTime),
         "Time:": timeUtils.formatTimestampToTime(sliderTime),
+
+        "Application:": currentScreenshotMetadata?.screenProctoringMetadataApplication,
+        "Browser Title:": currentScreenshotMetadata?.screenProctoringMetadataBrowser,
+        "Activity Details:": currentScreenshotMetadata?.screenProctoringMetadataUserAction + " " + additionalMetadataInfo,
         "Url:": currentScreenshotMetadata?.screenProctoringMetadataURL,
         "Window Title:": currentScreenshotMetadata?.screenProctoringMetadataWindowTitle,
-        //temp solution
-        "Activity Details:": metadataUtils.filterOutLetters(currentScreenshotMetadata?.screenProctoringMetadataUserAction + " " + additionalMetadataInfo)
     };
 }