Alarm List Page¶

The Alarm List page displays a list of active and solved alarms.

Overview¶

This page shows alarms in a tabular format, similar to the Grafana dashboard but in bulk. Users can filter alarms based on various criteria. Filters are dynamically fetched and populated based on the backend configuration.

HTML Structure¶

<template>
  <div>
    <!-- Page Title -->
    <h2>Alarm List</h2>

    <!-- Filters Section -->
    <widget>
      <b-row>
        <!-- Results Count -->
        <b-col>
          <span>Results Count</span>
        </b-col>
        <!-- Search Input -->
        <b-col>
          <b-input placeholder="Search by device name..."></b-input>
          <b-button>Apply Filters</b-button>
        </b-col>
      </b-row>
      <b-collapse>
        <!-- Date Filters -->
        <b-row>
          <b-col>
            <b-datepicker placeholder="From Date"></b-datepicker>
            <b-datepicker placeholder="To Date"></b-datepicker>
          </b-col>
          <!-- Dropdown Filters -->
          <b-col>
            <b-select placeholder="Dashboard"></b-select>
            <b-select placeholder="Service"></b-select>
            <b-select placeholder="Type"></b-select>
            <b-select placeholder="Status"></b-select>
            <b-select placeholder="Severity"></b-select>
          </b-col>
        </b-row>
      </b-collapse>
    </widget>

    <!-- Table Section -->
    <widget>
      <b-pagination></b-pagination>
      <b-table>
        <!-- Table Columns -->
        <template v-slot:cell(timestamp)>
          <span>Date</span>
        </template>
        <template v-slot:cell(status)>
          <b-badge>Status</b-badge>
        </template>
        <template v-slot:cell(severity)>
          <b-badge>Severity</b-badge>
        </template>
        <template v-slot:cell(actions)>
          <b-button>Resolve</b-button>
        </template>
      </b-table>
    </widget>

    <!-- Modals -->
    <b-modal>Resolve Modal</b-modal>
    <b-modal>Info Modal</b-modal>

    <!-- Loading Modal -->
    <LoadingModal />
  </div>
</template>

Main Variables¶

`filters`¶

The filters object stores the current filter criteria for the alarms. It interacts with the DOM through b-select components and is dynamically updated based on user input.

Structure of filters

fromDate: The start date for filtering alarms.
toDate: The end date for filtering alarms.
status: The status of the alarms (e.g., active or resolved).
dashboard: The selected dashboard for filtering.
service: The selected service for filtering.
type: The selected type of alarm.
severity: The severity level of the alarms (e.g., critical, major, minor, info).
values: Contains the options for each filter dropdown:
- status: Options for alarm status (e.g., active, resolved).
- dashboard: List of available dashboards.
- services: List of services associated with the selected dashboard.
- types: List of alarm types associated with the selected service.
- severity: Options for severity levels.

`dataset`¶

The dataset variable contains the full list of alarms fetched from the backend.

`filterDataset`¶

The filterDataset variable is a filtered version of dataset based on the current filter criteria and search text. It is displayed in the table.

`searchText`¶

The searchText variable stores the text entered in the search input field. It is used to filter alarms by device name, description, cause, dashboard, or service.

`fields`¶

The fields array defines the columns of the table displayed on the page. Each field corresponds to a property of the alarms in filterDataset.

`selectedService`¶

The selectedService variable determines whether the page is displaying alarms for the GraphAPI or Neat service. It is set based on the query parameter in the URL.

Functions¶

void getAlarms()¶

Fetches the list of alarms from the backend based on the current filter criteria. It updates the dataset and filterDataset variables.

Input Parameters:

None.

Output Parameters:

None. Updates the dataset and filterDataset variables directly.

How It Works:

If fromDate or toDate is not set, default values are assigned (e.g., the last 7 days).
Sends a request to the backend with the current filter criteria.
Updates dataset with the response data.
Copies dataset to filterDataset and applies the search filter.

void getFilters()¶

Fetches the available filter options (dashboards, services, types) from the backend.

Input Parameters:

None.

Output Parameters:

None. Updates the filters.values arrays directly.

How It Works:

Calls getAlarmConfigs to fetch the configuration data for alarms.
Populates the filters.values.dashboard array with the fetched dashboards.
Calls setDashboardConfig to initialize the services and types for the first dashboard.

void getAlarmConfigs()¶

Fetches the alarm configuration data from the backend.

Input Parameters:

None.

Output Parameters:

None. Updates the filters.values.dashboard array directly.

How It Works:

Sends a request to fetch all alarm configurations.
Iterates through the configurations and calls addDashboard for each one.

