Skip to content

Alarm Management Page

The Alarm Management page allows users to create and modify watchers (mechanisms that trigger alarms).

Overview

This page enables users to configure watchers with the following steps: 1. Basic Information: Select a dashboard, service, and type. Each selection dynamically updates the available options for the next field. 2. Conditions: Define single or multiple conditions with logical operators (AND/OR) to trigger the alarm. 3. Devices: Select specific devices or apply the watcher to all devices. The device list includes filters for easier selection. 4. Email Notifications: Enable email notifications and add email addresses to receive alerts.

HTML Structure

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

    <!-- Watcher Table -->
    <widget>
      <b-pagination></b-pagination>
      <b-table>
        <!-- Table Columns -->
        <template v-slot:cell(devicesid)>
          <b-badge>Devices</b-badge>
        </template>
        <template v-slot:cell(operations)>
          <b-badge>Conditions</b-badge>
        </template>
        <template v-slot:cell(severity)>
          <b-badge>Severity</b-badge>
        </template>
        <template v-slot:cell(actions)>
          <b-button>Edit</b-button>
          <b-button>Delete</b-button>
        </template>
      </b-table>
    </widget>

    <!-- Modals -->
    <b-modal id="new-watcher">
      <!-- Basic Information Section -->
      <b-row>
        <b-col>
          <b-form-group label="Dashboard">
            <b-select v-model="newWatcher.dashboard"></b-select>
          </b-form-group>
          <b-form-group label="Service">
            <b-select v-model="newWatcher.service"></b-select>
          </b-form-group>
          <b-form-group label="Type">
            <b-select v-model="newWatcher.type"></b-select>
          </b-form-group>
        </b-col>
      </b-row>
      <!-- Conditions Section -->
      <b-tabs>
        <b-tab title="Conditions">
          <b-table>
            <template v-slot:cell(element)>
              <span>Condition Element</span>
            </template>
            <template v-slot:cell(operator)>
              <span>Condition Operator</span>
            </template>
            <template v-slot:cell(value)>
              <span>Condition Value</span>
            </template>
          </b-table>
        </b-tab>
        <!-- Devices Section -->
        <b-tab title="Devices">
          <b-form-checkbox v-model="newWatcher.allDevices">Apply to All Devices</b-form-checkbox>
          <b-table>
            <template v-slot:cell(deviceName)>
              <span>Device Name</span>
            </template>
          </b-table>
        </b-tab>
        <!-- Email Notifications Section -->
        <b-tab title="Email Notifications">
          <b-form-checkbox v-model="newWatcher.sendemail">Enable Email Notifications</b-form-checkbox>
          <b-table>
            <template v-slot:cell(email)>
              <span>Email Address</span>
            </template>
          </b-table>
        </b-tab>
      </b-tabs>
    </b-modal>

    <b-modal id="add-device">
      <!-- Device Filters -->
      <b-row>
        <b-col>
          <b-form-group label="Device Name">
            <b-input v-model="deviceFilters.deviceName"></b-input>
          </b-form-group>
          <b-form-group label="Type">
            <b-select v-model="deviceFilters.selectedType"></b-select>
          </b-form-group>
        </b-col>
      </b-row>
      <!-- Device List -->
      <b-table>
        <template v-slot:cell(deviceName)>
          <span>Device Name</span>
        </template>
      </b-table>
    </b-modal>

    <b-modal id="add-condition">
      <!-- Condition Form -->
      <b-row>
        <b-col>
          <b-form-group label="Element">
            <b-select v-model="newCondition.element"></b-select>
          </b-form-group>
          <b-form-group label="Operator">
            <b-select v-model="newCondition.operator"></b-select>
          </b-form-group>
          <b-form-group label="Value">
            <b-input v-model="newCondition.value"></b-input>
          </b-form-group>
        </b-col>
      </b-row>
    </b-modal>

    <b-modal id="add-email">
      <!-- Email Input -->
      <b-row>
        <b-col>
          <b-form-group label="Email">
            <b-input v-model="newWatcherEmail"></b-input>
          </b-form-group>
        </b-col>
      </b-row>
    </b-modal>

    <b-modal id="delete-alarm-modal">
      <!-- Confirmation Message -->
      <b-row>
        <b-col>
          <p>Are you sure you want to delete this alarm?</p>
        </b-col>
      </b-row>
    </b-modal>

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

Main Variables

alarmConfig

Stores the current alarm configuration, including dashboards, services, and types.

newWatcher

Represents the watcher being created or edited. It includes:

  • dashboard: The selected dashboard.
  • service: The selected service.
  • type: The selected type.
  • devicesId: The list of selected devices.
  • allDevices: A boolean indicating whether the watcher applies to all devices.
  • severity: The severity level of the alarm.
  • operations: The conditions that trigger the alarm.
  • description: A description of the watcher.
  • sendemail: A boolean indicating whether email notifications are enabled.
  • emails: A list of email addresses for notifications.

deviceFilters

Stores the filters for the device list, including:

  • deviceName: The name of the device.
  • selectedType: The selected device type.
  • selectedRegion: The selected region.
  • selectedLocation: The selected location.
  • selectedRoom: The selected room.

newCondition

Represents the condition being created or edited. It includes:

  • element: The element being monitored.
  • operator: The operator for the condition.
  • value: The value to compare against.
  • multipleCondition: A boolean indicating whether the condition is a group of sub-conditions.
  • conditions: A list of sub-conditions.
  • operatorType: The logical operator (AND/OR) for the sub-conditions.

Functions

void loadInfo()

Loads the initial data for the page, including alarm configurations, device filters, and the device list.

Input Parameters:

  • None.

Output Parameters:

  • None. Updates alarmConfig, deviceFilters, and deviceList.

