update
This commit is contained in:
323
dist_ts_web/elements/sz-resource-usage-card.js
Normal file
323
dist_ts_web/elements/sz-resource-usage-card.js
Normal file
@@ -0,0 +1,323 @@
|
||||
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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
|
||||
Reference in New Issue
Block a user