How to use the @kui-shell/core.eventBus.on function in @kui-shell/core

const addCommandEvaluationListeners = (): void => {
  eventBus.on('/command/complete', (event: Event) => {
    if (event.execType !== undefined && event.execType !== ExecType.Nested && event.route) {
      // ignore nested, which means one plugin calling another
      // debug('got event', event)
      const button = getTabButton(event.tab)
      if (button) {
        // the tab might no longer be visible
        button.classList.remove('processing')
      }
    }
  })

  eventBus.on('/command/start', (event: Event) => {
    if (event.execType !== undefined && event.execType !== ExecType.Nested && event.route) {
      // ignore nested, which means one plugin calling another
      // debug('got event', event)

      const tab = event.tab

      if (
        event.route !== undefined &&
        !event.route.match(/^\/(tab|getting\/started)/) // ignore our own events and help
      ) {
        if (/^\/clear/.test(event.route)) {
          // nbsp in the case of clear, except if the sidecar is open;
          // then attempt to continue displaying the command that
          // produced the sidecar; TODO this isn't quite right; we
          // need to find a way to capture that sidecar-producing
          // command

pushResolve()
          } else if (N === iters) {
            console.error('Exiting due to maxIters')
            pushResolve()
          } else {
            // we're not terminating, so push the current result and continue
            push()
            iter(N + 1)
          }
        }
      )
    }

    iter(1, { dryRun: true })

    eventBus.on('/wrk/terminate', () => {
      terminateNow = true
    })
  })
    .then(result => {

terminal.open(xtermContainer)
          // webLinksInit(terminal)

          // theming
          // injectFont(terminal) // inject once on startup
          const doInjectTheme = () => injectFont(terminal, true)
          eventBus.on('/theme/change', doInjectTheme) // and re-inject when the theme changes

          resizer = new Resizer(terminal, tab, execOptions)

          // respond to font zooming
          const doZoom = () => {
            injectFont(terminal, true)
            resizer.resize()
          }
          eventBus.on('/zoom', doZoom)

          const cleanupEventHandlers = () => {
            eventBus.off('/zoom', doZoom)
            eventBus.off('/theme/change', doInjectTheme)
          }

          // heuristic for hiding empty rows
          terminal.element.classList.add('xterm-empty-row-heuristic')
          setTimeout(() => terminal.element.classList.remove('xterm-empty-row-heuristic'), 100)

          //
          // on exit, remove event handlers and the like
          //
          cleanUpTerminal = () => {
            cleanupEventHandlers()
            resizer.destroy()

inject(bar.latencyMinMax, lmax)

    rps.borderColor = area
    rps.borderWidth = borderWidth
    rps.pointRadius = pointRadius
    rps.pointBackgroundColor = area

    if (doUpdate) {
      chart.update()
    }
  }

  //
  // when the theme changes, trigger a chart redraw
  //
  eventBus.on('/theme/change', () => injectTheme(true))

  injectTheme(false)

  const right = document.querySelector('#sidecar .header-right-bits .custom-header-content')
  const label = document.createElement('div')
  const max = document.createElement('div')

  UI.empty(right)

  right.appendChild(label)
  right.appendChild(max)
  max.classList.add('kind')
  max.style.marginTop = '0'
  label.classList.add('deemphasize')
  label.innerText = 'max rps'
  label.title = 'Maximum requests per second achieved during this run'

this.terminal = terminal as HTerminal

    // window resize; WARNING: since this is a global event, make sure
    // to remove the event listener in the destroy() method
    this.resizeNow = this.resize.bind(this, true)
    window.addEventListener('resize', this.resizeNow)

    // text selection; WARNING: since this is a global event, make
    // sure to remove the event listener in the destroy() method
    this.clearXtermSelectionNow = () => {
      terminal.clearSelection()
    }
    document.addEventListener('select', this.clearXtermSelectionNow)

    const ourTab = tab
    eventBus.on('/sidecar/toggle', ({ tab }: { tab: Tab }) => {
      // sidecar resize
      if (sameTab(tab, ourTab)) {
        this.resizeNow()
      } else {
        debug('toggle event, but not for our sidecar')
      }
    })

    this.resize()
  }

function registerListener() {
  if (typeof document === 'undefined') {
    // fail-safe, in case we have no DOM
    return
  }

  if (inBottomInputMode) {
    eventBus.on('/core/cli/install-block', (tab: Tab) => {
      const activeSearch: ActiveISearch = tab['_kui_active_i_search']
      if (activeSearch) {
        activeSearch.cancelISearch()
      }
    })
  }

  /**
   * Listen for ctrl+r
   *
   */
  document.getElementsByTagName('body')[0].addEventListener('keyup', (evt: KeyboardEvent) => {
    //
    // we want ctrl+R; but if we're in a browser and on linux or
    // windows, then ctrl+R will result in a browser reload :(
    //

export const start = ({ tab, argvNoOptions: args, parsedOptions: options }: Commands.Arguments) => {
  const url = args[args.indexOf('wrk') + 1] || options.url
  debug('url', url)

  const testName = options.name || url

  if (!url || options.help) {
    throw new Error('Usage: wrk ')
  }

  // reigster as a listener for load test updates, for the table
  const graphics = initUI()
  const handler = addRow(graphics)

  eventBus.on('/wrk/iter', handler)
  handler() // add header row to the table

  /**
   * Deregister event listeners, record the final result in persistent storage
   *
   */
  const finishUp = dataset => {
    // deregister as a listener for load test updates
    eventBus.removeListener('/wrk/iter', handler)

    // stash the dataset, for future consumption
    history.remember(dataset, testName)
  }

  // start the load run
  loadTest({ url, options }).then(finishUp)

return fetchAndDraw().then(response => {
    const invokeListener = ({ name, namespace }: { name: string; namespace: string }) => {
      if (!appName || appName === name || appName === `/${namespace}/${name}`) {
        debug('invoke match for update')
        fetchAndDraw(true)
      }
    }
    const fireListener = () => {
      // TODO we can optimize this
      debug('trigger fire match for update')
      fetchAndDraw(true)
    }

    eventBus.on('/action/invoke', invokeListener)
    eventBus.on('/trigger/fire', fireListener)

    let poller: NodeJS.Timer
    let disabled = false
    if ((extraOptions && extraOptions.live) || options.live) {
      debug('live mode')
      // eventBus.on('/mirror/update', () => fetchAndDraw(true))
      poller = setInterval(() => {
        if (!disabled) {
          fetchAndDraw(true)
        }
      }, 5000)
    }

    eventBus.once('/sidecar/replace', (otherUUID: string) => {
      if (otherUUID !== ourUUID) {

return fetchAndDraw().then(response => {
    const invokeListener = ({ name, namespace }: { name: string; namespace: string }) => {
      if (!appName || appName === name || appName === `/${namespace}/${name}`) {
        debug('invoke match for update')
        fetchAndDraw(true)
      }
    }
    const fireListener = () => {
      // TODO we can optimize this
      debug('trigger fire match for update')
      fetchAndDraw(true)
    }

    eventBus.on('/action/invoke', invokeListener)
    eventBus.on('/trigger/fire', fireListener)

    let poller: NodeJS.Timer
    let disabled = false
    if ((extraOptions && extraOptions.live) || options.live) {
      debug('live mode')
      // eventBus.on('/mirror/update', () => fetchAndDraw(true))
      poller = setInterval(() => {
        if (!disabled) {
          fetchAndDraw(true)
        }
      }, 5000)
    }

    eventBus.once('/sidecar/replace', (otherUUID: string) => {
      if (otherUUID !== ourUUID) {
        debug('disabling our listeners', ourUUID)

cell('latency50')
        cell('latency99')
        cell('latencyMax')

        row.onclick = () => {
          const container = graphics.container
          const command = `wrk show ${idx}`
          const highlightThis = undefined
          const returnTo = viewName

          return drilldown(tab, command, highlightThis, container, returnTo)(event)
        }
      })
  }
  showAll()
  eventBus.on('/wrk/history/delete', showAll)

  return resp
}