Skip to main content
The PumpControl component is a specialized monitoring panel designed specifically for water treatment plant pump stations. It displays pump status, system states, and operational metrics with dedicated sections for different equipment types.

​
Overview

PumpControl provides a comprehensive view of pump station operations with:
  • Pump monitoring section - Track individual pump status and runtime
  • System state indicators - Monitor valves, levels, and other binary states
  • Real-time data integration - Automatic updates from InfluxDB variables
  • Configurable layout - Add/remove pumps and states dynamically
  • Visual status indication - Color-coded states for quick assessment
This component combines elements of boolean indicators, numeric displays, and timing information in a specialized layout optimized for pump station operators.

​
Props

​
edit
boolean
default:"true"
Enables edit mode for configuration. Set to false for display-only mode on the dashboard.
​
initialPumps
array
default:"[]"
Array of pump configurations. Each pump object should contain:
​
initialStates
array
default:"[]"
Array of system state configurations (valves, sensors, etc.)
​
initialTitle
string
default:""
Title displayed at the top of the pump control panel

​
Configuration Mode

When edit={true}, the component provides a configuration interface:

​
Adding Pumps

1

Click Add Pump

Opens a dialog for configuring a new pump
2

Enter pump details

  • Name: Descriptive name for the pump
  • Variable: Select the InfluxDB variable to monitor
3

Save configuration

Pump is added to the monitoring panel

​
Adding States

1

Click Add State

Opens a dialog for configuring a system state indicator
2

Enter state details

  • Name: Descriptive name (e.g., “Inlet Valve Open”)
  • Variable: Select the boolean InfluxDB variable
3

Save configuration

State indicator is added to the panel

​
Saving to Backend

The configuration is saved via the API: 
// From ~/workspace/source/src/modules/Charts/views/ConfigBombs.jsx:99
const url = `${backend[import.meta.env.VITE_APP_NAME]}/bombs`
Request body structure: 
{
  "title": "Main Pump Station",
  "pumps": [
    { "id": 1, "name": "Pump 1", "varId": 123, "type": "pump" }
  ],
  "states": [
    { "id": 1, "name": "Inlet Valve", "varId": 456, "type": "status" }
  ]
}

​
Display Mode

When edit={false} (dashboard display mode), the component shows:

​
Pump Section

  • Visual pump status indicators
  • Runtime or flow rate values
  • Color-coded active/inactive states
  • Historical data if available

​
State Section

  • LED-style boolean indicators
  • Current state values
  • Clear on/off or open/closed indication

​
Usage Example

import PumpControl from './components/Charts/views/ConfigBombs'

// Configuration mode (in settings)
<PumpControl
  edit={true}
  initialPumps={[]}
  initialStates={[]}
  initialTitle="Configure Pump Station"
/>

// Display mode (on dashboard)
<PumpControl
  edit={false}
  initialPumps={[
    {
      id: 1,
      name: "Primary Pump",
      varId: 101,
      value: 1,  // 1 = running, 0 = stopped
      unit: null,
      type: "pump"
    },
    {
      id: 2,
      name: "Secondary Pump",
      varId: 102,
      value: 0,
      unit: null,
      type: "pump"
    }
  ]}
  initialStates={[
    {
      id: 1,
      name: "Inlet Valve Open",
      varId: 201,
      value: 1,  // Boolean: 1 = open, 0 = closed
      unit: null,
      type: "status"
    },
    {
      id: 2,
      name: "High Level Alarm",
      varId: 202,
      value: 0,
      unit: null,
      type: "status"
    }
  ]}
  initialTitle="Pump Station A"
/>

​
Real-World Use Cases

Monitor primary water supply pumps:
<PumpControl
  edit={false}
  initialTitle="Main Water Supply"
  initialPumps={[
    { id: 1, name: "Pump 1 - 50HP", varId: 101, value: 1, type: "pump" },
    { id: 2, name: "Pump 2 - 50HP", varId: 102, value: 1, type: "pump" },
    { id: 3, name: "Pump 3 - 75HP", varId: 103, value: 0, type: "pump" }
  ]}
  initialStates={[
    { id: 1, name: "Suction Pressure OK", varId: 201, value: 1, type: "status" },
    { id: 2, name: "Discharge Valve Open", varId: 202, value: 1, type: "status" },
    { id: 3, name: "Emergency Stop", varId: 203, value: 0, type: "status" }
  ]}
/>

​
Integration with Dashboard

PumpControl is registered in the Home dashboard chart components: 
// From ~/workspace/source/src/modules/home/views/index.jsx:17-26
const chartComponents = {
    LiquidFillPorcentaje,
    CirclePorcentaje,
    BarDataSet,
    PieChart: DoughnutChart,
    PumpControl,  // ← Available for dashboard widgets
    GaugeSpeed,
    BooleanChart,
    MultipleBooleanChart
}
Data is automatically fetched and updated every 30 seconds via the multipleDataInflux API endpoint.

​
API Integration

​
Save Configuration

POST /api/bombs
Request body: 
{
  "title": "string",
  "pumps": [
    {
      "id": "number",
      "name": "string",
      "varId": "number",
      "type": "pump"
    }
  ],
  "states": [
    {
      "id": "number",
      "name": "string",
      "varId": "number",
      "type": "status"
    }
  ]
}

​
Fetch Data

Data is fetched through the standard multipleDataInflux endpoint used by the dashboard, which queries all configured InfluxDB variables and returns their current values.

​
Validation

Before saving, the component validates:
  • At least one pump OR one state must be configured
  • Each item must have a valid InfluxDB variable selected
  • Names cannot be empty

​
Configuration Dialog

The add pump/state dialog includes:
  • Text field for name input
  • Variable selector component (uses SelectVars component)
  • Type indicator (automatically set based on dialog type)
  • Save/Cancel buttons

​
Best Practices

Organize by function: Group pumps that work together (parallel pumps, duty/standby pairs) in the same PumpControl panel.
Include critical states: Always include essential status indicators like emergency stop, pressure alarms, and valve positions alongside pump statuses.
Variable naming: Use clear, descriptive variable names in InfluxDB that match physical equipment labels for easier configuration.