Untitled

getColumns(): [] {
    const self = this;
    const columns = [
      {
        data: 'testName',
        title: i18nMessageBundle.thousandEyes.table.testName,
        orderable: true,
        render: function(data, type, row, meta) {
          const link: string = urls.ThousandEyesTestInfoPage.replace(
            '{{AGENT_ID}}',
            row.agentId
          ).replace('{{TEST_ID}}', row.testId);
          return `<a href='' target="_blank" class=${css.hoverLink} rel="nofollow">
          ${data} <img class=${css.tooltiptext} src=${teLogo} alt="">
        </a>`;
        }
      },
      {
        data: 'testType',
        title: i18nMessageBundle.thousandEyes.table.testType,
        orderable: true
      },
      {
        data: 'testTarget',
        title: i18nMessageBundle.thousandEyes.table.testTarget,
        orderable: true
      },
      {
        data: 'agentName',
        title: i18nMessageBundle.thousandEyes.table.agentName,
        orderable: true
      },
      {
        data: 'deviceName',
        title: i18nMessageBundle.thousandEyes.table.deviceName,
        orderable: true
      },
      {
        data: 'lastSampleTime',
        title: i18nMessageBundle.thousandEyes.table.lastSamplingTime,
        orderable: true,
        render: function(data, type, row, meta) {
          if (data === -1 || data === undefined) {
            return NO_DATA;
          }
          return moment(data).fromNow();
        }
      },
      {
        data: 'avrPacketLoss',
        title: i18nMessageBundle.thousandEyes.table.avrPacketLoss,
        orderable: true,
        className: 'dt-css--rightAlign',
        render: function(data, type, row, meta) {
          if (data === -1) {
            return NO_DATA;
          }
          if (type === 'sort') {
            return data;
          }
          return (
            Math.round(data * 100) / 100 +
            ' / ' +
            (row.lastPacketLoss === -1 ? NO_DATA : Math.round(row.lastPacketLoss * 100) / 100) +
            self.getNbsps(6)
          );
        },
        titleSuffix:
          `<i class="dnac-icon-info"
              id="lastPacketLossId"
              style='color: #049FD9; font-size:14px; position:relative; top: 2px; font-weight: 700; 6px;'>
            </i>
            <dnx-tooltip-lite
              reference="#lastPacketLossId"
              placement="bottom"
            >
              <div class="my-table-tooltip" style="max-width: 300px;">
                <div>` +
          i18nUtil.getFilledTextForHBS(i18nMessageBundle.thousandEyes.table.teTableTooltip, {
            teInfo: i18nMessageBundle.thousandEyes.table.packetLoss
          }) +
          `</div>
              </div>
            </dnx-tooltip-lite><br /> <span style="padding-right: 20px;">` +
          i18nMessageBundle.thousandEyes.table.avgOrLateset +
          `</span>`
      },
      {
        data: 'maxPacketLoss',
        title: i18nMessageBundle.thousandEyes.table.maxPacketLoss,
        orderable: true,
        className: 'dt-css--rightAlign',
        render: function(data) {
          if (data === -1) {
            return NO_DATA;
          }
          return Math.round(data * 100) / 100;
        }
      },
      {
        data: 'avrJitter',
        title: i18nMessageBundle.thousandEyes.table.avrJitter,
        orderable: true,
        className: 'dt-css--rightAlign',
        render: function(data, type, row, meta) {
          if (data === -1) {
            return NO_DATA;
          }
          if (type === 'sort') {
            return data;
          }
          return (
            Math.round(data * 100) / 100 +
            ' / ' +
            (row.lastJitter === -1 ? NO_DATA : Math.round(row.lastJitter * 100) / 100) +
            self.getNbsps(6)
          );
        },
        titleSuffix:
          `<i class="dnac-icon-info"
              id="lastJitterId"
              style='color: #049FD9; font-size:14px; position:relative; top: 2px; font-weight: 700; 6px;'>
            </i>
            <dnx-tooltip-lite
              reference="#lastJitterId"
              placement="bottom"
            >
              <div class="my-table-tooltip" style="max-width: 300px;">
              <div>` +
          i18nUtil.getFilledTextForHBS(i18nMessageBundle.thousandEyes.table.teTableTooltip, {
            teInfo: i18nMessageBundle.thousandEyes.table.jitter
          }) +
          `</div>              </div>
          </dnx-tooltip-lite><br /> <span style="padding-right: 20px;">` +
          i18nMessageBundle.thousandEyes.table.avgOrLateset +
          `</span>`
      },
      {
        data: 'maxJitter',
        title: i18nMessageBundle.thousandEyes.table.maxJitter,
        orderable: true,
        className: 'dt-css--rightAlign',
        render: function(data) {
          if (data === -1) {
            return NO_DATA;
          }
          return Math.round(data * 100) / 100;
        }
      },
      {
        data: 'avrLatency',
        title: i18nMessageBundle.thousandEyes.table.avrLatency,
        orderable: true,
        width: '500px',
        className: 'dt-css--rightAlign',
        render: function(data, type, row, meta) {
          if (data === -1) {
            return NO_DATA;
          }
          if (type === 'sort') {
            return data;
          }
          return (
            Math.round(data * 100) / 100 +
            ' / ' +
            (row.lastLatency === -1 ? NO_DATA : Math.round(row.lastLatency * 100) / 100) +
            self.getNbsps(6)
          );
        },
        titleSuffix:
          `<i class="dnac-icon-info"
              id="lastLatencyId"
              style='color: #049FD9; font-size:14px; position:relative; top: 2px; font-weight: 700; 6px;'>
            </i>
            <dnx-tooltip-lite
              reference="#lastLatencyId"
              placement="bottom"
            >
              <div class="my-table-tooltip" style="max-width: 300px;">
              <div>` +
          i18nUtil.getFilledTextForHBS(i18nMessageBundle.thousandEyes.table.teTableTooltip, {
            teInfo: i18nMessageBundle.thousandEyes.table.latency
          }) +
          `</div>              </div>
          </dnx-tooltip-lite><br /> <span style="padding-right: 20px;padding-left: 60px;">` +
          i18nMessageBundle.thousandEyes.table.avgOrLateset +
          `</span>`
      },
      {
        data: 'maxLatency',
        title: i18nMessageBundle.thousandEyes.table.maxLatency,
        orderable: true,
        className: 'dt-css--rightAlign',
        render: function(data) {
          if (data === -1) {
            return NO_DATA;
          }
          return Math.round(data * 100) / 100;
        }
      },
      {
        data: 'avrResponseTime',
        title: i18nMessageBundle.thousandEyes.table.avrResponseTime,
        orderable: true,
        className: 'dt-css--rightAlign',
        render: function(data, type, row, meta) {
          if (data === -1) {
            return NO_DATA;
          }
          if (type === 'sort') {
            return data;
          }
          return (
            Math.round(data * 100) / 100 +
            ' / ' +
            (row.lastResponseTime === -1 ? NO_DATA : Math.round(row.lastResponseTime * 100) / 100) +
            self.getNbsps(6)
          );
        },
        titleSuffix:
          `<i class="dnac-icon-info"
              id="lastResponseTimeId"
              style='color: #049FD9; font-size:14px; position:relative; top: 2px; font-weight: 700; 6px;'>
            </i>
            <dnx-tooltip-lite
              reference="#lastResponseTimeId"
              placement="bottom"
            >
              <div class="my-table-tooltip" style="max-width: 300px;">
              <div>` +
          i18nUtil.getFilledTextForHBS(i18nMessageBundle.thousandEyes.table.teTableTooltip, {
            teInfo: i18nMessageBundle.thousandEyes.table.responseTime
          }) +
          `</div>              </div>
          </dnx-tooltip-lite><br /> <span style="padding-right: 20px;">` +
          i18nMessageBundle.thousandEyes.table.avgOrLateset +
          `</span>`
      },
      {
        data: 'maxResponseTime',
        title: i18nMessageBundle.thousandEyes.table.maxResponseTime,
        orderable: true,
        className: 'dt-css--rightAlign',
        render: function(data) {
          if (data === -1) {
            return NO_DATA;
          }
          return Math.round(data * 100) / 100;
        }
      },
      {
        data: 'totalActiveAlerts',
        title: i18nMessageBundle.thousandEyes.table.totalActiveAlerts,
        orderable: true,
        className: 'dt-css--rightAlign'
      },
      {
        data: 'totalAlerts',
        title: i18nMessageBundle.thousandEyes.table.totalAlerts,
        orderable: true,
        className: 'dt-css--rightAlign'
      },
      {
        data: 'totalFailureSamplingTests',
        title: i18nMessageBundle.thousandEyes.table.totalFailureSamplingTests,
        orderable: true,
        className: 'dt-css--rightAlign'
      },
      {
        data: 'totalSamplingTests',
        title: i18nMessageBundle.thousandEyes.table.totalSamplingTests,
        orderable: true,
        className: 'dt-css--rightAlign'
      }
    ];
    return columns;
  }