Added saved metrics from application context to component

The rows of the data grid were being imporperly created from
the full list of all health metrics which resulted in repeat
rows. Refactored the rows function to take the values directly
from the metrics model

Author: mdtagg

app/components/TransferColumns.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useContext, useEffect } from 'react';
+import { ApplicationContext } from '../context/ApplicationContext';
 import { useParams } from 'react-router-dom';
 import { QueryContext } from '../context/QueryContext';
 import { HealthContext } from '../context/HealthContext';
@@ -32,6 +33,8 @@ const TransferColumns = React.memo(() => {
   const { mode } = useContext(DashboardContext.DashboardContext);
   const [searchTerm, setSearchTerm] = useState<string>('');
 
+  const { savedMetrics } = useContext(ApplicationContext)
+
   const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
 
   useEffect(() => {
@@ -104,7 +107,7 @@ const TransferColumns = React.memo(() => {
         }
       }
     } else {
-      // iterate throught the healthData object to populate the `Metrics Query` tab with metrics options
+      // iterate throughout the healthData object to populate the `Metrics Query` tab with metrics options
       // The pool array wants an object with a specific format in order to populate the selection table
       for (const service in dataObject) {
         const categoryObjects = dataObject[service];
@@ -169,22 +172,31 @@ const TransferColumns = React.memo(() => {
     },
   ];
 
-  // makes the rows needed for the selection grid
-  const rows: any[] = [];
-  metricsPool.forEach((el, index) => {
-    const row = {
-      id: index,
-      tag: el.tag,
-      title: el.title.split(' | ')[1].replace(/.*\/.*\//g, ''),
-    }; // gets rid of the full path
-    rows.push(row);
-  });
+  const rows:any[] = []
+  let id = 0
+  for(let savedMetric of Object.keys(savedMetrics)) {
+   
+    const { metric,category } = savedMetrics[savedMetric]
+    rows.push({
+      id:id++,
+      tag:category,
+      title:metric
+    })
+  }
 
   // makes the Printed list of 'currently selected rows' on the page using targetKeys array
   const selectedRows: any[] = [];
   targetKeys.forEach(el => {
     selectedRows.push(
-      <li style={{ marginLeft: '30px', marginTop: '5px', color: currentMode.color }}>{el}</li>
+      <li 
+        style={{ 
+          marginLeft: '30px', 
+          marginTop: '5px', 
+          color: currentMode.color 
+          }}
+      >
+        {el}
+      </li>
     );
   });
 
@@ -220,11 +232,17 @@ const TransferColumns = React.memo(() => {
               });
               setTargetKeys(metrics);
             }}
-          />
+            />
 
         </div>
         {selectedRows.length > 0 && (
-          <h3 style={{ marginTop: '20px', color: currentMode.color }}>Selected Rows:</h3>
+          <h3 style={{ 
+            marginTop: '20px', 
+            color: currentMode.color 
+          }}
+          >
+            Selected Rows:
+          </h3>
         )}
         <ol id="selectedRows">{selectedRows}</ol>
       </div>