Fix bugs at pie chart and datatable

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",

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 (

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])
                   }
                 }

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")
                   }
                 }

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
       }))

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
       }))

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(
         <ul>
@@ -161,6 +162,10 @@ class Datatable extends Component {
 
         </ul>
       )
+    } else if (names && typeof names === 'object' && names.title && names.link) {
+      return renderToString(
+        <a href={names.link} title={names.title}>{names.title}</a>
+      );
     } else return (
       names
     )