fix: don't blink yellow forever for kubectl events

in support of this fix, this PR allows push providers to specify whether the `update()` call should be reflected as a change in the UI. this allows the kubectl push provider to special case Events, which, though "yellow" or "red", should not be blinky, because they'll be yellow or red forever.

Fixes #4869

Author: starpit

packages/core/src/core/jobs/watchable.ts

@@ -33,13 +33,32 @@ export interface Watchable {
 
 /** callbacks to indicate state changes */
 export interface WatchPusher {
-  update: (response: Row, batch?: boolean) => void
+  /**
+   *
+   * @param response Updated row model
+   *
+   * @param batch? is this part of a batch update? Updates to the view
+   * will be deferred until a call to batchUpdateDone()
+   *
+   * @param changed? allows push provider to specify whether this
+   * update should be visualized as a change to the model [default:
+   * true]
+   */
+  update: (response: Row, batch?: boolean, changed?: boolean) => void
+
+  /** A batch of calls to `update` is complete */
   batchUpdateDone: () => void
 
+  /** The given keyed row is gone */
   offline: (rowKey: string) => void
 
+  /** No more updates will be performed */
   done: () => void
+
+  /** The entire underlying model has disappared */
   allOffline: () => void
+
+  /** The header model has changed */
   header: (response: Row) => void
 }
 

plugins/plugin-client-common/src/components/Content/Table/LivePaginatedTable.tsx

@@ -91,7 +91,7 @@ export default class LivePaginatedTable extends PaginatedTable<LiveProps, LiveSt
         }
       })
 
-      const newRow = kuiRow2carbonRow(this.state.headers)(kuiRow, foundIndex)
+      const newRow = kuiRow2carbonRow(this.state.headers, true)(kuiRow, foundIndex)
       const newRows = existingRows
         .slice(0, foundIndex)
         .concat([newRow])
@@ -116,8 +116,8 @@ export default class LivePaginatedTable extends PaginatedTable<LiveProps, LiveSt
    * update consumes the update notification and apply it to the table view
    *
    */
-  private update(newKuiRow: KuiRow, batch = false) {
-    const existingRows = this.state.rows
+  private update(newKuiRow: KuiRow, batch = false, justUpdated = true) {
+    const existingRows = this._deferredUpdate || this.state.rows
     const nRowsBefore = existingRows.length
 
     const foundIndex = existingRows.findIndex(
@@ -129,7 +129,7 @@ export default class LivePaginatedTable extends PaginatedTable<LiveProps, LiveSt
 
     const insertionIndex = foundIndex === -1 ? nRowsBefore : foundIndex
 
-    const newRow = kuiRow2carbonRow(this.state.headers)(newKuiRow, insertionIndex)
+    const newRow = kuiRow2carbonRow(this.state.headers, justUpdated)(newKuiRow, insertionIndex)
 
     // Notes: since PaginatedTable is a React.PureComponent, we will
     // need to create a new array, rather than mutating the existing
@@ -151,8 +151,6 @@ export default class LivePaginatedTable extends PaginatedTable<LiveProps, LiveSt
 
     if (!batch) {
       this.setState({ rows: newRows })
-    } else if (this._deferredUpdate) {
-      this._deferredUpdate = newRows
     } else {
       this._deferredUpdate = newRows
     }

plugins/plugin-client-common/src/components/Content/Table/PaginatedTable.tsx

@@ -204,7 +204,17 @@ export default class PaginatedTable<P extends Props, S extends State> extends Re
                 }
               >
                 {response.header && renderHeader(response.header, renderOpts)}
-                {renderBody(response.body, renderOpts, tab, repl, offset)}
+                {renderBody(
+                  response.body,
+                  this.state.rows.reduce((M, _) => {
+                    if (_.justUpdated) M[_.rowKey] = true
+                    return M
+                  }, {} as Record<string, boolean>),
+                  renderOpts,
+                  tab,
+                  repl,
+                  offset
+                )}
               </Table>
             </TableContainer>
           )}

plugins/plugin-client-common/src/components/Content/Table/TableBody.tsx

@@ -20,6 +20,7 @@ import * as React from 'react'
 import { DataTableCustomRenderProps, TableBody, TableRow } from 'carbon-components-react'
 
 import renderCell from './TableCell'
+import { NamedDataTableRow } from './kui2carbon'
 
 /**
  * Render the TableBody part
@@ -29,24 +30,30 @@ import renderCell from './TableCell'
  */
 export default function renderBody(
   kuiBody: KuiRow[],
-  renderOpts: DataTableCustomRenderProps,
+  justUpdated: Record<string, boolean>, // rowKey index
+  renderOpts: DataTableCustomRenderProps<NamedDataTableRow>,
   tab: Tab,
   repl: REPL,
   offset: number
 ) {
   return (
     <TableBody>
-      {renderOpts.rows.map((row, ridx) => (
-        <TableRow
-          key={row.id}
-          {...renderOpts.getRowProps({
-            row,
-            'data-name': kuiBody[offset + ridx].name
-          })}
-        >
-          {row.cells.map(renderCell(kuiBody[offset + ridx], row, tab, repl))}
-        </TableRow>
-      ))}
+      {renderOpts.rows.map((row, ridx) => {
+        const kuiRow = kuiBody[offset + ridx]
+        const updated = justUpdated[kuiRow.rowKey]
+
+        return (
+          <TableRow
+            key={row.id}
+            {...renderOpts.getRowProps({
+              row,
+              'data-name': kuiBody[offset + ridx].name
+            })}
+          >
+            {row.cells.map(renderCell(kuiRow, updated, tab, repl))}
+          </TableRow>
+        )
+      })}
     </TableBody>
   )
 }

