Merge pull request Chronos2-0#4 from Umius-Brian/graph1

Graph1

.gitignore

@@ -2,4 +2,4 @@ node_modules
 .eslintrc.js
 package-lock.json
 .DS_Store
-user/settings.json
+user/settings.json

Chronos Slide Deck Notes.rtf

@@ -0,0 +1,110 @@
+{\rtf1\ansi\ansicpg1252\cocoartf1561\cocoasubrtf610
+{\fonttbl\f0\fnil\fcharset0 Georgia;}
+{\colortbl;\red255\green255\blue255;}
+{\*\expandedcolortbl;;}
+\margl1011\margr1011\margb1445\margt1011\vieww14300\viewh16300\viewkind1\viewscale113
+\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\fi722\sl288\slmult1\pardirnatural\partightenfactor0
+
+\f0\b\fs24 \cf0 about Chronos
+\b0 \
+- a microservice network monitoring tool\
+- designed to meet the needs of companies and developers who are breaking down their monolithic system architectures into decoupled distributed services, an system design known as microservices. Microservices applications are deployed as a family of independent services, each with a specific function to perform. When you break down a traditional monolithic system into manageable sections, it\'92s not always an easy task. You still need the individual pieces to communicate with one another and work in tandem and it requires more real-time attention and proactive monitoring. And at every one of these points of communication is a potential point of failure. Tracking an application requires correlating data from all these different services. So a common problem of breaking down a large-scale application can produce a series of problems, such as complex communication conflicts with the disparate teams that are now working on their own piece of the pie. \
+- Many companies utilize microservices, even though they are huge corporations such as Amazon, which turned to a microservice architecture back in 2001 and has their cloud monitoring tool called Amazon X-Ray, Twitter, and Netflix, which has their own in-house microservice tool.\
+\
+
+\b how it works\
+
+\b0 - install an NPM packages into each of your services, provide a database connection string, and you\'92re able to look at how your application is faring at any given moment.\
+- it uses a process called context propagation, where a wrapper is placed around incoming HTTP requests and when any subsequent requests are triggered, a correlation ID is given to that specific request as a request header. Thereby, that same correlation ID will connect multiple disparate endpoints of an application, and so if there\'92s any problems, a team of devs working on one area of an application can trace the origin of any issue, even if it originated from another team\'92s scope of purview. These endpoints converse with each other and return the operational status of a service and an indication of its ability to connect to downstream dependent services as an HTTP status code with JSON data, creating an aggregated web of responses that allows for better communication and accessibility.\
+- for example, Amazon does one-click ordering and they are the best at this. Let\'92s say, for instance, it usually takes 3ms to complete an order. If, for some reason it now takes 5ms, Amazon\'92s health monitoring tool would alert them to this issue, and because of the way context propagation works, they would be able to drill down their endpoints across various services and departments and directly assess the situation wherever it may occur in the application. \
+\
+
+\b what you get\
+
+\b0 - by accessing systems information API, you\'92re able to get data pertinent to the health of the server on which Chronos operates on. this is useful because if a service is running a bit behind or something unusual is going on, we\'92ll know exactly where it\'92s happening and whether or not this is a consistent problem or something unique.\
+- this data connects to your very own database, you can use either mongo or postgresql, which will keep your private data private.\
+- you\'92re able to see a dashboard display that provides data over time on distinctive metrics such as speed and latency tracking (intervals can be set from either every sec to every week), process monitoring, as well as memory usage. It should look like a graph display that records performance and health over time. It\'92ll provide much-needed context for an engineer to assess the situation handily. A key detail is that system performance is not binary; systems are not on or off. They can operate in degraded state that impacts performance, often leading to failure. A graph system provides context to a degraded state before total failure can occur.\
+- we plan on building a communication helper tool to send you an alert through Slack or email, alerts will be the first line of defense in assessing application health\
+- it helps you to develop, debug, and deliver code faster, which, in turn, makes for better productivity and more importantly, happiness in devs 
+\b \
+\
+\
+technology stack
+\b0 \
+\
+- 
+\i Docker\
+	
+\i0 - Provides containerization of microservice dummy app. We are also looking into orchestration tools such as Kubernetes to kill an instance of a service or raise an alert to Chronos in case of a failing health check. Containers and microservices go hand in hand by by sharing system resources, thereby making them leaner and reducing system overhead, and result in faster and easier scaling.\
+- 
+\i React Context API
+\i0 \
+	- Because our components are multiple and not directly connected, React\'92s Context API becomes very useful. It will help us cache queried information for use by functional React components associated with the visual display of information. It consists of three building blocks: Context Object refers to data shared across component boundaries, Context Provider allows us to use the Context API as a global state management tool by wrapping all child components that will eventually need access to the Context, and Context Consumer helps to update parent/child components based on some centralized state\
+	- Context Object: data shared across component boundaries\
+	- Context Provider: with Context created, we can now provide an object as a value  to all components that interact with it (reading data, triggering methods). It is provided in a component that wraps all of its child components that will eventually need access to the Context. If you need data to be available throughout your entire app, just provide Context in the root component, like the App component. Allows us to use Context API as a global state management tool.\
+	- Context Consumer: it is a wrapper component we can use to inject Context provided in some parent component into a child component. When data from our parent changes, the context object in our child component also changes and updates. This helps to update different components based on some centralized state\
+- 
+\i React Hooks
+\i0 \
+	- we can use Context and React Hooks in functional components\
+- 
+\i React Router
+\i0 \
+	\
+- 
+\i Redux
+\i0 \
+	- helps to manage the data you need to render user interface correctly, or state, of a React app\
+	- In React, we sometimes run into the issue, especially with complex apps, of passing props (which is data from a parent component) that we don\'92t necessarily have to handle. Any changes to an app\'92s state or component structure would require significant refactoring. We won\'92t go into too much detail\
+\
+-
+\i  Async Hooks\
+	
+\i0 - Node.js API will be used to persist the correlation ID across asynchronous callback functions so that a unique request can be traced back from wherever it was alerted.\
+- 
+\i Electron
+\i0 \
+	- an application used to render Chronos with full access to the Node environment\
+	- Slack is built on Electron\
+\
+-
+\i Node.js, Express, Charts.js, Spectron, Jest, \
+- infrastructure monitoring: \
+	- Prometheus\
+		
+\i0 - an open-sourced monitoring solution originally developed by SoundCloud. It is used to store and query data that describes actions over time. It will assist us in visualizing the time-series data and to provide dashboards. Often used with Grafana, something we\'92ll look into.\
+
+\i \
+	-Nagios\
+		
+\i0 - open-sourced, as well. Assists in continuous server monitoring, an automated approach essential for visibility into infrastructure and applications.\
+
+\i \
+- application monitoring: Jaeger\
+\
+
+\i0\b technical challenges\
+
+\b0 - Diving into an unfamiliar technology stack\
+- Understanding how context propagation works under the hood\
+- Utilizing a proxy server to dynamically route client requests to the appropriate service\
+\
+\
+
+\b stretch
+\b0 \
+- Travis CI for testing and deployment, linking containers with yaml files, orchestration system like Kubernetes, \
+\
+
+\b what we plan to do\
+
+\b0  - create an intuitive and modern UI-centric Electron app with a dashboard that is well-designed and accurately reflects the health of the microservice.\
+- use Nginx (\'93engine X\'94) to create a reverse proxy server for back-end routing and caching. This proxy server, in a way, acts as a middleware server to help us route client requests to server. Nginx is one of the top open-sourced web servers.\
+- implement metrics to flesh out our health report: average execution time of each of the top ten most frequently executed database queries, average response time for each service endpoint, success/failure ratio for each service. An aggregated set of data can alert us to any system-wide degradation of performance that can potentially lead to failure of the entire system.\
+\
+
+\b conclusion\
+
+\b0 - it is just as important to collect relevant data as it is to analyze data that is collected. This data is critical to support a distributed system that is resilient, reliable, and available. Chronos is here to help with that.\
+\
+}

app/charts/latency-chart.jsx

@@ -1,37 +1,59 @@
 import React, { useContext } from 'react';
-import { Line } from 'react-chartjs-2';
 import HealthContext from '../context/DetailsContext';
+import Plot from 'react-plotly.js';
 
 const LatencyChart = (props) =>  {
-  const xAxis = [];
-  const yAxis = [];
   const healthData = useContext(HealthContext).detailData;
-  for (let i = 0; i < healthData.length; i++) {
-    const element = healthData[i];
-    if (element.currentmicroservice === props.service || element.currentMicroservice === props.service) {
-      xAxis.push(i);
-      yAxis.push(element.latency);
+
+  const createChart = () => {
+    const xAxis = [];
+    const yAxis = [];
+
+    for (let i = 0; i < healthData.length; i++) {
+      const element = healthData[i];
+      if (element.currentmicroservice === props.service || element.currentMicroservice === props.service) {
+        xAxis.push(i);
+        yAxis.push(element.latency);
+      }
     }
-  }
-  const chartData = {
-    datasets: [
-      {
-        label: `CPU latency of ${props.service}`,
-        data: yAxis,
-        backgroundColor: ['rgb(254, 255, 0)'],
-      },
-    ],
-    options: {
-      xAxisID: 'TBD',
-      yAxisID: 'TBD',
-    },
-    labels: xAxis,
+
+    return (
+      <Plot
+        data = {[{
+          type: 'scatter',
+          x: xAxis,
+          y: yAxis,
+          mode: 'lines',
+          rangemode: 'nonnegative',
+          name: `${props.service} CPU Latency`,
+          marker: {
+              color: '#155263',
+          },
+        }]}
+        layout = {{
+          width: 500,
+          height: 500,
+          paper_bgcolor: '#fffbe0',
+          plot_bgcolor: '#fffbe0',
+          showlegend: true,
+          legend: {
+              orientation: 'h',
+              xanchor: 'center',
+              x: .5
+          },
+          xaxis: {
+            tickmode: 'linear',
+            tick0: 0,
+            dtick: 200,
+            rangemode: 'nonnegative'
+          },
+          yaxis: {rangemode: 'nonnegative'}
+        }}
+      />
+    )
   };
-  return (
-    <div>
-      <Line data={chartData} />
-    </div>
-  );
+
+  return <div>{createChart()}</div>;
 };
 
 export default LatencyChart;

app/charts/memory-chart.jsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
-import { Bar } from 'react-chartjs-2';
 import HealthContext from '../context/DetailsContext';
+import Plot from 'react-plotly.js';
 
 const MemoryChart = (props) => {
   const healthData = useContext(HealthContext).detailData;
@@ -31,37 +31,60 @@ const MemoryChart = (props) => {
       }
     }
 
-    const chartData = {
-      datasets: [
-        {
-          label: 'Free Memory',
-          backgroundColor: 'rgb(2, 210, 249)',
-          data: free,
-          // showLine: true,
-        },
-        {
-          label: 'Used Memory',
-          backgroundColor: 'rgb(239, 91, 145)',
-          data: used,
-          // showLine: true,
-        },
-        {
-          label: 'Active Memory',
-          backgroundColor: 'rgb(182, 219, 26)',
-          data: active,
-          // showLine: true,
-        },
-        {
-          label: 'Total Memory',
-          backgroundColor: 'rgb(252, 170, 52)',
-          data: total,
-          // showLine: true,
-        },
-      ],
-      labels: xAxis,
-    };
-
-    return <Bar data={chartData} />;
+    return (
+      <Plot
+        data = {[
+          {
+            type: 'scatter',
+            fill: 'tozeroy',
+            fillcolor: 'rgb(14, 49, 80)',
+            mode: 'none',
+            x: {autorange: true},
+            y: free,
+            name: 'Free Memory',
+            rangemode: 'nonnegative'
+          },
+          {
+            type: 'scatter',
+            fill: 'tozeroy',
+            fillcolor: 'rgba(255, 64, 87, .3)',
+            mode: 'none',
+            x: {autorange: true},
+            y: used,
+            name: 'Used Memory',
+            rangemode: 'nonnegative'
+          },
+          {
+            type: 'scatter',
+            fill: 'tozeroy',
+            fillcolor: 'rgba(144, 0, 72, .4)',
+            mode: 'none',
+            x: {autorange: true},
+            y: active,
+            name: 'Active Memory',
+            rangemode: 'nonnegative'
+          },
+          {label: xAxis},
+        ]}
+        layout = {{
+          width: 500,
+          height: 500,
+          paper_bgcolor: '#fffbe0',
+          plot_bgcolor: '#fffbe0',
+          legend: {
+            itemsizing: 'constant',
+            orientation: 'h',
+            xanchor: 'center',
+            x: .5
+          },
+          xaxis: {
+            tickmode: 'linear',
+            tick0: 0,
+            dtick: 100,
+          },
+        }}
+      />
+    )
   };
 
   return <div>{createChart()}</div>;

app/charts/microservice-traffic.jsx

@@ -1,10 +1,11 @@
 import React, { useContext } from 'react';
-import { Bar } from 'react-chartjs-2';
+import Plot from 'react-plotly.js';
 import CommunicationsContext from '../context/OverviewContext';
 
 const MicroServiceTraffic = (props) => {
   const communicationsData = useContext(CommunicationsContext).overviewData;
 
+
   //initialize an empty object resObj. This object will store the microservice names as values and its corresponding correlatingId or correlatingid as keys. The microservice names will be stored in array within the order it was to the database.    
   const resObj = {};
 
@@ -78,27 +79,35 @@ const MicroServiceTraffic = (props) => {
       ],
   }
 
-
-  // return div with Bar component and Trace Points data
   return (
-      <div>
-        <Bar 
-        data={myChart}
-        width={100}
-        height={50}
-        options={{
-            title:{
-              display:true,
-              text:'Microservices Overview',
-              fontSize:20
-            },
-            legend:{
-              display:true,
-              position:'right'
-            }
-          }}
-        />
-      </div>
+    <Plot
+      data = {[{
+        type: 'bar',
+        x: ['Orders', 'Customers', 'Books', 'Reverse-Proxy', 'ReverseProxy'],
+        y: [...serverPingCount, 0, yAxisHeadRoom],
+        fill: 'tozeroy',
+        color: 'red',
+        opacity: .4,
+        mode: 'none',
+        name: 'Times Server Pinged',
+        showlegend: true
+      }]}
+      layout = {
+        {
+          width: 500,
+          height: 500,
+          paper_bgcolor: '#fffbe0',
+          plot_bgcolor: '#fffbe0',
+          legend: {
+            orientation: 'h',
+            xanchor: 'center',
+            x: .5,
+            y: 5
+          },
+          yaxis: {rangemode: 'nonnegative'}
+        }
+      }
+    />
   )
 };