jiti-meet/react/features/connection-stats/components/ConnectionStatsTable.js

545 lines
15 KiB
JavaScript
Raw Normal View History

feat(connection-indicator): implement automatic hiding on good connection (#2009) * ref(connection-stats): use PropTypes package * feat(connection-stats): display a summary of the connection quality * feat(connection-indicator): show empty bars for interrupted connection * feat(connection-indicator): change background color based on status * feat(connection-indicator): implement automatic hiding on good connection * fix(connection-indicator): explicitly set font size Currently non-react code will set an icon size on ConnectionIndicator. This doesn't work on initial call join in vertical filmstrip after some changes to support hiding the indicator. The chosen fix is passing in the icon size to mirror what would happe with full filmstrip reactification. * ref(connection-stats): rename statuses * feat(connection-indicator): make hiding behavior configurable The original implementation made the auto hiding of the indicator configured in interfaceConfig. * fix(connection-indicator): readd class expected by torture tests * fix(connection-indicator): change connection quality display styling Bold the connection summary in the stats popover so it stands out. Change the summaries so there are only three--strong, nonoptimal, poor. * fix(connection-indicator): gray background on lost connection * feat(icons): add new gsm bars icon * feat(connection-indicator): use new 3-bar icon * ref(icons): remove icon-connection and icon-connection-lost Both have been replaced by icon-gsm-bars so they are not being referenced anymore. Mobile looks to have connect-lost as a separate icon in font-icons/jitsi.json.
2017-09-26 16:55:09 +00:00
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { translate } from '../../base/i18n';
/**
* React {@code Component} for displaying connection statistics.
*
* @extends Component
*/
class ConnectionStatsTable extends Component {
/**
* {@code ConnectionStatsTable} component's property types.
*
* @static
*/
static propTypes = {
/**
* Statistics related to bandwidth.
* {{
* download: Number,
* upload: Number
* }}
*/
feat(connection-indicator): implement automatic hiding on good connection (#2009) * ref(connection-stats): use PropTypes package * feat(connection-stats): display a summary of the connection quality * feat(connection-indicator): show empty bars for interrupted connection * feat(connection-indicator): change background color based on status * feat(connection-indicator): implement automatic hiding on good connection * fix(connection-indicator): explicitly set font size Currently non-react code will set an icon size on ConnectionIndicator. This doesn't work on initial call join in vertical filmstrip after some changes to support hiding the indicator. The chosen fix is passing in the icon size to mirror what would happe with full filmstrip reactification. * ref(connection-stats): rename statuses * feat(connection-indicator): make hiding behavior configurable The original implementation made the auto hiding of the indicator configured in interfaceConfig. * fix(connection-indicator): readd class expected by torture tests * fix(connection-indicator): change connection quality display styling Bold the connection summary in the stats popover so it stands out. Change the summaries so there are only three--strong, nonoptimal, poor. * fix(connection-indicator): gray background on lost connection * feat(icons): add new gsm bars icon * feat(connection-indicator): use new 3-bar icon * ref(icons): remove icon-connection and icon-connection-lost Both have been replaced by icon-gsm-bars so they are not being referenced anymore. Mobile looks to have connect-lost as a separate icon in font-icons/jitsi.json.
2017-09-26 16:55:09 +00:00
bandwidth: PropTypes.object,
/**
* Statistics related to bitrate.
* {{
* download: Number,
* upload: Number
* }}
*/
feat(connection-indicator): implement automatic hiding on good connection (#2009) * ref(connection-stats): use PropTypes package * feat(connection-stats): display a summary of the connection quality * feat(connection-indicator): show empty bars for interrupted connection * feat(connection-indicator): change background color based on status * feat(connection-indicator): implement automatic hiding on good connection * fix(connection-indicator): explicitly set font size Currently non-react code will set an icon size on ConnectionIndicator. This doesn't work on initial call join in vertical filmstrip after some changes to support hiding the indicator. The chosen fix is passing in the icon size to mirror what would happe with full filmstrip reactification. * ref(connection-stats): rename statuses * feat(connection-indicator): make hiding behavior configurable The original implementation made the auto hiding of the indicator configured in interfaceConfig. * fix(connection-indicator): readd class expected by torture tests * fix(connection-indicator): change connection quality display styling Bold the connection summary in the stats popover so it stands out. Change the summaries so there are only three--strong, nonoptimal, poor. * fix(connection-indicator): gray background on lost connection * feat(icons): add new gsm bars icon * feat(connection-indicator): use new 3-bar icon * ref(icons): remove icon-connection and icon-connection-lost Both have been replaced by icon-gsm-bars so they are not being referenced anymore. Mobile looks to have connect-lost as a separate icon in font-icons/jitsi.json.
2017-09-26 16:55:09 +00:00
bitrate: PropTypes.object,
/**
* A message describing the connection quality.
*/
connectionSummary: PropTypes.string,
/**
* Statistics related to framerates for each ssrc.
* {{
* [ ssrc ]: Number
* }}
*/
feat(connection-indicator): implement automatic hiding on good connection (#2009) * ref(connection-stats): use PropTypes package * feat(connection-stats): display a summary of the connection quality * feat(connection-indicator): show empty bars for interrupted connection * feat(connection-indicator): change background color based on status * feat(connection-indicator): implement automatic hiding on good connection * fix(connection-indicator): explicitly set font size Currently non-react code will set an icon size on ConnectionIndicator. This doesn't work on initial call join in vertical filmstrip after some changes to support hiding the indicator. The chosen fix is passing in the icon size to mirror what would happe with full filmstrip reactification. * ref(connection-stats): rename statuses * feat(connection-indicator): make hiding behavior configurable The original implementation made the auto hiding of the indicator configured in interfaceConfig. * fix(connection-indicator): readd class expected by torture tests * fix(connection-indicator): change connection quality display styling Bold the connection summary in the stats popover so it stands out. Change the summaries so there are only three--strong, nonoptimal, poor. * fix(connection-indicator): gray background on lost connection * feat(icons): add new gsm bars icon * feat(connection-indicator): use new 3-bar icon * ref(icons): remove icon-connection and icon-connection-lost Both have been replaced by icon-gsm-bars so they are not being referenced anymore. Mobile looks to have connect-lost as a separate icon in font-icons/jitsi.json.
2017-09-26 16:55:09 +00:00
framerate: PropTypes.object,
/**
* Whether or not the statitics are for local video.
*/
feat(connection-indicator): implement automatic hiding on good connection (#2009) * ref(connection-stats): use PropTypes package * feat(connection-stats): display a summary of the connection quality * feat(connection-indicator): show empty bars for interrupted connection * feat(connection-indicator): change background color based on status * feat(connection-indicator): implement automatic hiding on good connection * fix(connection-indicator): explicitly set font size Currently non-react code will set an icon size on ConnectionIndicator. This doesn't work on initial call join in vertical filmstrip after some changes to support hiding the indicator. The chosen fix is passing in the icon size to mirror what would happe with full filmstrip reactification. * ref(connection-stats): rename statuses * feat(connection-indicator): make hiding behavior configurable The original implementation made the auto hiding of the indicator configured in interfaceConfig. * fix(connection-indicator): readd class expected by torture tests * fix(connection-indicator): change connection quality display styling Bold the connection summary in the stats popover so it stands out. Change the summaries so there are only three--strong, nonoptimal, poor. * fix(connection-indicator): gray background on lost connection * feat(icons): add new gsm bars icon * feat(connection-indicator): use new 3-bar icon * ref(icons): remove icon-connection and icon-connection-lost Both have been replaced by icon-gsm-bars so they are not being referenced anymore. Mobile looks to have connect-lost as a separate icon in font-icons/jitsi.json.
2017-09-26 16:55:09 +00:00
isLocalVideo: PropTypes.bool,
/**
* Callback to invoke when the show additional stats link is clicked.
*/
feat(connection-indicator): implement automatic hiding on good connection (#2009) * ref(connection-stats): use PropTypes package * feat(connection-stats): display a summary of the connection quality * feat(connection-indicator): show empty bars for interrupted connection * feat(connection-indicator): change background color based on status * feat(connection-indicator): implement automatic hiding on good connection * fix(connection-indicator): explicitly set font size Currently non-react code will set an icon size on ConnectionIndicator. This doesn't work on initial call join in vertical filmstrip after some changes to support hiding the indicator. The chosen fix is passing in the icon size to mirror what would happe with full filmstrip reactification. * ref(connection-stats): rename statuses * feat(connection-indicator): make hiding behavior configurable The original implementation made the auto hiding of the indicator configured in interfaceConfig. * fix(connection-indicator): readd class expected by torture tests * fix(connection-indicator): change connection quality display styling Bold the connection summary in the stats popover so it stands out. Change the summaries so there are only three--strong, nonoptimal, poor. * fix(connection-indicator): gray background on lost connection * feat(icons): add new gsm bars icon * feat(connection-indicator): use new 3-bar icon * ref(icons): remove icon-connection and icon-connection-lost Both have been replaced by icon-gsm-bars so they are not being referenced anymore. Mobile looks to have connect-lost as a separate icon in font-icons/jitsi.json.
2017-09-26 16:55:09 +00:00
onShowMore: PropTypes.func,
/**
* Statistics related to packet loss.
* {{
* download: Number,
* upload: Number
* }}
*/
feat(connection-indicator): implement automatic hiding on good connection (#2009) * ref(connection-stats): use PropTypes package * feat(connection-stats): display a summary of the connection quality * feat(connection-indicator): show empty bars for interrupted connection * feat(connection-indicator): change background color based on status * feat(connection-indicator): implement automatic hiding on good connection * fix(connection-indicator): explicitly set font size Currently non-react code will set an icon size on ConnectionIndicator. This doesn't work on initial call join in vertical filmstrip after some changes to support hiding the indicator. The chosen fix is passing in the icon size to mirror what would happe with full filmstrip reactification. * ref(connection-stats): rename statuses * feat(connection-indicator): make hiding behavior configurable The original implementation made the auto hiding of the indicator configured in interfaceConfig. * fix(connection-indicator): readd class expected by torture tests * fix(connection-indicator): change connection quality display styling Bold the connection summary in the stats popover so it stands out. Change the summaries so there are only three--strong, nonoptimal, poor. * fix(connection-indicator): gray background on lost connection * feat(icons): add new gsm bars icon * feat(connection-indicator): use new 3-bar icon * ref(icons): remove icon-connection and icon-connection-lost Both have been replaced by icon-gsm-bars so they are not being referenced anymore. Mobile looks to have connect-lost as a separate icon in font-icons/jitsi.json.
2017-09-26 16:55:09 +00:00
packetLoss: PropTypes.object,
/**
* Statistics related to display resolutions for each ssrc.
* {{
* [ ssrc ]: {
* height: Number,
* width: Number
* }
* }}
*/
feat(connection-indicator): implement automatic hiding on good connection (#2009) * ref(connection-stats): use PropTypes package * feat(connection-stats): display a summary of the connection quality * feat(connection-indicator): show empty bars for interrupted connection * feat(connection-indicator): change background color based on status * feat(connection-indicator): implement automatic hiding on good connection * fix(connection-indicator): explicitly set font size Currently non-react code will set an icon size on ConnectionIndicator. This doesn't work on initial call join in vertical filmstrip after some changes to support hiding the indicator. The chosen fix is passing in the icon size to mirror what would happe with full filmstrip reactification. * ref(connection-stats): rename statuses * feat(connection-indicator): make hiding behavior configurable The original implementation made the auto hiding of the indicator configured in interfaceConfig. * fix(connection-indicator): readd class expected by torture tests * fix(connection-indicator): change connection quality display styling Bold the connection summary in the stats popover so it stands out. Change the summaries so there are only three--strong, nonoptimal, poor. * fix(connection-indicator): gray background on lost connection * feat(icons): add new gsm bars icon * feat(connection-indicator): use new 3-bar icon * ref(icons): remove icon-connection and icon-connection-lost Both have been replaced by icon-gsm-bars so they are not being referenced anymore. Mobile looks to have connect-lost as a separate icon in font-icons/jitsi.json.
2017-09-26 16:55:09 +00:00
resolution: PropTypes.object,
/**
* Whether or not additional stats about bandwidth and transport should
* be displayed. Will not display even if true for remote participants.
*/
feat(connection-indicator): implement automatic hiding on good connection (#2009) * ref(connection-stats): use PropTypes package * feat(connection-stats): display a summary of the connection quality * feat(connection-indicator): show empty bars for interrupted connection * feat(connection-indicator): change background color based on status * feat(connection-indicator): implement automatic hiding on good connection * fix(connection-indicator): explicitly set font size Currently non-react code will set an icon size on ConnectionIndicator. This doesn't work on initial call join in vertical filmstrip after some changes to support hiding the indicator. The chosen fix is passing in the icon size to mirror what would happe with full filmstrip reactification. * ref(connection-stats): rename statuses * feat(connection-indicator): make hiding behavior configurable The original implementation made the auto hiding of the indicator configured in interfaceConfig. * fix(connection-indicator): readd class expected by torture tests * fix(connection-indicator): change connection quality display styling Bold the connection summary in the stats popover so it stands out. Change the summaries so there are only three--strong, nonoptimal, poor. * fix(connection-indicator): gray background on lost connection * feat(icons): add new gsm bars icon * feat(connection-indicator): use new 3-bar icon * ref(icons): remove icon-connection and icon-connection-lost Both have been replaced by icon-gsm-bars so they are not being referenced anymore. Mobile looks to have connect-lost as a separate icon in font-icons/jitsi.json.
2017-09-26 16:55:09 +00:00
shouldShowMore: PropTypes.bool,
/**
* Invoked to obtain translated strings.
*/
feat(connection-indicator): implement automatic hiding on good connection (#2009) * ref(connection-stats): use PropTypes package * feat(connection-stats): display a summary of the connection quality * feat(connection-indicator): show empty bars for interrupted connection * feat(connection-indicator): change background color based on status * feat(connection-indicator): implement automatic hiding on good connection * fix(connection-indicator): explicitly set font size Currently non-react code will set an icon size on ConnectionIndicator. This doesn't work on initial call join in vertical filmstrip after some changes to support hiding the indicator. The chosen fix is passing in the icon size to mirror what would happe with full filmstrip reactification. * ref(connection-stats): rename statuses * feat(connection-indicator): make hiding behavior configurable The original implementation made the auto hiding of the indicator configured in interfaceConfig. * fix(connection-indicator): readd class expected by torture tests * fix(connection-indicator): change connection quality display styling Bold the connection summary in the stats popover so it stands out. Change the summaries so there are only three--strong, nonoptimal, poor. * fix(connection-indicator): gray background on lost connection * feat(icons): add new gsm bars icon * feat(connection-indicator): use new 3-bar icon * ref(icons): remove icon-connection and icon-connection-lost Both have been replaced by icon-gsm-bars so they are not being referenced anymore. Mobile looks to have connect-lost as a separate icon in font-icons/jitsi.json.
2017-09-26 16:55:09 +00:00
t: PropTypes.func,
/**
* Statistics related to transports.
*/
feat(connection-indicator): implement automatic hiding on good connection (#2009) * ref(connection-stats): use PropTypes package * feat(connection-stats): display a summary of the connection quality * feat(connection-indicator): show empty bars for interrupted connection * feat(connection-indicator): change background color based on status * feat(connection-indicator): implement automatic hiding on good connection * fix(connection-indicator): explicitly set font size Currently non-react code will set an icon size on ConnectionIndicator. This doesn't work on initial call join in vertical filmstrip after some changes to support hiding the indicator. The chosen fix is passing in the icon size to mirror what would happe with full filmstrip reactification. * ref(connection-stats): rename statuses * feat(connection-indicator): make hiding behavior configurable The original implementation made the auto hiding of the indicator configured in interfaceConfig. * fix(connection-indicator): readd class expected by torture tests * fix(connection-indicator): change connection quality display styling Bold the connection summary in the stats popover so it stands out. Change the summaries so there are only three--strong, nonoptimal, poor. * fix(connection-indicator): gray background on lost connection * feat(icons): add new gsm bars icon * feat(connection-indicator): use new 3-bar icon * ref(icons): remove icon-connection and icon-connection-lost Both have been replaced by icon-gsm-bars so they are not being referenced anymore. Mobile looks to have connect-lost as a separate icon in font-icons/jitsi.json.
2017-09-26 16:55:09 +00:00
transport: PropTypes.array
};
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const { isLocalVideo } = this.props;
return (
<div className = 'connection-info'>
{ this._renderStatistics() }
{ isLocalVideo ? this._renderShowMoreLink() : null }
{ isLocalVideo && this.props.shouldShowMore
? this._renderAdditionalStats() : null }
</div>
);
}
/**
* Creates a table as ReactElement that will display additional statistics
* related to bandwidth and transport.
*
* @private
* @returns {ReactElement}
*/
_renderAdditionalStats() {
return (
<table className = 'connection-info__container'>
<tbody>
{ this._renderBandwidth() }
{ this._renderTransport() }
</tbody>
</table>
);
}
/**
* Creates a table row as a ReactElement for displaying bandwidth related
* statistics.
*
* @private
* @returns {ReactElement}
*/
_renderBandwidth() {
const { download, upload } = this.props.bandwidth || {};
return (
<tr>
<td>
{ this.props.t('connectionindicator.bandwidth') }
</td>
<td>
<span className = 'connection-info__download'>
&darr;
</span>
{ download ? `${download} Kbps` : 'N/A' }
<span className = 'connection-info__upload'>
&uarr;
</span>
{ upload ? `${upload} Kbps` : 'N/A' }
</td>
</tr>
);
}
/**
* Creates a a table row as a ReactElement for displaying bitrate related
* statistics.
*
* @private
* @returns {ReactElement}
*/
_renderBitrate() {
const { download, upload } = this.props.bitrate || {};
return (
<tr>
<td>
<span>
{ this.props.t('connectionindicator.bitrate') }
</span>
</td>
<td>
<span className = 'connection-info__download'>
&darr;
</span>
{ download ? `${download} Kbps` : 'N/A' }
<span className = 'connection-info__upload'>
&uarr;
</span>
{ upload ? `${upload} Kbps` : 'N/A' }
</td>
</tr>
);
}
feat(connection-indicator): implement automatic hiding on good connection (#2009) * ref(connection-stats): use PropTypes package * feat(connection-stats): display a summary of the connection quality * feat(connection-indicator): show empty bars for interrupted connection * feat(connection-indicator): change background color based on status * feat(connection-indicator): implement automatic hiding on good connection * fix(connection-indicator): explicitly set font size Currently non-react code will set an icon size on ConnectionIndicator. This doesn't work on initial call join in vertical filmstrip after some changes to support hiding the indicator. The chosen fix is passing in the icon size to mirror what would happe with full filmstrip reactification. * ref(connection-stats): rename statuses * feat(connection-indicator): make hiding behavior configurable The original implementation made the auto hiding of the indicator configured in interfaceConfig. * fix(connection-indicator): readd class expected by torture tests * fix(connection-indicator): change connection quality display styling Bold the connection summary in the stats popover so it stands out. Change the summaries so there are only three--strong, nonoptimal, poor. * fix(connection-indicator): gray background on lost connection * feat(icons): add new gsm bars icon * feat(connection-indicator): use new 3-bar icon * ref(icons): remove icon-connection and icon-connection-lost Both have been replaced by icon-gsm-bars so they are not being referenced anymore. Mobile looks to have connect-lost as a separate icon in font-icons/jitsi.json.
2017-09-26 16:55:09 +00:00
/**
* Creates a table row as a ReactElement for displaying a summary message
* about the current connection status.
*
* @private
* @returns {ReactElement}
*/
_renderConnectionSummary() {
return (
<tr className = 'connection-info__status'>
<td>
<span>{ this.props.t('connectionindicator.status') }</span>
</td>
<td>{ this.props.connectionSummary }</td>
</tr>
);
}
/**
* Creates a table row as a ReactElement for displaying frame rate related
* statistics.
*
* @private
* @returns {ReactElement}
*/
_renderFrameRate() {
const { framerate, t } = this.props;
const frameRateString = Object.keys(framerate || {})
.map(ssrc => framerate[ssrc])
.join(', ') || 'N/A';
return (
<tr>
<td>
<span>{ t('connectionindicator.framerate') }</span>
</td>
<td>{ frameRateString }</td>
</tr>
);
}
/**
* Creates a tables row as a ReactElement for displaying packet loss related
* statistics.
*
* @private
* @returns {ReactElement}
*/
_renderPacketLoss() {
const { packetLoss, t } = this.props;
let packetLossTableData;
if (packetLoss) {
const { download, upload } = packetLoss;
// eslint-disable-next-line no-extra-parens
packetLossTableData = (
<td>
<span className = 'connection-info__download'>
&darr;
</span>
{ download === null ? 'N/A' : `${download}%` }
<span className = 'connection-info__upload'>
&uarr;
</span>
{ upload === null ? 'N/A' : `${upload}%` }
</td>
);
} else {
packetLossTableData = <td>N/A</td>;
}
return (
<tr>
<td>
<span>
{ t('connectionindicator.packetloss') }
</span>
</td>
{ packetLossTableData }
</tr>
);
}
/**
* Creates a table row as a ReactElement for displaying resolution related
* statistics.
*
* @private
* @returns {ReactElement}
*/
_renderResolution() {
const { resolution, t } = this.props;
const resolutionString = Object.keys(resolution || {})
.map(ssrc => {
const { width, height } = resolution[ssrc];
return `${width}x${height}`;
})
.join(', ') || 'N/A';
return (
<tr>
<td>
<span>{ t('connectionindicator.resolution') }</span>
</td>
<td>{ resolutionString }</td>
</tr>
);
}
/**
* Creates a ReactElement for display a link to toggle showing additional
* statistics.
*
* @private
* @returns {ReactElement}
*/
_renderShowMoreLink() {
const translationKey
= this.props.shouldShowMore
? 'connectionindicator.less'
: 'connectionindicator.more';
return (
<a
className = 'showmore link'
onClick = { this.props.onShowMore } >
{ this.props.t(translationKey) }
</a>
);
}
/**
* Creates a table as a ReactElement for displaying connection statistics.
*
* @private
* @returns {ReactElement}
*/
_renderStatistics() {
return (
<table className = 'connection-info__container'>
<tbody>
feat(connection-indicator): implement automatic hiding on good connection (#2009) * ref(connection-stats): use PropTypes package * feat(connection-stats): display a summary of the connection quality * feat(connection-indicator): show empty bars for interrupted connection * feat(connection-indicator): change background color based on status * feat(connection-indicator): implement automatic hiding on good connection * fix(connection-indicator): explicitly set font size Currently non-react code will set an icon size on ConnectionIndicator. This doesn't work on initial call join in vertical filmstrip after some changes to support hiding the indicator. The chosen fix is passing in the icon size to mirror what would happe with full filmstrip reactification. * ref(connection-stats): rename statuses * feat(connection-indicator): make hiding behavior configurable The original implementation made the auto hiding of the indicator configured in interfaceConfig. * fix(connection-indicator): readd class expected by torture tests * fix(connection-indicator): change connection quality display styling Bold the connection summary in the stats popover so it stands out. Change the summaries so there are only three--strong, nonoptimal, poor. * fix(connection-indicator): gray background on lost connection * feat(icons): add new gsm bars icon * feat(connection-indicator): use new 3-bar icon * ref(icons): remove icon-connection and icon-connection-lost Both have been replaced by icon-gsm-bars so they are not being referenced anymore. Mobile looks to have connect-lost as a separate icon in font-icons/jitsi.json.
2017-09-26 16:55:09 +00:00
{ this._renderConnectionSummary() }
{ this._renderBitrate() }
{ this._renderPacketLoss() }
{ this._renderResolution() }
{ this._renderFrameRate() }
</tbody>
</table>
);
}
/**
* Creates table rows as ReactElements for displaying transport related
* statistics.
*
* @private
* @returns {ReactElement[]}
*/
_renderTransport() {
const { t, transport } = this.props;
if (!transport || transport.length === 0) {
// eslint-disable-next-line no-extra-parens
const NA = (
<tr key = 'address'>
<td>
<span>{ t('connectionindicator.address') }</span>
</td>
<td>
N/A
</td>
</tr>
);
return [ NA ];
}
const data = {
localIP: [],
localPort: [],
remoteIP: [],
remotePort: [],
transportType: []
};
for (let i = 0; i < transport.length; i++) {
const ip = getIP(transport[i].ip);
const localIP = getIP(transport[i].localip);
const localPort = getPort(transport[i].localip);
const port = getPort(transport[i].ip);
if (!data.remoteIP.includes(ip)) {
data.remoteIP.push(ip);
}
if (!data.localIP.includes(localIP)) {
data.localIP.push(localIP);
}
if (!data.localPort.includes(localPort)) {
data.localPort.push(localPort);
}
if (!data.remotePort.includes(port)) {
data.remotePort.push(port);
}
if (!data.transportType.includes(transport[i].type)) {
data.transportType.push(transport[i].type);
}
}
// All of the transports should be either P2P or JVB
2017-07-12 11:19:07 +00:00
let isP2P = false, isTURN = false;
if (transport.length) {
isP2P = transport[0].p2p;
isTURN = transport[0].localCandidateType === 'relay'
|| transport[0].remoteCandidateType === 'relay';
}
let additionalData = null;
if (isP2P) {
additionalData = isTURN
? <span>{ t('connectionindicator.turn') }</span>
: <span>{ t('connectionindicator.peer_to_peer') }</span>;
}
// First show remote statistics, then local, and then transport type.
const tableRowConfigurations = [
{
2017-07-12 11:19:07 +00:00
additionalData,
data: data.remoteIP,
key: 'remoteaddress',
label: t('connectionindicator.remoteaddress',
{ count: data.remoteIP.length })
},
{
data: data.remotePort,
key: 'remoteport',
label: t('connectionindicator.remoteport',
{ count: transport.length })
},
{
data: data.localIP,
key: 'localaddress',
label: t('connectionindicator.localaddress',
{ count: data.localIP.length })
},
{
data: data.localPort,
key: 'localport',
label: t('connectionindicator.localport',
{ count: transport.length })
},
{
data: data.transportType,
key: 'transport',
label: t('connectionindicator.transport',
{ count: data.transportType.length })
}
];
return tableRowConfigurations.map(this._renderTransportTableRow);
}
/**
* Creates a table row as a ReactElement for displaying a transport related
* statistic.
*
* @param {Object} config - Describes the contents of the row.
* @param {ReactElement} config.additionalData - Extra data to display next
* to the passed in config.data.
* @param {Array} config.data - The transport statistics to display.
* @param {string} config.key - The ReactElement's key. Must be unique for
* iterating over multiple child rows.
* @param {string} config.label - The text to display describing the data.
* @private
* @returns {ReactElement}
*/
_renderTransportTableRow(config) {
const { additionalData, data, key, label } = config;
return (
<tr key = { key }>
<td>
<span>
{ label }
</span>
</td>
<td>
{ getStringFromArray(data) }
{ additionalData || null }
</td>
</tr>
);
}
}
/**
* Utility for getting the IP from a transport statistics object's
* representation of an IP.
*
* @param {string} value - The transport's IP to parse.
* @private
* @returns {string}
*/
function getIP(value) {
if (!value) {
return '';
}
return value.substring(0, value.lastIndexOf(':'));
}
/**
* Utility for getting the port from a transport statistics object's
* representation of an IP.
*
* @param {string} value - The transport's IP to parse.
* @private
* @returns {string}
*/
function getPort(value) {
if (!value) {
return '';
}
return value.substring(value.lastIndexOf(':') + 1, value.length);
}
/**
* Utility for concatenating values in an array into a comma separated string.
*
* @param {Array} array - Transport statistics to concatenate.
* @private
* @returns {string}
*/
function getStringFromArray(array) {
let res = '';
for (let i = 0; i < array.length; i++) {
res += (i === 0 ? '' : ', ') + array[i];
}
return res;
}
export default translate(ConnectionStatsTable);