feat(websockets): inital work on websockets, #4355

pkg/api/api.go

@@ -4,7 +4,7 @@ import (
 	"github.com/go-macaron/binding"
 	"github.com/grafana/grafana/pkg/api/avatar"
 	"github.com/grafana/grafana/pkg/api/dtos"
-	"github.com/grafana/grafana/pkg/live"
+	"github.com/grafana/grafana/pkg/api/live"
 	"github.com/grafana/grafana/pkg/middleware"
 	m "github.com/grafana/grafana/pkg/models"
 	"gopkg.in/macaron.v1"

pkg/api/search.go

 package api
 
 import (
+	"strconv"
+
 	"github.com/grafana/grafana/pkg/bus"
-	"github.com/grafana/grafana/pkg/live"
 	"github.com/grafana/grafana/pkg/middleware"
 	"github.com/grafana/grafana/pkg/services/search"
-	"strconv"
 )
 
 func Search(c *middleware.Context) {
@@ -43,6 +43,4 @@ func Search(c *middleware.Context) {
 	}
 
 	c.JSON(200, searchQuery.Result)
-
-	live.SendMessage(query)
 }

public/app/core/core.ts

@@ -28,6 +28,7 @@ import {infoPopover} from './components/info_popover';
 import {colorPicker} from './components/colorpicker';
 import {navbarDirective} from './components/navbar/navbar';
 import {arrayJoin} from './directives/array_join';
+import {liveSrv} from './live/live_srv';
 import 'app/core/controllers/all';
 import 'app/core/services/all';
 import 'app/core/routes/routes';
@@ -42,5 +43,6 @@ export {
   navbarDirective,
   searchDirective,
   colorPicker,
+  liveSrv,
   infoPopover
 };

public/app/core/live/live_srv.ts

+///<reference path="../../headers/common.d.ts" />
+
+import config from 'app/core/config';
+import coreModule from 'app/core/core_module';
+
+export class LiveSrv {
+  conn: any;
+
+  init() {
+    this.conn = new WebSocket("ws://localhost:3000/ws");
+    this.conn.onclose = function(evt) {
+      console.log("WebSocket closed");
+    };
+    this.conn.onmessage = function(evt) {
+      console.log("WebSocket message", evt.data);
+    };
+    this.conn.onopen = function(evt) {
+      console.log("Connection opened");
+    };
+  }
+
+  subscribe(name) {
+    if (!this.conn) {
+      this.init();
+    }
+  }
+
+}
+
+var instance = new LiveSrv();
+export {instance as liveSrv};

public/app/features/admin/admin.ts

@@ -20,14 +20,6 @@ class AdminSettingsCtrl {
 class AdminHomeCtrl {
   /** @ngInject **/
   constructor() {
-
-    var conn = new WebSocket("ws://localhost:3000/ws");
-    conn.onclose = function(evt) {
-      console.log("Connection closed");
-    };
-    conn.onmessage = function(evt) {
-      console.log("message", evt.data);
-    };
   }
 }
 

public/app/plugins/datasource/stream/datasource.ts

+///<reference path="../../../headers/common.d.ts" />
+
+import {liveSrv} from 'app/core/core';
+
+export class GrafanaStreamDS {
+
+  /** @ngInject */
+  constructor(private $q) {
+
+  }
+
+  query(options) {
+    if (options.targets.length === 0) {
+      return Promise.resolve({data: []});
+    }
+
+    var target = options.targets[0];
+    liveSrv.subscribe(target);
+  }
+}
+

public/app/plugins/datasource/stream/module.ts

+///<reference path="../../../headers/common.d.ts" />
+
+import angular from 'angular';
+import {GrafanaStreamDS} from './datasource';
+import {QueryCtrl} from 'app/plugins/sdk';
+
+class GrafanaQueryCtrl extends QueryCtrl {
+  static templateUrl = 'partials/query.editor.html';
+}
+
+export {
+  GrafanaStreamDS as Datasource,
+  GrafanaQueryCtrl as QueryCtrl,
+};
+

public/app/plugins/datasource/stream/partials/query.editor.html

+<query-editor-row ctrl="ctrl">
+	<li class="tight-form-item">
+		Stream Expression
+	</li>
+	<li>
+		<input type="text" class="tight-form-input input-large" ng-model="ctrl.target.channel">
+	</li>
+</query-editor-row>

public/app/plugins/datasource/stream/plugin.json

+{
+  "type": "datasource",
+  "name": "Grafana Stream DS",
+  "id": "grafana-stream-ds",
+
+  "builtIn": true,
+  "metrics": true
+}