Skip to content

Commit c4097c3

Browse files
author
Michael Mrowetz
committed
#155 generalize helpers
1 parent 41df3ce commit c4097c3

File tree

2 files changed

+107
-75
lines changed

2 files changed

+107
-75
lines changed

‎src/ts/transformers/har.ts

+17-75
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,24 @@
1-
import { isInStatusCodeRange, roundNumber } from "../helpers/misc";
1+
import { roundNumber } from "../helpers/misc";
22
import { toInt } from "../helpers/parse";
33
import { Entry, Har, PageTimings } from "../typing/har";
44
import {
5-
Icon,
65
Mark,
76
TimingType,
87
WaterfallData,
98
WaterfallDocs,
10-
WaterfallEntry,
119
WaterfallEntryIndicator,
12-
WaterfallEntryTab,
1310
WaterfallEntryTiming,
1411
WaterfallResponseDetails,
1512
} from "../typing/waterfall";
16-
import { makeIcon } from "../waterfall/row/svg-indicators";
1713
import { collectIndicators, documentIsSecure } from "./har-heuristics";
1814
import { makeTabs } from "./har-tabs";
19-
import { mimeToRequestType } from "./helpers";
20-
21-
function createWaterfallEntry(url: string,
22-
start: number,
23-
end: number,
24-
segments: WaterfallEntryTiming[] = [],
25-
responseDetails: WaterfallResponseDetails,
26-
tabs: WaterfallEntryTab[]): WaterfallEntry {
27-
const total = (typeof start !== "number" || typeof end !== "number") ? undefined : (end - start);
28-
return {
29-
total,
30-
url,
31-
start,
32-
end,
33-
segments,
34-
responseDetails,
35-
tabs,
36-
};
37-
}
38-
39-
function createWaterfallEntryTiming(type: TimingType,
40-
start: number,
41-
end: number): WaterfallEntryTiming {
42-
const total = (typeof start !== "number" || typeof end !== "number") ? undefined : (end - start);
43-
return {
44-
total,
45-
type,
46-
start,
47-
end,
48-
};
49-
}
15+
import {
16+
createWaterfallEntry,
17+
createWaterfallEntryTiming,
18+
makeMimeTypeIcon,
19+
makeRowCssClasses,
20+
mimeToRequestType,
21+
} from "./helpers";
5022

5123
/**
5224
* Transforms the full HAR doc, including all pages
@@ -197,50 +169,20 @@ function getTimePair(key: string, harEntry: Entry, collect: WaterfallEntryTiming
197169
};
198170
}
199171

172+
/**
173+
* Helper to create a requests `WaterfallResponseDetails`
174+
*
175+
* @param {Entry} entry
176+
* @param {WaterfallEntryIndicator[]} indicators
177+
* @returns WaterfallResponseDetails
178+
*/
200179
function createResponseDetails(entry: Entry, indicators: WaterfallEntryIndicator[]): WaterfallResponseDetails {
201180
const requestType = mimeToRequestType(entry.response.content.mimeType);
202-
203181
return {
204-
icon: getMimeTypeIcon(entry, requestType),
205-
rowClass: getRowCssClasses(entry),
182+
icon: makeMimeTypeIcon(entry.response.status, entry.response.statusText, requestType, entry.response.redirectURL),
183+
rowClass: makeRowCssClasses(entry.response.status),
206184
indicators,
207185
requestType,
208186
statusCode: entry.response.status,
209187
};
210188
}
211-
212-
/**
213-
* Scan the request for errors or potential issues and highlight them
214-
* @param {Entry} entry
215-
* @returns {Icon}
216-
*/
217-
function getMimeTypeIcon(entry: Entry, requestType): Icon {
218-
const status = entry.response.status;
219-
// highlight redirects
220-
if (!!entry.response.redirectURL) {
221-
const url = encodeURI(entry.response.redirectURL.split("?")[0] || "");
222-
return makeIcon("err3xx", `${status} response status: Redirect to ${url}...`);
223-
} else if (isInStatusCodeRange(status, 400, 499)) {
224-
return makeIcon("err4xx", `${status} response status: ${entry.response.statusText}`);
225-
} else if (isInStatusCodeRange(status, 500, 599)) {
226-
return makeIcon("err5xx", `${status} response status: ${entry.response.statusText}`);
227-
} else if (status === 204) {
228-
return makeIcon("plain", "No content");
229-
} else {
230-
return makeIcon(requestType, requestType);
231-
}
232-
}
233-
234-
function getRowCssClasses(entry: Entry): string {
235-
const classes = ["row-item"];
236-
if (isInStatusCodeRange(entry.response.status, 500, 599)) {
237-
classes.push("status5xx");
238-
} else if (isInStatusCodeRange(entry.response.status, 400, 499)) {
239-
classes.push("status4xx");
240-
} else if (entry.response.status !== 304 &&
241-
isInStatusCodeRange(entry.response.status, 300, 399)) {
242-
// 304 == Not Modified, so not an issue
243-
classes.push("status3xx");
244-
}
245-
return classes.join(" ");
246-
}

