CleverCloud / clever-components

Collection of Web Components by Clever Cloud
https://www.clever-cloud.com/doc/clever-components/
Apache License 2.0
220 stars 19 forks source link

cc-logs-application-view: init component #967

Closed pdesoyres-cc closed 5 months ago

pdesoyres-cc commented 7 months ago

Context

A component that displays logs for Clever applications.

Inputs

Attributes/properties

Property Type Default value Mandatory Description
dateRangeSelection DateRangeSelection null false The date range selection
options LogsApplicationViewOptions null false TODO
overflowWatermarkOffset Number 10 false The number of logs before the limit from which the user will be asked to accept or discard logs limit overflow.
selectedInstances Array<string> [] false The array of instances ids that should be selected.
state LogsApplicationViewState LogsApplicationViewStateLoadingInstances false State of the component
limit Number 1000 false The maximum number of logs to display. null for no limit.

Outputs

Event Data type Description
cc-logs-application-view:date-range-change DateRange Fires the range whenever the range changes.
cc-logs-application-view:pause DateRange Fires when the pause button is clicked.
cc-logs-application-view:resume DateRange Fires when the resume button is clicked.

Type Definitions

export interface LogsApplicationViewStateLoadingInstances {
  type: 'loadingInstances';
}

export interface LogsApplicationViewStateErrorInstances {
  type: 'errorInstances';
}

export interface LogsApplicationViewStateLogs {
  type: 'connectingLogs' | 'receivingLogs'| 'logStreamPaused' | 'logStreamEnded' | 'errorLogs';
  instances: Array<Instance | GhostInstance>;
  selection: Array<string>;
}

export type LogsApplicationViewState = LogsApplicationViewStateLoadingInstances | LogsApplicationViewStateLogs | LogsApplicationViewStateErrorInstances;

export type DateRange = {
  since: string;
  until?: string;
}

export interface DateRangeSelectionLive {
  type: 'live',
}

export type DateRangeSelectionPredefinedDefinition = 'lastHour' | 'last4Hours' | 'last7Days' | 'today' | 'yesterday';

export interface DateRangeSelectionPredefined {
  type: 'predefined',
  def: DateRangeSelectionPredefinedDefinition,
}

export interface DateRangeSelectionCustom {
  type: 'custom',
  since: string;
  until: string;
}

export type DateRangeSelection = DateRangeSelectionLive | DateRangeSelectionPredefined | DateRangeSelectionCustom;

export type DateRangeSelectionMenuEntry = 'live' | 'custom' | DateRangeSelectionPredefinedDefinition;

export interface LogsApplicationViewOptions {
  'date-display': DateDisplay,
  'metadata-display': {
    instance: boolean
  },
  palette: LogsControlPalette,
  'strip-ansi': boolean,
  timezone: Timezone,
  'wrap-lines': boolean,
}

Data/APIs