inital time plugin

index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+module.exports = function (kibana) {
+
+  return new kibana.Plugin({
+
+    uiExports: {
+      visTypes: ['plugins/kibana-time-plugin/time']
+    }
+
+  });
+};

package.json

@@ -0,0 +1,4 @@
+{
+	"name": "kibana-time-plugin",
+	"version": "0.0.1"
+}

public/time.html

@@ -0,0 +1,25 @@
+<div ng-controller="KbnTimeVisController" class="time-vis">
+  <h3 ng-show="config.title">{{config.title}}</h3>
+
+  <form name="dashboardTime" ng-submit="updateKbnTime()" style="height: 80px;">
+    <div style="display: inline-block;">
+      <label class="small">From: <span ng-show="!time.from"><i>Invalid Date</i></span>
+      </label>
+      <input type="text" required class="form-control" input-datetime="{{format}}" ng-model="time.from">
+    </div>
+
+    <div style="display: inline-block;">
+      <label class="small">To: <span ng-show="!time.to"><i>Invalid Date</i></span>
+      </label>
+      <input type="text" required class="form-control" input-datetime="{{format}}" ng-model="time.to">
+    </div>
+
+    <div style="display: inline-block;">
+      <button class="btn btn-primary" style="margin-bottom: 60px;" ng-disabled="time.from > time.to || !time.from || !time.to" type="submit">
+        Go
+      </button>
+      <span class="small" ng-show="time.from > time.to"><strong>From</strong> must occur before <strong>To</strong></span>
+    </div>
+  </form>
+
+</div>

public/time.js

@@ -0,0 +1,23 @@
+define(function (require) {
+  require('ui/registry/vis_types').register(TimeVisProvider);
+  require('plugins/kibana-time-plugin/time.less');
+  require('plugins/kibana-time-plugin/timeController');
+
+  function TimeVisProvider(Private) {
+    var TemplateVisType = Private(require('ui/template_vis_type/TemplateVisType'));
+
+    return new TemplateVisType({
+      name: 'time',
+      title: 'Time widget',
+      icon: 'fa-clock-o',
+      description: 'Embedded dashboards do not display the time range or allow users to modify the time range. Use this widget to view and edit the time range with embedded dashboards.',
+      template: require('plugins/kibana-time-plugin/time.html'),
+      params: {
+        editor: require('plugins/kibana-time-plugin/timeOptions.html')
+      },
+      requiresSearch: false
+    });
+  }
+
+  return TimeVisProvider;
+});

public/time.less

@@ -0,0 +1,30 @@
+@import (reference) "~ui/styles/mixins.less";
+
+.time-vis {
+  padding: 1em;
+  width: 100%;
+}
+
+.vis-editor {
+
+  &.vis-type-markdown {
+
+    .visualization-options {
+      .flex-parent();
+      flex: 1 1 auto;
+    }
+
+    .time-vis-options {
+      .flex-parent();
+      flex: 1 1 auto;
+
+      textarea {
+        flex: 1 1 auto;
+        resize: none;
+      }
+
+    }
+
+  }
+
+}

public/timeController.js

@@ -0,0 +1,41 @@
+define(function (require) {
+  var moment = require('moment');
+  var dateMath = require('ui/utils/dateMath');
+  var module = require('ui/modules').get('kibana/kibana-time-plugin');
+  module.controller('KbnTimeVisController', function ($scope, $rootScope, Private, $filter) {
+    $rootScope.plugin = {
+      timePlugin: {}
+    };
+    $scope.config = {
+        title: ""
+    };
+
+    $rootScope.$watchMulti([
+      '$$timefilter.time.from',
+      '$$timefilter.time.to'
+    ], setTime);
+
+    function setTime(rangeA, rangeB) {
+      $scope.time = {
+        from: dateMath.parse(rangeA[0]),
+        to: dateMath.parse(rangeA[1], true)
+      }
+    }
+
+    setTime([$rootScope.$$timefilter.time.from, $rootScope.$$timefilter.time.to]);
+
+    $scope.updateKbnTime = function() {
+      $rootScope.$$timefilter.time.from = $scope.time.from;
+      $rootScope.$$timefilter.time.to = $scope.time.to;
+      $rootScope.$$timefilter.time.mode = 'absolute';
+    };
+
+    $scope.startOfDay = function() {
+      $scope.time.to.startOf('day')
+    }
+
+    $scope.$watch('vis.params.title', function (title) {
+      $scope.config.title = title;
+    });
+  });
+});

public/timeOptions.html

@@ -0,0 +1,10 @@
+<div class="time-vis-options">
+    <div class="form-group">
+        <label for="title">Title</label>
+        <input type="text" ng-model="vis.params.title" class="form-control">
+    </div>
+    <div class="form-group">
+        <label for="icon">Font Awesome Icon Code</label>
+        <input type="text" ng-model="vis.params.icon" class="form-control" placeholder="fa-coffee">
+    </div>
+</div>