diff --git a/javascript/package.json b/javascript/package.json index 224a9bc..820861a 100644 --- a/javascript/package.json +++ b/javascript/package.json @@ -60,7 +60,7 @@ "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "*" }, - "homepage": ".", + "homepage": "/metrics/", "scripts": { "start": "react-scripts start", "build": "react-scripts build", diff --git a/javascript/src/components/Common/utils.js b/javascript/src/components/Common/utils.js index a0cc8a5..bf903f2 100644 --- a/javascript/src/components/Common/utils.js +++ b/javascript/src/components/Common/utils.js @@ -141,20 +141,10 @@ export function calculateMinMax(dataArray) { return [min, max] } -export const createAnchorElement = (title, link) => { - const anchor = document.createElement('a'); - const linkText = document.createTextNode(title); - anchor.appendChild(linkText); - anchor.title = title; - anchor.href = link; - - // FIXME: - // Trying to pass an object directly to the datatable will fail. We need to - // get the HTML string from the element. This causes inconsistent behavior - // which we need to solve. For now we leave it as is. - return anchor.outerHTML; - // return anchor; -} +export const createAnchorElement = (title, link) => ({ + title, + link, +}); export const axisChartOptions = (title, hAxisFormat, hAxisTicks) => { return ( diff --git a/javascript/src/components/Dashboard/loginIdpPieChart.js b/javascript/src/components/Dashboard/loginIdpPieChart.js index 4fe1040..613334e 100644 --- a/javascript/src/components/Dashboard/loginIdpPieChart.js +++ b/javascript/src/components/Dashboard/loginIdpPieChart.js @@ -12,7 +12,7 @@ import {getLoginsPerIdp} from "../../utils/queries"; import {optionsPieChart} from "../../utils/helpers/enums"; import {convertDateByGroup, formatStartDate, formatEndDate} from "../Common/utils"; -var idpsArray = []; + const LoginIdpPieChart = ({ spId, tenenvId, @@ -27,9 +27,10 @@ const LoginIdpPieChart = ({ today.setDate(today.getDate() - 1); formatEndDate(today) - let idpsChartArray = [["Identity Provider", "Logins"], ['', 0]]; + let idpsChartArray = [["Identity Provider", "Logins"]]; + let idpsArray = []; const [idps, setIdps] = useState(idpsChartArray); - + const [idpsAr, setIdpsArray] = useState(idpsArray); const params = { params: { 'tenenv_id': tenenvId, @@ -57,6 +58,7 @@ const LoginIdpPieChart = ({ idpsArray.push([element.id, element.name, element.identifier]) }) setIdps(idpsChartArray) + setIdpsArray(idpsArray) }) }, [uniqueLogins]) @@ -91,8 +93,8 @@ const LoginIdpPieChart = ({ const chart = chartWrapper.getChart(); if (cookies.userinfo != undefined - && !!permissions?.actions?.identity_providers?.['view']) { - google.visualization.events.addListener(chart, 'click', selectHandler); + && !!permissions?.actions?.identity_providers?.['view']) { + google.visualization.events.addListener(chart, 'click', selectHandler); } google.visualization.events.addListener(chart, 'onmouseover', showTooltip); @@ -112,9 +114,9 @@ const LoginIdpPieChart = ({ function selectHandler() { - var selection = chart.getSelection(); + var selection = chart.getSelection(); if (selection.length) { - var identifier = idpsArray[selection[0].row]; + var identifier = idpsAr[selection[0].row]; goToSpecificProviderHandler(identifier[0]) } } diff --git a/javascript/src/components/Dashboard/loginSpPieChart.js b/javascript/src/components/Dashboard/loginSpPieChart.js index cfed697..48c3c8b 100644 --- a/javascript/src/components/Dashboard/loginSpPieChart.js +++ b/javascript/src/components/Dashboard/loginSpPieChart.js @@ -12,7 +12,6 @@ import {useQuery} from "react-query"; import {optionsPieChart} from "../../utils/helpers/enums"; import {convertDateByGroup, formatStartDate, formatEndDate} from "../Common/utils"; -var spsArray = []; const LoginSpPieChart = ({ idpId, @@ -21,7 +20,9 @@ const LoginSpPieChart = ({ goToSpecificProviderHandler }) => { let spsChartArray = [["Service Provider", "Logins"]]; + let spsArray = []; const [sps, setSps] = useState(spsChartArray); + const [spsAr, setSpsArray] = useState(spsArray); const oneYearAgo = new Date(); oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1); formatStartDate(oneYearAgo) @@ -59,6 +60,7 @@ const LoginSpPieChart = ({ spsArray.push([element.id, element.name, element.identifier]) }) setSps(spsChartArray) + setSpsArray(spsArray) }) }, [uniqueLogins]) @@ -112,7 +114,7 @@ const LoginSpPieChart = ({ function selectHandler() { var selection = chart.getSelection(); if (selection.length) { - var identifier = spsArray[selection[0].row]; + var identifier = spsAr[selection[0].row]; goToSpecificProviderHandler(identifier[0], "sp") } } diff --git a/javascript/src/components/Idps/idpsDataTable.js b/javascript/src/components/Idps/idpsDataTable.js index c2bc8ed..83e4cb6 100644 --- a/javascript/src/components/Idps/idpsDataTable.js +++ b/javascript/src/components/Idps/idpsDataTable.js @@ -94,7 +94,7 @@ const IdpsDataTable = ({ && loginsPerIpd.isFetched && loginsPerIpd.isSuccess && loginsPerIpd?.data?.map(idp => ({ - "Identity Provider Name": (cookies.userinfo == undefined && !!permissions?.actions?.identity_providers?.['view']) ? idp.name : createAnchorElement(idp.name, `/metrics/identity-providers/${idp.id}`), + "Identity Provider Name": (cookies.userinfo == undefined && !!permissions?.actions?.identity_providers?.['view']) ? idp.name : createAnchorElement(idp.name != '' ? idp.name : idp.entityid, `/metrics/identity-providers/${idp.id}`), "Identity Provider Identifier": idp.entityid, "Number of Logins": idp.count })) diff --git a/javascript/src/components/Sps/spsDataTable.js b/javascript/src/components/Sps/spsDataTable.js index b055335..1d2cf15 100644 --- a/javascript/src/components/Sps/spsDataTable.js +++ b/javascript/src/components/Sps/spsDataTable.js @@ -91,7 +91,7 @@ const SpsDataTable = ({ && !loginsPerSp.isFetching && loginsPerSp.isSuccess && loginsPerSp?.data?.map(sp => ({ - "Service Provider Name": (cookies.userinfo == undefined && !!permissions?.actions?.service_providers?.['view']) ? sp.name : createAnchorElement(sp.name, `/metrics/services/${sp.id}`), + "Service Provider Name": (cookies.userinfo == undefined && !!permissions?.actions?.service_providers?.['view']) ? sp.name : createAnchorElement(sp.name != '' ? sp.name : sp.identifier, `/metrics/services/${sp.id}`), "Service Provider Identifier": sp.identifier, "Number of Logins": sp.count })) diff --git a/javascript/src/components/datatable.js b/javascript/src/components/datatable.js index c32cbb4..2440272 100644 --- a/javascript/src/components/datatable.js +++ b/javascript/src/components/datatable.js @@ -150,6 +150,7 @@ class Datatable extends Component { } listNames = (names, key) => { + //console.log("listNames called with:", names.title); if (this.props.columnSep && key == this.props.columnSep && typeof names === 'string') { return renderToString( ) + } else if (names && typeof names === 'object' && names.title && names.link) { + return renderToString( + {names.title} + ); } else return ( names )