mirror of
https://github.com/home-assistant/frontend.git
synced 2025-04-24 21:37:21 +00:00
Display cumulative setup seconds on the config info page (#8720)
Co-authored-by: Bram Kragten <mail@bramkragten.nl> Co-authored-by: Philip Allgaier <philip.allgaier@gmx.de>
This commit is contained in:
parent
93a1adaa56
commit
0c12586019
@ -24,6 +24,11 @@ export interface IntegrationManifest {
|
||||
| "local_push";
|
||||
}
|
||||
|
||||
export interface IntegrationSetup {
|
||||
domain: string;
|
||||
seconds?: number;
|
||||
}
|
||||
|
||||
export const integrationIssuesUrl = (
|
||||
domain: string,
|
||||
manifest: IntegrationManifest
|
||||
@ -44,3 +49,6 @@ export const fetchIntegrationManifest = (
|
||||
hass: HomeAssistant,
|
||||
integration: string
|
||||
) => hass.callWS<IntegrationManifest>({ type: "manifest/get", integration });
|
||||
|
||||
export const fetchIntegrationSetups = (hass: HomeAssistant) =>
|
||||
hass.callWS<IntegrationSetup[]>({ type: "integration/setup_info" });
|
||||
|
@ -140,7 +140,10 @@ class HaConfigInfo extends LitElement {
|
||||
</div>
|
||||
<div class="content">
|
||||
<system-health-card .hass=${this.hass}></system-health-card>
|
||||
<integrations-card .hass=${this.hass}></integrations-card>
|
||||
<integrations-card
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
></integrations-card>
|
||||
</div>
|
||||
</hass-tabs-subpage>
|
||||
`;
|
||||
|
@ -13,8 +13,10 @@ import "../../../components/ha-card";
|
||||
import {
|
||||
domainToName,
|
||||
fetchIntegrationManifests,
|
||||
fetchIntegrationSetups,
|
||||
integrationIssuesUrl,
|
||||
IntegrationManifest,
|
||||
IntegrationSetup,
|
||||
} from "../../../data/integration";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
import { brandsUrl } from "../../../util/brands-url";
|
||||
@ -23,10 +25,16 @@ import { brandsUrl } from "../../../util/brands-url";
|
||||
class IntegrationsCard extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ type: Boolean }) public narrow = false;
|
||||
|
||||
@internalProperty() private _manifests?: {
|
||||
[domain: string]: IntegrationManifest;
|
||||
};
|
||||
|
||||
@internalProperty() private _setups?: {
|
||||
[domain: string]: IntegrationSetup;
|
||||
};
|
||||
|
||||
private _sortedIntegrations = memoizeOne((components: string[]) => {
|
||||
return Array.from(
|
||||
new Set(
|
||||
@ -40,6 +48,7 @@ class IntegrationsCard extends LitElement {
|
||||
firstUpdated(changedProps) {
|
||||
super.firstUpdated(changedProps);
|
||||
this._fetchManifests();
|
||||
this._fetchSetups();
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
@ -48,10 +57,47 @@ class IntegrationsCard extends LitElement {
|
||||
.header=${this.hass.localize("ui.panel.config.info.integrations")}
|
||||
>
|
||||
<table class="card-content">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
${!this.narrow
|
||||
? html`<th></th>
|
||||
<th></th>
|
||||
<th></th>`
|
||||
: ""}
|
||||
<th>Setup time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${this._sortedIntegrations(this.hass!.config.components).map(
|
||||
(domain) => {
|
||||
const manifest = this._manifests && this._manifests[domain];
|
||||
const docLink = manifest
|
||||
? html`<a
|
||||
href=${manifest.documentation}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.info.documentation"
|
||||
)}</a
|
||||
>`
|
||||
: "";
|
||||
const issueLink =
|
||||
manifest && (manifest.is_built_in || manifest.issue_tracker)
|
||||
? html`
|
||||
<a
|
||||
href=${integrationIssuesUrl(domain, manifest)}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.info.issues"
|
||||
)}</a
|
||||
>
|
||||
`
|
||||
: "";
|
||||
const setupSeconds = this._setups?.[domain]?.seconds?.toFixed(
|
||||
2
|
||||
);
|
||||
return html`
|
||||
<tr>
|
||||
<td>
|
||||
@ -64,39 +110,25 @@ class IntegrationsCard extends LitElement {
|
||||
<td class="name">
|
||||
${domainToName(this.hass.localize, domain, manifest)}<br />
|
||||
<span class="domain">${domain}</span>
|
||||
${this.narrow
|
||||
? html`<div class="mobile-row">
|
||||
<div>${docLink} ${issueLink}</div>
|
||||
${setupSeconds ? html`${setupSeconds}s` : ""}
|
||||
</div>`
|
||||
: ""}
|
||||
</td>
|
||||
${!manifest
|
||||
${this.narrow
|
||||
? ""
|
||||
: html`
|
||||
<td>
|
||||
<a
|
||||
href=${manifest.documentation}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.info.documentation"
|
||||
)}
|
||||
</a>
|
||||
${docLink}
|
||||
</td>
|
||||
<td>
|
||||
${issueLink}
|
||||
</td>
|
||||
<td class="setup">
|
||||
${setupSeconds ? html`${setupSeconds}s` : ""}
|
||||
</td>
|
||||
${manifest.is_built_in || manifest.issue_tracker
|
||||
? html`
|
||||
<td>
|
||||
<a
|
||||
href=${integrationIssuesUrl(
|
||||
domain,
|
||||
manifest
|
||||
)}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.info.issues"
|
||||
)}
|
||||
</a>
|
||||
</td>
|
||||
`
|
||||
: ""}
|
||||
`}
|
||||
</tr>
|
||||
`;
|
||||
@ -116,9 +148,21 @@ class IntegrationsCard extends LitElement {
|
||||
this._manifests = manifests;
|
||||
}
|
||||
|
||||
private async _fetchSetups() {
|
||||
const setups = {};
|
||||
for (const setup of await fetchIntegrationSetups(this.hass)) {
|
||||
setups[setup.domain] = setup;
|
||||
}
|
||||
this._setups = setups;
|
||||
}
|
||||
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
td {
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
padding: 0 8px;
|
||||
}
|
||||
td:first-child {
|
||||
@ -127,9 +171,22 @@ class IntegrationsCard extends LitElement {
|
||||
td.name {
|
||||
padding: 8px;
|
||||
}
|
||||
td.setup {
|
||||
text-align: right;
|
||||
}
|
||||
th {
|
||||
text-align: right;
|
||||
}
|
||||
.domain {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
.mobile-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.mobile-row a:not(:last-of-type) {
|
||||
margin-right: 4px;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
max-height: 40px;
|
||||
|
Loading…
x
Reference in New Issue
Block a user