[HAWKULAR-3] - Create and show a "Hello World" hawt.io plugin.

ui/README.adoc

@@ -1 +1,36 @@
-README.adoc
+= Hawkular UI
+
+[.lead]
+Hawkular UI is the home of the UI console for Hawkular.  The current console is based on https://github.com/hawtio/hawtio/blob/master/docs/Overview2dotX.md[Hawt.io 2]jjjjjjj, which a javascript based client-side framework. The various directories underneath console directory are hawt.io 2 plugins and the various plugins eventually compose a Hawkular console. This modular approach to creating hawtio console plugins allows us to create individual plugins that comprise a console or can easily  be plugged into other hawtio based consoles. This modular, plugin system makes it easy to add/remove functionality (even dynamically).
+
+
+== UI Structure Proposal
+
+
+....
+* ui - directory for various Hawkular UIs
+** console - The Hawkular UI console
+*** metrics - metrics plugin for Hawkular UI Console
+*** alerts - alerts plugin for Hawkular UI Console
+*** metrics - alerts plugin for Hawkular UI Console
+
+The general idea here being hawt.io UIs which are composed of plugins (that can swapped around like legos between the various UIs)
+
+....
+
+
+== Dev Install
+
+Assuming the node.js is already installed:
+
+....
+npm install -g bower gulp typescript
+cd ui/console/metrics
+gulp
+Navigate to http://localhost:2772/
+....
+
+For further detail the hawt.io plugin structure is described https://github.com/hawtio/hawtio/blob/master/docs/Overview2dotX.md[here].
+
+
+_Eventually, this will be part of the maven plugin for running frontend npm/bower installs_

ui/console/metrics/bower.json

@@ -1,8 +1,10 @@
 {
   "name": "hawkular-metrics",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "keywords": [
-    "hawtio"
+    "hawtio-hawkular",
+    "hawkular-console",
+    "hawkular-metrics"
   ],
   "main": [
     "dist/hawkular-metrics.js"
@@ -19,12 +21,18 @@
   "dependencies": {
     "hawtio-core": "~2.0.0",
     "hawtio-core-navigation": "~2.0.0",
-    "hawtio-utilities": "~2.0.0"
+    "hawtio-utilities": "~2.0.0",
+    "toastr": "~2.0.3",
+    "moment": "2.7.0",
+    "rhqm-charts": "~0.1.7"
   },
   "devDependencies": {
     "bootstrap": "~3.3.1",
     "patternfly": "~1.1.2",
     "hawtio-core-dts": "~2.0.0",
     "angular-mocks": "~1.3.7"
+  },
+  "resolutions": {
+    "angular": "1.3.10"
   }
 }

ui/console/metrics/dist/hawkular-metrics.js

@@ -30,8 +30,8 @@ var HawkularMetrics;
 var HawkularMetrics;
 (function (HawkularMetrics) {
     HawkularMetrics.MetricsController = HawkularMetrics._module.controller("HawkularMetrics.MetricsController", ['$scope', function ($scope) {
-        $scope.target = "World!";
+        $scope.searchId = "";
     }]);
 })(HawkularMetrics || (HawkularMetrics = {}));
 
-angular.module("hawkular-metrics-templates", []).run(["$templateCache", function($templateCache) {$templateCache.put("plugins/metrics/html/graphs.html","<div class=\"row\">\n    <div class=\"col-md-12\">\n       <h1>Hawkular Metrics Graphs</h1>\n    </div>\n    <div class=\"col-md-12\" ng-controller=\"HawkularMetrics.MetricsController\">\n        <p>Hello {{target}}</p>\n    </div>\n</div>\n");}]); hawtioPluginLoader.addModule("hawkular-metrics-templates");
+angular.module("hawkular-metrics-templates", []).run(["$templateCache", function($templateCache) {$templateCache.put("plugins/metrics/html/graphs.html","<div class=\"row\" ng-controller=\"HawkularMetrics.MetricsController\">\n    <div class=\"col-md-12\">\n        <h1>Hawkular Metrics Graphs</h1>\n    </div>\n    <div class=\"col-md-8\" ng-controller=\"HawkularMetrics.MetricsController\">\n        <form class=\"form-horizontal\" name=\"chartForm\" role=\"form\" novalidate>\n\n            <div class=\"form-group\">\n                <label class=\"col-sm-2 control-label\">ID</label>\n\n                <div class=\"col-sm-5\">\n                    <input type=\"text\" class=\"form-control\" name=\"searchId\" ng-model=\"searchId\"\n                           placeholder=\"Enter Id...\" required ng-minlength=\"1\">\n                        <span class=\"error-message\"\n                              ng-show=\"chartForm.searchId.$dirty && chartForm.searchId.$error.required\"> * Required.</span>\n                    <span class=\"help-block\">Example: 100, apache3.cpu1  </span>\n                </div>\n            </div>\n        </form>\n\n    </div>\n\n</div>\n");}]); hawtioPluginLoader.addModule("hawkular-metrics-templates");

ui/console/metrics/index.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="libs/patternfly/dist/css/patternfly.css" />
 
     <!-- bower:css -->
+    <link rel="stylesheet" href="libs/toastr/toastr.css" />
     <!-- endbower -->
 
     <!-- ES6/ES6 shim -->
@@ -41,6 +42,12 @@
     <script src="libs/hawtio-utilities/dist/sugar.js"></script>
     <script src="libs/hawtio-utilities/dist/angular-file-upload.js"></script>
     <script src="libs/hawtio-utilities/dist/hawtio-utilities.js"></script>
+    <script src="libs/toastr/toastr.js"></script>
+    <script src="libs/moment/moment.js"></script>
+    <script src="libs/d3/d3.js"></script>
+    <script src="libs/d3-tip/index.js"></script>
+    <script src="libs/numeral/numeral.js"></script>
+    <script src="libs/rhqm-charts/dist/rhqm-charts.js"></script>
     <!-- endbower -->
 
     <script src="libs/bootstrap/dist/js/bootstrap.js"></script>

ui/console/metrics/plugins/metrics/html/graphs.html

@@ -1,8 +1,21 @@
-<div class="row">
+<div class="row" ng-controller="HawkularMetrics.MetricsController">
     <div class="col-md-12">
-       <h1>Hawkular Metrics Graphs</h1>
+        <h1>Hawkular Metrics Graphs</h1>
     </div>
-    <div class="col-md-12" ng-controller="HawkularMetrics.MetricsController">
-        <p>Hello {{target}}</p>
+    <div class="col-md-8" ng-controller="HawkularMetrics.MetricsController">
+        <form class="form-horizontal" name="chartForm" role="form" novalidate>
+
+            <div class="form-group">
+                <label class="col-sm-2 control-label">ID</label>
+
+                <div class="col-sm-5">
+                    <input type="text" class="form-control" name="searchId" ng-model="searchId"
+                           placeholder="Enter Id..." required ng-minlength="1">
+                        <span class="error-message"
+                              ng-show="chartForm.searchId.$dirty && chartForm.searchId.$error.required"> * Required.</span>
+                    <span class="help-block">Example: 100, apache3.cpu1  </span>
+                </div>
+            </div>
+        </form>
     </div>
 </div>

ui/console/metrics/plugins/metrics/ts/graphs.ts

@@ -1,8 +1,11 @@
 /// <reference path="metricsPlugin.ts"/>
 module HawkularMetrics {
 
+
   export var MetricsController = _module.controller("HawkularMetrics.MetricsController", ['$scope', ($scope) => {
-    $scope.target = "World!";
+    $scope.searchId = "";
+
+
   }]);
 
 }