void addDashboard(element)¶

Adds a dashboard to the filters.values.dashboard array.

Input Parameters:

element (Object): The dashboard configuration object fetched from the backend.

Output Parameters:

None. Updates the filters.values.dashboard array directly.

How It Works:

Checks if the dashboard already exists in the array.
If it exists, calls addServices to add the associated services.
If it does not exist, creates a new dashboard object and adds it to the array, then calls addServices.

void addServices(dashboardConfig, dashboardData)¶

Adds a service to the services array of a dashboard.

Input Parameters:

dashboardConfig (Object): The dashboard object to which the service belongs.
dashboardData (Object): The service configuration data fetched from the backend.

Output Parameters:

None. Updates the services array of the dashboardConfig object directly.

How It Works:

Checks if the service already exists in the array.
If it exists, calls addTypes to add the associated types.
If it does not exist, creates a new service object and adds it to the array, then calls addTypes.

void addTypes(serviceConfig, dashboardData)¶

Adds a type to the types array of a service.

Input Parameters:

serviceConfig (Object): The service object to which the type belongs.
dashboardData (Object): The type configuration data fetched from the backend.

Output Parameters:

None. Updates the types array of the serviceConfig object directly.

How It Works:

Checks if the type already exists in the array.
If it exists, appends the elements to the existing type.
If it does not exist, creates a new type object and adds it to the array.

void setDashboardConfig(value)¶

Updates the filters.values.services array based on the selected dashboard.

Input Parameters:

value (String): The name of the selected dashboard.

Output Parameters:

None. Updates the filters.values.services array directly.

How It Works:

Finds the selected dashboard in filters.values.dashboard.
Copies its services array to filters.values.services.
Resets the service and type filters.

void setServiceConfig(value)¶

Updates the filters.values.types array based on the selected service.

Input Parameters:

value (String): The name of the selected service.

Output Parameters:

None. Updates the filters.values.types array directly.

How It Works:

Finds the selected service in filters.values.services.
Copies its types array to filters.values.types.
Resets the type filter.

void updateSearch()¶

Filters the dataset based on the searchText and updates filterDataset.

Input Parameters:

None.

Output Parameters:

None. Updates the filterDataset variable directly.

How It Works:

Iterates through dataset and checks if any of the searchable fields (e.g., devicename, description) contain the searchText.
Updates filterDataset with the matching alarms.

String parseDate(timestamp)¶

Formats a timestamp into a human-readable date string.

Input Parameters:

timestamp (Number): The timestamp to be formatted.

Output Parameters:

Returns a String in the format dd/mm/yyyy hh:mm:ss.

How It Works:

Converts the timestamp into a Date object.
Extracts the day, month, year, hours, minutes, and seconds.
Returns a formatted string.

void solveModal(alarm)¶

Opens the modal to confirm resolving an alarm.

Input Parameters:

alarm (Object): The alarm object to be resolved.

Output Parameters:

None. Updates the selectedAlarm variable and displays the modal.

How It Works:

Sets the selectedAlarm variable to the alarm to be resolved.
Displays the modal using $bvModal.show.

void solveAlarm()¶

Marks the selected alarm as resolved.

Input Parameters:

None. Uses the selectedAlarm variable.

Output Parameters:

None. Updates the alarm status in the backend and refreshes the alarm list.

How It Works:

Sends a request to the backend to resolve the alarm.
Refreshes the alarm list by calling getAlarms.
Hides the modal on success or displays an error message on failure.

Notes¶

The filters are dynamically populated based on the backend configuration.
The filters.values arrays are used to populate the b-select dropdowns in the DOM.
The selectedService variable determines which alarms and filters are displayed.
The page adapts its content based on the selected service (GraphAPI or Neat).

References¶

Alarms API: Details the API endpoints used for fetching and managing alarms.
Auth API: Explains the authentication mechanisms and user-related API endpoints.

Alarm List Page¶

Overview¶

HTML Structure¶

Main Variables¶

filters¶

dataset¶

filterDataset¶

searchText¶

fields¶

selectedService¶

Functions¶

void getAlarms()¶

void getFilters()¶

void getAlarmConfigs()¶

void addDashboard(element)¶

void addServices(dashboardConfig, dashboardData)¶

void addTypes(serviceConfig, dashboardData)¶

void setDashboardConfig(value)¶

void setServiceConfig(value)¶

void updateSearch()¶

String parseDate(timestamp)¶

void solveModal(alarm)¶

void solveAlarm()¶

Notes¶

References¶

`filters`¶

`dataset`¶

`filterDataset`¶

`searchText`¶

`fields`¶

`selectedService`¶