@nopwdio/sdk-js
Version:
Nopwd JS SDK
110 lines • 5.01 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { core } from "../internal/styles/core.styles.js";
import styles from "./np-status-history.styles.js";
import { wait } from "../internal/util/wait.js";
import { component } from "../internal/styles/semantic.styles.js";
/**
* @summary `np-status-history` is a custom element that displays the status history of a service.
*
* @description
* This component connects to a WebSocket server to receive real-time updates and renders the status history accordingly.
* It maintains a list of status updates and displays them based on the success and error counts.
* The possible status indicators are:
* - `operational`: All systems are functioning correctly.
* - `disrupted`: Some errors occurred.
* - `down`: No successful responses.
* - `nodata`: Insufficient data to determine status.
* - `offline`: Unable to connect to the service.
*
* @csspart link - The component's link wrapper.
*/
let NpStatusHistory = class NpStatusHistory extends LitElement {
constructor() {
super(...arguments);
// Define properties
this.statuses = [];
this.limit = 30;
}
// Render the component
render() {
return html `${this.statuses.length === 0
? html ``
: this.statuses.map((status) => status.success_count === 0 && status.error_count === 0
? html `<span class="nodata"></span>`
: status.success_count === 0
? html `<span class="down"></span>`
: status.error_count > 0
? html `<span class="disrupted"></span>`
: html `<span class="operational"></span>`)}`;
}
// Lifecycle method called when the element is added to the document
connectedCallback() {
super.connectedCallback();
this.connect();
}
// Connect to the WebSocket server
connect() {
return __awaiter(this, void 0, void 0, function* () {
const base = "wss://ws-a5hdgaocga-uc.a.run.app";
const scope = this.getAttribute("scope");
const path = scope === null
? `${base}/status?limit=${this.limit}`
: `${base}/status/${scope}?limit=${this.limit}`;
const ws = new WebSocket(path);
// Handle incoming messages
ws.onmessage = (event) => {
const status = JSON.parse(event.data);
if (this.statuses.length === 0) {
this.statuses.unshift(status);
this.requestUpdate();
return;
}
if (this.statuses[0].day_id === status.day_id) {
this.statuses[0] = status;
this.requestUpdate();
}
else {
this.statuses.unshift(status);
this.requestUpdate();
}
};
// Handle WebSocket closure
ws.onclose = () => __awaiter(this, void 0, void 0, function* () {
this.statuses = [];
if (this.isConnected) {
yield wait(1000);
this.connect();
}
});
});
}
};
// Define component styles
NpStatusHistory.styles = [core, component, styles];
__decorate([
property({ type: Array })
], NpStatusHistory.prototype, "statuses", void 0);
__decorate([
property({ type: Number })
], NpStatusHistory.prototype, "limit", void 0);
NpStatusHistory = __decorate([
customElement("np-status-history")
], NpStatusHistory);
export { NpStatusHistory };
//# sourceMappingURL=np-status-history.js.map