Creating & Managing Reports

This guide covers how to create, edit, and delete reports in Logstyx.

Creating a New Report

Click the Create button (top-right of the Reports page) to open the create modal.

Create Report Modal

Modal Title: "Create report"

Report Title

Placeholder: "Report title"
Required: Yes

Enter a descriptive name for your report (e.g., "Production System Health", "Error Tracking Dashboard").

The title must not be empty after trimming whitespace.

Visibility

Options:

• Private - Only accessible in the dashboard
• Public - Accessible without login via public URL

Select who should be able to view this report.

Default Visibility

Reports default to Private. You can change visibility later by editing the report.

Buttons

• Cancel - Close modal without creating (disabled while creating)
• Create - Create the report (shows "Creating..." while processing)

After clicking Create, the report appears in your reports list.

Editing a Report

Click the Edit icon (pencil) on any report in the list to modify it.

Edit Report Modal

Modal Title: "Edit report"

Editable Fields

• Report Title - Change the report name
• Visibility - Switch between Private and Public

All other report settings (widgets, layout) are managed from the report detail page.

Buttons

• Cancel - Close without saving (disabled while updating)
• Save - Save changes (shows "Saving..." while processing)

Changes apply immediately after saving.

Deleting a Report

Click the Delete icon (trash) on any report in the list.

Confirmation Dialog

Title: "Delete report"
Message: Are you sure you want to delete "{report title}"? This action cannot be undone.

Buttons:

• Cancel - Keep the report
• Delete - Permanently remove the report

Cannot Be Undone

Deleting a report removes:

• The report configuration
• All widgets in the report
• Widget layouts and settings

This action is permanent and cannot be reversed.

Managing Report Layout

Open a report by clicking its title in the reports list.

Report Detail Page

Header:

• Report Title - The name of your report
• Instruction: "Drag and resize widgets to customize layout"
• Create Widget button - Add new widgets to the report

Customizing Layout

Repositioning Widgets

1. Click and hold on a widget
2. Drag it to a new position
3. Release to drop
4. Layout is saved automatically

Resizing Widgets

1. Hover over widget corners to see resize handles
2. Click and drag to resize
3. Release to set new size
4. Layout is saved automatically

Size Constraints:

• Minimum width: 3 columns (out of 12)
• Maximum width: 12 columns (full width)
• Minimum height: 2 rows
• Maximum height: 8 rows

Grid System

Reports use a 12-column grid. Each row is 100px tall with 12px spacing between widgets.

Validation & Error Handling

Report Title Validation

Required: Report title cannot be empty

Error Handling:

• Create/Save buttons are disabled if title is empty
• Whitespace-only titles are rejected

Visibility Validation

Options: Must be either Private or Public

No validation needed - Select component enforces valid values

API Errors

If creation, update, or deletion fails:

• Error notification appears with details
• Modal remains open for corrections
• Check your network connection and try again

Common Workflows

A) Create a System Monitoring Report

1. Click Create button
2. Enter Report Title: "Production System Monitoring"
3. Select Visibility: Private
4. Click Create
5. Click the report title to open it
6. Add widgets for CPU, memory, disk metrics
7. Arrange widgets by dragging and resizing

B) Create a Public Status Page

1. Click Create button
2. Enter Report Title: "System Status"
3. Select Visibility: Public
4. Click Create
5. Open the report
6. Add widgets showing system health
7. Share the public link with stakeholders

C) Convert Private Report to Public

1. Find the report in your list
2. Click Edit icon (pencil)
3. Change Visibility to Public
4. Click Save
5. Public link icon now appears on the report
6. Click link icon to open public URL

D) Reorganize Report Layout

1. Open the report
2. Drag widgets to new positions
3. Resize widgets by dragging corners
4. Layout saves automatically
5. Refresh page to verify changes persist

Best Practices

Naming Reports

• Be descriptive - "Production API Errors" vs "Report 1"
• Include timeframe - "Monthly User Activity"
• Indicate purpose - "Customer Support Dashboard"
• Use prefixes - "[PROD]", "[DEV]", "[PUBLIC]"

Visibility Settings

• Use Private for:

  • Internal team dashboards
  • Sensitive metrics
  • Work-in-progress reports

• Use Public for:

  • System status pages
  • Stakeholder dashboards
  • External transparency reports

Layout Organization

• Put key metrics at top - Most important widgets first
• Group related widgets - Keep similar metrics together
• Use consistent sizing - Similar widget types same size
• Leave breathing room - Don't overcrowd the dashboard

Troubleshooting

Cannot Create Report

Problem: Create button disabled or errors appear

Solutions:

• Ensure report title is not empty
• Check for whitespace-only titles
• Verify network connection
• Try a different browser

Cannot Edit Report

Problem: Edit modal doesn't save changes

Solutions:

• Verify title is not empty
• Check network connection
• Look for error notifications
• Refresh the page and try again

Layout Changes Don't Save

Problem: Widget positions reset after page reload

Solutions:

• Check browser console for errors
• Verify network connection
• Try moving one widget at a time
• Clear browser cache and retry

Report Not Appearing in List

Problem: Created report doesn't show in list

Solutions:

• Refresh the page
• Check pagination (may be on another page)
• Verify report was created successfully
• Look for error notifications