Fix: Update HAR file export from the History queries (#2236)

src/app/views/sidebar/history/History.tsx

@@ -11,7 +11,7 @@ import { useDispatch } from 'react-redux';
 import { AppDispatch, useAppSelector } from '../../../../store';
 import { componentNames, eventTypes, telemetry } from '../../../../telemetry';
 import { SortOrder } from '../../../../types/enums';
-import { IHarPayload } from '../../../../types/har';
+import { Entry } from '../../../../types/har';
 import { IHistoryItem } from '../../../../types/history';
 import { IQuery } from '../../../../types/query-runner';
 import { runQuery } from '../../../services/actions/query-action-creators';
@@ -30,7 +30,7 @@ import { translateMessage } from '../../../utils/translate-messages';
 import { classNames } from '../../classnames';
 import { NoResultsFound } from '../sidebar-utils/SearchResult';
 import { sidebarStyles } from '../Sidebar.styles';
-import { createHarPayload, exportQuery, generateHar } from './har-utils';
+import { createHarEntry, exportQuery, generateHar } from './har-utils';
 
 const columns = [
   { key: 'button', name: '', fieldName: '', minWidth: 20, maxWidth: 20 },
@@ -332,11 +332,11 @@ const History = (props: any) => {
   };
 
   const exportHistoryByCategory = (value: string) => {
-    const itemsToExport = historyItems.filter((query) => query.category === value);
-    const entries: IHarPayload[] = [];
+    const itemsToExport = historyItems.filter((query: IHistoryItem) => query.category === value);
+    const entries: Entry[] = [];
 
     itemsToExport.forEach((query: IHistoryItem) => {
-      const harPayload = createHarPayload(query);
+      const harPayload = createHarEntry(query);
       entries.push(harPayload);
     });
 
@@ -375,7 +375,7 @@ const History = (props: any) => {
   };
 
   const onExportQuery = (query: IHistoryItem) => {
-    const harPayload = createHarPayload(query);
+    const harPayload = createHarEntry(query);
     const generatedHarData = generateHar([harPayload]);
     exportQuery(generatedHarData, `${query.url}/`);
     trackHistoryItemEvent(

src/app/views/sidebar/history/har-utils.spec.ts

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/indent */
 
-import { IHarPayload } from '../../../../types/har';
+import { Entry } from '../../../../types/har';
 import { IHistoryItem } from '../../../../types/history';
-import { createHarPayload, generateHar } from './har-utils';
+import { createHarEntry, generateHar } from './har-utils';
 
 describe('Tests history items util functions', () => {
     it('creates har payload', () => {
@@ -21,44 +21,59 @@ describe('Tests history items util functions', () => {
         }
 
         // Act
-        const harPayload = createHarPayload(historyItem);
+        const harPayload = createHarEntry(historyItem);
 
         // Assert
-        expect(harPayload.method).toBe('GET');
+        expect(harPayload.request.method).toBe('GET');
 
     })
 
     it('generates Har', () => {
-        const payloads: IHarPayload[] = [
-            {
-                startedDateTime: '2020-04-01T00:00:00.000Z',
-                time: 0,
+        const entry: Entry[] = [{
+            startedDateTime: '2020-04-01T00:00:00.000Z',
+            time: 0,
+            request: {
                 method: 'GET',
                 url: 'http://localhost:8080/',
+                httpVersion: 'HTTP/1.1',
                 cookies: [],
                 queryString: [{ name: '', value: '' }],
+                headers: [{ name: '', value: '' }],
+                headersSize: -1,
+                bodySize: -1,
+                postData: undefined
+            },
+            response: {
                 status: 200,
                 statusText: 'OK',
+                httpVersion: 'HTTP/1.1',
+                cookies: [],
                 content: {
                     text: 'Some text',
                     size: 9,
-                    mimeType: 'application/json'
-                },
-                request: {
-                    headers: []
-                },
-                response: {
-                    headers: []
+                    mimeType: 'application/json',
+                    compression: -1
                 },
-                sendTime: 0,
-                waitTime: 0,
-                receiveTime: 0,
-                httpVersion: 'HTTP/1.1'
-            }
-        ]
+                headers: [{ name: '', value: '' }],
+                redirectURL: '',
+                headersSize: -1,
+                bodySize: -1
+            },
+            timings: {
+                blocked: 0,
+                dns: 0,
+                connect: -1,
+                send: 0,
+                wait: 0,
+                receive: 0,
+                ssl: 0
+            },
+            cache: {},
+            pageref: ''
+        }]
 
         // Act
-        const har = generateHar(payloads);
+        const har = generateHar(entry);
 
         // Assert
         expect(har.log.entries.length).toBe(1);

src/app/views/sidebar/history/har-utils.ts

@@ -1,115 +1,104 @@
-import { IHarFormat, IHarHeaders, IHarPayload } from '../../../../types/har';
+import { Entry, HarFormat, HarHeader } from '../../../../types/har';
 import { IHistoryItem } from '../../../../types/history';
 import { downloadToLocal } from '../../common/download';
 
-export function createHarPayload(query: IHistoryItem): IHarPayload {
+export function createHarEntry(query: IHistoryItem): Entry {
   const queryResult = JSON.stringify(query.result);
 
-  const headers: IHarHeaders[] = [];
+  const headers: HarHeader[] = [];
   if (query.headers) {
     query.headers.forEach((header) => {
       const { name, value } = header;
-      const head: IHarHeaders = {
+      const head: HarHeader = {
         name,
         value
       };
       headers.push(head);
     });
   }
+  const responseHeaders: HarHeader[] = [];
+  if (query.responseHeaders && query.responseHeaders.length > 0) {
+    query.responseHeaders.forEach((header) => {
+      const { name, value } = header;
+      const head: HarHeader = {
+        name,
+        value
+      };
+      responseHeaders.push(head);
+    });
+  }
 
-  let harPayload: IHarPayload = {
+  let harEntry: Entry = {
     startedDateTime: query.createdAt.toString(),
     time: query.duration,
-    method: query.method,
-    url: query.url,
-    cookies: [],
-    queryString: [{ name: '', value: '' }],
-    status: query.status,
-    statusText: query.statusText,
-    content: {
-      text: queryResult,
-      size: queryResult.length,
-      mimeType: 'application/json'
-    },
     request: {
-      headers
+      method: query.method,
+      url: query.url,
+      httpVersion: 'HTTP/1.1',
+      cookies: [],
+      headers,
+      queryString: [{ name: '', value: '' }],
+      headersSize: -1,
+      bodySize: -1,
+      postData: undefined
     },
     response: {
-      headers: query.responseHeaders
+      status: query.status,
+      statusText: query.statusText,
+      httpVersion: 'HTTP/1.1',
+      cookies: [],
+      headers: responseHeaders,
+      content: {
+        text: queryResult,
+        size: queryResult.length,
+        mimeType: 'application/json',
+        compression: -1
+      },
+      redirectURL: '',
+      headersSize: -1,
+      bodySize: -1
+    },
+    timings: {
+      blocked: 0,
+      dns: 0,
+      connect: -1,
+      send: 0,
+      wait: 0,
+      receive: 0,
+      ssl: 0
     },
-    sendTime: 0,
-    waitTime: 0,
-    receiveTime: 0,
-    httpVersion: 'HTTP/1.1'
+    cache: {},
+    pageref: ''
   };
 
   if (query.body) {
-    harPayload = Object.assign(harPayload, {
-      //tslint:disable-line
+    harEntry = Object.assign(harEntry, {
       postData: {
         mimeType: 'application/json',
-        text: query.body
+        text: query.body,
+        size: query.body.length,
+        compression: -1
       }
     });
   }
-  return harPayload;
+  return harEntry;
 }
 
-export function generateHar(payloads: IHarPayload[]): IHarFormat {
-  const entries = createEntries(payloads);
+export function generateHar(entries: Entry[]): HarFormat {
   return {
     log: {
-      version: '4.0',
+      version: '1.2',
       creator: {
         name: 'Graph Explorer',
         version: '4.0'
       },
-      entries
+      entries,
+      pages: []
     }
   };
 }
 
-function createEntries(payloads: IHarPayload[]) {
-  const entries: any = [];
-  payloads.forEach((payload) => {
-    entries.push({
-      startedDateTime: payload.startedDateTime,
-      time: payload.time,
-      request: {
-        method: payload.method,
-        url: payload.url,
-        httpVersion: payload.httpVersion,
-        cookies: payload.cookies,
-        headers: payload.request.headers,
-        queryString: payload.queryString,
-        postData: payload.postData,
-        headersSize: -1,
-        bodySize: -1
-      },
-      response: {
-        status: payload.status,
-        statusText: payload.statusText,
-        httpVersion: payload.httpVersion,
-        cookies: payload.cookies,
-        headers: payload.response.headers,
-        content: payload.content,
-        redirectURL: '',
-        headersSize: -1,
-        bodySize: -1
-      },
-      cache: {},
-      timings: {
-        send: payload.sendTime,
-        wait: payload.waitTime,
-        receive: payload.receiveTime
-      },
-      connection: ''
-    });
-  });
-  return entries;
-}
-
-export function exportQuery(content: IHarFormat, requestUrl: string) {
+export function exportQuery(content: HarFormat, requestUrl: string) {
   const url = requestUrl.substr(8).split('/');
   url.pop();