plugins/plugin-client-common/src/components/Content/Table/TableCell.tsx

@@ -17,7 +17,7 @@
 import { Cell as KuiCell, Row as KuiRow, Tab, REPL } from '@kui-shell/core'
 
 import * as React from 'react'
-import { TableCell, DataTableRow, DataTableCell } from 'carbon-components-react'
+import { TableCell, DataTableCell } from 'carbon-components-react'
 
 /**
  * Generate an onclick handler for a cell
@@ -58,7 +58,7 @@ export function onClickForCell(
  * Render a TableCell part
  *
  */
-export default function renderCell(kuiRow: KuiRow, row: DataTableRow, tab: Tab, repl: REPL) {
+export default function renderCell(kuiRow: KuiRow, justUpdated: boolean, tab: Tab, repl: REPL) {
   return function KuiTableCell(cell: DataTableCell, cidx: number) {
     // e.g. is this a badge/status-like cell?
     const tag = cidx > 0 && kuiRow.attributes[cidx - 1].tag
@@ -95,7 +95,13 @@ export default function renderCell(kuiRow: KuiRow, row: DataTableRow, tab: Tab,
           className={outerClassName}
         >
           {tag === 'badge' && (
-            <span title={innerText} data-tag="badge-circle" className={kuiRow.attributes[cidx - 1].css} />
+            <span
+              key={kuiRow.attributes[cidx - 1].css /* force restart of animation if color changes */}
+              title={innerText}
+              data-tag="badge-circle"
+              className={kuiRow.attributes[cidx - 1].css}
+              data-just-updated={justUpdated || undefined}
+            />
           )}
           <span className="kui--cell-inner-text">{innerText}</span>
         </span>

plugins/plugin-client-common/src/components/Content/Table/kui2carbon.ts

@@ -20,6 +20,7 @@ import { DataTableHeader, DataTableRow } from 'carbon-components-react'
 export interface NamedDataTableRow extends DataTableRow {
   NAME: string
   rowKey: string
+  justUpdated: boolean
 }
 
 /** attempt to infer header model from body model */
@@ -56,11 +57,11 @@ export function kuiHeader2carbonHeader(header: KuiRow): DataTableHeader[] {
  * DataTable.
  *
  */
-export function kuiRow2carbonRow(headers: DataTableHeader[]) {
+export function kuiRow2carbonRow(headers: DataTableHeader[], justUpdated = false) {
   return (row: KuiRow, ridx: number): NamedDataTableRow => {
     const isSelected = row.rowCSS ? row.rowCSS.includes('selected-row') : false
 
-    const rowData = { id: ridx.toString(), rowKey: row.rowKey, isSelected, NAME: '' }
+    const rowData = { id: ridx.toString(), rowKey: row.rowKey, isSelected, NAME: '', justUpdated }
     rowData[headers[0].key] = row.name
 
     if (!row.key) {

plugins/plugin-client-common/web/css/static/ui.css

@@ -696,7 +696,11 @@ input.repl-partial,
   animation: pulse 1000ms 1;
 }
 body {
-  --animation-repeating-pulse: pulse 1000ms infinite alternate-reverse;
+  --animation-short-repeating-pulse: pulse 1000ms 3 alternate-reverse;
+  --animation-medium-repeating-pulse: pulse 1000ms 6 alternate-reverse;
+  --animation-long-repeating-pulse: pulse 1000ms 20 alternate-reverse;
+  --animation-infinite-repeating-pulse: pulse 1000ms infinite alternate-reverse;
+  --animation-repeating-pulse: var(--animation-infinite-repeating-pulse);
 }
 .repeating-pulse {
   animation: var(--animation-repeating-pulse);

plugins/plugin-client-common/web/scss/components/Table/badges.scss

@@ -103,7 +103,13 @@
 }
 
 [data-table-watching='true'] .bx--data-table {
-  [data-tag='badge-circle'].yellow-background {
-    animation: var(--animation-repeating-pulse);
+  [data-tag='badge-circle'][data-just-updated] {
+    &.yellow-background {
+      animation: var(--animation-infinite-repeating-pulse);
+    }
+
+    &.red-background {
+      animation: pulse 1000ms 6 alternate-reverse;
+    }
   }
 }

plugins/plugin-kubectl/src/controller/kubectl/watch/get-watch.ts

@@ -238,13 +238,16 @@ class KubectlWatcher implements Abortable, Watcher {
           // based on the information we got back, 1) we push updates to
           // the table model; and 2) we may be able to discern that we
           // can stop watching
+          const apiVersion = rows[0][2].value
+          const kind = rows[0][1].value
+          const isEvent = apiVersion === 'v1' && kind === 'Event'
           table.body.forEach(row => {
             // push an update to the table model
             // true means we want to do a batch update
             if (row.isDeleted) {
               this.pusher.offline(row.name)
             } else {
-              this.pusher.update(row, true)
+              this.pusher.update(row, true, !isEvent)
             }
           })