Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
"use strict";
const {
Component,
const {
getFormattedTime,
const {
fetchNetworkUpdatePacket,
getResponseTime,
getStartTime,
getEndTime,
/**
* This component represents a column displaying selected
* timing value. There are following possible values this
* column can render:
* - Start Time
* - End Time
* - Response Time
* - Duration Time
* - Latency Time
*/
class RequestListColumnTime extends Component {
static get propTypes() {
return {
connector: PropTypes.object.isRequired,
firstRequestStartedMs: PropTypes.number.isRequired,
item: PropTypes.object.isRequired,
type: PropTypes.oneOf(["start", "end", "response", "duration", "latency"])
.isRequired,
};
}
componentDidMount() {
const { item, connector } = this.props;
fetchNetworkUpdatePacket(connector.requestData, item, ["eventTimings"]);
}
UNSAFE_componentWillReceiveProps(nextProps) {
const { item, connector } = nextProps;
fetchNetworkUpdatePacket(connector.requestData, item, ["eventTimings"]);
}
shouldComponentUpdate(nextProps) {
return this.getTime(this.props) !== this.getTime(nextProps);
}
getTime(props) {
const { firstRequestStartedMs, item, type } = props;
switch (type) {
case "start":
return getStartTime(item, firstRequestStartedMs);
case "end":
return getEndTime(item, firstRequestStartedMs);
case "response":
return getResponseTime(item, firstRequestStartedMs);
case "duration":
return item.totalTime;
case "latency":
return item.eventTimings ? item.eventTimings.timings.wait : undefined;
}
return 0;
}
render() {
const { type } = this.props;
const time = getFormattedTime(this.getTime(this.props));
return dom.td(
{
className: "requests-list-column requests-list-" + type + "-time",
title: time,
},
time
);
}
}
module.exports = RequestListColumnTime;