kibana/x-pack/plugins/watcher

Conventions

This plugins adopts some conventions in addition to or in place of conventions in Kibana (at the time of the plugin's creation):

Folder structure

public/
  directives/ (This is the same as *A, but is for directives that are used cross-view)
  services/
    watch/
      index.js (no code here; only `export from watch.js`)
      watch.js
    notifications/
      index.js (no code here; only `export from notifications.js`)
      notifications.js
    ...
  views/
    edit/
    ...
    list/
      directives/ (*A)
        my_directive_name/
          directives/ (Subcomponents of my_directive_name are defined here, and this follows the same structure as *A)
          index.js (no code here; only `export from my_directive_name.js`)
          my_directive_name.js
          my_directive_name.html
        index.js (imports the directives in this folder, i.e.,my_directive_name)
      routes/
        index.js (no code here; only imports routes.js)
        routes.js
      index.js

server/
  lib/
    screenshots/
      screenshots.js
      index.js // ONLY exposes screenshots service
      screenshot.js // helper service, not exposed in index.js
      __tests__/
        screenshots.js
        screenshot.js
    say_hello/
      index.js
      say_hello.js

Data Services

api calls:

• GET /watch/{id}
• PUT /watch/{id}

using the service

import watch from './services/watch'

watch.get(...)
watch.put(...)

Services / Lib

• Shared code that requires state should be made into a service. For example, see pageService.
• Shared code that doesn't require state (e.g. a simple helper function) should be made a lib. For example, see clamp.

Controller classes

• All functions in controller classes should be defined as arrow function constants. This is to ensure the this context is consistent, regardless of where it is being called.

GOOD

  controller: class WatchListController {
    onQueryChanged = (query) => {...};
  }

BAD

  controller: class WatchListController {
    onQueryChanged(query) {...};
  }

  controller: class WatchListController {
    constructor() {
      this.onQueryChanged = (query) => {...};
    }
  }

• Constructors should be used to initialize state and define $scope.$watch(es)

GOOD

  controllerAs: 'watchList',
  bindToController: true,
  scope: { foo: '=' },
  controller: class WatchListController {
    constructor() {
      this.foo = this.foo || 'default';

      $scope.$watch('watchList.foo', () => {
        console.log('foo changed, fool');
      });
    }
  }

Event handlers

Event handler functions should be named with the following pattern:

on<Verb>, in present tense

In case there is ambiguity about what the verb is acting upon a noun should be included like so:

on<Noun><Verb>, in present tense

GOOD

onDelete
onWatchDelete

BAD

onDeleted
onWatchDeleted

Data Flow

We have a layered architecture in the Watcher UI codebase, with each layer performing a specific function to the data as it flows through it.

Elasticsearch APIs <---> Kibana server models <---> Kibana APIs <---> Kibana client services <---> Kibana client models <---> Kibana client code

Each of these layers is described below.

Elasticsearch APIs

This the ultimate source or destination of any persisted data: watches, watch history, etc.

Kibana server models

These set of classes translate data coming from Elasticsearch into a shape required by the Watcher UI codebase. Conversely, they translate data generated by the Watcher UI into a shape required by Elasticsearch APIs.

Kibana APIs

This layer is responsible for transporting data between the Kibana server and Kibana client (browser).

Kibana client services

This layer is responsible for calling Kibana APIs, using client models to parse responses from APIs or create requests for APIs.

Service methods should consume models as arguments and return models as much as possible. The exception to this might be services that perform an initial load of a piece of data from the API; in this case the service method may consume a scalar ID as it argument.

Kibana client models

Much like their server counterparts, these set of classes translate data coming from the Kibana APIs into in-memory representations for use in the Kibana client-side code or vice-versa. Unlike their server counterparts they typically don't change the shape of the data (as that is typically done by the server models already).

They do, however, serve as a consistent place in the data path for translating wire representations of certain types of data into more suitable in-memory representations, for example: converting an ISO8601-formatted timestamp into a moment instance.

They are also the right place for establishing relationships between models — for example, a watch contains many actions — and for encapsulating operations around such relationships — for example, updating the status of a watch's action.

Kibana client code

This layer deals almost exclusively with data in the form of client models. The one exception to this rule is when the client code needs to bootstrap a model instance from a bare JS object — for example, creating a new Watch model from the contents of the Add/Edit Watch Form.