shiba 0.6.0 → 0.6.1

data/web/package.json

@@ -1,20 +1,50 @@
 {
-  "name": "web",
-  "version": "1.0.0",
-  "description": "",
+  "name": "hello-world",
+  "version": "0.1.0",
+  "private": true,
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "webpack": "^4.29.0",
-    "webpack-cli": "^3.2.1"
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "autobuild": "vue-cli-service build --watch"
   },
   "dependencies": {
-    "lodash": "^4.17.11",
-    "vue": "^2.5.22",
+    "bootstrap": "^4.3.1",
+    "nanoajax": "^0.4.3",
+    "vue": "^2.6.6",
     "vue-js-modal": "^1.3.28"
-  }
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.5.0",
+    "@vue/cli-plugin-eslint": "^3.5.0",
+    "@vue/cli-service": "^3.5.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.8.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "vue-template-compiler": "^2.5.21"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
 }

data/web/src/App.vue

@@ -0,0 +1,185 @@
+<template>
+  <div id="app" v-cloak>
+    <v-dialog :width="600"></v-dialog>
+    <div class="container" style="">
+      <div class="row" v-if="hasFuzzed">
+        <div class="alert alert-warning" role="alert">
+          This query analysis was generated using estimated table sizes.
+          To improve these results and find other problem queries beyond missing indexes, we'll need more stats.<br/>
+          <a target="_blank" href="https://github.com/burrito-brothers/shiba/blob/master/README.md#going-beyond-table-scans">Find out how to get a more accurate analysis by feeding Shiba index stats</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-10"></div>
+        <div class="col-2"><input :value="search" @input="updateSearch" placeholder="search..."></div>
+      </div>
+      <div class="row">
+        <div class="col-12">We found {{ queries.length }} queries that
+          <span v-if="search == ''">deserve your attention:</span>
+          <span v-else>match your search term</span>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-3">Table</div>
+        <div class="col-5">Query</div>
+        <div class="col-3">Source</div>
+        <div class="col-1">Severity</div>
+      </div>
+      <div class="queries">
+        <Query v-for="query in queries" v-bind:query="query" v-bind:key="query.sql" v-bind:tags="tags" v-bind:url="url"></query>
+      </div>
+      <div v-if="search == ''">
+        <div class="row">
+          <div class="col-12">We also found <a href="#" v-on:click.prevent="lowExpanded = !lowExpanded">{{ queriesLow.length }} queries</a> that look fine.</div>
+        </div>
+        <a name="lowExapnded"></a>
+        <div class="queries" v-if="lowExpanded">
+          <query v-for="query in queriesLow" v-bind:query="query" v-bind:key="query.sql" v-bind:tags="tags" v-bind:url="url"></query>
+        </div>
+      </div>
+      <div style="height:50px"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Query from './components/Query.vue'
+import registerMessage from './components/Message.js'
+import QueryData from './query_data.js'
+import VModal from 'vue-js-modal';
+import _ from 'lodash'
+import Vue from 'vue';
+import nanoajax from 'nanoajax';
+import 'bootstrap/dist/css/bootstrap.min.css'
+
+Vue.use(VModal, { dialog: true });
+
+function categorizeQueries(v, queries) {
+  queries.forEach(function(query) {
+    var q = new QueryData(query);
+
+    if ( q.severity == "none" ) {
+      v.lowQ.push(q);
+    } else {
+      v.highQ.push(q);
+    }
+
+    if ( q.hasTag("fuzzed_data") )
+      this.hasFuzzed = true;
+
+    var rCost = 0;
+    q.messages.forEach(function(m) {
+      if ( m.cost && m.cost != 0) {
+        rCost += m.cost;
+        m.running_cost = rCost;
+      } else {
+        m.running_cost = undefined;
+      }
+    });
+  });
+
+  var f = QueryData.sortByFunc(['severityIndex', 'table']);
+  v.highQ = v.highQ.sort(f);
+  v.lowQ = v.lowQ.sort(f);
+}
+
+
+export default {
+  name: 'app',
+  data: () => ({
+    highQ: [],
+    lowQ: [],
+    tags: {},
+    lowExpanded: false,
+    hasFuzzed: false,
+    search: '',
+    url: null
+  }),
+  mounted () {
+    if  ( typeof(shibaData) === "undefined" ) {
+      nanoajax.ajax({url:'/example_data.json'}, function (code, responseText) {
+        if ( code == 200 ) {
+          var data = JSON.parse(responseText);
+          this.setupData(data);
+        }
+      }.bind(this));
+    } else {
+      // eslint-disable-next-line
+      this.setupData(shibaData);
+    }
+  },
+  methods: {
+    setupData: function(data) {
+      this.url = data.url;
+      this.tags = data.tags;
+
+      Object.keys(this.tags).forEach((k) => {
+        registerMessage(k, this.tags[k].title, this.tags[k].summary);
+      })
+      categorizeQueries(this, data.queries);
+    },
+    updateSearch: _.debounce(function (e) {
+      this.search = e.target.value;
+    }, 500)
+  },
+  computed: {
+    queries: function() {
+      if ( this.search != '' ) {
+        var filtered = [];
+        var lcSearch = this.search.toLowerCase();
+        this.highQ.concat(this.lowQ).forEach(function(q) {
+          if ( q.searchString.includes(lcSearch) )
+            filtered.push(q);
+        });
+        return filtered;
+      } else
+        return this.highQ;
+    },
+    queriesLow: function() {
+      return this.lowQ;
+    }
+  },
+  components: {
+    Query
+  }
+}
+</script>
+
+<style>
+  .sql {
+    font-family: monospace;
+  }
+
+  .badge  {
+    color: black;
+    background-color: white;
+    border-style: solid;
+    border-width: 1.5px;
+    margin-right: 5px;
+    width: 100px;
+  }
+
+  .shiba-badge-td {
+    width: 100px;
+  }
+
+  .shiba-messages {
+    margin: 0px;
+    margin-top: 10px;
+    width: 100%;
+  }
+
+  .shiba-messages td {
+  }
+
+  .shiba-message {
+    padding-right: 10px;
+    width: 90%;
+  }
+
+  .running-totals {
+    align: right;
+    font-family: monospace;
+  }
+[v-cloak] { display: none }
+</style>

