mirror of
https://github.com/home-assistant/frontend.git
synced 2025-04-24 21:37:21 +00:00
Show usage stats in System Health (#12424)
This commit is contained in:
Zack Barett
GitHub
parent
490f84a7b1
commit
e8c30cabca
18
src/common/util/subscribe-polling.ts
Normal file
18
src/common/util/subscribe-polling.ts
Normal file
@ -0,0 +1,18 @@
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
export const subscribePollingCollection = (
|
||||
hass: HomeAssistant,
|
||||
updateData: (hass: HomeAssistant) => void,
|
||||
interval: number
|
||||
) => {
|
||||
let timeout;
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
await updateData(hass);
|
||||
} finally {
|
||||
timeout = setTimeout(() => fetchData(), interval);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
return () => clearTimeout(timeout);
|
||||
};
|
||||
@ -322,7 +322,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
|
||||
translationKey: "ui.panel.config.system_health.caption",
|
||||
iconPath: mdiHeart,
|
||||
iconColor: "#507FfE",
|
||||
component: "system_health",
|
||||
components: ["system_health", "hassio"],
|
||||
},
|
||||
],
|
||||
about: [
|
||||
|
||||
@ -1,13 +1,19 @@
|
||||
import { ActionDetail } from "@material/mwc-list";
|
||||
import "@material/mwc-list/mwc-list-item";
|
||||
import { mdiContentCopy } from "@mdi/js";
|
||||
import { UnsubscribeFunc } from "home-assistant-js-websocket/dist/types";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
|
||||
import { formatDateTime } from "../../../common/datetime/format_date_time";
|
||||
import { copyToClipboard } from "../../../common/util/copy-clipboard";
|
||||
import { subscribePollingCollection } from "../../../common/util/subscribe-polling";
|
||||
import "../../../components/ha-alert";
|
||||
import "../../../components/ha-button-menu";
|
||||
import "../../../components/ha-card";
|
||||
import "../../../components/ha-circular-progress";
|
||||
import "../../../components/ha-metric";
|
||||
import { fetchHassioStats, HassioStats } from "../../../data/hassio/common";
|
||||
import { domainToName } from "../../../data/integration";
|
||||
import {
|
||||
subscribeSystemHealthInfo,
|
||||
@ -15,6 +21,7 @@ import {
|
||||
SystemHealthInfo,
|
||||
} from "../../../data/system_health";
|
||||
import "../../../layouts/hass-subpage";
|
||||
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
|
||||
import type { HomeAssistant } from "../../../types";
|
||||
import { showToast } from "../../../util/toast";
|
||||
|
||||
@ -35,21 +42,52 @@ const sortKeys = (a: string, b: string) => {
|
||||
};
|
||||
|
||||
@customElement("ha-config-system-health")
|
||||
class HaConfigSystemHealth extends LitElement {
|
||||
class HaConfigSystemHealth extends SubscribeMixin(LitElement) {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ type: Boolean }) public narrow!: boolean;
|
||||
|
||||
@state() private _info?: SystemHealthInfo;
|
||||
|
||||
@state() private _supervisorStats?: HassioStats;
|
||||
|
||||
@state() private _coreStats?: HassioStats;
|
||||
|
||||
@state() private _error?: { code: string; message: string };
|
||||
|
||||
public hassSubscribe(): Array<UnsubscribeFunc | Promise<UnsubscribeFunc>> {
|
||||
const subs: Array<UnsubscribeFunc | Promise<UnsubscribeFunc>> = [];
|
||||
if (isComponentLoaded(this.hass, "system_health")) {
|
||||
subs.push(
|
||||
subscribeSystemHealthInfo(this.hass!, (info) => {
|
||||
this._info = info;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
if (isComponentLoaded(this.hass, "hassio")) {
|
||||
subs.push(
|
||||
subscribePollingCollection(
|
||||
this.hass,
|
||||
async () => {
|
||||
this._supervisorStats = await fetchHassioStats(
|
||||
this.hass,
|
||||
"supervisor"
|
||||
);
|
||||
this._coreStats = await fetchHassioStats(this.hass, "core");
|
||||
},
|
||||
10000
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return subs;
|
||||
}
|
||||
|
||||
protected firstUpdated(changedProps) {
|
||||
super.firstUpdated(changedProps);
|
||||
|
||||
this.hass!.loadBackendTranslation("system_health");
|
||||
|
||||
subscribeSystemHealthInfo(this.hass!, (info) => {
|
||||
this._info = info;
|
||||
});
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
@ -152,27 +190,88 @@ class HaConfigSystemHealth extends LitElement {
|
||||
back-path="/config/system"
|
||||
.header=${this.hass.localize("ui.panel.config.system_health.caption")}
|
||||
>
|
||||
<ha-button-menu
|
||||
corner="BOTTOM_START"
|
||||
slot="toolbar-icon"
|
||||
@action=${this._copyInfo}
|
||||
>
|
||||
<ha-icon-button
|
||||
slot="trigger"
|
||||
.label=${this.hass.localize("ui.panel.config.info.copy_menu")}
|
||||
.path=${mdiContentCopy}
|
||||
></ha-icon-button>
|
||||
<mwc-list-item>
|
||||
${this.hass.localize("ui.panel.config.info.copy_raw")}
|
||||
</mwc-list-item>
|
||||
<mwc-list-item>
|
||||
${this.hass.localize("ui.panel.config.info.copy_github")}
|
||||
</mwc-list-item>
|
||||
</ha-button-menu>
|
||||
${this._error
|
||||
? html`
|
||||
<ha-alert alert-type="error"
|
||||
>${this._error.message || this._error.code}</ha-alert
|
||||
>
|
||||
`
|
||||
: ""}
|
||||
${this._info
|
||||
? html`
|
||||
<ha-button-menu
|
||||
corner="BOTTOM_START"
|
||||
slot="toolbar-icon"
|
||||
@action=${this._copyInfo}
|
||||
>
|
||||
<ha-icon-button
|
||||
slot="trigger"
|
||||
.label=${this.hass.localize("ui.panel.config.info.copy_menu")}
|
||||
.path=${mdiContentCopy}
|
||||
></ha-icon-button>
|
||||
<mwc-list-item>
|
||||
${this.hass.localize("ui.panel.config.info.copy_raw")}
|
||||
</mwc-list-item>
|
||||
<mwc-list-item>
|
||||
${this.hass.localize("ui.panel.config.info.copy_github")}
|
||||
</mwc-list-item>
|
||||
</ha-button-menu>
|
||||
`
|
||||
: ""}
|
||||
<div class="content">
|
||||
<ha-card outlined>
|
||||
<div class="card-content">${sections}</div>
|
||||
</ha-card>
|
||||
${!this._coreStats && !this._supervisorStats
|
||||
? ""
|
||||
: html`
|
||||
<ha-card outlined>
|
||||
<div class="card-content">
|
||||
${this._coreStats
|
||||
? html`
|
||||
<h3>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.system_health.core_stats"
|
||||
)}
|
||||
</h3>
|
||||
<ha-metric
|
||||
.heading=${this.hass.localize(
|
||||
"ui.panel.config.system_health.cpu_usage"
|
||||
)}
|
||||
.value=${this._coreStats.cpu_percent}
|
||||
></ha-metric>
|
||||
<ha-metric
|
||||
.heading=${this.hass.localize(
|
||||
"ui.panel.config.system_health.ram_usage"
|
||||
)}
|
||||
.value=${this._coreStats.memory_percent}
|
||||
></ha-metric>
|
||||
`
|
||||
: ""}
|
||||
${this._supervisorStats
|
||||
? html`
|
||||
<h3>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.system_health.supervisor_stats"
|
||||
)}
|
||||
</h3>
|
||||
<ha-metric
|
||||
.heading=${this.hass.localize(
|
||||
"ui.panel.config.system_health.cpu_usage"
|
||||
)}
|
||||
.value=${this._supervisorStats.cpu_percent}
|
||||
></ha-metric>
|
||||
<ha-metric
|
||||
.heading=${this.hass.localize(
|
||||
"ui.panel.config.system_health.ram_usage"
|
||||
)}
|
||||
.value=${this._supervisorStats.memory_percent}
|
||||
></ha-metric>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
</ha-card>
|
||||
`}
|
||||
</div>
|
||||
</hass-subpage>
|
||||
`;
|
||||
|
||||
@ -1677,7 +1677,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
"automation": {
|
||||
"caption": "Automations",
|
||||
"description": "Create custom behavior rules for your home",
|
||||
@ -3167,7 +3166,11 @@
|
||||
}
|
||||
},
|
||||
"system_health": {
|
||||
"caption": "System Health"
|
||||
"caption": "System Health",
|
||||
"cpu_usage": "CPU Usage",
|
||||
"ram_usage": "RAM Usage",
|
||||
"core_stats": "Core Stats",
|
||||
"supervisor_stats": "Supervisor Stats"
|
||||
}
|
||||
},
|
||||
"lovelace": {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user