feat(plugins/plugin-ibmcloud): initial CodeEngine support

Fixes #5302
Fixes #5303

packages/core/src/index.ts

@@ -33,6 +33,7 @@ export { CapabilityRegistration } from './models/plugin'
 // Commands
 export { default as AlwaysViewIn } from './models/AlwaysViewIn'
 export {
+  CommandHandler,
   CommandOptions,
   CommandLine,
   Evaluator,
@@ -100,6 +101,7 @@ export { prettyPrintTime } from './webapp/util/time'
 // registrars
 export {
   SidecarModeFilter as ModeFilter,
+  ModeDeclaration,
   ModeRegistration,
   registerModeWhen,
   registerSidecarMode as registerMode,

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

@@ -132,7 +132,11 @@ export class Table<RowType extends Row = Row> {
 
   // type?: string
 
-  gridableColumn?: number
+  /** Column index to be interpreted as a status column */
+  statusColumnIdx?: number
+
+  /** Column index to be interpreted as a duration column */
+  durationColumnIdx?: number
 
   style?: TableStyle
 

packages/core/src/webapp/views/registrar/modes.ts

@@ -26,7 +26,7 @@ const debug = Debug('webapp/views/registrar/modes')
 
 export type SidecarModeFilter<Resource extends MetadataBearing> = (resource: Resource) => boolean
 
-type ModeDeclaration<Resource extends MetadataBearing> = SidecarMode
+export type ModeDeclaration<Resource extends MetadataBearing> = SidecarMode
 //  | ((command: string, resource: { resource: Resource }) => SidecarMode)
 //  | Button
 

packages/test/src/api/table.ts

@@ -32,7 +32,9 @@ interface RowWithBadgeAndMessage {
 
 interface TableValidation {
   hasGridButton?: boolean
-  cells: ((value: string, rowIdx: number) => void)[]
+  cells?: ((value: string, rowIdx: number) => void)[]
+  asGrid?: boolean
+  switchToList?: boolean
 }
 
 interface Tests {
@@ -159,6 +161,15 @@ export class TestTable {
             await res.app.client.waitForVisible(Selectors.TABLE_SHOW_AS_GRID(res.count))
           }
 
+          if (validation && validation.asGrid) {
+            await res.app.client.waitForVisible(Selectors.TABLE_AS_GRID(res.count))
+          }
+
+          if (validation && validation.switchToList) {
+            await res.app.client.waitForVisible(Selectors.TABLE_SHOW_AS_LIST(res.count))
+            await res.app.client.click(Selectors.TABLE_SHOW_AS_LIST(res.count))
+          }
+
           return res
         })
         .then(

plugins/plugin-carbon-themes/web/scss/charts.scss

@@ -1,35 +1,18 @@
 /* from https://www.carbondesignsystem.com/data-visualization/color-palettes */
 
+@mixin charts-red-blue-diverging {
+  --color-latency-0: #153969; /* b80 */
+  --color-latency-1: #3070bd; /* b60 */
+  --color-latency-2: #c3e5fc; /* b30 */
+  --color-latency-3: #f4b6b9; /* r30 */
+  --color-latency-4: #c83532; /* r60 */
+  --color-latency-5: #6b1918; /* r80 */
+}
+
 @mixin charts-light {
-  --color-latency-0: #002d9c;
-  --color-latency-1: #009d9a;
-  --color-latency-2: #9f1853;
-  --color-latency-3: #520408;
-  --color-latency-4: #a563ff;
-  --color-latency-5: #fff1f1;
-  --color-latency-6: #6fdc8c;
-  --color-latency-7: #458dff;
-  --color-latency-8: #d12771;
-  --color-latency-9: #d2a106;
-  --color-latency-10: #08bdba;
-  --color-latency-11: #bae6ff;
-  --color-latency-12: #ba4e00;
-  --color-latency-13: #d4bbff;
+  @include charts-red-blue-diverging;
 }
 
 @mixin charts-dark {
-  --color-latency-0: #458dff;
-  --color-latency-1: #08bdba;
-  --color-latency-2: #d4bbff;
-  --color-latency-3: #fff1f1;
-  --color-latency-4: #6fdc8c;
-  --color-latency-5: #ff7eb6;
-  --color-latency-6: #6fdc8c;
-  --color-latency-7: #458dff;
-  --color-latency-8: #d12771;
-  --color-latency-9: #d2a106;
-  --color-latency-10: #08bdba;
-  --color-latency-11: #bae6ff;
-  --color-latency-12: #ba4e00;
-  --color-latency-13: #d4bbff;
+  @include charts-red-blue-diverging;
 }

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Tab, REPL, Table as KuiTable } from '@kui-shell/core'
+import { Tab, REPL, Table as KuiTable, Row as KuiRow } from '@kui-shell/core'
 
 import * as React from 'react'
 
@@ -32,21 +32,46 @@ export type Props<T extends KuiTable = KuiTable> = {
 }
 
 export const findGridableColumn = (response: KuiTable) => {
-  return response.gridableColumn !== undefined
-    ? response.gridableColumn - 1
+  return response.durationColumnIdx >= 0
+    ? response.durationColumnIdx
+    : response.statusColumnIdx !== undefined
+    ? response.statusColumnIdx - 1
     : response.body[0]
     ? response.header.attributes.findIndex(cell => /STATUS|REASON/i.test(cell.key))
     : -1
 }
 
+const thresholds = [2000, 4000, 6000, 8000]
+
 /**
  * A Grid table
  *
  */
 export default class Grid<P extends Props> extends React.PureComponent<P> {
+  private durationCss(row: KuiRow, isError: boolean) {
+    const { response } = this.props
+    const { durationColumnIdx } = response
+    const duration = parseInt(row.attributes[durationColumnIdx].value, 10)
+
+    if (isError) {
+      return 'red-background'
+    } else if (duration < thresholds[0]) {
+      return 'color-latency0'
+    } else if (duration < thresholds[1]) {
+      return 'color-latency1'
+    } else if (duration < thresholds[2]) {
+      return 'color-latency3'
+    } else if (duration < thresholds[3]) {
+      return 'color-latency4'
+    } else {
+      return 'color-latency5'
+    }
+  }
+
   public render() {
     const { tab, repl, response, visibleRows } = this.props
 
+    const colorByDuration = response.durationColumnIdx >= 0
     const gridableColumn = findGridableColumn(response)
 
     const nCells = visibleRows.length
@@ -58,7 +83,9 @@ export default class Grid<P extends Props> extends React.PureComponent<P> {
         {response.body.map((kuiRow, kidx) => {
           const badgeCell = gridableColumn !== -1 && kuiRow.attributes[gridableColumn]
           const title = `${kuiRow.name}\n${badgeCell ? badgeCell.value : ''}`
-          const css = badgeCell ? badgeCell.css : 'kui--status-unknown'
+          const statusCss = badgeCell ? badgeCell.css : 'kui--status-unknown'
+          const isError = /red-background/.test(statusCss)
+          const css = colorByDuration ? this.durationCss(kuiRow, isError) : statusCss
 
           // cell label, to be displayed inside of the grid cell
           const label = <span className="kui--grid-cell-label">{kuiRow.name.slice(0, 2)}</span>
@@ -67,6 +94,7 @@ export default class Grid<P extends Props> extends React.PureComponent<P> {
             title,
             key: css, // force restart of animation if color changes
             'data-tag': 'badge-circle',
+            'data-color-by': colorByDuration ? 'duration' : 'status',
             'data-just-updated': this.props.justUpdated[kuiRow.rowKey || kuiRow.name],
             className: css,
             onClick: onClickForCell(

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

@@ -277,7 +277,7 @@ export default class PaginatedTable<P extends Props, S extends State> extends Re
                 }
               >
                 {response.header && renderHeader(response.header, renderOpts)}
-                {renderBody(response.body, this.justUpdatedMap(), renderOpts, tab, repl, offset)}
+                {renderBody(response, this.justUpdatedMap(), renderOpts, tab, repl, offset)}
               </Table>
             </TableContainer>
           )}

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Row as KuiRow, Tab, REPL } from '@kui-shell/core'
+import { Table, Tab, REPL } from '@kui-shell/core'
 
 import * as React from 'react'
 import { DataTableCustomRenderProps, TableBody, TableRow } from 'carbon-components-react'
@@ -25,11 +25,11 @@ import { NamedDataTableRow } from './kui2carbon'
 /**
  * Render the TableBody part
  *
- * @param offset offset into the kuiBody model
+ * @param offset offset into the kuiTable.body model
  *
  */
 export default function renderBody(
-  kuiBody: KuiRow[],
+  kuiTable: Table,
   justUpdated: Record<string, boolean>, // rowKey index
   renderOpts: DataTableCustomRenderProps<NamedDataTableRow>,
   tab: Tab,
@@ -39,18 +39,18 @@ export default function renderBody(
   return (
     <TableBody>
       {renderOpts.rows.map((row, ridx) => {
-        const kuiRow = kuiBody[offset + ridx]
+        const kuiRow = kuiTable.body[offset + ridx]
         const updated = justUpdated[kuiRow.rowKey || kuiRow.name]
 
         return (
           <TableRow
             key={row.id}
             {...renderOpts.getRowProps({
               row,
-              'data-name': kuiBody[offset + ridx].name
+              'data-name': kuiTable.body[offset + ridx].name
             })}
           >
-            {row.cells.map(renderCell(kuiRow, updated, tab, repl))}
+            {row.cells.map(renderCell(kuiTable, kuiRow, updated, tab, repl))}
           </TableRow>
         )
       })}

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

@@ -15,8 +15,9 @@
  */
 
 import * as React from 'react'
+import * as prettyPrintDuration from 'pretty-ms'
 import { TableCell, DataTableCell } from 'carbon-components-react'
-import { Cell as KuiCell, Row as KuiRow, Tab, REPL } from '@kui-shell/core'
+import { Table as KuiTable, Cell as KuiCell, Row as KuiRow, Tab, REPL } from '@kui-shell/core'
 
 import ErrorCell from './ErrorCell'
 
@@ -59,7 +60,7 @@ export function onClickForCell(
  * Render a TableCell part
  *
  */
-export default function renderCell(kuiRow: KuiRow, justUpdated: boolean, tab: Tab, repl: REPL) {
+export default function renderCell(table: KuiTable, 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
@@ -83,7 +84,10 @@ export default function renderCell(kuiRow: KuiRow, justUpdated: boolean, tab: Ta
     const css = cidx > 0 ? kuiRow.attributes[cidx - 1].css : undefined
 
     // the text value of the cell
-    const innerText = (kuiRow.attributes[cidx - 1] && kuiRow.attributes[cidx - 1].valueDom) || cell.value
+    const innerText =
+      cidx - 1 === table.durationColumnIdx
+        ? prettyPrintDuration(parseInt(cell.value, 10))
+        : (kuiRow.attributes[cidx - 1] && kuiRow.attributes[cidx - 1].valueDom) || cell.value
 
     return (
       <TableCell

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

@@ -1214,6 +1214,25 @@ body[kui-theme-style="dark"] .kui--inverted-color-context {
   fill: currentColor;
 }
 
+.color-latency0 {
+  background-color: var(--color-latency-0);
+}
+.color-latency1 {
+  background-color: var(--color-latency-1);
+}
+.color-latency2 {
+  background-color: var(--color-latency-2);
+}
+.color-latency3 {
+  background-color: var(--color-latency-3);
+}
+.color-latency4 {
+  background-color: var(--color-latency-4);
+}
+.color-latency5 {
+  background-color: var(--color-latency-5);
+}
+
 @media all and (max-width: 1100px) {
   .log-lines .log-field.start-time-field {
     display: none;

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

@@ -13,8 +13,10 @@ $grid-cell-size: 1.25rem;
     margin-right: 1ex;
     width: 0.875rem;
     height: 0.875rem;
-    background-color: var(--color-ui-05);
     border-radius: 1px;
+    [data-color-by='status'] {
+      background-color: var(--color-ui-05);
+    }
   }
   [data-tag='badge-circle'].green-background {
     background-color: var(--color-green);

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

@@ -144,24 +144,27 @@ body .bx--data-table {
         white-space: nowrap;
         text-overflow: ellipsis;
       }
-
-      .hide-with-sidecar {
-        display: none;
-      }
     }
   }
 }
 
-body[kui-theme-style] .repl.sidecar-visible {
+@mixin full-width-tables-with-constrained-width {
   @include full-width-tables;
+  .hide-with-sidecar {
+    display: none;
+  }
+}
+
+body[kui-theme-style] .repl.sidecar-visible {
+  @include full-width-tables-with-constrained-width;
 }
 @include narrow-window {
-  @include full-width-tables;
+  @include full-width-tables-with-constrained-width;
 }
-
 .kui--scrollback div[data-table-watching] {
   @include full-width-tables;
 }
+
 .kui--scrollback {
   &:not([data-is-minisplit]):not([data-is-width-constrained]) .kui--data-table-container {
     div[data-table-watching] {