Webpack (#9391)

* webpack poc, this is not going to work for plugins, dam

* tech: webpack and systemjs for plugins starting to work

* tech: webpack and systemjs combo starting to work

* tech: webpack + karma tests progress

* tech: webpack + karma progress

* tech: working on tests

* tech: webpack

* tech: webpack + karma, all tests pass

* tech: webpack + karma, all tests pass

* tech: webpack all tests pass

* webpack: getting closer

* tech: webpack progress

* webpack: further build refinements

* webpack: ng annotate fixes

* webpack: optimized build fix

* tech: minor fix for elasticsearch

* tech: webpack + ace editor

* tech: restored lodash move mixin compatability

* tech: added enzyme react test and upgraded to react v16

* tech: package version fix

* tech: added testdata to built in bundle

* webpack: sass progress

* tech: prod & dev build is working for the sass

* tech: clean up unused grunt stuff and moved to scripts folder

* tech: added vendor and manifest chunks, updated readme and docs

* tech: webpack finishing touches

public/sass/_grafana.scss

@@ -1,3 +1,7 @@
+// vendor
+@import "../vendor/css/timepicker.css";
+@import "../vendor/css/spectrum.css";
+
 // MIXINS
 @import "mixins/mixins";
 @import "mixins/animations";
@@ -15,8 +19,7 @@
 @import "base/type";
 @import "base/forms";
 @import "base/grid";
-@import "base/font_awesome";
-@import "base/grafana_icons";
+@import "base/fonts";
 @import "base/code";
 
 // UTILS

public/sass/base/_fonts.scss

@@ -1,24 +1,5 @@
-/* icon fonts
-
-@font-face {
-  font-family: 'FontAwesome';
-  src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
-  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-    font-family: 'grafana-icons';
-    src:    url('../fonts/grafana-icons.eot?h6rv8b');
-    src:    url('../fonts/grafana-icons.eot?h6rv8b#iefix') format('embedded-opentype'),
-        url('../fonts/grafana-icons.ttf?h6rv8b') format('truetype'),
-        url('../fonts/grafana-icons.woff?h6rv8b') format('woff'),
-        url('../fonts/grafana-icons.svg?h6rv8b#grafana-icons') format('svg');
-    font-weight: normal;
-    font-style: normal;
-}*/
-
+@import "base/font_awesome";
+@import "base/grafana_icons";
 
 /* Open sans fonts*/
 
@@ -301,4 +282,4 @@
   font-weight: 400;
   src: local('Open Sans Italic'), local('OpenSans-Italic'), url(../fonts/opensans/xjAJXh38I15wypJXxuGMBo4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
+}

public/sass/components/_code_editor.scss

@@ -3,7 +3,6 @@
   min-width: 20rem;
   flex-grow: 1;
   margin-right: 0.25rem;
-  visibility: hidden;
 
   &.ace_editor {
     @include font-family-monospace();
@@ -13,10 +12,6 @@
     @include border-radius($input-border-radius-sm);
     border: $input-btn-border-width solid $input-border-color;
   }
-
-  &--theme-loaded {
-    visibility: visible;
-  }
 }
 
 .ace_editor.ace_autocomplete {

public/sass/components/_query_editor.scss

@@ -3,14 +3,7 @@
   color: $blue;
 }
 
-.query-segment-key {
-  //border-right: none;
-  //padding-right: 1px;
-}
-
 .query-segment-operator {
-  //padding-right: 1px;
-  //border-right: none;
   color: $orange;
 }
 

public/sass/pages/_styleguide.scss

@@ -26,52 +26,3 @@
   text-align: center;
 }
 
-// define("areas/styleguide/static/script/app/colors", [], function() {
-//    "use strict";
-//    var a = function(a) {
-//        return 0 === a.indexOf("rgba") ? (a = a.match(/(\d{1,3})/gi),
-//        [a[0], a[1], a[2]]) : (a = a.replace(/^#/, "").match(/[0-9a-z]{2}/gi),
-//        [parseInt(a[0], 16), parseInt(a[1], 16), parseInt(a[2], 16)])
-//    }
-//      , b = function(b, c) {
-//        var d = 0
-//          , e = 0;
-//        for (b = a(b),
-//        c = a(c); e < b.length; )
-//            d += (b[e] - c[e]) * (b[e] - c[e]),
-//            e++;
-//        return Math.sqrt(d)
-//    }
-//      , c = function() {
-//        $(".color-card").removeClass("isnt-approximate is-approximate is-exact")
-//    }
-//      , d = function() {
-//        var a = $("#proximityMatch").val()
-//          , c = $(".swatch");
-//        c.each(function() {
-//            var c = $(this)
-//              , d = b(a, c.children("i").text());
-//            c.parent().removeClass("is-approximate isnt-approximate is-exact"),
-//            20 > d ? (c.css("border-color", /^#/.test(a) ? a : "#" + a),
-//            c.parent().addClass("is-approximate"),
-//            c.parent().addClass("has-match"),
-//            0 === d && c.parent().addClass("is-exact")) : c.parent().addClass("isnt-approximate")
-//        })
-//    }
-//      , e = $("#proximityMatch")
-//      , f = function() {
-//        var a = e.val();
-//        "#" == a[0] && (a = a.substring(1)),
-//        6 == a.length ? d() : c()
-//    }
-//    ;
-//    e.on("input", f),
-//    e.val() && f();
-//    var g = function() {
-//        var a = "/static/images/styleguide/leaves.jpg"
-//          , b = $("[data-colors]");
-//        "none" === b.css("background-image") ? b.css("background-image", "url('" + a + "')") : b.css("background-image", "none")
-//    }
-//    ;
-//    $("#toggle-background-image").on("click", g)
-// })