pulsewatch-frontend 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +58 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# PulseWatch Frontend
|
|
2
|
+
|
|
3
|
+
A modern, responsive, and drop-in React component for uptime monitoring and status pages. This package provides the full frontend interface for the PulseWatch monitoring system, decoupled from the authentication layer so it can be easily integrated into existing admin dashboards or internal tools.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 📊 **Real-time Monitoring Dashboard**: View status, uptime percentages, and response times.
|
|
8
|
+
- 📈 **Interactive Charts**: Visual history of latency and uptime.
|
|
9
|
+
- 🔔 **Notifications Management**: Configure alerts for your monitors.
|
|
10
|
+
- 🌓 **Dark/Light Mode**: Built-in theme support.
|
|
11
|
+
- 🔌 **Socket.io Integration**: Live updates for monitor status.
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install pulsewatch-frontend
|
|
17
|
+
# or
|
|
18
|
+
yarn add pulsewatch-frontend
|
|
19
|
+
# or
|
|
20
|
+
pnpm add pulsewatch-frontend
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
Import the component and the CSS styles in your React application:
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import { PulseWatch } from "pulsewatch-frontend";
|
|
29
|
+
import "pulsewatch-frontend/style.css";
|
|
30
|
+
|
|
31
|
+
function App() {
|
|
32
|
+
return (
|
|
33
|
+
<div style={{ height: "100vh" }}>
|
|
34
|
+
<PulseWatch apiBase="https://api.your-uptime-service.com" />
|
|
35
|
+
</div>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Props
|
|
41
|
+
|
|
42
|
+
| Prop | Type | Description |
|
|
43
|
+
| --------- | -------- | -------------------------------------------------------------------------------- |
|
|
44
|
+
| `apiBase` | `string` | The base URL of your PulseWatch backend API (e.g., `http://localhost:3000/api`). |
|
|
45
|
+
|
|
46
|
+
## Backend Requirement
|
|
47
|
+
|
|
48
|
+
This package requires a compatible PulseWatch backend running. Ensure your backend returns the expected data format for monitors, results, and notifications.
|
|
49
|
+
|
|
50
|
+
## Development
|
|
51
|
+
|
|
52
|
+
To build the library locally:
|
|
53
|
+
|
|
54
|
+
```bash
|
|
55
|
+
npm run build
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
The output will be in the `dist` folder.
|