‎src/ts/transformers/helpers.ts

+90
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
/** Helpers that are not file-fromat specific */
2+
import { isInStatusCodeRange } from "../helpers/misc";
23
import { escapeHtml } from "../helpers/parse";
34
import { RequestType } from "../typing/waterfall";
5+
import {
6+
Icon,
7+
TimingType,
8+
WaterfallEntry,
9+
WaterfallEntryTab,
10+
WaterfallEntryTiming,
11+
WaterfallResponseDetails,
12+
} from "../typing/waterfall";
13+
import { makeIcon } from "../waterfall/row/svg-indicators";
414
import { KvTuple } from "./extract-details-keys";
515

616
/** render a dl */
@@ -65,3 +75,83 @@ export function mimeToRequestType(mimeType: string): RequestType {
6575
default: return "other";
6676
}
6777
}
78+
79+
/** helper to create a `WaterfallEntry` */
80+
export function createWaterfallEntry(url: string,
81+
start: number,
82+
end: number,
83+
segments: WaterfallEntryTiming[] = [],
84+
responseDetails: WaterfallResponseDetails,
85+
tabs: WaterfallEntryTab[]): WaterfallEntry {
86+
const total = (typeof start !== "number" || typeof end !== "number") ? undefined : (end - start);
87+
return {
88+
total,
89+
url,
90+
start,
91+
end,
92+
segments,
93+
responseDetails,
94+
tabs,
95+
};
96+
}
97+
98+
/** helper to create a `WaterfallEntryTiming` */
99+
export function createWaterfallEntryTiming(type: TimingType,
100+
start: number,
101+
end: number): WaterfallEntryTiming {
102+
const total = (typeof start !== "number" || typeof end !== "number") ? undefined : (end - start);
103+
return {
104+
total,
105+
type,
106+
start,
107+
end,
108+
};
109+
}
110+
111+
/**
112+
* Creates the css classes for a row based on it's status code
113+
* @param {number} status - HTTP status code
114+
* @returns string - concatinated css class names
115+
*/
116+
export function makeRowCssClasses(status: number): string {
117+
const classes = ["row-item"];
118+
if (isInStatusCodeRange(status, 500, 599)) {
119+
classes.push("status5xx");
120+
} else if (isInStatusCodeRange(status, 400, 499)) {
121+
classes.push("status4xx");
122+
} else if (status !== 304 &&
123+
isInStatusCodeRange(status, 300, 399)) {
124+
// 304 == Not Modified, so not an issue
125+
classes.push("status3xx");
126+
}
127+
return classes.join(" ");
128+
}
129+
130+
/**
131+
* Create icon that fits the response and highlights issues
132+
*
133+
* @param {number} status - HTTP status code
134+
* @param {string} statusText - HTTP status text
135+
* @param {RequestType} requestType
136+
* @param {string=""} redirectURL - pass the URL for `301` or `302`
137+
* @returns Icon
138+
*/
139+
export function makeMimeTypeIcon(status: number,
140+
statusText: string,
141+
requestType: RequestType,
142+
redirectURL: string = "",
143+
): Icon {
144+
// highlight redirects
145+
if (!!redirectURL) {
146+
const url = encodeURI(redirectURL.split("?")[0] || "");
147+
return makeIcon("err3xx", `${status} response status: Redirect to ${url}...`);
148+
} else if (isInStatusCodeRange(status, 400, 499)) {
149+
return makeIcon("err4xx", `${status} response status: ${statusText}`);
150+
} else if (isInStatusCodeRange(status, 500, 599)) {
151+
return makeIcon("err5xx", `${status} response status: ${statusText}`);
152+
} else if (status === 204) {
153+
return makeIcon("plain", "No content");
154+
} else {
155+
return makeIcon(requestType, requestType);
156+
}
157+
}

0 commit comments

Comments
 (0)