How It Works:

  1. Fetches the list of services and sets the selected service.
  2. Fetches the alarm configurations and device filter configurations.
  3. Fetches the list of devices.

void setDashboardConfig(value)

Updates the available services based on the selected dashboard.

Input Parameters:

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

Output Parameters:

  • None. Updates serviceConfig.

How It Works:

  1. Finds the selected dashboard in alarmConfig.
  2. Updates serviceConfig with the services of the selected dashboard.

void setServiceConfig(value)

Updates the available types based on the selected service.

Input Parameters:

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

Output Parameters:

  • None. Updates typeConfig.

How It Works:

  1. Finds the selected service in serviceConfig.
  2. Updates typeConfig with the types of the selected service.

void setTypeConfig(value, editing)

Updates the available elements based on the selected type.

Input Parameters:

  • value (String): The name of the selected type.
  • editing (Boolean): Indicates whether the watcher is being edited.

Output Parameters:

  • None. Updates elementsConfig.

How It Works:

  1. Finds the selected type in typeConfig.
  2. Updates elementsConfig with the elements of the selected type.
  3. Clears the conditions if not editing.

void createWatcher()

Sends a request to create a new watcher with the specified configuration.

Input Parameters:

  • None. Uses newWatcher.

Output Parameters:

  • None. Sends the watcher data to the backend.

How It Works:

  1. Prepares the watcher data by formatting conditions and devices.
  2. Sends a request to create the watcher.
  3. Refreshes the watcher list on success.

void editWatcher()

Sends a request to update an existing watcher with new settings.

Input Parameters:

  • None. Uses newWatcher.

Output Parameters:

  • None. Sends the updated watcher data to the backend.

How It Works:

  1. Prepares the watcher data by formatting conditions and devices.
  2. Sends a request to update the watcher.
  3. Refreshes the watcher list on success.

void addConditionToWatcher()

Adds a new condition to the watcher.

Input Parameters:

  • None. Uses newCondition.

Output Parameters:

  • None. Updates newWatcher.operations.conditions.

How It Works:

  1. Formats the condition based on its type (single or multiple).
  2. Adds the condition to the list of conditions in newWatcher.

void addDeviceToWatcher()

Adds selected devices to the watcher.

Input Parameters:

  • None. Uses deviceListFiltered.

Output Parameters:

  • None. Updates newWatcher.devicesId.

How It Works:

  1. Filters the selected devices from deviceListFiltered.
  2. Adds the selected devices to newWatcher.devicesId.

void addEmailToWatcher()

Adds a new email address to the watcher.

Input Parameters:

  • None. Uses newWatcherEmail.

Output Parameters:

  • None. Updates newWatcher.emails.

How It Works:

  1. Adds the email address to newWatcher.emails.
  2. Clears newWatcherEmail.

void deleteAlarm()

Deletes the selected watcher.

Input Parameters:

  • None. Uses selectedAlarm.

Output Parameters:

  • None. Sends a request to delete the watcher.

How It Works:

  1. Sends a request to delete the watcher.
  2. Refreshes the watcher list on success.

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:

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

void showCreateAlarmModal()

Opens the modal to create a new watcher.

Input Parameters:

  • None.

Output Parameters:

  • None. Resets newWatcher and opens the modal.

How It Works:

  1. Resets newWatcher to its default state.
  2. Opens the new-watcher modal.

void showAddDeviceModal()

Opens the modal to add devices.

Input Parameters:

  • None.

Output Parameters:

  • None. Opens the add-device modal.

void showAddConditionModal()

Opens the modal to add a condition.

Input Parameters:

  • None.

Output Parameters:

  • None. Opens the add-condition modal.

void showAddEmailModal()

Opens the modal to add an email address.

Input Parameters:

  • None.

Output Parameters:

  • None. Opens the add-email modal.

void closeWatcherModal()

Closes the watcher modal.

Input Parameters:

  • None.

Output Parameters:

  • None. Closes the new-watcher modal.

void removeDeviceFromList(data)

Removes a device from the selected devices list.

Input Parameters:

  • data (Object): The device to be removed.

Output Parameters:

  • None. Updates newWatcher.devicesId.

void removeConditionFromList(data)

Removes a condition from the conditions list.

Input Parameters:

  • data (Object): The condition to be removed.

Output Parameters:

  • None. Updates newWatcher.operations.conditions.

void removeEmailFromList(data)

Removes an email address from the email list.

Input Parameters:

  • data (Object): The email to be removed.

Output Parameters:

  • None. Updates newWatcher.emails.

void setEditAlarm(data)

Prepares the watcher for editing.

Input Parameters:

  • data (Object): The watcher to be edited.

Output Parameters:

  • None. Updates newWatcher and opens the modal.

How It Works:

  1. Copies the watcher data to newWatcher.
  2. Opens the new-watcher modal.

void setAlarmToDelete(alarm)

Prepares the alarm for deletion.

Input Parameters:

  • alarm (Object): The alarm to be deleted.

Output Parameters:

  • None. Updates selectedAlarm and opens the delete confirmation modal.

Notes

  • The Alarm Management page dynamically updates available options based on user selections.
  • Conditions can be single or grouped with logical operators.
  • Device selection includes filters for easier navigation.
  • Email notifications can be enabled and configured with a list of email addresses.
  • The page adapts its content based on the selected service (GraphAPI or Neat).

References

  • Alarms API: Provides endpoints for managing alarms, including creating, updating, and deleting alarms.
  • Auth API: Handles authentication and authorization for accessing the alarm management system.
  • Graph Devices API: Offers endpoints for retrieving and managing devices in the GraphAPI service.
  • Neat Devices API: Offers endpoints for retrieving and managing devices in the Neat service.