search

GreptimeTeam / dashboard

The dashboard UI for GreptimeDB
Apache License 2.0
73 stars 21 forks source link

feat: Statusbar #418

Closed sunchanglong closed 3 months ago

sunchanglong commented 4 months ago

statusbar

Functions Show status in a fixed area at the bottom of the dashboard page

Usage

export interface StatusItemSimple {
  text?: string
  icon?: Component | string
  onClick?: (item: any, evt: PointerEvent) => void
}
export type StatusItem = StatusItemSimple | Component

setStatusBar(key: string, item: StatusItem | StatusItem[], timeout?: number)

// Set text status, disappears after 2000 milliseconds. 
setStatusBar('ai', {text: 'progress 10%'}, 2000)
// Set the status with an icon and click event, the icon can be a component or a string from the arco icon list.
setStatusBar('ai', {text: 'progress 100%', icon: 'icon-check-circle-fill', onClick: (item, evt) => {
  console.log('clicked', item, evt)
}})
// Setting up a custom component, such as a popover 
 setStatusBar('ai2', h(Popover, {content: 'testt', trigger: 'click'}, [h(Button, {type: 'text', size: 'mini'},'testpopover')]))