Initial commit

.gitignore

@@ -0,0 +1,3 @@
+.idea/
+*.pyc
+*.iml

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "api/FlameGraph"]
+	path = api/FlameGraph
+	url = https://github.com/brendangregg/FlameGraph

api/FlameGraph

@@ -0,0 +1 @@
+Subproject commit 1a0dc6985aad06e76857cf2a354bd5ba0c9ce96b

api/app.py

@@ -0,0 +1,79 @@
+#!/usr/bin/env python3
+import uuid
+from io import BytesIO
+import os
+from random import random, randint
+from tempfile import NamedTemporaryFile
+
+from fastapi import FastAPI, File
+import uvicorn
+import redis
+from subprocess import Popen, PIPE
+
+from starlette.responses import Response
+
+app = FastAPI()
+rdb = redis.Redis()
+
+
+@app.get("/")
+def read_root():
+    return {"Hello": "World"}
+
+
+HOUR = 3600
+DAY = HOUR * 24
+FLAMEGRAPH_TTL = DAY * 7
+
+@app.get("/flame_graph/{key}")
+def flame_graph_get(key: str):
+
+    data = rdb.get("toolbox:FlameGraph:" + key)
+    return Response(content=data, media_type="image/svg+xml")
+
+@app.post("/flame_graph")
+def flame_graph(file: bytes = File(...)):
+    key = str(uuid.uuid4())
+    temp = "/dev/shm/fg_%s.bin" % key
+    with open(temp, "wb") as f:
+        f.write(file)
+
+    try:
+        p1 = Popen(
+            ["perf", "script", "-i", temp],
+            stdout=PIPE, stderr=PIPE
+        )
+
+        p2 = Popen(
+            ["perl", "stackcollapse-perf.pl"],
+            cwd="./FlameGraph",
+            stdin=PIPE, stdout=PIPE, stderr=PIPE,
+        )
+
+        p3 = Popen(
+            ["perl", "flamegraph.pl"],
+            cwd="./FlameGraph",
+            stdin=PIPE, stdout=PIPE, stderr=PIPE
+        )
+
+        p2.stdin.write(p1.stdout.read())
+        p2.stdin.close()
+
+        p3.stdin.write(p2.stdout.read())
+        p3.stdin.close()
+
+        out = p3.stdout.read()
+        rdb.set("toolbox:FlameGraph:" + key, out, ex=FLAMEGRAPH_TTL)
+
+        return {
+            "key": key,
+            "script_err": p1.stderr.read().decode(),
+            "fold_err": p2.stderr.read().decode(),
+            "graph_err": p3.stderr.read().decode(),
+        }
+    finally:
+        os.remove(temp)
+
+
+if __name__ == "__main__":
+    uvicorn.run(app, host='0.0.0.0', port=8000)

api/requirements.txt

@@ -0,0 +1,3 @@
+redis
+fastapi
+python-multipart

toolbox-web/.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

toolbox-web/.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "root": true,
+  "env": {
+    "node": true
+  },
+  "extends": [
+    "plugin:vue/essential",
+    "@vue/typescript/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2020
+  },
+  "rules": {},
+  "overrides": [
+    {
+      "files": [
+        "**/__tests__/*.{j,t}s?(x)",
+        "**/tests/unit/**/*.spec.{j,t}s?(x)"
+      ],
+      "env": {
+        "jest": true
+      }
+    }
+  ]
+}

toolbox-web/.gitignore

@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

toolbox-web/README.md

