amazon-connect-reference-dialer 1.0.0 → 1.4.3

package/src/client/container/common/contactField.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import EachContact from '../common/each.contact';
+
+const ContactField = ({ contactList = [], dialContact, onHover, styles }) => (
+  <div className={`row ml-0 mr-0 mt-2 ${styles.contactListBox}`} onMouseOver={() => onHover(true)} onMouseOut={() => onHover(false)} >
+    <div className={`col-12`}>
+      { contactList.map((currentContact, index) => (
+        <EachContact
+          key={`contact-list-${index}`}
+          currentContact={currentContact}
+          dialContact={dialContact}
+          styles={styles}
+        />
+      ))
+      }
+    </div>
+  </div>
+);
+
+ContactField.propTypes = {
+  contactList: PropTypes.array,
+  dialContact: PropTypes.func.isRequired,
+  onHover: PropTypes.func.isRequired
+};
+ContactField.defaultProps = {
+  onHover: () => {}
+}
+export default ContactField;

package/src/client/container/common/each.contact.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { truncate } from '../../utils/acutils';
+
+class EachContact extends React.Component {
+  constructor (props) {
+    super(props);
+    this.tooltipRef = React.createRef();
+  }
+  componentDidMount () {
+    $(this.tooltipRef.current).tooltip();
+  }
+  render () {
+    return (
+      <div className={`row ${this.props.styles.contactItem}`}>
+        <div className={`col-9 pl-1 pr-0 ml-0 mr-0`}>
+          <a className={`btn pl-0 ml-0 pr-0 mr-0 ${this.props.styles.contactName}`}
+            ref={this.tooltipRef}
+            title={this.props.currentContact.name}
+            data-placement="top">
+            { truncate(`${this.props.currentContact.name}`, 30) }
+          </a>
+        </div>
+        <div className={`col-3 text-right pr-0`}>
+          <a id='dialer_quick_connects_list_item_dial' className={`btn ${this.props.styles.dialButton}`} onClick={() => this.props.dialContact(this.props.currentContact)}>
+            Dial
+          </a>
+        </div>
+      </div>
+    );
+  }
+}
+
+EachContact.propTypes = {
+  currentContact: PropTypes.object.isRequired,
+  dialContact: PropTypes.func.isRequired,
+  styles: PropTypes.object.isRequired
+};
+
+export default EachContact;

package/src/client/container/common/findContact.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const FindContact = ({ contactChange, dialNumber, contactValue = '', isContactListHover, styles }) => (
+  <div className='row mt-3'>
+    <div className='col-9 pr-0 mr-0'>
+      <div className='input-group flex-nowrap'>
+        <input type='text'
+          className={`form-control ${styles.quickConnectSearch}`}
+          placeholder='Find a contact'
+          aria-label='contact'
+          value={contactValue}
+          onChange={contactChange}
+          aria-describedby='addon-wrapping'/>
+      </div>
+    </div>
+    <div className={`col-3 text-right pl-0 mr-0`}>
+      <a id='dialer_quick_connects_search_dial' className={`btn ${styles.callPhoneDialButton} ${isContactListHover ? 'd-none' : ''}`} onClick={dialNumber}>
+        Dial
+      </a>
+    </div>
+  </div>
+);
+
+FindContact.propTypes = {
+  contactChange: PropTypes.func.isRequired,
+  dialNumber: PropTypes.func.isRequired,
+  contactValue: PropTypes.string,
+  isContactListHover: PropTypes.bool.isRequired
+};
+export default FindContact;

package/src/client/container/connectivitycheckview/body.js

