Documentation

Class: Logs

Description: The Logs component is responsible for displaying a list of logs in a user-friendly format. It fetches logs from the API, updates the list in real-time based on new logs received from the socket, and renders each log with appropriate styling based on its status.

Parameters:

  • user (Object): The user object containing user-specific data, including the user ID.
    • Default: None
  • pipeId (String): The ID of the pipeline to filter logs for.
    • Default: None
  • props (Object): Additional props passed to the component. This object may include an array of logs to be displayed.
    • Default: None

Methods

Method: onLogRcvd

Description: This method handles the receipt of new logs from the socket. It filters logs based on the provided pipeId and updates the logs and allLogs state arrays.

Parameters:

  • _log (Object): The newly received log object.

Returns:

  • void

Example:

// When a new log is received from the socket, the onLogRcvd method is called
socket.on("log", onLogRcvd);

Method: getStyles

Description: This method generates a CSS class string based on the log's status and the number of tabs in the log message. The CSS classes are used to style the log display based on its type and level of indentation.

Parameters:

  • count (Number): The number of tabs in the log message.
  • status (LogStatus): The status of the log (e.g., LogStatus.INFO, LogStatus.ERROR).

Returns:

  • String: A CSS class string combining different classes based on the log's status and indentation.

Example:

// Example usage:
const styles = getStyles(2, LogStatus.ERROR); // Returns "tabbed error"

Method: renderMessage

Description: This method takes a log message template and an array of parameters and replaces the placeholders in the template with the corresponding parameters. The parameters can be strings, numbers, or objects. If the parameter is an object, it is rendered as a link with the href and message properties.

Parameters:

  • template (String): The log message template with placeholders represented by curly braces (e.g., "This is a log message with a {} placeholder").
  • params (Array): An array of parameters to replace the placeholders in the template.

Returns:

  • String: The formatted log message with placeholders replaced by the parameters.

Example:

// Example usage:
const message = renderMessage("\t{} {}/{}", ["+ ", { href: "https://github.com/ExampleUser", message: "ExampleUser" }, { href: "https://github.com/ExampleUser/ExampleRepository", message: "ExampleRepository" }]); // Returns "\t+ ExampleUser/ExampleRepository"

Method: formatTime

Description: This method is imported from the help utility module and is used to format a timestamp into a more readable format.

Parameters:

  • timestamp (Date): The timestamp to format.

Returns:

  • String: The formatted timestamp.

Example:

// Example usage:
const formattedTime = help.formatTime(new Date()); // Returns the current time in a readable format.

Method: shortId

Description: This method is imported from the help utility module and is used to generate a shortened version of a pipeline ID.

Parameters:

  • id (String): The pipeline ID to shorten.

Returns:

  • String: The shortened pipeline ID.

Example:

// Example usage:
const shortId = help.shortId("1234567890"); // Returns a shortened version of the provided ID.

Method: getLogs

Description: This method is imported from the API utility module and is used to fetch logs from the API based on a user's ID.

Parameters:

  • userId (String): The user ID to fetch logs for.

Returns:

  • Promise<Array<Object>>: A promise resolving to an array of log objects fetched from the API.

Example:

// Example usage:
const logs = await getLogs(userId); // Fetches logs for the specified user.

Class: SectionProps

Description: The SectionProps class defines the default props for a section, which is a common component structure used in the application. It provides default values for properties such as className, heading, and background.

Extends:

  • Object

Methods

Method: types

Description: This method defines the propTypes for a section. These propTypes are used to validate props passed to the component and ensure that they are of the correct type.

Parameters:

  • None

Returns:

  • Object: An object containing the propTypes for a section.

Method: defaults

Description: This method defines the defaultProps for a section. These defaultProps are used to provide default values for props that are not explicitly provided when the component is instantiated.

Parameters:

  • None

Returns:

  • Object: An object containing the defaultProps for a section.

Class: LogStatus

Description: The LogStatus class defines a set of constants representing different log statuses. These constants are used to categorize logs based on their severity and progress.

Example:

// Example usage:
if (log.status === LogStatus.ERROR) {
  // Handle error log
}

Constants

SYSTEM_LOG_ID

Description: This constant represents the ID used for system-level logs.

socket

Description: This constant represents the socket object used for communication with the backend.

getLogs

Description: This constant represents the getLogs function, which is used to fetch logs from the backend.

Considerations:

  • The Logs component relies on the user object to fetch logs from the API. If the user object is not provided, no logs will be fetched.
  • The component uses the socket object to receive new logs in real-time. If the socket connection is not established or interrupted, the component will not receive new logs.
  • The renderMessage method assumes that the params array has the same number of elements as the number of placeholders in the template string. If this is not the case, the rendered message may not be accurate.

Potential Pitfalls:

  • If the getLogs API call fails, the component will not display any logs.
  • If the renderMessage method encounters an invalid parameter type, it will log a warning message to the console.
  • The component does not provide any mechanism for handling errors during socket communication.