Start the Repairs dashboard (#13192)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Zack Barett 2022-07-19 09:25:47 -05:00 committed by GitHub
parent 05418fc83b
commit bd50d6a6a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 642 additions and 1 deletions

View File

@ -76,6 +76,7 @@ export const FIXED_DOMAIN_ICONS = {
configurator: mdiCog,
conversation: mdiTextToSpeech,
counter: mdiCounter,
demo: mdiHomeAssistant,
fan: mdiFan,
google_assistant: mdiGoogleAssistant,
group: mdiGoogleCirclesCommunities,

62
src/data/repairs.ts Normal file
View File

@ -0,0 +1,62 @@
import type { HomeAssistant } from "../types";
import { DataEntryFlowStep } from "./data_entry_flow";
export interface RepairsIssue {
domain: string;
issue_id: string;
active: boolean;
is_fixable: boolean;
severity?: "error" | "warning" | "critical";
breaks_in_ha_version?: string;
ignored: boolean;
created: string;
dismissed_version?: string;
learn_more_url?: string;
translation_key?: string;
translation_placeholders?: Record<string, string>;
}
export const fetchRepairsIssues = async (hass: HomeAssistant) =>
hass.callWS<{ issues: RepairsIssue[] }>({
type: "resolution_center/list_issues",
});
export const dismissRepairsIssue = async (
hass: HomeAssistant,
issue: RepairsIssue
) =>
hass.callWS<string>({
type: "resolution_center/dismiss_issue",
issue_id: issue.issue_id,
domain: issue.domain,
});
export const createRepairsFlow = (
hass: HomeAssistant,
handler: string,
issue_id: string
) =>
hass.callApi<DataEntryFlowStep>("POST", "resolution_center/issues/fix", {
handler,
issue_id,
});
export const fetchRepairsFlow = (hass: HomeAssistant, flowId: string) =>
hass.callApi<DataEntryFlowStep>(
"GET",
`resolution_center/issues/fix/${flowId}`
);
export const handleRepairsFlowStep = (
hass: HomeAssistant,
flowId: string,
data: Record<string, any>
) =>
hass.callApi<DataEntryFlowStep>(
"POST",
`resolution_center/issues/fix/${flowId}`,
data
);
export const deleteRepairsFlow = (hass: HomeAssistant, flowId: string) =>
hass.callApi("DELETE", `resolution_center/issues/fix/${flowId}`);

View File

@ -39,7 +39,8 @@ export type TranslationCategory =
| "mfa_setup"
| "system_health"
| "device_class"
| "application_credentials";
| "application_credentials"
| "issues";
export const fetchTranslationPreferences = (hass: HomeAssistant) =>
fetchFrontendUserData(hass.connection, "language");

View File

@ -9,6 +9,7 @@ import {
mdiHeart,
mdiInformation,
mdiInformationOutline,
mdiLifebuoy,
mdiLightningBolt,
mdiMapMarkerRadius,
mdiMathLog,
@ -267,6 +268,12 @@ export const configSections: { [name: string]: PageNavigation[] } = {
iconPath: mdiUpdate,
iconColor: "#3B808E",
},
{
path: "/config/repairs",
translationKey: "repairs",
iconPath: mdiLifebuoy,
iconColor: "#5c995c",
},
{
component: "logs",
path: "/config/logs",
@ -448,6 +455,10 @@ class HaPanelConfig extends HassRouterPage {
tag: "ha-config-section-updates",
load: () => import("./core/ha-config-section-updates"),
},
repairs: {
tag: "ha-config-repairs-dashboard",
load: () => import("./repairs/ha-config-repairs-dashboard"),
},
users: {
tag: "ha-config-users",
load: () => import("./users/ha-config-users"),

View File

@ -0,0 +1,107 @@
import "@material/mwc-button/mwc-button";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-alert";
import { createCloseHeading } from "../../../components/ha-dialog";
import type { RepairsIssue } from "../../../data/repairs";
import { haStyleDialog } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types";
import type { RepairsIssueDialogParams } from "./show-repair-issue-dialog";
@customElement("dialog-repairs-issue")
class DialogRepairsIssue extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@state() private _issue?: RepairsIssue;
@state() private _params?: RepairsIssueDialogParams;
@state() private _error?: string;
public showDialog(params: RepairsIssueDialogParams): void {
this._params = params;
this._issue = this._params.issue;
}
public closeDialog() {
this._params = undefined;
this._issue = undefined;
this._error = undefined;
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
protected render(): TemplateResult {
if (!this._issue) {
return html``;
}
return html`
<ha-dialog
open
@closed=${this.closeDialog}
scrimClickAction
escapeKeyAction
.heading=${createCloseHeading(
this.hass,
this.hass.localize(
`component.${this._issue.domain}.issues.${this._issue.issue_id}.title`
) || this.hass!.localize("ui.panel.config.repairs.dialog.title")
)}
>
<div>
${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
${this.hass.localize(
`component.${this._issue.domain}.issues.${this._issue.issue_id}.${
this._issue.translation_key || "description"
}`,
this._issue.translation_placeholders
)}
${this._issue.breaks_in_ha_version
? html`
This will no longer work as of the
${this._issue.breaks_in_ha_version} release of Home Assistant.
`
: ""}
The issue is ${this._issue.severity} severity
${this._issue.is_fixable ? "and fixable" : "but not fixable"}.
${this._issue.dismissed_version
? html`
This issue has been dismissed in version
${this._issue.dismissed_version}.
`
: ""}
</div>
${this._issue.learn_more_url
? html`
<a
href=${this._issue.learn_more_url}
target="_blank"
slot="primaryAction"
rel="noopener noreferrer"
>
<mwc-button .label=${"Learn More"}></mwc-button>
</a>
`
: ""}
</ha-dialog>
`;
}
static styles: CSSResultGroup = [
haStyleDialog,
css`
a {
text-decoration: none;
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
"dialog-repairs-issue": DialogRepairsIssue;
}
}

View File

@ -0,0 +1,100 @@
import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../../components/ha-card";
import type { RepairsIssue } from "../../../data/repairs";
import { fetchRepairsIssues } from "../../../data/repairs";
import "../../../layouts/hass-subpage";
import type { HomeAssistant } from "../../../types";
import "./ha-config-repairs";
@customElement("ha-config-repairs-dashboard")
class HaConfigRepairsDashboard extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ type: Boolean }) public narrow!: boolean;
@state() private _repairsIssues: RepairsIssue[] = [];
protected firstUpdated(changedProps: PropertyValues): void {
super.firstUpdated(changedProps);
this._fetchIssues();
}
protected render(): TemplateResult {
return html`
<hass-subpage
back-path="/config/system"
.hass=${this.hass}
.narrow=${this.narrow}
.header=${this.hass.localize("ui.panel.config.repairs.caption")}
>
<div class="content">
<ha-card outlined>
<div class="card-content">
${this._repairsIssues.length
? html`
<ha-config-repairs
.hass=${this.hass}
.narrow=${this.narrow}
.repairsIssues=${this._repairsIssues}
@update-issues=${this._fetchIssues}
></ha-config-repairs>
`
: html`
<div class="no-repairs">
${this.hass.localize(
"ui.panel.config.repairs.no_repairs"
)}
</div>
`}
</div>
</ha-card>
</div>
</hass-subpage>
`;
}
private async _fetchIssues(): Promise<void> {
const [, repairsIssues] = await Promise.all([
this.hass.loadBackendTranslation("issues"),
fetchRepairsIssues(this.hass),
]);
this._repairsIssues = repairsIssues.issues;
}
static styles = css`
.content {
padding: 28px 20px 0;
max-width: 1040px;
margin: 0 auto;
}
ha-card {
max-width: 600px;
margin: 0 auto;
height: 100%;
justify-content: space-between;
flex-direction: column;
display: flex;
margin-bottom: max(24px, env(safe-area-inset-bottom));
}
.card-content {
display: flex;
justify-content: space-between;
flex-direction: column;
padding: 0;
}
.no-repairs {
padding: 16px;
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"ha-config-repairs-dashboard": HaConfigRepairsDashboard;
}
}

View File

@ -0,0 +1,129 @@
import "@material/mwc-list/mwc-list";
import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { relativeTime } from "../../../common/datetime/relative_time";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-alert";
import "../../../components/ha-card";
import "../../../components/ha-list-item";
import "../../../components/ha-svg-icon";
import { domainToName } from "../../../data/integration";
import type { RepairsIssue } from "../../../data/repairs";
import "../../../layouts/hass-subpage";
import type { HomeAssistant } from "../../../types";
import { brandsUrl } from "../../../util/brands-url";
import { showRepairsFlowDialog } from "./show-dialog-repair-flow";
import { showRepairsIssueDialog } from "./show-repair-issue-dialog";
@customElement("ha-config-repairs")
class HaConfigRepairs extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ type: Boolean }) public narrow!: boolean;
@property({ attribute: false })
public repairsIssues?: RepairsIssue[];
protected render(): TemplateResult {
if (!this.repairsIssues?.length) {
return html``;
}
const issues = this.repairsIssues;
return html`
<div class="title">
${this.hass.localize("ui.panel.config.repairs.title", {
count: this.repairsIssues.length,
})}
</div>
<mwc-list>
${issues.map((issue) =>
issue.ignored
? ""
: html`
<ha-list-item
twoline
graphic="avatar"
.hasMeta=${!this.narrow}
.issue=${issue}
@click=${this._openShowMoreDialog}
>
<img
loading="lazy"
src=${brandsUrl({
domain: issue.domain,
type: "icon",
useFallback: true,
darkOptimized: this.hass.themes?.darkMode,
})}
.title=${domainToName(this.hass.localize, issue.domain)}
referrerpolicy="no-referrer"
slot="graphic"
/>
<span
>${this.hass.localize(
`component.${issue.domain}.issues.${issue.issue_id}.title`
)}</span
>
<span slot="secondary" class="secondary">
${issue.created
? relativeTime(new Date(issue.created), this.hass.locale)
: ""}
</span>
</ha-list-item>
`
)}
</mwc-list>
`;
}
private _openShowMoreDialog(ev): void {
const issue = ev.currentTarget.issue as RepairsIssue;
if (issue.is_fixable) {
showRepairsFlowDialog(this, issue, () => {
// @ts-ignore
fireEvent(this, "update-issues");
});
} else {
showRepairsIssueDialog(this, { issue: (ev.currentTarget as any).issue });
}
}
static styles = css`
:host {
--mdc-list-vertical-padding: 0;
}
.title {
font-size: 16px;
padding: 16px;
padding-bottom: 0;
}
button.show-more {
color: var(--primary-color);
text-align: left;
cursor: pointer;
background: none;
border-width: initial;
border-style: none;
border-color: initial;
border-image: initial;
padding: 16px;
font: inherit;
}
button.show-more:focus {
outline: none;
text-decoration: underline;
}
ha-list-item {
cursor: pointer;
font-size: 16px;
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"ha-config-repairs": HaConfigRepairs;
}
}

View File

@ -0,0 +1,188 @@
import { html } from "lit";
import { domainToName } from "../../../data/integration";
import {
createRepairsFlow,
deleteRepairsFlow,
fetchRepairsFlow,
handleRepairsFlowStep,
RepairsIssue,
} from "../../../data/repairs";
import {
loadDataEntryFlowDialog,
showFlowDialog,
} from "../../../dialogs/config-flow/show-dialog-data-entry-flow";
export const loadRepairFlowDialog = loadDataEntryFlowDialog;
export const showRepairsFlowDialog = (
element: HTMLElement,
issue: RepairsIssue,
dialogClosedCallback?: (params: { flowFinished: boolean }) => void
): void =>
showFlowDialog(
element,
{
startFlowHandler: issue.domain,
domain: issue.domain,
dialogClosedCallback,
},
{
loadDevicesAndAreas: false,
createFlow: async (hass, handler) => {
const [step] = await Promise.all([
createRepairsFlow(hass, handler, issue.issue_id),
hass.loadBackendTranslation("issues", issue.domain),
]);
return step;
},
fetchFlow: async (hass, flowId) => {
const [step] = await Promise.all([
fetchRepairsFlow(hass, flowId),
hass.loadBackendTranslation("issues", issue.domain),
]);
return step;
},
handleFlowStep: handleRepairsFlowStep,
deleteFlow: deleteRepairsFlow,
renderAbortDescription(hass, step) {
const description = hass.localize(
`component.${issue.domain}.issues.abort.${step.reason}`,
step.description_placeholders
);
return description
? html`
<ha-markdown
breaks
allowsvg
.content=${description}
></ha-markdown>
`
: "";
},
renderShowFormStepHeader(hass, step) {
return (
hass.localize(
`component.${issue.domain}.issues.${issue.issue_id}.fix_flow.step.${step.step_id}.title`
) || hass.localize(`ui.dialogs.issues_flow.form.header`)
);
},
renderShowFormStepDescription(hass, step) {
const description = hass.localize(
`component.${issue.domain}.issues.${issue.issue_id}.fix_flow.step.${step.step_id}.description`,
step.description_placeholders
);
return description
? html`
<ha-markdown
allowsvg
breaks
.content=${description}
></ha-markdown>
`
: "";
},
renderShowFormStepFieldLabel(hass, step, field) {
return hass.localize(
`component.${issue.domain}.issues.${issue.issue_id}.fix_flow.step.${step.step_id}.data.${field.name}`
);
},
renderShowFormStepFieldHelper(hass, step, field) {
return hass.localize(
`component.${issue.domain}.issues.${issue.issue_id}.fix_flow.step.${step.step_id}.data_description.${field.name}`
);
},
renderShowFormStepFieldError(hass, step, error) {
return hass.localize(
`component.${issue.domain}.issues.${issue.issue_id}.fix_flow.error.${error}`,
step.description_placeholders
);
},
renderExternalStepHeader(_hass, _step) {
return "";
},
renderExternalStepDescription(_hass, _step) {
return "";
},
renderCreateEntryDescription(hass, _step) {
return html`
<p>${hass.localize(`ui.dialogs.repairs.success.description`)}</p>
`;
},
renderShowFormProgressHeader(hass, step) {
return (
hass.localize(
`component.${issue.domain}.issues.step.${issue.issue_id}.fix_flow.${step.step_id}.title`
) || hass.localize(`component.${issue.domain}.title`)
);
},
renderShowFormProgressDescription(hass, step) {
const description = hass.localize(
`component.${issue.domain}.issues.${issue.issue_id}.fix_flow.progress.${step.progress_action}`,
step.description_placeholders
);
return description
? html`
<ha-markdown
allowsvg
breaks
.content=${description}
></ha-markdown>
`
: "";
},
renderMenuHeader(hass, step) {
return (
hass.localize(
`component.${issue.domain}.issues.${issue.issue_id}.fix_flow.step.${step.step_id}.title`
) || hass.localize(`component.${issue.domain}.title`)
);
},
renderMenuDescription(hass, step) {
const description = hass.localize(
`component.${issue.domain}.issues.${issue.issue_id}.fix_flow.step.${step.step_id}.description`,
step.description_placeholders
);
return description
? html`
<ha-markdown
allowsvg
breaks
.content=${description}
></ha-markdown>
`
: "";
},
renderMenuOption(hass, step, option) {
return hass.localize(
`component.${issue.domain}.issues.${issue.issue_id}.fix_flow.step.${step.step_id}.menu_issues.${option}`,
step.description_placeholders
);
},
renderLoadingDescription(hass, reason) {
return (
hass.localize(
`component.${issue.domain}.issues.${issue.issue_id}.fix_flow.loading`
) ||
hass.localize(`ui.dialogs.repairs.loading.${reason}`, {
integration: domainToName(hass.localize, issue.domain),
})
);
},
}
);

View File

@ -0,0 +1,19 @@
import { fireEvent } from "../../../common/dom/fire_event";
import type { RepairsIssue } from "../../../data/repairs";
export interface RepairsIssueDialogParams {
issue: RepairsIssue;
}
export const loadRepairsIssueDialog = () => import("./dialog-repairs-issue");
export const showRepairsIssueDialog = (
element: HTMLElement,
repairsIssueParams: RepairsIssueDialogParams
): void => {
fireEvent(element, "show-dialog", {
dialogTag: "dialog-repairs-issue",
dialogImport: loadRepairsIssueDialog,
dialogParams: repairsIssueParams,
});
};

View File

@ -955,6 +955,18 @@
"description": "Options successfully saved."
}
},
"repair_flow": {
"form": {
"header": "Repair issue"
},
"loading": {
"loading_flow": "Please wait while the repair for {integration} is being initialized",
"loading_step": "[%key:ui::panel::config::integrations::config_flow::loading::loading_step%]"
},
"success": {
"description": "The issue is repaired!"
}
},
"config_entry_system_options": {
"title": "System Options for {integration}",
"enable_new_entities_label": "Enable newly added entities.",
@ -1216,6 +1228,17 @@
"leave_beta": "[%key:supervisor::system::supervisor::leave_beta_action%]",
"skipped": "Skipped"
},
"repairs": {
"caption": "Repairs",
"description": "Find and fix issues with your Home Assistant instance",
"title": "{count} {count, plural,\n one {repair}\n other {repairs}\n}",
"no_repairs": "There are currently no repairs available",
"dialog": {
"title": "Repair",
"fix": "Repair",
"learn": "Learn more"
}
},
"areas": {
"caption": "Areas",
"description": "Group devices and entities into areas",