Adds hassio-system-metrics (#7105)

This commit is contained in:
Joakim Sørensen 2020-09-22 21:58:31 +02:00 committed by GitHub
parent 0304c0eca0
commit bd511887a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 198 additions and 0 deletions

View 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;
}
}

View File

@ -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>

View File

@ -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`
)
);
};