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 `
`; #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 `
Resource Usage
Aggregated across ${this.serviceCount} services
View All
CPU ${this.data.cpu.toFixed(1)}%
Memory ${this.data.memoryUsed} / ${this.data.memoryTotal}
Network
${this.data.networkIn} ${this.data.networkOut}
${this.data.topConsumers.length > 0 ? html `
Top consumers
${this.data.topConsumers.map((consumer) => html ` ${consumer.name}: ${consumer.memory} `)}
` : ''}
`; } 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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