@ima/devtools
Version:
IMA.js debugging panel in the Chrome Developer Tools window.
136 lines (116 loc) • 3.26 kB
JSX
import { EntryType } from '@/utils';
import cn from 'clsx';
import PropTypes from 'prop-types';
import React from 'react';
import styles from './entryListItem.module.less';
export default class EntryListItem extends React.PureComponent {
static get propTypes() {
return {
entry: EntryType.isRequired,
zeroId: PropTypes.string.isRequired,
zeroTime: PropTypes.number.isRequired,
setSelected: PropTypes.func.isRequired,
};
}
constructor(props) {
super(props);
this.onSelect = this.onSelect.bind(this);
}
render() {
const { zeroTime, zeroId } = this.props;
const { selected, id, messages } = this.props.entry;
const { color, label, type, time, promises } =
messages[Math.max(messages.length - 1, 0)].payload;
const { shortLabel, event } = this._parseLabel(label);
return (
<tr
onClick={this.onSelect}
className={cn(styles.wrapper, styles[`wrapper--${color}`], {
[styles['wrapper--selected']]: selected,
})}
>
<td className={styles.label}>
{shortLabel}
{event && <span className={styles.event}> [{event}]</span>}
<span className={styles.tagWrapper}>
<span className={styles.type}>{type}</span>
</span>
{promises && (
<span className={styles.tagWrapper}>
<span
className={cn(styles.promiseStatus, {
[styles['promiseStatus--pending']]: promises === 'pending',
})}
>
{promises}
{this._getPromiseTimeDiff()}
</span>
</span>
)}
</td>
<td className={styles.timeWrapper}>
<span className={styles.time}>
{id === zeroId
? this._getTime(time)
: this._getTimeDiff(zeroTime, time)}
</span>
</td>
</tr>
);
}
onSelect() {
const { setSelected, entry } = this.props;
setSelected(entry.id);
}
_getTime(t) {
const d = new Date(t);
return (
this._pad(d.getHours()) +
':' +
this._pad(d.getMinutes()) +
':' +
this._pad(d.getSeconds()) +
'.' +
this._pad(Math.round(d.getMilliseconds() / 10))
);
}
_getTimeDiff(t1, t2) {
let diff = t2 - t1;
let ms = diff % 1000;
diff = (diff - ms) / 1000;
let secs = diff % 60;
diff = (diff - secs) / 60;
let mins = diff % 60;
let hrs = ((diff - mins) / 60) % 24;
return (
'+' +
(hrs ? this._pad(hrs) + ':' : '') +
this._pad(mins) +
':' +
this._pad(secs) +
'.' +
this._pad(ms)
);
}
_getPromiseTimeDiff() {
const { messages } = this.props.entry;
const lastMessage = messages[Math.max(messages.length - 1, 0)];
if (
lastMessage.payload.promises &&
lastMessage.payload.promises === 'resolved'
) {
return ` ${lastMessage.payload.time - messages[0].payload.time}ms`;
}
return '';
}
_pad(value) {
return ('00' + value).slice(-2);
}
_parseLabel(label) {
const parts = label.split(':');
return {
shortLabel: parts[0].split('/').pop(),
event: parts[2] || '',
};
}
}