323 lines
16 KiB
JavaScript
323 lines
16 KiB
JavaScript
var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
|
|
function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
|
|
var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
|
|
var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
|
|
var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
|
|
var _, done = false;
|
|
for (var i = decorators.length - 1; i >= 0; i--) {
|
|
var context = {};
|
|
for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
|
|
for (var p in contextIn.access) context.access[p] = contextIn.access[p];
|
|
context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
|
|
var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
|
|
if (kind === "accessor") {
|
|
if (result === void 0) continue;
|
|
if (result === null || typeof result !== "object") throw new TypeError("Object expected");
|
|
if (_ = accept(result.get)) descriptor.get = _;
|
|
if (_ = accept(result.set)) descriptor.set = _;
|
|
if (_ = accept(result.init)) initializers.unshift(_);
|
|
}
|
|
else if (_ = accept(result)) {
|
|
if (kind === "field") initializers.unshift(_);
|
|
else descriptor[key] = _;
|
|
}
|
|
}
|
|
if (target) Object.defineProperty(target, contextIn.name, descriptor);
|
|
done = true;
|
|
};
|
|
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
|
|
var useValue = arguments.length > 2;
|
|
for (var i = 0; i < initializers.length; i++) {
|
|
value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
|
|
}
|
|
return useValue ? value : void 0;
|
|
};
|
|
import { DeesElement, customElement, html, css, cssManager, property, } from '@design.estate/dees-element';
|
|
let SzResourceUsageCard = (() => {
|
|
let _classDecorators = [customElement('sz-resource-usage-card')];
|
|
let _classDescriptor;
|
|
let _classExtraInitializers = [];
|
|
let _classThis;
|
|
let _classSuper = DeesElement;
|
|
let _data_decorators;
|
|
let _data_initializers = [];
|
|
let _data_extraInitializers = [];
|
|
let _serviceCount_decorators;
|
|
let _serviceCount_initializers = [];
|
|
let _serviceCount_extraInitializers = [];
|
|
var SzResourceUsageCard = class extends _classSuper {
|
|
static { _classThis = this; }
|
|
static {
|
|
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
_data_decorators = [property({ type: Object })];
|
|
_serviceCount_decorators = [property({ type: String })];
|
|
__esDecorate(this, null, _data_decorators, { kind: "accessor", name: "data", static: false, private: false, access: { has: obj => "data" in obj, get: obj => obj.data, set: (obj, value) => { obj.data = value; } }, metadata: _metadata }, _data_initializers, _data_extraInitializers);
|
|
__esDecorate(this, null, _serviceCount_decorators, { kind: "accessor", name: "serviceCount", static: false, private: false, access: { has: obj => "serviceCount" in obj, get: obj => obj.serviceCount, set: (obj, value) => { obj.serviceCount = value; } }, metadata: _metadata }, _serviceCount_initializers, _serviceCount_extraInitializers);
|
|
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
SzResourceUsageCard = _classThis = _classDescriptor.value;
|
|
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
}
|
|
static demo = () => html `
|
|
<div style="padding: 24px; max-width: 800px;">
|
|
<sz-resource-usage-card
|
|
.data=${{
|
|
cpu: 0.5,
|
|
memoryUsed: '191 MB',
|
|
memoryTotal: '429.2 GB',
|
|
networkIn: '38.9 KB/s',
|
|
networkOut: '1.7 KB/s',
|
|
topConsumers: [
|
|
{ name: 'test-nginx', memory: '32.1 MB' },
|
|
{ name: 'test-v2', memory: '31.7 MB' },
|
|
],
|
|
}}
|
|
serviceCount="7"
|
|
></sz-resource-usage-card>
|
|
</div>
|
|
`;
|
|
#data_accessor_storage = __runInitializers(this, _data_initializers, {
|
|
cpu: 0,
|
|
memoryUsed: '0 MB',
|
|
memoryTotal: '0 GB',
|
|
networkIn: '0 KB/s',
|
|
networkOut: '0 KB/s',
|
|
topConsumers: [],
|
|
});
|
|
get data() { return this.#data_accessor_storage; }
|
|
set data(value) { this.#data_accessor_storage = value; }
|
|
#serviceCount_accessor_storage = (__runInitializers(this, _data_extraInitializers), __runInitializers(this, _serviceCount_initializers, '0'));
|
|
get serviceCount() { return this.#serviceCount_accessor_storage; }
|
|
set serviceCount(value) { this.#serviceCount_accessor_storage = value; }
|
|
static styles = [
|
|
cssManager.defaultStyles,
|
|
css `
|
|
:host {
|
|
display: block;
|
|
height: 100%;
|
|
}
|
|
|
|
.card {
|
|
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
|
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 13px;
|
|
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.view-all {
|
|
font-size: 13px;
|
|
color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.view-all:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.metrics {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.metric-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.metric-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.metric-label {
|
|
font-size: 14px;
|
|
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 14px;
|
|
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 6px;
|
|
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
|
|
border-radius: 3px;
|
|
transition: width 300ms ease;
|
|
}
|
|
|
|
.network-row {
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: center;
|
|
}
|
|
|
|
.network-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 14px;
|
|
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
|
}
|
|
|
|
.network-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.network-icon.down {
|
|
color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
|
|
}
|
|
|
|
.network-icon.up {
|
|
color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
|
|
}
|
|
|
|
.top-consumers {
|
|
margin-top: 8px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid ${cssManager.bdTheme('#f4f4f5', '#27272a')};
|
|
}
|
|
|
|
.consumers-label {
|
|
font-size: 13px;
|
|
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.consumers-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
|
|
.consumer-item {
|
|
font-size: 13px;
|
|
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
|
}
|
|
|
|
.consumer-name {
|
|
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
|
}
|
|
`,
|
|
];
|
|
render() {
|
|
return html `
|
|
<div class="card">
|
|
<div class="header">
|
|
<div>
|
|
<div class="title">Resource Usage</div>
|
|
<div class="subtitle">Aggregated across ${this.serviceCount} services</div>
|
|
</div>
|
|
<a class="view-all">View All</a>
|
|
</div>
|
|
|
|
<div class="metrics">
|
|
<div class="metric-row">
|
|
<div class="metric-header">
|
|
<span class="metric-label">CPU</span>
|
|
<span class="metric-value">${this.data.cpu.toFixed(1)}%</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: ${Math.min(this.data.cpu, 100)}%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="metric-row">
|
|
<div class="metric-header">
|
|
<span class="metric-label">Memory</span>
|
|
<span class="metric-value">${this.data.memoryUsed} / ${this.data.memoryTotal}</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: ${this.calculateMemoryPercent()}%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="metric-row">
|
|
<div class="metric-header">
|
|
<span class="metric-label">Network</span>
|
|
<div class="network-row">
|
|
<span class="network-item">
|
|
<svg class="network-icon down" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 5v14M19 12l-7 7-7-7"/>
|
|
</svg>
|
|
${this.data.networkIn}
|
|
</span>
|
|
<span class="network-item">
|
|
<svg class="network-icon up" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 19V5M5 12l7-7 7 7"/>
|
|
</svg>
|
|
${this.data.networkOut}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
${this.data.topConsumers.length > 0 ? html `
|
|
<div class="top-consumers">
|
|
<div class="consumers-label">Top consumers</div>
|
|
<div class="consumers-list">
|
|
${this.data.topConsumers.map((consumer) => html `
|
|
<span class="consumer-item">
|
|
<span class="consumer-name">${consumer.name}:</span> ${consumer.memory}
|
|
</span>
|
|
`)}
|
|
</div>
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
`;
|
|
}
|
|
calculateMemoryPercent() {
|
|
// Simple extraction of numbers - in real app would parse properly
|
|
const used = parseFloat(this.data.memoryUsed);
|
|
const total = parseFloat(this.data.memoryTotal);
|
|
if (total === 0)
|
|
return 0;
|
|
// Assuming both are in same unit for demo
|
|
return Math.min((used / total) * 100, 100);
|
|
}
|
|
constructor() {
|
|
super(...arguments);
|
|
__runInitializers(this, _serviceCount_extraInitializers);
|
|
}
|
|
static {
|
|
__runInitializers(_classThis, _classExtraInitializers);
|
|
}
|
|
};
|
|
return SzResourceUsageCard = _classThis;
|
|
})();
|
|
export { SzResourceUsageCard };
|
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3otcmVzb3VyY2UtdXNhZ2UtY2FyZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9zei1yZXNvdXJjZS11c2FnZS1jYXJkLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQ0wsV0FBVyxFQUNYLGFBQWEsRUFDYixJQUFJLEVBQ0osR0FBRyxFQUNILFVBQVUsRUFDVixRQUFRLEdBRVQsTUFBTSw2QkFBNkIsQ0FBQztJQWtCeEIsbUJBQW1COzRCQUQvQixhQUFhLENBQUMsd0JBQXdCLENBQUM7Ozs7c0JBQ0MsV0FBVzs7Ozs7OzttQ0FBbkIsU0FBUSxXQUFXOzs7O2dDQW9CakQsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO3dDQVUxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7WUFUM0IsaUtBQWdCLElBQUksNkJBQUosSUFBSSxtRkFPbEI7WUFHRix5TEFBZ0IsWUFBWSw2QkFBWixZQUFZLG1HQUFlO1lBL0I3Qyw2S0FpUUM7Ozs7UUFoUVEsTUFBTSxDQUFDLElBQUksR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUE7OztnQkFHakI7WUFDTixHQUFHLEVBQUUsR0FBRztZQUNSLFVBQVUsRUFBRSxRQUFRO1lBQ3BCLFdBQVcsRUFBRSxVQUFVO1lBQ3ZCLFNBQVMsRUFBRSxXQUFXO1lBQ3RCLFVBQVUsRUFBRSxVQUFVO1lBQ3RCLFlBQVksRUFBRTtnQkFDWixFQUFFLElBQUksRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRTtnQkFDekMsRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUU7YUFDdkM7U0FDRjs7OztHQUlOLENBQUM7UUFHRixxRUFBdUM7WUFDckMsR0FBRyxFQUFFLENBQUM7WUFDTixVQUFVLEVBQUUsTUFBTTtZ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
|