@nopwdio/sdk-js
Version:
Nopwd JS SDK
142 lines • 6.46 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 { component } from "../internal/styles/semantic.styles.js";
import styles from "./np-status.styles.js";
import { loading, warning, circleSolid, wifiOff } from "../internal/styles/icons.styles.js";
import { wait } from "../internal/util/wait.js";
export var State;
(function (State) {
State["OPERATIONAL"] = "operational";
State["DISRUPTED"] = "disrupted";
State["DOWN"] = "down";
State["UNKNOWN"] = "unknown";
State["NODATA"] = "nodata";
State["OFFLINE"] = "offline";
})(State || (State = {}));
/**
* @summary `np-status` is a custom element that displays the current health status of the nopwd API.
*
* @description
* This component connects to a WebSocket to receive real-time status updates and displays
* the current state of the nopwd API.
* The possible states are:
* - `operational`: All systems are functioning correctly.
* - `disrupted`: Some errors occurred in the last 24 hours.
* - `down`: No successful responses in the last hour.
* - `nodata`: Insufficient data to determine status.
* - `offline`: Unable to connect to the service.
* - `unknown`: The status is currently unknown.
*
* @slot - The default slot for the label.
* @slot operational - Content displayed when all services are operational.
* @slot disrupted - Content displayed when some errors occurred in the last 24 hours.
* @slot down - Content displayed when no successful responses in the last hour.
* @slot nodata - Content displayed when there is insufficient data to determine status.
* @slot offline - Content displayed when unable to connect to the service.
*
* @csspart link - The component's link wrapper.
*/
let NpStatus = class NpStatus extends LitElement {
constructor() {
super();
this.state = State.UNKNOWN;
}
connectedCallback() {
const _super = Object.create(null, {
connectedCallback: { get: () => super.connectedCallback }
});
return __awaiter(this, void 0, void 0, function* () {
_super.connectedCallback.call(this);
this.connect();
});
}
disconnectedCallback() {
const _super = Object.create(null, {
disconnectedCallback: { get: () => super.disconnectedCallback }
});
return __awaiter(this, void 0, void 0, function* () {
_super.disconnectedCallback.call(this);
this.disconnect();
});
}
connect() {
return __awaiter(this, void 0, void 0, function* () {
if (this.state !== State.OFFLINE) {
this.state = State.UNKNOWN;
}
const base = "wss://ws-a5hdgaocga-uc.a.run.app";
const scope = this.getAttribute("scope");
const path = scope === null ? `${base}/status` : `${base}/status/${scope}`;
this.ws = new WebSocket(path);
this.ws.onmessage = (event) => {
const status = JSON.parse(event.data);
if (status.success_count + status.error_count === 0) {
this.state = State.NODATA;
return;
}
if (status.success_count === 0) {
this.state = State.DOWN;
return;
}
if (status.error_count > 0) {
this.state = State.DISRUPTED;
return;
}
this.state = State.OPERATIONAL;
};
this.ws.onclose = () => __awaiter(this, void 0, void 0, function* () {
this.state = State.OFFLINE;
if (this.isConnected) {
yield wait(1000);
this.connect();
}
});
});
}
disconnect() {
var _a;
this.state = State.OFFLINE;
(_a = this.ws) === null || _a === void 0 ? void 0 : _a.close();
}
// Render the UI as a function of component state
render() {
return html `<a href="https://nopwd.io/status" part="link">
${this.state === State.DOWN
? html `${warning} <slot name="down">Service is down</slot>`
: this.state === State.NODATA
? html `${warning} <slot name="nodata">No data</slot>`
: this.state === State.DISRUPTED
? html `${warning} <slot name="disrupted">Some systems disrupted</slot>`
: this.state === State.OPERATIONAL
? html `${circleSolid} <slot name="operational">All systems operational</slot>`
: this.state === State.OFFLINE
? html `${wifiOff} <slot name="offline">Offline</slot>`
: html `${loading} <slot>Connecting...</slot>`}
</a>`;
}
};
NpStatus.styles = [core, component, styles];
__decorate([
property({ reflect: true })
], NpStatus.prototype, "state", void 0);
NpStatus = __decorate([
customElement("np-status")
], NpStatus);
export { NpStatus };
//# sourceMappingURL=np-status.js.map