First public project: promvt

kausalco · Oct 31, 2017 · d45d6e3 · d45d6e3
commit d45d6e3
Show file tree

Hide file tree

Showing 18 changed files with 7,294 additions and 0 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": "react-app"
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,25 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# data
+
+/src/data
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+}
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,19 @@
+Copyright (c) 2017 Kausal Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,36 @@
+# Prometheus Visual Toolkit
+
+This is a web application to help you get insights of your Prometheus installation.
+
+Screenshot
+
+## Setup
+
+There are three ways to run this application:
+
+### 1. On your Prometheus host
+
+Use this method to quickly see results.
+You need the following tools on your host:
+
+* Prometheus running on http://localhost:9090
+* A recent version of `node`
+
+Run the following commands:
+
+```
+# Clone the repo
+git clone https://github.com/kausalco/public
+# Install dependencies
+cd public/promvt
+yarn install
+# Run application
+yarn start
+```
+
+This starts a webserver on your host.
+Access the application on your browser: http://localhost:3000
+
+### 2. Serve it from your webserver
+
+### 3. Include it into your React application
diff --git a/package.json b/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "promvt",
+  "version": "0.1.0",
+  "license": "MIT",
+  "author": "David Kaltschmidt",
+  "repository": "https://github.com/kausalco/public",
+  "bugs": "https://github.com/kausalco/public/issues",
+  "proxy": "http://localhost:9090",
+  "dependencies": {
+    "d3-color": "^1.0.3",
+    "d3-hierarchy": "^1.1.5",
+    "d3-scale": "^1.0.6",
+    "d3-selection": "^1.1.0",
+    "d3-shape": "^1.2.0",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1"
+  },
+  "devDependencies": {
+    "react-scripts": "1.0.12"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <link href="https://unpkg.com/[email protected]/css/basscss.min.css" rel="stylesheet">
+    <title>Prometheus Visual Toolkit</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,18 @@
+.App {
+  color: hsl(192, 10%, 33%);
+}
+
+.button {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 2px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  position: relative;
+  top: -1px;
+  transition: all 0.5 ease;
+}
+
+.button:hover {
+  border-color: #ccc;
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+
+import './App.css';
+import Usage from './Usage';
+
+// import GROUPED from './data/jobs';
+// import METRICS from './data/metrics';
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App pr4 pl4 pt3 pb4">
+        <Usage classNames="p4" />
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/src/Sunburst.css b/src/Sunburst.css
@@ -0,0 +1,36 @@
+.sunburst {
+  position: relative;
+}
+
+.sunburst svg {
+  overflow: visible;
+}
+
+.sunburst text {
+  color: hsl(192, 10%, 33%);
+}
+
+.sunburst path {
+  stroke: #fff;
+  stroke-width: 1px;
+}
+
+.sunburst text {
+  font-size: 12px;
+}
+
+.sunburst .legend {
+  transition: opacity 0.6s ease;
+  margin-top: 4rem;
+  margin-bottom: 0.5rem;
+  width: 100%;
+  white-space: nowrap;
+  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  opacity: 0.7;
+}
+
+.sunburst .legend.active {
+  opacity: 1;
+}