data/web/src/components/Backtrace.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    Stack Trace:<br>
+    <div class="backtrace">
+      <div v-for="bt in backtrace" v-bind:key="bt" v-html="makeURL(bt, bt)"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Backtrace',
+  props: ['url', 'backtrace'],
+  methods: {
+    makeURL: function(line, content) {
+      if ( !this.url || !line )
+        return content;
+
+      var matches = line.match(/(.+):(\d+):/);
+      var f = matches[1].replace(/^\/+/, '');
+      var l = matches[2];
+
+      return `<a href='${this.url}/${f}#L${l}' target='_new'>${content}</a>`;
+    }
+  }
+}
+</script>
+<style>
+  .backtrace {
+    font-family: monospace;
+    background-color: #EEEEEE;
+    padding: 5px;
+    margin: 10px
+  }
+</style>
+

data/web/src/components/HelloWorld.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

data/web/src/components/Message.js

@@ -0,0 +1,104 @@
+var template = `
+<tr>
+  <td class="shiba-badge-td">
+  <a class="badge" v-bind:style="costToColor">::TITLE::</a>
+  </td>
+  <td class="shiba-message">
+    ::SUMMARY::
+  </td>
+  <td class="running-totals">
+    {{ formattedRunningCost }}
+  </td>
+</tr>
+`
+
+var greenToRedGradient = [
+  '#57bb8a','#63b682', '#73b87e', '#84bb7b', '#94bd77', '#a4c073', '#b0be6e',
+  '#c4c56d', '#d4c86a', '#e2c965', '#f5ce62', '#f3c563', '#e9b861', '#e6ad61',
+  '#ecac67', '#e9a268', '#e79a69', '#e5926b', '#e2886c', '#e0816d', '#dd776e'
+];
+
+var templateComputedFunctions = {
+  key_parts: function() {
+    if ( this.index_used && this.index_used.length > 0 )
+      return this.index_used.join(',');
+    else
+      return "";
+  },
+  fuzz_table_sizes: function() {
+    var h = {};
+    var tables = this.tables;
+
+    Object.keys(tables).forEach(function(k) {
+      var size = tables[k];
+      if ( !h[size] )
+        h[size] = [];
+
+      h[size].push(k);
+    });
+
+    var sizesDesc = Object.keys(h).sort(function(a, b) { return b - a });
+    var str = "";
+
+    sizesDesc.forEach(function(size) {
+      str = str + h[size].join(", ") + ": " + size.toLocaleString() + " rows.  ";
+    });
+
+    return str;
+  },
+  formatted_cost: function() {
+    var readPercentage = (this.rows_read / this.table_size) * 100.0;
+    if ( this.rows_read > 100 && readPercentage > 1 ) // todo: make better
+      return `${readPercentage.toFixed()}% (${this.rows_read.toLocaleString()}) of the`;
+    else
+      return this.rows_read.toLocaleString();
+  },
+  costToColor: function() {
+    var costScale = this.cost ? this.cost / 0.5 : 0;
+
+    if ( costScale > 1 )
+      costScale = 1;
+
+    var pos =  (costScale * (greenToRedGradient.length - 1)).toFixed();
+
+    return "border-color: " + greenToRedGradient[pos];
+  },
+  formattedRunningCost: function() {
+    if ( this.running_cost === undefined )
+      return "-";
+    else if ( this.running_cost < 1.0 )
+      return (this.running_cost * 100).toFixed() + "ms";
+    else
+      return this.running_cost.toFixed(1) + "s";
+  },
+  formatted_result: function() {
+    var rb = this.result_bytes;
+    var result;
+    if ( rb == 0 )
+      return "" + this.result_size + " rows";
+    else if ( rb < 1000 )
+      result = rb + " bytes ";
+    else if ( rb < 1000000 )
+      result = (rb / 1000).toFixed() + "kb ";
+    else
+      result = (rb / 1000000 ).toFixed(1) + "mb ";
+
+    return result + " (" + this.result_size.toLocaleString() + " rows)";
+  }
+}
+
+import Vue from 'vue'
+
+export default function (tag, title, summary) {
+  var tmpl = template.replace("::TITLE::", title).replace("::SUMMARY::", summary);
+
+  Vue.component(`tag-${tag}`, {
+    template: tmpl,
+    props: [ 'table_size', 'result_size', 'table', 'cost', 'index', 'join_to', 'index_used', 'running_cost', 'tables', 'rows_read', 'result_bytes' ],
+    computed: templateComputedFunctions,
+    data: function () {
+      return { lastRunnningCost: undefined };
+    }
+  });
+}
+