cc-logs-control: init component

[pdesoyres-cc]

Context

This component is a wrapper around a <cc-logs> component and adds the ability for a user to toggle some options.

Options are encapsulated into a <cc-popover> element.

Inputs

Attributes/properties

Property	Type	Default value	Mandatory	Description
dateDisplay	DateDisplay	null	false	The date display to pass to <cc-logs>
filter	Array<MetadataFilter>	null	false	The filter to pass to <cc-logs>
follow	Boolean	null	false	The initial follow state to pass to <cc-logs>
limit	Number	null	false	The maximum number of logs in memory to pass to <cc-logs>
logs	Array<Log>	null	false	The initial array of logs to pass to <cc-logs>
metadataDisplay	{[key: string]: LogsMetadataDisplay}	null	false	The metadata the user can toggle (and their initial display state)
metadataRenderers	{[key: string], MetadataRenderer}	null	false	The metadata renderer to pass to <cc-logs>
palette	LogsControllerPalette	null	false	The name of the color palette to apply on <cc-logs>
stripAnsi	Boolean	null	false	The stripAnsi to pass to <cc-logs>
timezone	Timezone	null	false	The timezone to pass to <cc-logs>
wrapLines	Boolean	null	false	The warpLines to pass to <cc-logs>

Slots

Name	Description
header	A zone on top of the <cc-logs> element

Outputs

Event	Data type	Description
cc-logs-control:optionChange	LogsControlOption	Fires a LogsControlOption whenever an option changes.

Type Definitions

type DateDisplay = 'none' | 'datetime-iso' | 'time-iso' | 'datetime-short' | 'time-short';

interface Log {
  id: string;
  date: Date;
  message: string;
  metadata: Array<Metadata>;
}

interface Metadata {
  name: string;
  value: string;
}

interface MetadataFilter {
  metadata: string;
  value: string;
}

type MetadataRenderer = MetadataRenderingProvider | MetadataRendering;

type MetadataRenderingProvider = (metadata: Metadata) => MetadataRendering;

interface MetadataRendering {
  hidden?: boolean;
  intent?: MetadataIntent;
  showName?: boolean;
  size?: 'auto' | number;
  strong?: boolean;
  text?: string;
}

type MetadataIntent = 'neutral' | 'info' | 'success' | 'warning' | 'danger';

interface LogsMetadataDisplay {
  label: string;
  hidden: boolean;
}

type LogsControlPalette = "default" | "One Light" | "Tokyo Night Light" | "Night Owl" | "Everblush" | "Hyoob"

interface LogsControlWrapLinesOption {
  name: "wrap-lines";
  value: boolean;
}

interface LogsControlDateDisplayOption {
  name: "date-display";
  value: DateDisplay;
}

interface LogsControlTimezoneOption {
  name: "timezone";
  value: Timezone;
}

interface LogsControlPaletteOption {
  name: "palette";
  value: LogsControlPalette;
}

interface LogsControlStripAnsiOption {
  name: "strip-ansi";
  value: boolean;
}

interface LogsControlDisplayedMetadataOption {
  name: "metadata-display";
  value: { [key: string]: boolean };
}

type LogsControlOption =
  LogsControlWrapLinesOption
  | LogsControlDateDisplayOption
  | LogsControlTimezoneOption
  | LogsControlPaletteOption
  | LogsControlStripAnsiOption
  | LogsControlDisplayedMetadataOption;

type Timezone = 'local' | 'UTC';