feat(packages/core): support updating Table from push notifications

Fixes #3295

Author: myan9

clients/test/plugins/plugin-test/src/lib/cmds/table.ts

@@ -20,16 +20,84 @@
  */
 
 // Notes: this is part of the Kui core API
-import { Commands } from '@kui-shell/core'
+import { Commands, Tables } from '@kui-shell/core'
+import { Watchable } from '@kui-shell/core/api/models'
 
 import tableContent from './content/table-with-drilldown'
 
+interface Options extends Commands.ParsedOptions {
+  watch: 'push' | 'poll'
+  'final-state': string
+}
+
+// generateNewPush generates new `Row` with badge and message
+const generateNewPush = (name: string, onlineLike: boolean, message: string): Tables.Row => {
+  const status = onlineLike ? 'Running' : 'Terminating'
+  const css = onlineLike ? 'green-background' : 'yellow-background'
+  return { name, attributes: [{ key: 'STATUS', tag: 'badge', value: status, css }, { key: 'MESSAGE', value: message }] }
+}
+
+const doTable = (): ((args: Commands.Arguments<Options>) => Tables.Table & Partial<Watchable>) => {
+  return (args: Commands.Arguments<Options>) => {
+    const table = tableContent()
+    const emptyRows: Tables.Row[] = []
+
+    const tableWithoutRows: Tables.Table = {
+      noSort: true,
+      header: { name: 'name', attributes: [{ value: 'status' }, { value: 'message' }] },
+      body: emptyRows
+    }
+
+    const watch = args.parsedOptions.watch
+    const finalState = args.parsedOptions['final-state']
+
+    if (watch && watch === 'push' && finalState) {
+      const watch: Watchable = {
+        watch: {
+          init: (update, offline) => {
+            const name1 = 'foo1'
+            const name2 = 'foo2'
+
+            update(generateNewPush(name1, true, 'should create a new row'))
+            if (finalState === 'createRow1') return
+
+            setTimeout(() => update(generateNewPush(name1, false, 'should terminate the row')), 1000)
+            if (finalState === 'terminateRow1') return
+
+            setTimeout(() => offline(name1), 1500)
+            if (finalState === 'deleteRow1') return
+
+            setTimeout(() => update(generateNewPush(name1, true, 'should activate the deleted row')), 2000)
+            if (finalState === 'activateRow1') return
+
+            setTimeout(() => update(generateNewPush(name1, false, 'should terminate the row again')), 2500)
+            if (finalState === 'terminateRow1Again') return
+
+            setTimeout(() => offline(name1), 3000)
+            if (finalState === 'deleteRow1Again') return
+
+            setTimeout(() => update(generateNewPush(name2, true, 'should create the second row')), 3500)
+            if (finalState === 'createRow2') return
+
+            if (finalState === 'activeRow1Again')
+              setTimeout(() => update(generateNewPush(name1, true, 'should activate the first row again')), 4000)
+          }
+        }
+      }
+
+      return Object.assign({}, tableWithoutRows, watch)
+    } else {
+      return table
+    }
+  }
+}
+
 /**
  * Here is where we register our command.
  *
  */
 export default (commandTree: Commands.Registrar) => {
-  commandTree.listen('/test/table', () => tableContent(), {
+  commandTree.listen('/test/table', doTable(), {
     usage: {
       docs: 'A showcase of the Table view'
     }

clients/test/plugins/plugin-test/src/test/response/table.ts

@@ -44,3 +44,74 @@ test.drilldownFromREPL({
   header: expectHeaderText,
   body: expectRow
 })
+
+const testPush = new TestTable({
+  command: 'test table --watch=push'
+})
+
+testPush.statusBadge([
+  {
+    testName: 'should create a new row',
+    command: 'test table --watch=push --final-state=createRow1',
+    expectRow: [
+      { name: 'foo1', badgeCss: 'green-background', badgeText: 'Running', message: 'should create a new row' }
+    ]
+  },
+  {
+    testName: 'should terminate the row',
+    command: 'test table --watch=push --final-state=terminateRow1',
+    expectRow: [
+      { name: 'foo1', badgeCss: 'yellow-background', badgeText: 'Terminating', message: 'should terminate the row' }
+    ]
+  },
+  {
+    testName: 'should delete the row',
+    command: 'test table --watch=push --final-state=deleteRow1',
+    expectRow: [{ name: 'foo1', badgeCss: 'red-background', badgeText: 'Offline', message: 'should terminate the row' }]
+  },
+  {
+    testName: 'should activate the deleted row',
+    command: 'test table --watch=push --final-state=activateRow1',
+    expectRow: [
+      { name: 'foo1', badgeCss: 'green-background', badgeText: 'Running', message: 'should activate the deleted row' }
+    ]
+  },
+  {
+    testName: 'should terminate the row again',
+    command: 'test table --watch=push --final-state=terminateRow1Again',
+    expectRow: [
+      {
+        name: 'foo1',
+        badgeCss: 'yellow-background',
+        badgeText: 'Terminating',
+        message: 'should terminate the row again'
+      }
+    ]
+  },
+  {
+    testName: 'should delete the row again',
+    command: 'test table --watch=push --final-state=deleteRow1Again',
+    expectRow: [
+      { name: 'foo1', badgeCss: 'red-background', badgeText: 'Offline', message: 'should terminate the row again' }
+    ]
+  },
+  {
+    testName: 'should create the second row',
+    command: 'test table --watch=push --final-state=createRow2',
+    expectRow: [
+      { name: 'foo2', badgeCss: 'green-background', badgeText: 'Running', message: 'should create the second row' }
+    ]
+  },
+  {
+    testName: 'should activate the first row again',
+    command: 'test table --watch=push --final-state=activeRow1Again',
+    expectRow: [
+      {
+        name: 'foo1',
+        badgeCss: 'green-background',
+        badgeText: 'Running',
+        message: 'should activate the first row again'
+      }
+    ]
+  }
+])

packages/core/src/api/models.ts

@@ -53,4 +53,6 @@ export namespace Models {
 // see https://github.com/IBM/kui/issues/3222
 export { MetadataBearing as ResourceWithMetadata } from '../models/entity'
 
+export { Watchable } from '../webapp/models/watch'
+
 export default Models

packages/core/src/webapp/models/basicModels.ts

@@ -16,7 +16,7 @@
 
 /* eslint-disable @typescript-eslint/explicit-member-accessibility */
 
-import { Watchable } from './basicModels'
+import { Watchable, Poller } from './watch'
 import { MetadataBearing, Entity } from '../../models/entity'
 import { SidecarMode } from '../bottom-stripe'
 
@@ -159,8 +159,6 @@ export class Table<RowType extends Row = Row> {
   }
 }
 
-export interface WatchableTable extends Table, Watchable {}
-
 export function isTable<C>(model: SidecarMode | MetadataBearing<C> | Entity): model is Table {
   return (
     model !== undefined && (model instanceof Table || ((model as Table).body && Array.isArray((model as Table).body)))
@@ -183,7 +181,8 @@ export function isMultiTable<C>(model: SidecarMode | MetadataBearing<C> | Entity
 
 export type WatchableMultiTable = MultiTable & Watchable
 
-export function formatWatchableTable<T extends Table | MultiTable>(model: T, watch: Watchable): T & Watchable {
+export function formatWatchableTable<T extends Table | MultiTable>(model: T, poller: Poller): T & Watchable {
+  const watch: Watchable = { watch: poller }
   if (isTable(model) || isMultiTable(model)) {
     return Object.assign(model, watch)
   } else {
@@ -236,7 +235,7 @@ interface RowDeletion {
   deleteIndex: number
 }
 
-export interface RowDiff {
+interface RowDiff {
   rowUpdate: RowUpdate[]
   rowDeletion: RowDeletion[]
   rowInsertion: RowInsertion[]

packages/core/src/webapp/models/table.ts

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2019 IBM Corporation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Entity } from '../../models/entity'
+import { Row } from '../models/table'
+
+export interface Watchable {
+  watch: Poller | Pusher
+}
+
+export type Poller = Partial<Toggleable> & {
+  refreshCommand: string
+  watchInterval?: number
+  watchLimit?: number
+}
+
+/** NOTE: Toggleable is not implemented */
+interface Toggleable {
+  watchByDefault: boolean
+}
+
+export interface Pusher {
+  /**
+   * Contract: the table renderer will call this function when the DOM
+   * is ready to accept updates. when you have updates, please call
+   * one or the other of the provided functions
+   */
+  init: (update: WatchedRowHasUpdate, offline: WactchedRowisOffline) => void
+}
+
+/** callbacks to indicate state changes */
+type WatchedRowHasUpdate = (response: Row) => void
+type WactchedRowisOffline = (rowKey: string) => void
+
+function isPoller(model: Poller | Pusher): model is Poller {
+  return (model as Poller).refreshCommand !== undefined
+}
+
+export function isPusher(model: Poller | Pusher): model is Pusher {
+  return (model as Pusher).init !== undefined
+}
+
+export function isWatchable(model: Entity & Partial<Watchable>): model is Entity & Watchable {
+  return model && model.watch && (isPoller(model.watch) || isPusher(model.watch))
+}

packages/core/src/webapp/models/watch.ts

@@ -33,7 +33,7 @@ import presentAs from './views/sidecar-present'
 import { isHTML } from '../util/types'
 import { promiseEach } from '../util/async'
 
-import { isWatchable } from './models/basicModels'
+import { isWatchable } from './models/watch'
 import { Streamable, Stream } from '../models/streamable'
 import { CommandHandlerWithEvents, ExecType, KResponse, ParsedOptions } from '../models/command'
 import { Table, isTable, isMultiTable } from './models/table'