@astrouxds/rux-log NPM

Log

A Log is a tabular representation of application events and may include username, priority, equipment type, signal type, etc. As part of the Notification System, Logs provide sorting and filtering function for examining events.

Guidelines

Web Components Usage

1. Installation

Install the Astro UXDS Log package via Command Line (Preferred Method)

npm i --save @astrouxds/rux-log

You may use Yarn, NPM, or your Node package manager of choice. The --save flag adds this component as a dependency in your package.json file.

Alternatively, download the Astro UXDS Component Library source to your project.

Via CLI:

git clone https://github.com/RocketCommunicationsInc/astro-components.git

Or, download the Astro UXDS Components as a .zip

2. Import the Astro Log Web Component

This example assumes you're using the NPM package in node_modules. Otherwise, import the component using the path to the Astro Components directory in your project.

import { RuxLog } from '@astrouxds/rux-log/rux-log.js'

3. Render the Astro Log Web Component

Pass an Array of log entries via the data attribute. Log entries must be Objects with a timestamp in JavaScript Date Object format, a status String matching one of the specified Astro UXDS Status values, and a message String:

import { RuxLog } from '@astrouxds/rux-log/rux-log.js';

const myLogData = [
  {
    timestamp: new Date(1557503698781), // date from Unix Time Stamp number
    status: "off",
    message: "Antenna DGS 1 went offline."
  },
  {
    timestamp: new Date('2019-05-10T16:21:12.000Z'), // date from ISO 8601 string format
    status: "serious",
    message: "USA-177 experienced solar panel misalignment."
  },
];

// ...

render() {
	return `<rux-log data="${myLogData}"></rux-log>`;
}

Properties (for the Log component)

Property	Type	Default	Required	Description
`data`	Array	`[]`	Yes	An array of objects to display as log entries.
`timezone`	String	`'UTC'`	No	Accepts IANA timezone string format such as `America/Los_Angeles`. Default timezone is `UTC`. See `toLocaleString()` on MDN for more details.
`_filterValue`	String	`''`	No	A string to filter the array to return only the children whose `message` property contains a case-insensitive substring match.

Sample `data` Array

;[
    {
        timestamp: new Date(1557503698781), // date from Unix Time Stamp number
        status: 'off',
        message: 'Antenna DGS 1 went offline.',
    },
    {
        timestamp: new Date('2019-05-10T16:21:12.000Z'), // date from ISO 8601 string format
        status: 'serious',
        message: 'USA-177 experienced solar panel misalignment.',
    },
    {
        timestamp: new Date(1557503698781),
        status: 'caution',
        message: 'USA-168 suffered power degradation.',
    },
    {
        timestamp: new Date(1557503698781),
        status: 'standby',
        message: 'Antenna DGS 2 has weak signal.',
    },
    {
        timestamp: new Date(1557503698781),
        status: 'off',
        message: 'Black FEP 121 is offline.',
    },
]

`data` Array Item Properties

Property	Type	Default	Required	Description
`timestamp`	Date	—	Yes	A JavaScript Date object which displays a timestamp in the log entry's row. Displays in UTC, 24-hour time by default, configurable in the `timezone` and `locale` Astro UXDS Log component properties.
`status`	String	—	Yes	Displays an icon from the Astro UXDS Status System in the log entry's row. Possible values include `'off'`, `'standby'`, `'normal'`, `'caution'`, `'serious'`, and `'critical'`
`message`	String	—	Yes	A message which displays in the log entry's row. When a filter is applied to the log, the filter is a case-insensitive substring match against this string.

Revision History

4.0

Removed max-lines property. Suggest using flexbox and overflow to control visible lines and scrollable areas of components.
Removed locale property. All time displays assume us-EN locale.
Renamed entry property to message for data array items.
Replaced Polymer 3 implementation with LitElement for improved speed and interoperability with JS Frameworks as well as simpler template declaration now available in vanilla JavaScript.