@@ -0,0 +1,113 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import lo from 'lodash';
+
+import closeIcon from '../../res/images/fa-close-or-dismiss.svg';
+import rerunIcon from '../../res/images/fa-return.svg';
+
+import {
+  onRequestConnectivityCheck
+} from '../../reducers/acReducer';
+
+import csioHandler from '../../api/csioHandler';
+import MediaConnectivity from './components/mediaConnectivity';
+import RoundTripTime from './components/roundTripTime';
+import FractionalLoss from './components/fractionalLoss';
+import Throughput from './components/throughput';
+import ThroughputMessage from './components/throughputMessage';
+import databaseManager from '../../api/databaseManager';
+
+import RTTGraph from './components/rttgraph/rttgraph';
+import {
+  postProcess
+} from './components/rttgraph/utils';
+
+import styles from './connectivitycheck.css';
+import Loading from './loading/loading';
+
+class Body extends Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      pctResult: databaseManager.getPrecallTestResult(),
+      inProgress: false
+    };
+  }
+
+  requestConnectivityCheck (phoneType) {
+    this.props.requestConnectivityCheck();
+  }
+
+  closeSetting () {
+    this.props.closeSetting();
+  }
+
+  doPrecalTest () {
+    this.setState({
+      inProgress: true
+    });
+    csioHandler.doPrecallTest().then(result => {
+      this.setState({
+        inProgress: false,
+        pctResult: result
+      });
+    });
+  }
+
+  render () {
+    const { pctResult, unit, stepSize } = postProcess(this.state.pctResult);
+    return (
+      <div className={`card-body ${styles.cardBody}`}>
+        <div className="row ">
+          <div className="col-7 mr-0 pr-0">
+            <p className={`m-0 p-0 ${styles.connectivityCheck}`}>Connectivity check</p>
+          </div>
+          <div className="col-3 p-0 m-0">
+            {this.state.inProgress ? <Loading/>
+              : <a id='dialer_connect_check_rerun' className={`btn text-left p-0 m-0 ${styles.reRunButton} ${styles.cursor}`}
+                onClick={() => this.doPrecalTest()}>
+                <img className="fa-dial-button" src={rerunIcon}/> Rerun </a>
+            }
+          </div>
+          <div className={`col-2 ${styles.cursor}`}
+            onClick={() => this.closeSetting()}>
+            <img className="p-0 m-0" src={closeIcon}/>
+          </div>
+        </div>
+        <MediaConnectivity pctResult={this.state.pctResult}/>
+        <RoundTripTime pctResult={this.state.pctResult}/>
+        <FractionalLoss pctResult={this.state.pctResult}/>
+        <Throughput pctResult={this.state.pctResult}/>
+        <ThroughputMessage pctResult={this.state.pctResult}/>
+        <RTTGraph pctResult={pctResult}
+          lastSCT={lo.last(this.state.pctResult)}
+          stepSize={stepSize}
+          unit={unit}/>
+      </div>
+    );
+  }
+}
+
+Body.propTypes = {
+  closeSetting: PropTypes.func.isRequired,
+  requestConnectivityCheck: PropTypes.func.isRequired,
+  rttRecords: PropTypes.array.isRequired
+};
+const mapStateToProps = state => ({
+  rttRecords: state.acReducer.rttRecords || [{ rtt: 1, itr: 1 }]
+});
+
+const mapDispatchToProps = dispatch => ({
+  closeSetting: () => {
+    dispatch(onRequestConnectivityCheck('close'));
+  },
+  requestConnectivityCheck: () => {
+    dispatch(onRequestConnectivityCheck('complete'));
+  }
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Body);

package/src/client/container/connectivitycheckview/components/fractionalLoss.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import tickGreenIcon from '../../../res/images/fa-tick-green.svg';
+import dangerIcon from '../../../res/images/fa-danger.svg';
+
+import lo from 'lodash';
+import styles from './../connectivitycheck.css';
+
+const getLatestResultFractionalLoss = (pctResult) => {
+  let lastRecord = lo.last(pctResult) || {};
+  if ('fractionalLoss' in lastRecord) {
+    return lastRecord.fractionalLoss;
+  }
+  return -1;
+};
+
+const isOK = (pctResult) => {
+  let latestResult = getLatestResultFractionalLoss(pctResult);
+  // console.warn('---->', latestResult, latestResult > -1 && latestResult < 0.05);
+  return latestResult > -1 && latestResult < 0.05;
+};
+
+const formatValue = (value = 0) => {
+  value = Math.max(value, 0);
+  return parseFloat(value).toFixed(2);
+};
+
+const FractionalLoss = ({ pctResult = {} }) => (
+  <div className="row mt-1">
+    <div className="col-12">
+      <div className="row">
+        <div className="col-8">
+          <span className={styles.resultText}>
+            <img src={isOK(pctResult) ? tickGreenIcon : dangerIcon}/>
+            <span className="ml-1">Packet loss</span></span>
+        </div>
+        <div className="col-4 text-right">
+          <span className={styles.resultValue}>
+            {formatValue(getLatestResultFractionalLoss(pctResult))} % </span>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+FractionalLoss.propTypes = {
+  pctResult: PropTypes.array
+};
+const mapStateToProps = state => ({});
+const mapDispatchToProps = dispatch => ({});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FractionalLoss);

package/src/client/container/connectivitycheckview/components/mediaConnectivity.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import tickGreenIcon from '../../../res/images/fa-tick-green.svg';
+import dangerIcon from '../../../res/images/fa-danger.svg';
+
+import lo from 'lodash';
+import styles from './../connectivitycheck.css';
+
+const isOK = (pctResult) => {
+  let latestResult = lo.last(pctResult);
+  // console.warn('media connectivity ', latestResult);
+  return latestResult && latestResult.mediaConnectivity === true;
+};
+
+const MediaConnectivity = ({ pctResult = {} }) => (
+  <div className="row mt-3">
+    <div className="col-12">
+      <div className="row">
+        <div className="col-8">
+          <span className={styles.resultText}>
+            {<img src={isOK(pctResult) ? tickGreenIcon : dangerIcon}/>}
+            <span className="ml-1">Media connectivity</span></span>
+        </div>
+        <div className="col-4"/>
+      </div>
+    </div>
+  </div>
+);
+
+MediaConnectivity.propTypes = {
+  pctResult: PropTypes.array
+};
+const mapStateToProps = state => ({});
+const mapDispatchToProps = dispatch => ({});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(MediaConnectivity);

package/src/client/container/connectivitycheckview/components/roundTripTime.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import tickGreenIcon from '../../../res/images/fa-tick-green.svg';
+import dangerIcon from '../../../res/images/fa-danger.svg';
+
+import lo from 'lodash';
+import styles from './../connectivitycheck.css';
+
+const getLatestResultRTT = (pctResult) => {
+  let lastRecord = lo.last(pctResult) || {};
+  if ('rtt' in lastRecord) {
+    return lastRecord.rtt;
+  }
+  return -1;
+};
+
+const isOK = (pctResult) => {
+  let latestResult = getLatestResultRTT(pctResult);
+  return latestResult > 0 && latestResult < 240;
+};
+
+const formatValue = (value = 0) => {
+  value = Math.max(value, 0);
+  return parseFloat(value).toFixed(2);
+};
+
+const RoundTripTime = ({ pctResult = {} }) => (
+  <div className="row mt-1">
+    <div className="col-12">
+      <div className="row">
+        <div className="col-8">
+          <span className={styles.resultText}>
+            <img src={isOK(pctResult) ? tickGreenIcon : dangerIcon}/>
+            <span className="ml-1">Round trip time</span>
+          </span>
+        </div>
+        <div className="col-4 text-right">
+          <span className={styles.resultValue}>
+            {formatValue(getLatestResultRTT(pctResult))} ms </span>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+RoundTripTime.propTypes = {
+  pctResult: PropTypes.array
+};
+const mapStateToProps = state => ({});
+const mapDispatchToProps = dispatch => ({});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(RoundTripTime);

package/src/client/container/connectivitycheckview/components/rttgraph/rttgraph.js

@@ -0,0 +1,176 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Line } from 'react-chartjs-2';
+import lo from 'lodash';
+
+const TOTAL_SEGMENT = 3;
+const ONE_MINUTE_IN_MS = 60000;
+const ONE_HOUR_IN_MS = 3600000;
+const ONE_DAY_IN_MS = 86400000;
+
+const getStepSize = (first = {}, last = {}) => {
+  let startTimeInMs = lo.get(first, 'epochTime', 0);
+  let endTimeInMs = lo.get(last, 'epochTime', 0);
+
+  let totalDayInMillis = Math.max(Math.abs(startTimeInMs - endTimeInMs), ONE_DAY_IN_MS);
+  let stepSizeInMillis = Math.round(totalDayInMillis / TOTAL_SEGMENT);
+  // console.warn('->', first, last, totalDayInMillis, stepSizeInMillis);
+  return stepSizeInMillis;
+};
+
+const getUnit = (first = {}, last = {}) => {
+  let startTimeInMs = lo.get(first, 'epochTime', 0);
+  let endTimeInMs = lo.get(last, 'epochTime', 0);
+  let diffInMs = Math.abs(startTimeInMs - endTimeInMs);
+  if (diffInMs < ONE_HOUR_IN_MS) {
+    let stepSize = Math.floor(diffInMs / 1000 / 60 / 3);
+    return { unit: 'minute', stepSize };
+  }
+  if (diffInMs < ONE_DAY_IN_MS) {
+    let stepSize = Math.floor(diffInMs / 1000 / 60 / 60 / 3);
+    return { unit: 'minute', stepSize };
+  }
+  let stepSize = Math.floor(diffInMs / 1000 / 60 / 60 / 24 / 3);
+  return { unit: 'day', stepSize };
+};
+
+// will distributed to 50 points
+const getChartOptions = (pctResult = [], unit = undefined, stepSize) => {
+  // const stepSize = getStepSize(lo.first(pctResult), lo.last(pctResult));
+  // console.warn('~getChartOptions', pctResult, stepSize);
+  // const {unit, stepSize} = getUnit(lo.first(pctResult), lo.last(pctResult));
+  // console.warn('->', 'pctResult', pctResult, unit);
+  const chartOptions = {
+    scaleShowValues: true,
+    legend: {
+      display: false
+    },
+    tooltips: {
+      callbacks: {
+        label: function (tooltipItem) {
+          return `${tooltipItem.yLabel.toFixed(2)} kbps`;
+        }
+      }
+    },
+    scales: {
+      xAxes: [{
+        display: true,
+        type: 'time',
+        distribution: 'series',
+        autoSkip: false,
+        beginAtZero: true,
+        // stepSize: stepSize,
+        // unitStepSize: stepSize,
+        // unit: 'hour',
+        time: {
+          tooltipFormat: 'MMM D, h:mm:ss a',
+          // unit: unit,
+          // unitStepSize: stepSize,
+          // stepSize: stepSize,
+          beginAtZero: true,
+          autoSkip: false,
+          displayFormats: {
+            'millisecond': 'HH:mm:ss',
+            'second': 'HH:mm:ss',
+            'minute': 'HH:mm:ss',
+            'hour': 'HH:mm',
+            'day': 'DD MMM'
+          }
+        }
+      }],
+      yAxes: [{
+        display: true,
+        scaleLabel: {
+          display: false
+        },
+        ticks: {
+          callback: function (value) {
+            return `${value} kbps`;
+            // return Math.round(value);
+          },
+          // min: 0,
+          // max: 3000,
+          autoSkip: true
+          // stepSize: 150
+        }
+      }]
+    }
+  };
+
+  return chartOptions;
+};
+
+const getLabels = (pctRecords) => {
+  let labels = pctRecords.map((item) => {
+    return item.epochTime;
+  });
+    // console.warn('->labels', labels);
+  return labels || [];
+};
+const getRTT = (pctRecords) => {
+  let rtts = pctRecords.map((item) => {
+    let rtt = parseFloat(item.rtt || 0);
+    return rtt;
+  });
+    // console.warn('-> total rtts', rtts.length);
+  return rtts || [];
+};
+
+const getThroughput = (pctRecords) => {
+  let throughput = pctRecords.map((item) => {
+    let throughput = parseFloat(item.throughput || 0);
+    return throughput;
+  });
+    // console.warn('data ',throughput);
+  return throughput || [];
+};
+
+const getChartData = (pctRecords) => {
+  const chartData = {
+    labels: getLabels(pctRecords),
+    datasets: [{
+      label: 'Throughput timeline',
+      // backgroundColor: '#6c757d',
+      // borderColor: '#6c757d',
+      borderWidth: 0,
+      pointRadius: 1,
+      lineTension: 0,
+      // hoverBackgroundColor: 'rgba(255,99,132,0.4)',
+      // hoverBorderColor: 'rgba(255,99,132,1)',
+      data: getThroughput(pctRecords)
+    }]
+  };
+  return chartData;
+};
+
+const getLatestResultThroughput = (lastRecord = {}) => {
+  return lastRecord.throughput || 0;
+};
+
+const isBad = (pctResult) => {
+  let latestResult = getLatestResultThroughput(pctResult);
+  return latestResult < 20;
+};
+
+const RTTGraph = ({ pctResult = {}, lastSCT = {}, unit = undefined, stepSize = 0 }) => (
+  <div className={`row mt-${isBad(lastSCT) ? 1 : 3}`}>
+    <div className="col-12" style={{ position: 'relative', height: '100px' }}>
+      <Line data={getChartData(pctResult)} options={getChartOptions(pctResult, unit, stepSize)}/>
+    </div>
+  </div>
+);
+
+RTTGraph.propTypes = {
+  pctResult: PropTypes.array,
+  lastSCT: PropTypes.object,
+  unit: PropTypes.string,
+  stepSize: PropTypes.number
+};
+const mapStateToProps = state => ({});
+const mapDispatchToProps = dispatch => ({});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(RTTGraph);

package/src/client/container/connectivitycheckview/components/rttgraph/utils.js

@@ -0,0 +1,96 @@
+import lo from 'lodash';
+
+const ONE_MINUTE_IN_MS = 60000;
+const ONE_HOUR_IN_MS = 3600000;
+const ONE_DAY_IN_MS = 86400000;
+const THREE_DAYS_MS = 259200000;
+const STEP_SIZE = 5;
+
+const getRecords = (currentTime = 0, at, data = [], timeSegmentInMs = ONE_DAY_IN_MS) => {
+  let last = currentTime - timeSegmentInMs;
+
+  let throughput = [];
+  for (let i = at; i >= 0; i -= 1) {
+    let currentResult = data[i];
+    if (currentResult.epochTime && currentResult.epochTime < last) {
+      return {
+        throughput: throughput,
+        lastIndex: i
+      };
+    }
+    throughput.push(currentResult);
+  }
+  // console.warn('-> ', throughput);
+  return {
+    throughput: throughput,
+    lastIndex: -1
+  };
+};
+
+const getMedianRTT = (data = []) => {
+  let len = data.length;
+  let pivot = Math.floor(len / 2);
+
+  let retval = len < 1 ? 0 : len % 2 !== 0 ? data[pivot].rtt : 0.5 * (data[pivot - 1].rtt + data[pivot].rtt);
+  // console.warn('media', data, retval);
+  return retval;
+};
+
+const getMedianThroughput = (data = []) => {
+  let len = data.length;
+  let pivot = Math.floor(len / 2);
+
+  let retval = len < 1 ? 0 : len % 2 !== 0 ? data[pivot].throughput : 0.5 * (data[pivot - 1].throughput + data[pivot].throughput);
+  // console.warn('media', data, retval);
+  return retval;
+};
+
+const getTimeRange = (first = {}, last = {}) => {
+  let startTimeInMs = lo.get(first, 'epochTime', 0);
+  let endTimeInMs = lo.get(last, 'epochTime', 0);
+  let diffInMs = Math.abs(startTimeInMs - endTimeInMs);
+  let unit = 'day';
+  if (diffInMs <= ONE_HOUR_IN_MS) {
+    unit = 'minute';
+  } else if (diffInMs <= ONE_DAY_IN_MS) {
+    unit = 'hour';
+  }
+  return { now: endTimeInMs, upto: startTimeInMs, unit };
+};
+
+export const postProcess = (pctResult = []) => {
+  // let now = (new Date).getTime();
+  let retval = [];
+
+  let { now, upto, unit } = getTimeRange(lo.first(pctResult), lo.last(pctResult));
+  // console.warn(now, upto, now-THREE_DAYS_MS)
+  upto = Math.max(now - THREE_DAYS_MS, upto);
+
+  let diffInMs = Math.abs(now - upto);
+  let timeSegmentInMs = diffInMs / 15;
+
+  // console.warn('-> ', timeSegmentInMs);
+  let prvIndex = pctResult.length;
+  retval.push({ throughput: lo.first(pctResult) ? (lo.first(pctResult).throughput || 0) : 0, epochTime: now });
+  for (let currentTime = now, at = prvIndex - 1; currentTime >= upto && at >= 0; currentTime -= timeSegmentInMs) {
+    let result = getRecords(currentTime, at, pctResult, timeSegmentInMs);
+
+    let { throughput, lastIndex } = result;
+
+    // if (prvIndex === lastIndex) {
+    //     continue;
+    // }
+    prvIndex = lastIndex;
+    at = lastIndex;
+    let medianThroughput = getMedianThroughput(throughput);
+    let epochTime = currentTime;
+
+    // console.warn('->', result, medianThroughput, epochTime, medianThroughput);
+    retval.push({ throughput: medianThroughput, epochTime });
+  }
+  retval = retval.sort((l, r) => {
+    return l.epochTime < r.epochTime ? -1 : l.epochTime > r.epochTime ? 1 : 0;
+  });
+
+  return { pctResult: retval, unit, stepSize: timeSegmentInMs };
+};