From 8e6ccdfdf29e12533a2e24f08d1e83036ccd957b Mon Sep 17 00:00:00 2001 From: CHANDAN PRAKASH Date: Tue, 24 Sep 2024 00:29:17 -0400 Subject: [PATCH] Refactored table components - Table, SummaryTableRow, SignalTableRow --- .../Ioda/components/table/SignalTableRow.js | 207 +++--- .../Ioda/components/table/SummaryTableRow.js | 331 ++++----- assets/js/Ioda/components/table/Table.js | 637 +++++++++--------- 3 files changed, 579 insertions(+), 596 deletions(-) diff --git a/assets/js/Ioda/components/table/SignalTableRow.js b/assets/js/Ioda/components/table/SignalTableRow.js index f0da3b7..259b312 100644 --- a/assets/js/Ioda/components/table/SignalTableRow.js +++ b/assets/js/Ioda/components/table/SignalTableRow.js @@ -1,5 +1,6 @@ -import React, { Component } from "react"; +import React, {Component, useEffect} from "react"; import ReactDOM from "react-dom"; +import {useState} from "react"; import { humanizeNumber } from "../../utils"; import { Link } from "react-router-dom"; import T from "i18n-react"; @@ -8,39 +9,37 @@ import { getDateRangeFromUrl, hasDateRangeInUrl } from "../../utils/urlUtils"; // Each row of the summary table needs it's own component to manage the // hover state, which controls the table that displays score breakdowns. -class SignalTableRow extends Component { - constructor(props) { - super(props); - this.state = { - x: 0, - y: 0, - displayScores: false, - visibility: this.props.data.visibility, - }; - // this.handleRowScoreHide = this.handleRowScoreHide.bind(this); - } - - componentDidMount = () => { - // document.addEventListener('click', this.handleRowScoreHide, {passive: true}); - }; - - componentWillUnmount = () => { - // document.removeEventListener('click', this.handleRowScoreHide, true); - }; +const SignalTableRow = (props) => { + const { + data, + handleCheckboxEventLoading, + type, + entityType + } = props + const [x, setX] = useState(0); + const [y, setY] = useState(0); + const [displayScores, setDisplayScores] = useState(false); + const [visibility, setVisibility] = useState(data.visibility || false); + + useEffect(() => { + if (data && data.visibility != null) { + setVisibility(data.visibility); + } + }, [data.visibility]); - handlePopulateScores(scores) { + const handlePopulateScores = (scores) => { if (scores !== null) { return ( - scores && - scores.map((score, index) => { - let scoreValue = humanizeNumber(score.score, 2); - return ( - - {score.source} - {scoreValue} - - ); - }) + scores && + scores.map((score, index) => { + let scoreValue = humanizeNumber(score.score, 2); + return ( + + {score.source} + {scoreValue} + + ); + }) ); } else { return null; @@ -57,123 +56,111 @@ class SignalTableRow extends Component { // } // } - handleRowScoreDisplay() { - this.setState({ - displayScores: !this.state.displayScores, - }); + const handleRowScoreDisplay = () => { + setDisplayScores(!displayScores); } - handleRowHover(event) { + const handleRowHover = (event) => { event.persist(); // console.log(event); // console.log(event.nativeEvent.offsetY); // Keep the hover table aligned with the corresponding ellipses - this.setState({ - y: + + setY( event.nativeEvent.offsetY < 8 - ? -2 - : event.nativeEvent.offsetY > 20 - ? 14 - : event.nativeEvent.offsetY - 9, - }); + ? -2 + : event.nativeEvent.offsetY > 20 + ? 14 + : event.nativeEvent.offsetY - 9); } // controls checkbox visibility UI, having it wait on props is taking too long - handleVisibilityState(event, item) { + const handleVisibilityState = (event, item) => { // update checkbox and call props function - - this.setState( - { - visibility: event.target.checked, - }, - () => { - setTimeout(() => { - this.props.handleCheckboxEventLoading(item); - }, 1000); - } - ); + setVisibility(event.target.checked); + setTimeout(() => { + handleCheckboxEventLoading(item); + }, 1000); } - render() { - let overallScore = humanizeNumber(this.props.data.score, 2); + let overallScore = humanizeNumber(data.score, 2); - const dataSourceHeading = T.translate( + const dataSourceHeading = T.translate( "table.scoresTable.dataSourceHeading" - ); - const scoreHeading = T.translate("table.scoresTable.scoreHeading"); + ); + const scoreHeading = T.translate("table.scoresTable.scoreHeading"); - const item = this.props.data; - const entityCode = this.props.data.entityCode; - const entityType = this.props.data.entityType; + const item = data; + const dataEntityCode = data.entityCode; + const dataEntityType = data.entityType; - const dateRangeInUrl = hasDateRangeInUrl(); - const { urlFromDate, urlUntilDate } = getDateRangeFromUrl(); - const linkPath = dateRangeInUrl - ? `/${entityType}/${entityCode}?from=${urlFromDate}&until=${urlUntilDate}` - : `/${entityType}/${entityCode}`; + const dateRangeInUrl = hasDateRangeInUrl(); + const { urlFromDate, urlUntilDate } = getDateRangeFromUrl(); + const linkPath = dateRangeInUrl + ? `/${dataEntityType}/${dataEntityCode}?from=${urlFromDate}&until=${urlUntilDate}` + : `/${dataEntityType}/${dataEntityCode}`; - return ( + return ( this.handleRowHover(event)} - // onMouseLeave={(event) => this.handleRowHover(event)} - onTouchStart={(event) => this.handleRowHover(event)} + className="table--summary-row" + // onMouseMove={(event) => this.handleRowHover(event)} + // onMouseLeave={(event) => this.handleRowHover(event)} + onTouchStart={(event) => handleRowHover(event)} > - {this.props.type === "signal" ? ( - - this.handleVisibilityState(event, item)} - /> - + {type === "signal" ? ( + + handleVisibilityState(event, item)} + /> + ) : null} - // this.props.handleEntityClick( - // this.props.data.entityType, - // this.props.data.entityCode - // ) - // } + className="table__cell-link" + to={linkPath} + // onClick={() => + // this.props.handleEntityClick( + // this.props.data.entityType, + // this.props.data.entityCode + // ) + // } > - {this.props.data.name} + {data.name} - {this.props.entityType === "asn" ? ( - {this.props.data.ipCount} + {entityType === "asn" ? ( + {data.ipCount} ) : null} this.handleRowScoreDisplay()} - style={{ backgroundColor: this.props.data.color }} + className="table__cell--overallScore td--center" + onClick={() => this.handleRowScoreDisplay()} + style={{ backgroundColor: data.color }} > {overallScore} {/*⋮*/} - - - - + + + + - {this.handlePopulateScores(this.props.data.scores)} + {handlePopulateScores(data.scores)}
{dataSourceHeading}{scoreHeading}
{dataSourceHeading}{scoreHeading}
- ); - } + ); } export default SignalTableRow; diff --git a/assets/js/Ioda/components/table/SummaryTableRow.js b/assets/js/Ioda/components/table/SummaryTableRow.js index 36aa45b..f7305ca 100644 --- a/assets/js/Ioda/components/table/SummaryTableRow.js +++ b/assets/js/Ioda/components/table/SummaryTableRow.js @@ -35,8 +35,7 @@ * MODIFICATIONS. */ -import React, { Component } from "react"; -import ReactDOM from "react-dom"; +import React, {useEffect, useState, useRef} from "react"; import { humanizeNumber } from "../../utils"; import { Link } from "react-router-dom"; import T from "i18n-react"; @@ -45,231 +44,247 @@ import { getDateRangeFromUrl, hasDateRangeInUrl } from "../../utils/urlUtils"; // Each row of the summary table needs it's own component to manage the // hover state, which controls the table that displays score breakdowns. -class SummaryTableRow extends Component { - constructor(props) { - super(props); - this.state = { - x: 0, - y: 0, - displayScores: false, - pingSlash24ScoreAvailable: false, - bgpScoreAvailable: false, - ucsdNtScoreAvailable: false, - meritNtScoreAvailable: false, - hoverTime: 600, - t: null, - }; - this.handleRowScoreHide = this.handleRowScoreHide.bind(this); - } +const SummaryTableRow = (props) => { + + + const{ + data, + signal, + entityType + } = props; + + const [x, setX] = useState(0); + const [y, setY] = useState(0); + const [displayScores, setDisplayScores] = useState(false); + const [pingSlash24ScoreAvailable, setPingSlash24ScoreAvailable] = useState(false); + const [bgpScoreAvailable, setBgpScoreAvailable] = useState(false); + const [ucsdNtScoreAvailable, setucsdNtScoreAvailable] = useState(false); + const [meritNtScoreAvailable, setMeritNtScoreAvailable] = useState(false); + const [hoverTime, setHoverTime] = useState(600); + const [t, setT] = useState(null); - componentDidMount = () => { - document.addEventListener("click", this.handleRowScoreHide, { + const timeoutRef = useRef(null); + const componentRef = useRef(null); + +// Combine them + useEffect(() => { + document.addEventListener("click", handleRowScoreHide, { passive: true, }); - // set states for outage source indicator in score cell + return () => { + document.removeEventListener("click", handleRowScoreHide, true); + } + }, [displayScores]); + + useEffect(() => { - this.props.data.scores.map((score) => { + // set states for outage source indicator in score cell + data.scores.map((score) => { let source = score.source.split('.')[0]; switch (source) { case "ping-slash24": - this.setState({pingSlash24ScoreAvailable: true}); + setPingSlash24ScoreAvailable(true); break; case "bgp": - this.setState({bgpScoreAvailable: true}); + setBgpScoreAvailable(true); break; case "ucsd-nt": - this.setState({ucsdNtScoreAvailable: true}); + setUcsdNtScoreAvailable(true); break; case "merit-nt": - this.setState({meritNtScoreAvailable: true}); + setMeritNtScoreAvailable(true); + break; + default: break; } - }); - } + }) - componentWillUnmount = () => { - document.removeEventListener("click", this.handleRowScoreHide, true); - }; + }, [data.scores]) + + + const handleRowScoreDisplay = () => { + setDisplayScores(!displayScores); + } - handlePopulateScores(scores) { + const handlePopulateScores = (scores) => { if (scores !== null) { return ( - scores && - scores.map((score, index) => { - let scoreValue = humanizeNumber(score.score, 2); - return ( - - {score.source} - {scoreValue} - - ); - }) + scores && + scores.map((score, index) => { + let scoreValue = humanizeNumber(score.score, 2); + return ( + + {score.source} + {scoreValue} + + ); + }) ); } else { return null; } } - handleRowScoreHide() { - if (this.state.displayScores) { - const domNode = ReactDOM.findDOMNode(this); + const handleRowScoreHide = () => { + if (displayScores) { + // const domNode = ReactDOM.findDOMNode(this); + const domNode = componentRef.current; if (!domNode || !domNode.contains(event.target)) { - this.setState({ - displayScores: false, - }); + setDisplayScores(false); } } } - showScoreTooltipHover() { - this.setState({ - t: setTimeout(() => { - this.setState({ displayScores: true }); - }, this.state.hoverTime), - }); - } + const showScoreTooltipHover = () => { + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + } + timeoutRef.current = setTimeout(() => { + setDisplayScores(true); + }, hoverTime); + }; - hideScoreTooltipHover() { - clearTimeout(this.state.t); - this.setState({ displayScores: false }); - } + const hideScoreTooltipHover = () => { + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + } + setDisplayScores(false); + }; - handleRowHover(event) { + + const handleRowHover = (event) => { event.persist(); - this.setState({ - y: + setY( event.nativeEvent.offsetY < 8 - ? -2 - : event.nativeEvent.offsetY > 20 - ? 14 - : event.nativeEvent.offsetY - 9, - }); + ? -2 + : event.nativeEvent.offsetY > 20 + ? 14 + : event.nativeEvent.offsetY - 9 + ); } - render() { - let overallScore = humanizeNumber(this.props.data.score, 2); - const dataSourceHeading = T.translate( + let overallScore = humanizeNumber(data.score, 2); + const dataSourceHeading = T.translate( "table.scoresTable.dataSourceHeading" - ); - const scoreHeading = T.translate("table.scoresTable.scoreHeading"); - const entityCode = this.props.data.entityCode; - const entityType = this.props.data.entityType; + ); + const scoreHeading = T.translate("table.scoresTable.scoreHeading"); + const dataEntityCode = data.entityCode; + const dataEntityType = data.entityType; - const dateRangeInUrl = hasDateRangeInUrl(); - const { urlFromDate, urlUntilDate } = getDateRangeFromUrl(); - const linkPath = dateRangeInUrl - ? `/${entityType}/${entityCode}?from=${urlFromDate}&until=${urlUntilDate}` - : `/${entityType}/${entityCode}`; + const dateRangeInUrl = hasDateRangeInUrl(); + const { urlFromDate, urlUntilDate } = getDateRangeFromUrl(); + const linkPath = dateRangeInUrl + ? `/${dataEntityType}/${dataEntityCode}?from=${urlFromDate}&until=${urlUntilDate}` + : `/${dataEntityType}/${dataEntityCode}`; - return ( + return ( this.handleRowHover(event)} - // onMouseLeave={(event) => this.handleRowHover(event)} - onTouchStart={(event) => this.handleRowHover(event)} + className="table--summary-row" + // onMouseMove={(event) => this.handleRowHover(event)} + // onMouseLeave={(event) => this.handleRowHover(event)} + onTouchStart={(event) => handleRowHover(event)} > - {this.props.signal ? ( - - - + {signal ? ( + + + ) : null} - // this.props.handleEntityClick( - // this.props.data.entityType, - // this.props.data.entityCode - // ) - // } + className="table__cell-link" + to={linkPath} + // onClick={() => + // this.props.handleEntityClick( + // this.props.data.entityType, + // this.props.data.entityCode + // ) + // } > - {this.props.data.name} + {data.name} - {this.props.entityType === "asn" ? ( - - {this.props.data.ipCount} - + {entityType === "asn" ? ( + + {data.ipCount} + ) : null} this.handleRowScoreDisplay(event)} - onMouseEnter={() => this.showScoreTooltipHover()} - onMouseLeave={() => this.hideScoreTooltipHover()} - style={{ backgroundColor: this.props.data.color }} + className="table__cell--overallScore td--center" + onTouchStart={() => handleRowScoreDisplay(event)} + onMouseEnter={() => showScoreTooltipHover()} + onMouseLeave={() => hideScoreTooltipHover()} + style={{ backgroundColor: data.color }} >
- {this.state.pingSlash24ScoreAvailable ? ( -
-   -
+ {pingSlash24ScoreAvailable ? ( +
+   +
) : ( -
-   -
+
+   +
)} - {this.state.bgpScoreAvailable ? ( -
-   -
+ {bgpScoreAvailable ? ( +
+   +
) : ( -
-   -
+
+   +
)} - {this.state.meritNtScoreAvailable ? ( -
-   -
+ {meritNtScoreAvailable ? ( +
+   +
) : ( -
-   -
+
+   +
)}
{overallScore} ⋮ - - - - + + + + - - - - - {this.handlePopulateScores(this.props.data.scores)} + + + + + {handlePopulateScores(data.scores)}
{dataSourceHeading}{scoreHeading}
{dataSourceHeading}{scoreHeading}
- Overall - - {overallScore} -
+ Overall + + {overallScore} +
- ); - } + ); } export default SummaryTableRow; diff --git a/assets/js/Ioda/components/table/Table.js b/assets/js/Ioda/components/table/Table.js index aa44a37..e3f898a 100644 --- a/assets/js/Ioda/components/table/Table.js +++ b/assets/js/Ioda/components/table/Table.js @@ -35,7 +35,7 @@ * MODIFICATIONS. */ -import React, { Component } from 'react'; +import React, {Component, useEffect, useState} from 'react'; import T from 'i18n-react'; import {generateKeys, humanizeNumber} from "../../utils"; import SummaryTableRow from "./SummaryTableRow"; @@ -46,150 +46,144 @@ import iconSortUnsorted from 'images/icons/icon-sortUnsort.png'; import iconCancel from 'images/icons/icon-cancel.png'; import iconCheckmark from 'images/icons/icon-checkmark.png'; -class Table extends Component { - constructor(props) { - super(props); - this.state = { - eventData: [], - alertData: [], - summaryData: [], - signalData: [], - data: [], - sortedColumn: { - name: "", - position: "", - arrow: "" - } - }; - this.alertHeaders = { - level: "", - dateStamp: T.translate("table.alertHeaders.timeStamp"), - dataSource: T.translate("table.alertHeaders.dataSource"), - actualValue: T.translate("table.alertHeaders.actualValue"), - baselineValue: T.translate("table.alertHeaders.baselineValue") - }; - this.eventHeaders = { - fromDate: T.translate("table.eventHeaders.fromDate"), - untilDate: T.translate("table.eventHeaders.untilDate"), - duration: T.translate("table.eventHeaders.duration"), - score: T.translate("table.eventHeaders.score") - }; - this.summaryHeaders = { - name: T.translate("table.summaryHeaders.name"), - score: T.translate("table.summaryHeaders.score") - }; - this.summaryHeadersAsn = { - name: T.translate("table.summaryHeaders.name"), - ipCount: T.translate("table.summaryHeaders.ipCount"), - score: T.translate("table.summaryHeaders.score") - }; - this.signalHeaders = { - visibility: "", - name: T.translate("table.signalHeaders.nameRegion"), - score: T.translate("table.signalHeaders.score") - }; - this.signalHeadersAsn = { - visibility: "", - name: this.props.entityType === "asn" ? T.translate("table.signalHeaders.nameAsn") : T.translate("table.signalHeaders.nameCountry"), - ipCount: T.translate("table.signalHeaders.ipCount"), - score: T.translate("table.signalHeaders.score") - }; - } - setTableData = (data) => { - if (this.props.type === "alert") { +const Table = (props) => { + + const{ + type, + entityType, + handleEntityClick, + toggleEntityVisibilityInHtsViz, + handleCheckboxEventLoading, + totalCount + } = props; + + const [eventData, setEventData] = useState([]); + const [alertData, setAlertData] = useState([]); + const [summaryData, setSummaryData] = useState([]); + const [signalData, setSignalData] = useState([]); + const [data, setData] = useState([]); + const [sortedColumn, setSortedColumn] = useState( { + name: "", + position: "", + arrow: "" + }); + + const alertHeaders = { + level: "", + dateStamp: T.translate("table.alertHeaders.timeStamp"), + dataSource: T.translate("table.alertHeaders.dataSource"), + actualValue: T.translate("table.alertHeaders.actualValue"), + baselineValue: T.translate("table.alertHeaders.baselineValue") + }; + const eventHeaders = { + fromDate: T.translate("table.eventHeaders.fromDate"), + untilDate: T.translate("table.eventHeaders.untilDate"), + duration: T.translate("table.eventHeaders.duration"), + score: T.translate("table.eventHeaders.score") + }; + const summaryHeaders = { + name: T.translate("table.summaryHeaders.name"), + score: T.translate("table.summaryHeaders.score") + }; + const summaryHeadersAsn = { + name: T.translate("table.summaryHeaders.name"), + ipCount: T.translate("table.summaryHeaders.ipCount"), + score: T.translate("table.summaryHeaders.score") + }; + const signalHeaders = { + visibility: "", + name: T.translate("table.signalHeaders.nameRegion"), + score: T.translate("table.signalHeaders.score") + }; + const signalHeadersAsn = { + visibility: "", + name: this.props.entityType === "asn" ? T.translate("table.signalHeaders.nameAsn") : T.translate("table.signalHeaders.nameCountry"), + ipCount: T.translate("table.signalHeaders.ipCount"), + score: T.translate("table.signalHeaders.score") + }; + + + const setTableData = (data) => { + if (type === "alert") { // Alert Table default sort console.log(data) - this.setState({ - alertData: data, - sortedColumn: { - name: "dateStamp", - position: "desc", - arrow: iconSortDesc - } - }); + setAlertData(data); + setSortedColumn({ + name: "dateStamp", + position: "desc", + arrow: iconSortDesc + }) } - if (this.props.type === "event") { + if (type === "event") { // Event Table default sort - this.setState({ - eventData: data, - sortedColumn: { + setAlertData(data); + setSortedColumn({ name: "fromDate", position: "desc", arrow: iconSortDesc } - }); + ); } - if (this.props.type === "summary") { + if (type === "summary") { // Summary Table default sort - this.setState({ - summaryData: data, - sortedColumn: { - name: "score", - position: "desc", - arrow: iconSortDesc - } - }); + setSummaryData(data); + setSortedColumn({ + name: "score", + position: "desc", + arrow: iconSortDesc + }) + } - if (this.props.type === "signal") { + if (type === "signal") { // Signal Table default sort - this.setState({ - signalData: data, - sortedColumn: { - name: "score", - position: "desc", - arrow: iconSortDesc - } - }); - } - } + setSignalData(data); + setSortedColumn({ + name: "score", + position: "desc", + arrow: iconSortDesc + }) - componentDidMount() { - this.setTableData(this.props.data); + } } - componentDidUpdate(prevProps) { - if (this.props.data !== prevProps.data) { - this.setTableData(this.props.data); - } + useEffect(() => { + setTableData(data); + }, [data]); + useEffect(() => { // Check for getting relatedTo Outage Summary data on Entity Page to populate - if (this.props.type === "summary" && this.state.summaryData !== this.props.data) { - // Summary Table default sort - this.setState({ - summaryData: this.props.data, - sortedColumn: { - name: "score", - position: "desc", - arrow: iconSortDesc - } - }); + if(type === "summary" && summaryData !== data) { + setSummaryData(data); + setSortedColumn({ + name: "score", + position: "desc", + arrow: iconSortDesc + }) } - // Check for getting Map RawSignalsModal Signal Table data on Entity Page to populate - if (this.props.type === "signal" && this.state.signalData !== this.props.data) { + + if (type === "signal" && signalData !== data) { // Signal Table default sort - this.setState({ - signalData: this.props.data, - sortedColumn: { - name: "score", - position: "desc", - arrow: iconSortDesc - } - }); + setSignalData(data); + setSortedColumn({ + name: "score", + position: "desc", + arrow: iconSortDesc + }) } - } + }, [data]); - compare(key, order) { + const compare = (key, order) => { return function innerSort(a, b) { if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) { // property doesn't exist on either object return 0; } - + let varA = (typeof a[key] === 'string') ? a[key].toUpperCase() : a[key]; let varB = (typeof b[key] === 'string') @@ -212,7 +206,7 @@ class Table extends Component { }; } - static parseHumanReadableFloat(value){ + const parseHumanReadableFloat = (value) => { let parsedValue=parseFloat(value.replace(/[A-Za-z]/g, '')); if(value.includes("k")){ parsedValue=parsedValue*1000; @@ -224,31 +218,31 @@ class Table extends Component { return parsedValue; } - sortByColumn(event) { - let { type } = this.props; + + const sortByColumn = (event) => { let colToSort, position, data; // get key from respective object based on header value clicked on if (type === "alert") { if (event.target.value) { - colToSort = Object.keys(this.alertHeaders).find(key => this.alertHeaders[key] === event.target.value); + colToSort = Object.keys(alertHeaders).find(key => alertHeaders[key] === event.target.value); } else { - colToSort = Object.keys(this.alertHeaders).find(key => this.alertHeaders[key] === event.target.parentNode.value); + colToSort = Object.keys(alertHeaders).find(key => alertHeaders[key] === event.target.parentNode.value); } - position = this.alertHeaders[colToSort]; + position = alertHeaders[colToSort]; } if (type === "event") { if (event.target.value) { - colToSort = Object.keys(this.eventHeaders).find(key => this.eventHeaders[key] === event.target.value); + colToSort = Object.keys(eventHeaders).find(key => eventHeaders[key] === event.target.value); } else { - colToSort = Object.keys(this.eventHeaders).find(key => this.eventHeaders[key] === event.target.parentNode.value); + colToSort = Object.keys(eventHeaders).find(key => eventHeaders[key] === event.target.parentNode.value); } - position = this.eventHeaders[colToSort]; + position = eventHeaders[colToSort]; } if (type === "summary") { - if (this.props.entityType === 'asn') { + if (entityType === 'asn') { if (event.target.value) { colToSort = Object.keys(this.summaryHeadersAsn).find(key => this.summaryHeadersAsn[key] === event.target.value); } else { @@ -266,276 +260,263 @@ class Table extends Component { } if (type === "signal") { - if (this.props.entityType === 'asn') { + if (entityType === 'asn') { if (event.target.value) { - colToSort = Object.keys(this.signalHeadersAsn).find(key => this.signalHeadersAsn[key] === event.target.value); + colToSort = Object.keys(signalHeadersAsn).find(key => signalHeadersAsn[key] === event.target.value); } else { - colToSort = Object.keys(this.signalHeadersAsn).find(key => this.signalHeadersAsn[key] === event.target.parentNode.value); + colToSort = Object.keys(signalHeadersAsn).find(key => signalHeadersAsn[key] === event.target.parentNode.value); } - position = this.signalHeadersAsn[colToSort]; + position = signalHeadersAsn[colToSort]; } else { if (event.target.value) { - colToSort = Object.keys(this.signalHeaders).find(key => this.signalHeaders[key] === event.target.value); + colToSort = Object.keys(signalHeaders).find(key => signalHeaders[key] === event.target.value); } else { - colToSort = Object.keys(this.signalHeaders).find(key => this.signalHeaders[key] === event.target.parentNode.value); + colToSort = Object.keys(signalHeaders).find(key => signalHeaders[key] === event.target.parentNode.value); } - position = this.signalHeaders[colToSort]; + position = signalHeaders[colToSort]; } } // Update state of table to sort rows and add icon if (event.target.value) { - this.setState( { - sortedColumn: { - name: colToSort, - position: event.target.value !== position - ? "asc" - : this.state.sortedColumn.position === "asc" - ? "desc" - : "asc", - arrow: event.target.value !== position - ? iconSortUnsorted - : this.state.sortedColumn.position === "asc" - ? iconSortDesc - : iconSortAsc - } - }, () => { - data = this.props.data.sort(this.compare(colToSort, this.state.sortedColumn.position)); - this.setState({ - data: data - }) + setSortedColumn({ + name: colToSort, + position: event.target.value !== position + ? "asc" + : sortedColumn.position === "asc" + ? "desc" + : "asc", + arrow: event.target.value !== position + ? iconSortUnsorted + : sortedColumn.position === "asc" + ? iconSortDesc + : iconSortAsc }) + data = data.sort(compare(colToSort, sortedColumn.position)); + setData(data); } else { - this.setState( { - sortedColumn: { - name: colToSort, - position: event.target.parentNode.value !== position - ? "asc" - : this.state.sortedColumn.position === "asc" - ? "desc" - : "asc", - arrow: event.target.parentNode.value !== position - ? iconSortUnsorted - : this.state.sortedColumn.position === "asc" - ? iconSortDesc - : iconSortAsc - } - }, () => { - data = this.props.data.sort(this.compare(colToSort, this.state.sortedColumn.position)); - this.setState({ - data: data - }) + setSortedColumn({ + name: colToSort, + position: event.target.parentNode.value !== position + ? "asc" + : this.state.sortedColumn.position === "asc" + ? "desc" + : "asc", + arrow: event.target.parentNode.value !== position + ? iconSortUnsorted + : this.state.sortedColumn.position === "asc" + ? iconSortDesc + : iconSortAsc }) + data = this.props.data.sort(this.compare(colToSort, this.state.sortedColumn.position)); + setData(data); } } - render() { - const { type, entityType } = this.props; - - const unsortedIconAltText = T.translate("table.unsortedIconAltText"); - const displayCountShowing = T.translate("table.displayCountShowing"); - const displayCountOf = T.translate("table.displayCountOf"); - const displayCountEntries = T.translate("table.displayCountEntries"); - const eventNoOutagesMessage = T.translate("table.eventNoOutagesMessage"); - const alertNoOutagesMessage = T.translate("table.alertNoOutagesMessage"); - const summaryNoOutagesMessage = T.translate("table.summaryNoOutagesMessage"); - const signalNoOutagesMessage = T.translate("table.signalNoOutagesMessage"); - - return ( -
- - - + const unsortedIconAltText = String(T.translate("table.unsortedIconAltText")); + const displayCountShowing = String(T.translate("table.displayCountShowing")); + const displayCountOf = String(T.translate("table.displayCountOf")); + const displayCountEntries = String(T.translate("table.displayCountEntries")); + const eventNoOutagesMessage = String(T.translate("table.eventNoOutagesMessage")); + const alertNoOutagesMessage = String(T.translate("table.alertNoOutagesMessage")); + const summaryNoOutagesMessage = String(T.translate("table.summaryNoOutagesMessage")); + const signalNoOutagesMessage = String(T.translate("table.signalNoOutagesMessage")); + + return ( +
+
+ + { Object.values(type === "alert" - ? this.alertHeaders + ? alertHeaders : type === "event" - ? this.eventHeaders + ? eventHeaders : type === "summary" && entityType === 'asn' - ? this.summaryHeadersAsn + ? summaryHeadersAsn : type === "summary" && entityType !== 'asn' - ? this.summaryHeaders + ? summaryHeaders : type === "signal" && entityType === 'asn' - ? this.signalHeadersAsn + ? signalHeadersAsn : type === 'signal' && entityType !== 'asn' - ? this.signalHeaders + ? signalHeaders : null ).map(header => { return ; }) } - - + + - { - this.state.eventData.length > 0 || this.state.alertData.length > 0 || - type === "summary" && this.props.data.length > 0 || - type === "signal" && this.props.data.length > 0 - ? 10 ? {overflowY: "scroll"} : {overflowY: "inherit"}}> - { - this.state.alertData && this.state.alertData.map(alert => { - return - 10 ? {overflowY: "scroll"} : {overflowY: "inherit"}}> + { + alertData && alertData.map(alert => { + return + - - + + - - - - }) - } - { - this.state.eventData && this.state.eventData.map(event => { - return - - - - - - }) - } - { - type === "summary" && this.props.data.map(summary => { - return this.props.handleEntityClick(entityType, entityCode)} - /> - }) - } - { - type === "signal" && this.props.data.map(signal => { - return this.props.toggleEntityVisibilityInHtsViz(event)} - handleEntityClick={(entityType, entityCode) => this.props.handleEntityClick(entityType, entityCode)} - handleCheckboxEventLoading={(item) => this.props.handleCheckboxEventLoading(item)} - /> - - }) - } - + alert.dataSource === "ucsd-nt" ? T.translate("table.alertLabels.darknet") : + alert.dataSource === "merit-nt" ? T.translate("table.alertLabels.merit") : null + } + + + + + }) + } + { + eventData && eventData.map(event => { + return + + + + + + }) + } + { + type === "summary" && data.map(summary => { + return handleEntityClick(entityType, entityCode)} + /> + }) + } + { + type === "signal" && data.map(signal => { + return toggleEntityVisibilityInHtsViz(event)} + handleEntityClick={(entityType, entityCode) => handleEntityClick(entityType, entityCode)} + handleCheckboxEventLoading={(item) => handleCheckboxEventLoading(item)} + /> + + }) + } + : - { - type === "event" ? + { + type === "event" ? : type === 'alert' ? - : type === "summary" ? - : type === "signal" ? - : null - } + : type === "summary" ? + : type === "signal" ? + : null + } - } -
-
0 || alertData.length > 0 || + type === "summary" && data.length > 0 || + type === "signal" && data.length > 0 + ?
- { - alert.level === "normal" - ? ✗ - : ✓ - } - -

{alert.date.month} {alert.date.day}, {alert.date.year}

-

{alert.date.hours}:{alert.date.minutes} {alert.date.meridian}

- 		- { - alert.dataSource === "ping-slash24" ? T.translate("table.alertLabels.activeProbing") : - alert.dataSource === "gtr" ? T.translate("table.alertLabels.gtr") : + }> + { + alert.level === "normal" + ? ✗ + : ✓ + } + +

{alert.date.month} {alert.date.day}, {alert.date.year}

+

{alert.date.hours}:{alert.date.minutes} {alert.date.meridian}

+ 		+ { + alert.dataSource === "ping-slash24" ? T.translate("table.alertLabels.activeProbing") : + alert.dataSource === "gtr" ? T.translate("table.alertLabels.gtr") : alert.dataSource === "bgp" ? T.translate("table.alertLabels.bgp") : - alert.dataSource === "ucsd-nt" ? T.translate("table.alertLabels.darknet") : - alert.dataSource === "merit-nt" ? T.translate("table.alertLabels.merit") : null - } - - {alert.actualValue} - - {alert.baselineValue} -
-

{event.from.month} {event.from.day}, {event.from.year}

-

{event.from.hours}:{event.from.minutes} {event.from.meridian}

- 		-

{event.until.month} {event.until.day}, {event.until.year}

-

{event.until.hours}:{event.until.minutes} {event.until.meridian}

- 		- {event.duration} - - {event.score} -
+ {alert.actualValue} + + {alert.baselineValue} +
+

{event.from.month} {event.from.day}, {event.from.year}

+

{event.from.hours}:{event.from.minutes} {event.from.meridian}

+ 		+

{event.until.month} {event.until.day}, {event.until.year}

+

{event.until.hours}:{event.until.minutes} {event.until.meridian}

+ 		+ {event.duration} + + {event.score} +
{eventNoOutagesMessage}
{eventNoOutagesMessage}
{alertNoOutagesMessage}
{summaryNoOutagesMessage}
{signalNoOutagesMessage}
{summaryNoOutagesMessage}
{signalNoOutagesMessage}
- { - this.state.eventData.length > 0 || this.state.alertData.length > 0 || - type === "summary" && this.props.data.length > 0 || - type === "signal" && this.props.data.length > 0 - ?
-

{displayCountShowing} {this.props.totalCount < 300 ? this.props.totalCount : this.props.data.length} {displayCountOf} {this.props.totalCount} {displayCountEntries}

- { - type === "summary" - ?
- - - -
- : null - - } -
- : null } + + { + eventData.length > 0 || alertData.length > 0 || + type === "summary" && data.length > 0 || + type === "signal" && data.length > 0 + ?
+

{displayCountShowing} {totalCount < 300 ? totalCount : data.length} {displayCountOf} {totalCount} {displayCountEntries}

+ { + type === "summary" + ?
+ + + +
+ : null + + } +
+ : null + } + +
+ ) - - ) - } } export default Table;