mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 09:16:38 +00:00
Adds hassio-system-metrics (#7105)
This commit is contained in:
parent
0304c0eca0
commit
bd511887a7
168
hassio/src/system/hassio-system-metrics.ts
Normal file
168
hassio/src/system/hassio-system-metrics.ts
Normal file
@ -0,0 +1,168 @@
|
||||
import "@material/mwc-button";
|
||||
import "@material/mwc-list/mwc-list-item";
|
||||
import {
|
||||
css,
|
||||
CSSResult,
|
||||
customElement,
|
||||
html,
|
||||
internalProperty,
|
||||
LitElement,
|
||||
property,
|
||||
TemplateResult,
|
||||
} from "lit-element";
|
||||
import { classMap } from "lit-html/directives/class-map";
|
||||
import memoizeOne from "memoize-one";
|
||||
import "../../../src/components/buttons/ha-progress-button";
|
||||
import "../../../src/components/ha-bar";
|
||||
import "../../../src/components/ha-button-menu";
|
||||
import "../../../src/components/ha-card";
|
||||
import "../../../src/components/ha-settings-row";
|
||||
import { fetchHassioStats, HassioStats } from "../../../src/data/hassio/common";
|
||||
import { HassioHostInfo } from "../../../src/data/hassio/host";
|
||||
import { haStyle } from "../../../src/resources/styles";
|
||||
import { HomeAssistant } from "../../../src/types";
|
||||
import {
|
||||
getValueInPercentage,
|
||||
roundWithOneDecimal,
|
||||
} from "../../../src/util/calculate";
|
||||
import { hassioStyle } from "../resources/hassio-style";
|
||||
|
||||
@customElement("hassio-system-metrics")
|
||||
class HassioSystemMetrics extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property() public hostInfo!: HassioHostInfo;
|
||||
|
||||
@internalProperty() private _supervisorMetrics?: HassioStats;
|
||||
|
||||
@internalProperty() private _coreMetrics?: HassioStats;
|
||||
|
||||
protected render(): TemplateResult | void {
|
||||
const usedSpace = this._getUsedSpace(this.hostInfo);
|
||||
const metrics = [
|
||||
{
|
||||
description: "Core CPU usage",
|
||||
value: this._coreMetrics?.cpu_percent,
|
||||
},
|
||||
{
|
||||
description: "Core RAM usage",
|
||||
value: this._coreMetrics?.memory_percent,
|
||||
},
|
||||
{
|
||||
description: "Supervisor CPU usage",
|
||||
value: this._supervisorMetrics?.cpu_percent,
|
||||
},
|
||||
{
|
||||
description: "Supervisor RAM usage",
|
||||
value: this._supervisorMetrics?.memory_percent,
|
||||
},
|
||||
{
|
||||
description: "Used space",
|
||||
value: usedSpace,
|
||||
},
|
||||
];
|
||||
|
||||
return html`
|
||||
<ha-card header="System metrics">
|
||||
<div class="card-content">
|
||||
${metrics.map((metric) =>
|
||||
this._renderMetric(metric.description, metric.value ?? 0)
|
||||
)}
|
||||
</div>
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
||||
protected firstUpdated(): void {
|
||||
this._loadData();
|
||||
}
|
||||
|
||||
private _renderMetric(description: string, value: number): TemplateResult {
|
||||
const roundedValue = roundWithOneDecimal(value);
|
||||
return html`<ha-settings-row>
|
||||
<span slot="heading">
|
||||
${description}
|
||||
</span>
|
||||
<div slot="description">
|
||||
<span class="value">
|
||||
${roundedValue}%
|
||||
</span>
|
||||
<ha-bar
|
||||
class="${classMap({
|
||||
"target-warning": roundedValue > 50,
|
||||
"target-critical": roundedValue > 85,
|
||||
})}"
|
||||
.value=${value}
|
||||
></ha-bar>
|
||||
</div>
|
||||
</ha-settings-row>`;
|
||||
}
|
||||
|
||||
private _getUsedSpace = memoizeOne((hostInfo: HassioHostInfo) =>
|
||||
roundWithOneDecimal(
|
||||
getValueInPercentage(hostInfo.disk_used, 0, hostInfo.disk_total)
|
||||
)
|
||||
);
|
||||
|
||||
private async _loadData(): Promise<void> {
|
||||
const [supervisor, core] = await Promise.all([
|
||||
fetchHassioStats(this.hass, "supervisor"),
|
||||
fetchHassioStats(this.hass, "core"),
|
||||
]);
|
||||
this._supervisorMetrics = supervisor;
|
||||
this._coreMetrics = core;
|
||||
}
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
haStyle,
|
||||
hassioStyle,
|
||||
css`
|
||||
ha-card {
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
}
|
||||
ha-settings-row {
|
||||
padding: 0;
|
||||
height: 54px;
|
||||
width: 100%;
|
||||
}
|
||||
ha-settings-row > div[slot="description"] {
|
||||
white-space: normal;
|
||||
color: var(--secondary-text-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
ha-bar {
|
||||
--ha-bar-primary-color: var(
|
||||
--hassio-bar-ok-color,
|
||||
var(--success-color)
|
||||
);
|
||||
}
|
||||
.target-warning {
|
||||
--ha-bar-primary-color: var(
|
||||
--hassio-bar-warning-color,
|
||||
var(--warning-color)
|
||||
);
|
||||
}
|
||||
.target-critical {
|
||||
--ha-bar-primary-color: var(
|
||||
--hassio-bar-critical-color,
|
||||
var(--error-color)
|
||||
);
|
||||
}
|
||||
.value {
|
||||
width: 42px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"hassio-system-metrics": HassioSystemMetrics;
|
||||
}
|
||||
}
|
@ -23,6 +23,7 @@ import { hassioStyle } from "../resources/hassio-style";
|
||||
import "./hassio-host-info";
|
||||
import "./hassio-supervisor-info";
|
||||
import "./hassio-supervisor-log";
|
||||
import "./hassio-system-metrics";
|
||||
|
||||
@customElement("hassio-system")
|
||||
class HassioSystem extends LitElement {
|
||||
@ -64,6 +65,10 @@ class HassioSystem extends LitElement {
|
||||
.hostInfo=${this.hostInfo}
|
||||
.hassOsInfo=${this.hassOsInfo}
|
||||
></hassio-host-info>
|
||||
<hassio-system-metrics
|
||||
.hass=${this.hass}
|
||||
.hostInfo=${this.hostInfo}
|
||||
></hassio-system-metrics>
|
||||
</div>
|
||||
<hassio-supervisor-log .hass=${this.hass}></hassio-supervisor-log>
|
||||
</div>
|
||||
|
@ -1,8 +1,21 @@
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
export interface HassioResponse<T> {
|
||||
data: T;
|
||||
result: "ok";
|
||||
}
|
||||
|
||||
export interface HassioStats {
|
||||
blk_read: number;
|
||||
blk_write: number;
|
||||
cpu_percent: number;
|
||||
memory_limit: number;
|
||||
memory_percent: number;
|
||||
memory_usage: number;
|
||||
network_rx: number;
|
||||
network_tx: number;
|
||||
}
|
||||
|
||||
export const hassioApiResultExtractor = <T>(response: HassioResponse<T>) =>
|
||||
response.data;
|
||||
|
||||
@ -15,3 +28,15 @@ export const extractApiErrorMessage = (error: any): string => {
|
||||
};
|
||||
|
||||
export const ignoredStatusCodes = new Set([502, 503, 504]);
|
||||
|
||||
export const fetchHassioStats = async (
|
||||
hass: HomeAssistant,
|
||||
container: string
|
||||
): Promise<HassioStats> => {
|
||||
return hassioApiResultExtractor(
|
||||
await hass.callApi<HassioResponse<HassioStats>>(
|
||||
"GET",
|
||||
`hassio/${container}/stats`
|
||||
)
|
||||
);
|
||||
};
|
||||
|
Loading…
x
Reference in New Issue
Block a user