stacey-gammon

React Style Guide

Prefer Stateless functional components where possible.

Stateless function components are more concise, and there are plans for react to increase performance of them. Good:

export function KuiButton({ onClick, isDisabled }) {
  return <button className="kuiButton" onClick={onClick} isDisabled={isDisabled}/>
};

stacey-gammon

Every Day

• Issue/PR triage

ASAP

• Add dashboard only mode docs and link to it with Learn More links.
• Start working on custom dashboard colors.
• Sync with elastic/kibana#11632 and use new API for dashboard
• Check up on stats api: https://github.com/elastic/x-pack-kibana/issues/1005

Soon

stacey-gammon

Panel loaded on a dashboard

// dashboard_panel.js
async componentDidMount() {
  this.props.renderEmbeddable(this.panelElement, this.props.panel);
}

render() {
  return (
    <div

stacey-gammon

Dashboard Redux State Tree:

{
  id: string,
  title: string,
  
  timeRange: {
    from: string,

stacey-gammon

Typescriptifying Kibana Tips

Converting existing code

To convert existing code over to typescript:

1. rename the file from .js to either .ts (if there is no html or jsx in the file) or .tsx (if there is).
2. Ensure tslint is running and installed in the IDE of your choice. There will usually be some linter errors after a save.
3. Auto-fix what you can. This will save you a lot of time! I have VSCode set to auto fix tslint errors when I save the file.

How to fix common typescript errors

stacey-gammon

class InMemoryTable extends IDataTable {
  // basic impl of all the funcs on an in memory table.
}

interface IDataTable {
  narrow(narrowingQuery: INarrowingQuery): IDataTable;
  selectColumns(columns: string[]): IDataTable;
  groupBy(aggs: Aggs): IDataTable;
  getFieldSuggestions(fieldPrefix: string): IDataTable;

stacey-gammon

Persistable state plugin

Corner cases

1. Registrar wants to add a migration to every registry item. Example: Author of Embeddable api wants to migrate base EmbeddableInput.
2. Enhancer wants to add a migration to every registry item. Author of EnhancedEmbeddableDrilldowns wants to migrate EnhancedEmbeddableInput.
3. Registrator wants to add a migration to it's specific registry item. Example: Author of VisState wants to migrate VisualizeEmbeddableInput

stacey-gammon

Corner cases:

1. Registrar wants to add a migration to every registry item. Specific example: Author of Embeddable api wants to migrate base EmbeddableInput.
2. Enhancer wants to add a migration to every registry item. Specific example: Author of EnhancedEmbeddableDrilldowns wants to migrate EnhancedEmbeddableInput.
3. Registrator wants to add a migration to it's specific registry item. Example: Author of Visualize plugin wants to migrate VisualizeEmbeddableInput

Corner case 1 & avoiding clashes.

stacey-gammon

interface PersistableStateService {
  getMigrations: { [key: string]: MigrationFn }
}


function collectDashboardPanelMigrations(): { [key:string]: MigrationFn } {
  // Dashboard plugin may have registered some of it's own panel migrations.
  const panelMigrations: { [key:string]: MigrationFn } = {