Merge branch 'dev' into Lucie/code-review

Author: Lucienne Seidler

app/charts/HealthChart.tsx

@@ -39,28 +39,34 @@ const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
   };
 
   // pulls the current service names to be shown in the graph title from chartData
-  const serviceNamesAsString = (chartData: object): string => {
+  const serviceNamesAsString = (chartDataObject: object): string => {
     let serviceNameString = '';
-    for (const serviceName in chartData) {
+    for (const serviceName in chartDataObject) {
       serviceNameString += `${serviceName} | `;
     }
     return serviceNameString;
   };
 
   // generates an array of plotly data objects to be passed into our plotly chart's data prop
-  const generatePlotlyDataObjects = (chartData: object): object[] => {
+  const generatePlotlyDataObjects = (chartDataObj: object): object[] => {
     const arrayOfPlotlyDataObjects: PlotlyData[] = [];
     // iterate through the chartData
-    for (const serviceName in chartData) {
+    for (const serviceName in chartDataObj) {
+      console.log('SERVICENAME: ', serviceName);
       // define the metrics for this service
-      const metrics = chartData[serviceName];
+      const metrics = chartDataObj[serviceName];
+      console.log('METRICS: ', metrics);
       // loop through the list of metrics for the current service
       for (const metricName in metrics) {
+        console.log('METRICNAME: ', metricName);
         // define the value and time arrays; allow data to be reassignable in case we need to convert the bytes data into megabytes
         let dataArray = metrics[metricName].value;
+        console.log('DATAARRAY: ', dataArray);
         const timeArray = metrics[metricName].time;
+        console.log('TIMEARRAY: ', timeArray);
         // specifically for `Megabyte` types, convert the original data of bytes into a value of megabytes before graphing
-        if (dataType === 'Memory in Megabytes' || 'Cache in Megabytes') {
+        if (dataType === 'Memory in Megabytes' || dataType === 'Cache in Megabytes') {
+          console.log('DATATYPE: ', dataType);
           dataArray = dataArray.map(value => (value / 1000000).toFixed(2));
         }
         // create the plotly object
@@ -74,6 +80,7 @@ const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
             colors: ['#fc4039', '#4b54ea', '#32b44f', '#3788fc', '#9c27b0', '#febc2c'],
           },
         };
+        console.log('PLOTLYDATAOBJECT: ', plotlyDataObject)
         // push the dataObject into the arrayOfPlotlyDataObjects
         arrayOfPlotlyDataObjects.push(plotlyDataObject);
       }

app/containers/HealthContainer.tsx

@@ -133,7 +133,7 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
         typeGroupedObject[metricType][serviceName][metric] = metrics[metric];
       }
     }
-    console.log('typeGroupedObject: ', typeGroupedObject);
+    
     return typeGroupedObject;
   };
 

electron/routes/dataHelpers.js renamed to electron/routes/dataHelpers.ts

@@ -1,9 +1,13 @@
 import KafkaModel from '../models/KafkaModel';
 import HealthModelFunc from '../models/HealthModel';
+import { Pool } from 'pg';
 
-const fetchData = {};
+interface fetchData {
+  mongoFetch: (serviceName: string) => Promise<Array<{ [key: string]: any[] }>>;
+  postgresFetch: (serviceName: string, pool: Pool) => Promise<Array<{ [key: string]: any[] }>>;
+}
 
-const aggregator = [
+const aggregator: any[] = [
   {
     $setWindowFields: {
       partitionBy: '$metric',
@@ -24,10 +28,9 @@ const aggregator = [
   },
 ];
 
-// healthModelFunc creates a model based on the serviceName
-// Create an aggregator based on the aggregator variable
-// return the result
-fetchData.mongoFetch = async function (serviceName) {
+const mongoFetch = async (
+  serviceName: string
+): Promise<Array<{ [key: string]: any[] }> | undefined> => {
   try {
     const testModel = HealthModelFunc(serviceName);
     let result = await testModel.aggregate(aggregator);
@@ -38,17 +41,18 @@ fetchData.mongoFetch = async function (serviceName) {
   }
 };
 
-fetchData.postgresFetch = async function (serviceName, pool) {
+const postgresFetch = async (
+  serviceName: string,
+  pool: Pool
+): Promise<Array<{ [key: string]: any[] }> | undefined> => {
   const query = `
-    WITH
-      temp
-    AS (
+    WITH temp AS (
         SELECT
           metric, value, category, time,
           row_number() OVER(PARTITION BY metric ORDER BY time DESC) AS rowNumber
         FROM
           ${serviceName}
-      )
+    )
     SELECT
       metric, value, category, time
     FROM
@@ -57,12 +61,19 @@ fetchData.postgresFetch = async function (serviceName, pool) {
       rowNumber <= 50
   ;`;
 
-  let result = await pool.query(query);
-  // console.log('result.rows in dataHelpers postgresFetch:', JSON.stringify(result.rows));
-  result = result.rows;
-  result = [{ [serviceName]: result }];
-  // console.log('result with servicename in dataHelpers postgresFetch:', JSON.stringify(result));
-  return result;
+  try {
+    let result = await pool.query(query);
+    result = result.rows;
+    result = [{ [serviceName]: result }];
+    return result;
+  } catch (error) {
+    console.log('Query error in postgresFetch(): ', error);
+  }
+};
+
+const fetchData = {
+  mongoFetch,
+  postgresFetch,
 };
 
 export { fetchData };