LogList

<caos-log-list>

the logs an environment has recorded, with who caused each one and how big it is

May be placed on a page inside an app.

Inputs

Name	Attribute	Description	Type	Default	Required
logs	property only	The recorded logs: { id, person?, application?, operation?, at?, status?, bytes? }[]. A selection naming a log that has gone is dropped with it.	json	empty list	Optional
search	search, markup only	Narrows by id, person, application, operation or status.	text	none declared	Optional
selectedId	selected-id, markup only	Which log was last opened. Reflected when a row is opened, so it can be linked to.	text	none declared	Optional
deletable	deletable, markup only	Show the delete control. Absent ⇒ hidden rather than disabled: a control for something this person cannot do is a question they should not have to ask.	boolean	false	Optional
sortKey	sort-key, markup only	Which column orders the rows.	text — one of at, person, application, operation, status, bytes	at	Optional
sortDirection	sort-direction, markup only	Which way. The unset direction depends on the column, so it is a fallback rather than a default value: there is no single literal this could ship as.	text — recognises asc, desc; anything else reads as newest first (desc) for the time column — the opposite of every other column’s natural direction, because the log somebody wants is almost always the last one — and asc for every other column	none declared	Optional
emptyText	empty-text, markup only	What to say when there are no logs.	text	No logs recorded.	Optional

Events

Name	When it fires	What it carries
caos-log-open	A row’s Open control is pressed.	{ log } — the whole entry.
caos-log-delete	Delete is pressed with rows selected.	{ ids }. It ASKS: clearing a log list is routine and still irreversible, and a component that removed rows on a click would decide on somebody’s behalf that no confirmation was needed.
caos-log-refresh	Refresh is pressed.	nothing

Slots

Not documented yet — this piece has not said.

Styling hooks

Not documented yet — this piece has not said.

Methods

Not documented yet — this piece has not said.

Readable state

Name	Type	What it tells you
selectedIds	string[]	The logs ticked for an action.
visibleLogs	CaosLogEntry[]	The logs surviving the search, in the current order.

Styling parts

Part	Which piece of it	When it is there
::part(logs)	The outer column.	Always
::part(toolbar)	The search and action row.	Always
::part(search)	The search box.	Always
::part(actions)	The refresh and delete cluster.	Always
::part(summary)	The count and selection line.	Always
::part(table)	The composed data table.	Always
::part(when)	The relative-time cell.	Always
::part(open)	A row’s open control.	Always

When to use it

On a logs surface, where somebody is choosing which log to read.

What to use instead

• LogViewer — a log has been chosen and the question is what is IN it.
• DataTable — the rows are not logs. This one knows what a log is: it orders newest-first by default and draws time both ways.

Accessibility

Every row’s Open control is a real button whose accessible name says which log it opens (“Open the log from 2 minutes ago”), which matters on a screen holding forty identically labelled controls. The summary is a role="status" live region, so a refresh announces what arrived. The absolute timestamp is the relative cell’s title, so it is reachable rather than lost. A log whose size is unknown says “unknown” rather than showing 0 B.

Examples

Choosing a log

Newest first, with the person and the operation in full and the size stated — everything somebody needs to pick the right one without opening three.

{
  "id": "example",
  "section": "Choosing a log",
  "columns": 1,
  "items": [
    {
      "id": "log_list_1",
      "type": "component",
      "key": "log_list",
      "inputs": {
        "deletable": true,
        "logs": [
          {
            "id": "07L1",
            "person": "jrivera",
            "application": "Browser",
            "operation": "VF Remoting",
            "at": "2026-09-18T15:58:00Z",
            "status": "Success",
            "bytes": 4180233
          },
          {
            "id": "07L2",
            "person": "integration.user",
            "application": "API",
            "operation": "Bulk Insert",
            "at": "2026-09-18T15:31:00Z",
            "status": "Failed",
            "bytes": 21440
          },
          {
            "id": "07L3",
            "person": "jrivera",
            "application": "Browser",
            "operation": "Anonymous Apex",
            "at": "2026-09-18T12:02:00Z",
            "status": "Success",
            "bytes": 1902
          }
        ]
      }
    }
  ]
}

<caos-log-list id="logList1" deletable></caos-log-list>

// What an attribute cannot hold, set as a property — the same values the preview is drawn with.
const logList1 = document.getElementById('logList1');
logList1.logs = [
  {
    "id": "07L1",
    "person": "jrivera",
    "application": "Browser",
    "operation": "VF Remoting",
    "at": "2026-09-18T15:58:00Z",
    "status": "Success",
    "bytes": 4180233
  },
  {
    "id": "07L2",
    "person": "integration.user",
    "application": "API",
    "operation": "Bulk Insert",
    "at": "2026-09-18T15:31:00Z",
    "status": "Failed",
    "bytes": 21440
  },
  {
    "id": "07L3",
    "person": "jrivera",
    "application": "Browser",
    "operation": "Anonymous Apex",
    "at": "2026-09-18T12:02:00Z",
    "status": "Success",
    "bytes": 1902
  }
];

Nothing recorded

Said, rather than left as a blank table somebody reads as a screen that failed to load.

{
  "id": "example",
  "section": "Nothing recorded",
  "columns": 1,
  "items": [
    {
      "id": "log_list_1",
      "type": "component",
      "key": "log_list",
      "inputs": {
        "logs": []
      }
    }
  ]
}

<caos-log-list id="logList1"></caos-log-list>

// What an attribute cannot hold, set as a property — the same values the preview is drawn with.
const logList1 = document.getElementById('logList1');
logList1.logs = [];