hashmapinc · randypitcherii · Oct 22, 2020 · Oct 19, 2020 · Oct 19, 2020 · Oct 20, 2020
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,8 +6,14 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "papaparse": "^5.3.0",
+    "plotly.js-basic-dist-min": "^1.57.0",
+    "raw-loader": "^4.0.2",
     "react": "^16.13.1",
+    "react-bootstrap": "^1.3.0",
+    "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^16.13.1",
+    "react-plotly.js": "^2.5.0",
     "react-scripts": "3.4.3"
   },
   "scripts": {

diff --git a/public/default_data.csv → public/data/default_data.csv b/public/default_data.csv → public/data/default_data.csv
diff --git a/public/index.html b/public/index.html
@@ -9,7 +9,6 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,9 +23,11 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Snowflake Healthcheck by Hashmap</title>
   </head>
   <body>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Snowflake Healthcheck",
+  "name": "Snowflake Healthcheck",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/src/App.js b/src/App.js
@@ -1,24 +1,132 @@
-import React from 'react';
+import React, {Component} from 'react';
+import PageNavbar from './Components/PageNavbar.js';
+import Dashboard from './Components/Dashboard.js';
+import * as Papa from 'papaparse';
+import './main.css'
 import './App.css';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <p>
-          Edit src/App.js and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+class App extends Component {
+  constructor() {
+    super();
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleModalOpen = this.handleModalOpen.bind(this);
+    this.handleModalClose = this.handleModalClose.bind(this);
+    this.updateData = this.updateData.bind(this);
+    this.state = {
+        file_name: null,
+        file: null,
+        localData: null,
+        showModal: false,
+        warehouse_health_data: null,
+        warehouse_usage_data: null
+
+    }
+}
+// Used to fetch local data
+componentWillMount() {
+  this.getLocalCsvData();
+}
+
+fetchLocalCsv() {
+  return fetch('/data/default_data.csv').then(function (response) {
+      let reader = response.body.getReader();
+      let decoder = new TextDecoder('utf-8');
+
+      return reader.read().then(function (result) {
+          return decoder.decode(result.value);
+      });
+  });
 }
 
+async getLocalCsvData() {
+  let localCsvData = await this.fetchLocalCsv();
+
+  Papa.parse(localCsvData, {complete: this.updateData});
+}
+
+// used to get uploaded data
+  handleModalOpen() {
+      this.setState({
+          showModal: true
+      });
+  }
+
+  handleModalClose() {
+      this.setState({
+          showModal: false
+      })
+  }
+
+  handleInputChange(e){
+    this.setState({
+        file_name : e.target.files[0].name,
+        file: e.target.files[0]
+    });
+    console.log(this.state.file_name);
+  }
+
+
+  handleSubmit(e){
+    e.preventDefault();
+
+    const form = e.currentTarget;
+    if (form.checkValidity() === false){
+      e.stopPropagation();
+    }
+    const {file} = this.state;
+    Papa.parse(file, {complete: this.updateData})
+  }
+
+  // used for both local and uploaded data
+  updateData(result){
+    let data = result.data;
+    // removes header that doesn't contain data
+    const updated_data = data.slice(1);
+    const clean_data = updated_data.map(x => JSON.parse(x[0]));
+    this.setState({
+      warehouse_health_data: clean_data.filter(x => x.type==="warehouse_health"),
+      warehouse_usage_data: clean_data.filter(x => x.type==="warehouse_usage"),
+    });
+  }
+
+
+  render() {
+    return (
+      <div className="container">
+          <meta charSet="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes" />
+          <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css"
+            integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossOrigin="anonymous" />
+          <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
+          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato" />
+          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat" />
+          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+
+        <PageNavbar 
+        file_name={this.state.file_name} 
+        handleSubmit={this.handleSubmit} 
+        handleInputChange={this.handleInputChange} 
+        handleModalClose={this.handleModalClose} 
+        handleModalOpen={this.handleModalOpen}
+        showModal={this.state.showModal}/>
+        <Dashboard warehouse_health_data={this.state.warehouse_health_data} warehouse_usage_data={this.state.warehouse_usage_data}/>
+
+        <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/4376150.js"></script>
+        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+          integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+          crossOrigin="anonymous"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
+          integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
+          crossOrigin="anonymous"></script>
+        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+          integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+          crossOrigin="anonymous"></script>
+      </div>
+      )
+  }
+
+}
+
+
 export default App;
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/Components/Dashboard.js b/src/Components/Dashboard.js
@@ -0,0 +1,24 @@
+import React, {Component} from 'react';
+import WarehouseHealth from './Dashboard_Components/Graphs/WarehouseHealth.js';
+import WarehouseUsage from './Dashboard_Components/Graphs/WarehouseUsage.js';
+import '../main.css'
+
+class Dashboard extends Component {
+
+    render() {
+        if (this.props.warehouse_health_data) {
+            return (
+                <div className="mx-auto">
+                    <WarehouseHealth warehouse_health_data={this.props.warehouse_health_data}/>
+                    <WarehouseUsage warehouse_usage_data={this.props.warehouse_usage_data}/>
+                </div>
+            )
+        } else {
+            return <div></div>
+        }
+
+
+    }
+}
+
+export default Dashboard
diff --git a/src/Components/Dashboard_Components/Graphs/WarehouseHealth.js b/src/Components/Dashboard_Components/Graphs/WarehouseHealth.js
@@ -0,0 +1,88 @@
+import React, {Component} from 'react';
+import Plotly from 'plotly.js-basic-dist-min';
+import createPlotlyComponent from 'react-plotly.js/factory';
+import '../../../main.css'
+
+class WarehouseHealth extends Component {
+        render() {
+            var i;
+            let health_x_arr = [];
+            let health_y_med_execution = [];
+            let health_y_overload = [];
+            let health_y_provision = [];
+
+            for (i = 0; i < this.props.warehouse_health_data.length; i++) {
+                health_x_arr.push(this.props.warehouse_health_data[i].data.WAREHOUSE);
+                health_y_med_execution.push(this.props.warehouse_health_data[i].data.MEDIAN_EXECUTION_TIME_MINUTES.toFixed(3));
+                health_y_overload.push(this.props.warehouse_health_data[i].data.MEDIAN_QUEUED_OVERLOAD_TIME_MINUTES.toFixed(3));
+                health_y_provision.push(this.props.warehouse_health_data[i].data.MEDIAN_QUEUED_PROVISIONING_TIME_MINUTES.toFixed(3));             
+        };
+
+            const PlotlyComponent = createPlotlyComponent(Plotly);                
+
+                var trace_execution = {
+                x: health_x_arr,
+                y: health_y_med_execution,
+                type: 'bar',
+                text: health_y_med_execution.map(String),
+                textposition: 'auto',
+                hoverinfo: "none",
+                name: 'Median Execution Time',
+                marker: {
+                    color: 'rgb(92, 98, 156)',
+                    line: {
+                    color: 'rgb(8,48,107)',
+                    width: 1.5
+                    }
+                }
+                };
+
+                var trace_overload = {
+                x: health_x_arr,
+                y: health_y_overload,
+                type: 'bar',
+                text: health_y_overload.map(String),
+                textposition: 'auto',
+                hoverinfo: "none",
+                name: "Median Queued Overload Time",
+                marker: {
+                    color: 'rgb(181, 113, 94)',
+                    line: {
+                    color: 'rgb(8,48,107)',
+                    width: 1.5
+                    }
+                }
+                };
+
+                var trace_provision = {
+                x: health_x_arr,
+                y: health_y_provision,
+                type: 'bar',
+                text: health_y_provision.map(String),
+                textposition: 'auto',
+                hoverinfo: "none",
+                name: 'Median Queued Provisioning Time',
+                marker: {
+                    color: 'rgb(158,202,225)',
+                    line: {
+                    color: 'rgb(8,48,107)',
+                    width: 1.5
+                    }
+                }
+                };
+
+            let data = [trace_execution, trace_provision, trace_overload];
+            let layout = {title: 'Warehouse Health Data', autosize: true, "titlefont": {"size": 16}, font: {size: 8}, legend: {x: 1, y: 0.5}};
+            let useResizeHandler = true;
+            let style = {width: "100%", height: "100%", marginBottom: "10px"};
+
+
+
+            return (
+                <PlotlyComponent data={data} layout={layout} useResizeHandler={useResizeHandler} style={style}/>
+            );
+        }
+    }
+
+
+export default WarehouseHealth
diff --git a/src/Components/Dashboard_Components/Graphs/WarehouseUsage.js b/src/Components/Dashboard_Components/Graphs/WarehouseUsage.js
@@ -0,0 +1,37 @@
+import React, {Component} from 'react';
+import Plotly from 'plotly.js-basic-dist-min';
+import createPlotlyComponent from 'react-plotly.js/factory';
+import '../../../main.css'
+
+class WarehouseUsage extends Component {
+        render() {
+            let usage_traces = []
+            let usage_graph_data = {};
+            let i;
+            for (i = 0; i < this.props.warehouse_usage_data.length; i++) {
+
+                if (this.props.warehouse_usage_data[i].data.WAREHOUSE in usage_graph_data === false) {
+                    usage_graph_data[this.props.warehouse_usage_data[i].data.WAREHOUSE] = {x: [], y: [], name: this.props.warehouse_usage_data[i].data.WAREHOUSE, hoverinfo: 'none', stackgroup: 'one'};
+                }
+                usage_graph_data[this.props.warehouse_usage_data[i].data.WAREHOUSE].x.push(this.props.warehouse_usage_data[i].data.DATE);
+                usage_graph_data[this.props.warehouse_usage_data[i].data.WAREHOUSE].y.push(this.props.warehouse_usage_data[i].data.COMPUTE_CREDITS.toFixed(3));
+            };        
+
+            for (var entry in usage_graph_data) {
+                usage_traces.push(usage_graph_data[entry])
+            }
+
+            const PlotlyComponent = createPlotlyComponent(Plotly);                
+
+            let layout = {title: 'Warehouse Credit Usage Data', autosize: true, "titlefont": {"size": 16}, font: {size:8}, legend: {"orientation": "h"}};
+            let useResizeHandler = true;
+            let style = {width: "100%", height: "100%", marginBottom: "10px"};
+
+            return (
+                <PlotlyComponent data={usage_traces} layout={layout} useResizeHandler={useResizeHandler} style={style}/>
+            );
+        }
+    }
+
+
+export default WarehouseUsage