@@ -0,0 +1,29 @@
+# toolbox-web
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Run your unit tests
+```
+npm run test:unit
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

toolbox-web/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

toolbox-web/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "toolbox-web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.19.2",
+    "core-js": "^3.6.5",
+    "vue": "^2.6.11",
+    "vue-class-component": "^7.2.3",
+    "vue-property-decorator": "^8.4.2",
+    "vue-router": "^3.2.0",
+    "vuetify": "^2.2.11",
+    "vuex": "^3.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^24.0.19",
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@typescript-eslint/parser": "^2.33.0",
+    "@vue/cli-plugin-babel": "~4.4.0",
+    "@vue/cli-plugin-eslint": "~4.4.0",
+    "@vue/cli-plugin-router": "~4.4.0",
+    "@vue/cli-plugin-typescript": "~4.4.0",
+    "@vue/cli-plugin-unit-jest": "~4.4.0",
+    "@vue/cli-plugin-vuex": "~4.4.0",
+    "@vue/cli-service": "~4.4.0",
+    "@vue/eslint-config-standard": "^5.1.2",
+    "@vue/eslint-config-typescript": "^5.0.2",
+    "@vue/test-utils": "^1.0.3",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^6.2.2",
+    "sass": "^1.19.0",
+    "sass-loader": "^8.0.0",
+    "typescript": "~3.9.3",
+    "vue-cli-plugin-vuetify": "~2.0.7",
+    "vue-template-compiler": "^2.6.11",
+    "vuetify-loader": "^1.3.0",
+    "vuex-class": "^0.3.2",
+    "vuex-module-decorators": "^0.17.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "jest": {
+    "preset": "@vue/cli-plugin-unit-jest/presets/typescript-and-babel"
+  },
+  "jsconfig": {
+    "experimentalDecorators": true
+  }
+}

toolbox-web/public/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
+</head>
+<body>
+<noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+        Please enable it to continue.</strong>
+</noscript>
+<div id="app"></div>
+</body>
+</html>

toolbox-web/src/App.vue

@@ -0,0 +1,69 @@
+<template>
+  <v-app>
+    <v-navigation-drawer app>
+      <v-list dense>
+        <v-list-item link to="/">
+          <v-list-item-action>
+            <v-icon>mdi-apps</v-icon>
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title>Home</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+
+        <v-list-item link v-for="tool in tools" :key="tool.name" :to="`/tool/${tool.name}`">
+          <v-list-item-action>
+            <v-icon>{{ tool.icon }}</v-icon>
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title>{{ tool.name }}</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+
+      </v-list>
+    </v-navigation-drawer>
+
+    <v-app-bar color="lime" app>
+      <v-toolbar-title>Toolbox</v-toolbar-title>
+    </v-app-bar>
+
+    <v-main>
+      <v-container fluid>
+        <router-view></router-view>
+      </v-container>
+    </v-main>
+    <v-footer app>
+      <span class="monospace">{{ status }}</span>
+    </v-footer>
+  </v-app>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import {Component} from 'vue-property-decorator'
+import {namespace} from 'vuex-class'
+import {Tool} from '@/models';
+import {tools} from "@/tools";
+
+const def = namespace('def')
+
+@Component
+export default class App extends Vue {
+  @def.State
+  public status!: string
+
+  public tools: Tool[] = tools;
+}
+</script>
+
+<style>
+html, body {
+  padding: 0;
+  margin: 0;
+  overflow: hidden !important;
+}
+
+.monospace {
+  font-family: monospace;
+}
+</style>

toolbox-web/src/components/FlameGraph.vue

@@ -0,0 +1,51 @@
+<template>
+  <v-container>
+
+    <p>Run with <code>perf record -F997 --call-graph dwarf -q &lt;program&gt;</code></p>
+
+    <v-file-input :loading="loading" label="perf.data" id="flamegraph-upload" @change="onUpload()"></v-file-input>
+
+    <object v-if="key" type="image/svg+xml" :data="getGraphUrl()"></object>
+  </v-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import {Component} from 'vue-property-decorator'
+import {namespace} from 'vuex-class'
+import {toolByName} from '@/tools'
+import axios from 'axios'
+import {FlameGraphResult} from "@/models";
+import {API_URL} from "@/config";
+
+const def = namespace('def')
+
+@Component
+export default class FlameGraph extends Vue {
+  public tool = toolByName('FlameGraph')
+  public key: string | null = null
+  public loading = false
+
+  getGraphUrl() {
+    return `${API_URL}/flame_graph/${this.key}`
+  }
+
+  onUpload() {
+    this.loading = true;
+    const formData = new FormData();
+    const input = document.getElementById('flamegraph-upload') as any;
+
+    formData.append('file', input.files[0]);
+    axios.post('http://localhost:8000/flame_graph', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    }).then(resp => {
+      const result = resp.data as FlameGraphResult
+
+      this.key = result.key
+      this.loading = false;
+    })
+  }
+}
+</script>

toolbox-web/src/components/Home.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <v-row>
+      <v-col>
+        <v-card max-width="344" to="/tool/FlameGraph">
+          <v-img :src="require('@/assets/FlameGraph.png')" height="200px"></v-img>
+          <v-card-title>FlameGraph</v-card-title>
+          <v-card-subtitle><i>perf</i> profiling data visualization</v-card-subtitle>
+        </v-card>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Home',
+  components: {}
+}
+</script>

toolbox-web/src/config.ts

@@ -0,0 +1 @@
+export const API_URL = "http://localhost:8000"

toolbox-web/src/main.ts

@@ -0,0 +1,14 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import vuetify from './plugins/vuetify'
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  vuetify,
+  render: h => h(App)
+}).$mount('#app')

toolbox-web/src/models.ts

@@ -0,0 +1,11 @@
+export interface Tool {
+  icon?: string
+  name: string
+}
+
+export interface FlameGraphResult {
+  key: string
+  script_err: string
+  fold_err: string
+  graph_err: string
+}

toolbox-web/src/plugins/vuetify.ts

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify/lib'
+
+Vue.use(Vuetify)
+
+export default new Vuetify({
+})

toolbox-web/src/router/index.ts

@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import VueRouter, {RouteConfig} from 'vue-router'
+import Home from '../components/Home.vue'
+import FlameGraph from '@/components/FlameGraph.vue'
+
+Vue.use(VueRouter)
+
+const routes: Array<RouteConfig> = [
+  {path: '/', component: Home},
+  {path: '/tool/FlameGraph', component: FlameGraph}
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  routes
+})
+
+export default router

toolbox-web/src/shims-tsx.d.ts

@@ -0,0 +1,13 @@
+import Vue, { VNode } from 'vue'
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+  }
+}

toolbox-web/src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}

toolbox-web/src/store/DefaultModule.ts

@@ -0,0 +1,13 @@
+import {VuexModule, Module, Mutation, Action} from 'vuex-module-decorators'
+
+@Module({namespaced: true, name: 'def'})
+class DefaultModule extends VuexModule {
+  public status = '>'
+
+  @Mutation
+  public setStatus(newStatus: string): void {
+    this.status = newStatus
+  }
+}
+
+export default DefaultModule

toolbox-web/src/store/index.ts

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import DefaultModule from '@/store/DefaultModule'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  modules: {
+    def: DefaultModule
+  }
+})

toolbox-web/src/tools.ts

@@ -0,0 +1,9 @@
+import {Tool} from "@/models";
+
+export const tools: Tool[] = [
+  {name: "FlameGraph", icon: "mdi-bug"}
+]
+
+export const toolByName = (name: string) => {
+  return tools.find(t => t.name == name)
+}

toolbox-web/tests/unit/example.spec.ts

@@ -0,0 +1,12 @@
+import { shallowMount } from '@vue/test-utils'
+import HelloWorld from '@/components/HelloWorld.vue'
+
+describe('HelloWorld.vue', () => {
+  it('renders props.msg when passed', () => {
+    const msg = 'new message'
+    const wrapper = shallowMount(HelloWorld, {
+      propsData: { msg }
+    })
+    expect(wrapper.text()).toMatch(msg)
+  })
+})

toolbox-web/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env",
+      "jest",
+      "vuetify"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

toolbox-web/vue.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  transpileDependencies: [
+    'vuetify'
+  ]
+}