mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-18 23:06:40 +00:00
Convert config server control to Lit (#6141)
This commit is contained in:
Bram Kragten
GitHub
parent
cda6310373
commit
0864aeb9c6
@ -12,6 +12,11 @@ export interface ConfigUpdateValues {
|
||||
internal_url?: string | null;
|
||||
}
|
||||
|
||||
export interface CheckConfigResult {
|
||||
result: "valid" | "invalid";
|
||||
errors: string | null;
|
||||
}
|
||||
|
||||
export const saveCoreConfig = (
|
||||
hass: HomeAssistant,
|
||||
values: Partial<ConfigUpdateValues>
|
||||
@ -25,3 +30,6 @@ export const detectCoreConfig = (hass: HomeAssistant) =>
|
||||
hass.callWS<Partial<ConfigUpdateValues>>({
|
||||
type: "config/core/detect",
|
||||
});
|
||||
|
||||
export const checkCoreConfig = (hass: HomeAssistant) =>
|
||||
hass.callApi<CheckConfigResult>("POST", "config/core/check_config");
|
||||
|
||||
@ -1,267 +0,0 @@
|
||||
import "@material/mwc-button";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
/* eslint-plugin-disable lit */
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
|
||||
import "../../../components/buttons/ha-call-service-button";
|
||||
import "../../../components/ha-card";
|
||||
import LocalizeMixin from "../../../mixins/localize-mixin";
|
||||
import "../../../styles/polymer-ha-style";
|
||||
import "../ha-config-section";
|
||||
|
||||
/*
|
||||
* @appliesMixin LocalizeMixin
|
||||
*/
|
||||
class HaConfigSectionServerControl extends LocalizeMixin(PolymerElement) {
|
||||
static get template() {
|
||||
return html`
|
||||
<style include="iron-flex ha-style">
|
||||
.validate-container {
|
||||
@apply --layout-vertical;
|
||||
@apply --layout-center-center;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.validate-result {
|
||||
color: var(--google-green-500);
|
||||
font-weight: 500;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.config-invalid {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.config-invalid .text {
|
||||
color: var(--google-red-500);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.config-invalid mwc-button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.validate-log {
|
||||
white-space: pre-wrap;
|
||||
direction: ltr;
|
||||
}
|
||||
</style>
|
||||
<ha-config-section is-wide="[[isWide]]">
|
||||
<span slot="header"
|
||||
>[[localize('ui.panel.config.server_control.caption')]]</span
|
||||
>
|
||||
<span slot="introduction"
|
||||
>[[localize('ui.panel.config.server_control.description')]]</span
|
||||
>
|
||||
|
||||
<template is="dom-if" if="[[showAdvanced]]">
|
||||
<ha-card
|
||||
header="[[localize('ui.panel.config.server_control.section.validation.heading')]]"
|
||||
>
|
||||
<div class="card-content">
|
||||
[[localize('ui.panel.config.server_control.section.validation.introduction')]]
|
||||
<template is="dom-if" if="[[!validateLog]]">
|
||||
<div class="validate-container">
|
||||
<template is="dom-if" if="[[!validating]]">
|
||||
<template is="dom-if" if="[[isValid]]">
|
||||
<div class="validate-result" id="result">
|
||||
[[localize('ui.panel.config.server_control.section.validation.valid')]]
|
||||
</div>
|
||||
</template>
|
||||
<mwc-button raised="" on-click="validateConfig">
|
||||
[[localize('ui.panel.config.server_control.section.validation.check_config')]]
|
||||
</mwc-button>
|
||||
</template>
|
||||
<template is="dom-if" if="[[validating]]">
|
||||
<paper-spinner active=""></paper-spinner>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template is="dom-if" if="[[validateLog]]">
|
||||
<div class="config-invalid">
|
||||
<span class="text">
|
||||
[[localize('ui.panel.config.server_control.section.validation.invalid')]]
|
||||
</span>
|
||||
<mwc-button raised="" on-click="validateConfig">
|
||||
[[localize('ui.panel.config.server_control.section.validation.check_config')]]
|
||||
</mwc-button>
|
||||
</div>
|
||||
<div id="configLog" class="validate-log">[[validateLog]]</div>
|
||||
</template>
|
||||
</div>
|
||||
</ha-card>
|
||||
|
||||
<ha-card
|
||||
header="[[localize('ui.panel.config.server_control.section.reloading.heading')]]"
|
||||
>
|
||||
<div class="card-content">
|
||||
[[localize('ui.panel.config.server_control.section.reloading.introduction')]]
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<ha-call-service-button
|
||||
hass="[[hass]]"
|
||||
domain="homeassistant"
|
||||
service="reload_core_config"
|
||||
>[[localize('ui.panel.config.server_control.section.reloading.core')]]
|
||||
</ha-call-service-button>
|
||||
</div>
|
||||
<template is="dom-if" if="[[groupLoaded(hass)]]">
|
||||
<div class="card-actions">
|
||||
<ha-call-service-button
|
||||
hass="[[hass]]"
|
||||
domain="group"
|
||||
service="reload"
|
||||
>[[localize('ui.panel.config.server_control.section.reloading.group')]]
|
||||
</ha-call-service-button>
|
||||
</div>
|
||||
</template>
|
||||
<template is="dom-if" if="[[automationLoaded(hass)]]">
|
||||
<div class="card-actions">
|
||||
<ha-call-service-button
|
||||
hass="[[hass]]"
|
||||
domain="automation"
|
||||
service="reload"
|
||||
>[[localize('ui.panel.config.server_control.section.reloading.automation')]]
|
||||
</ha-call-service-button>
|
||||
</div>
|
||||
</template>
|
||||
<template is="dom-if" if="[[scriptLoaded(hass)]]">
|
||||
<div class="card-actions">
|
||||
<ha-call-service-button
|
||||
hass="[[hass]]"
|
||||
domain="script"
|
||||
service="reload"
|
||||
>[[localize('ui.panel.config.server_control.section.reloading.script')]]
|
||||
</ha-call-service-button>
|
||||
</div>
|
||||
</template>
|
||||
<template is="dom-if" if="[[sceneLoaded(hass)]]">
|
||||
<div class="card-actions">
|
||||
<ha-call-service-button
|
||||
hass="[[hass]]"
|
||||
domain="scene"
|
||||
service="reload"
|
||||
>[[localize('ui.panel.config.server_control.section.reloading.scene')]]
|
||||
</ha-call-service-button>
|
||||
</div>
|
||||
</template>
|
||||
<template is="dom-if" if="[[personLoaded(hass)]]">
|
||||
<div class="card-actions">
|
||||
<ha-call-service-button
|
||||
hass="[[hass]]"
|
||||
domain="person"
|
||||
service="reload"
|
||||
>[[localize('ui.panel.config.server_control.section.reloading.person')]]
|
||||
</ha-call-service-button>
|
||||
</div>
|
||||
</template>
|
||||
<div class="card-actions">
|
||||
<ha-call-service-button
|
||||
hass="[[hass]]"
|
||||
domain="zone"
|
||||
service="reload"
|
||||
>[[localize('ui.panel.config.server_control.section.reloading.zone')]]
|
||||
</ha-call-service-button>
|
||||
</div>
|
||||
</ha-card>
|
||||
</template>
|
||||
<ha-card
|
||||
header="[[localize('ui.panel.config.server_control.section.server_management.heading')]]"
|
||||
>
|
||||
<div class="card-content">
|
||||
[[localize('ui.panel.config.server_control.section.server_management.introduction')]]
|
||||
</div>
|
||||
<div class="card-actions warning">
|
||||
<ha-call-service-button
|
||||
class="warning"
|
||||
hass="[[hass]]"
|
||||
domain="homeassistant"
|
||||
service="restart"
|
||||
confirmation="[[localize('ui.panel.config.server_control.section.server_management.confirm_restart')]]"
|
||||
>[[localize('ui.panel.config.server_control.section.server_management.restart')]]
|
||||
</ha-call-service-button>
|
||||
<ha-call-service-button
|
||||
class="warning"
|
||||
hass="[[hass]]"
|
||||
domain="homeassistant"
|
||||
service="stop"
|
||||
confirmation="[[localize('ui.panel.config.server_control.section.server_management.confirm_stop')]]"
|
||||
>[[localize('ui.panel.config.server_control.section.server_management.stop')]]
|
||||
</ha-call-service-button>
|
||||
</div>
|
||||
</ha-card>
|
||||
</ha-config-section>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
hass: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
isWide: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
|
||||
validating: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
|
||||
isValid: {
|
||||
type: Boolean,
|
||||
value: null,
|
||||
},
|
||||
|
||||
validateLog: {
|
||||
type: String,
|
||||
value: "",
|
||||
},
|
||||
|
||||
showAdvanced: Boolean,
|
||||
};
|
||||
}
|
||||
|
||||
groupLoaded(hass) {
|
||||
return isComponentLoaded(hass, "group");
|
||||
}
|
||||
|
||||
automationLoaded(hass) {
|
||||
return isComponentLoaded(hass, "automation");
|
||||
}
|
||||
|
||||
scriptLoaded(hass) {
|
||||
return isComponentLoaded(hass, "script");
|
||||
}
|
||||
|
||||
sceneLoaded(hass) {
|
||||
return isComponentLoaded(hass, "scene");
|
||||
}
|
||||
|
||||
personLoaded(hass) {
|
||||
return isComponentLoaded(hass, "person");
|
||||
}
|
||||
|
||||
validateConfig() {
|
||||
this.validating = true;
|
||||
this.validateLog = "";
|
||||
this.isValid = null;
|
||||
|
||||
this.hass.callApi("POST", "config/core/check_config").then((result) => {
|
||||
this.validating = false;
|
||||
this.isValid = result.result === "valid";
|
||||
|
||||
if (!this.isValid) {
|
||||
this.validateLog = result.errors;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define(
|
||||
"ha-config-section-server-control",
|
||||
HaConfigSectionServerControl
|
||||
);
|
||||
@ -1,72 +0,0 @@
|
||||
import "@polymer/app-layout/app-header/app-header";
|
||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
/* eslint-plugin-disable lit */
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import "../../../layouts/hass-tabs-subpage";
|
||||
import LocalizeMixin from "../../../mixins/localize-mixin";
|
||||
import "../../../styles/polymer-ha-style";
|
||||
import { configSections } from "../ha-panel-config";
|
||||
import "./ha-config-section-server-control";
|
||||
|
||||
/*
|
||||
* @appliesMixin LocalizeMixin
|
||||
*/
|
||||
class HaConfigServerControl extends LocalizeMixin(PolymerElement) {
|
||||
static get template() {
|
||||
return html`
|
||||
<style include="iron-flex ha-style">
|
||||
.content {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.border {
|
||||
margin: 32px auto 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
max-width: 1040px;
|
||||
}
|
||||
|
||||
.narrow .border {
|
||||
max-width: 640px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<hass-tabs-subpage
|
||||
hass="[[hass]]"
|
||||
narrow="[[narrow]]"
|
||||
route="[[route]]"
|
||||
back-path="/config"
|
||||
tabs="[[_computeTabs()]]"
|
||||
show-advanced="[[showAdvanced]]"
|
||||
>
|
||||
<div class$="[[computeClasses(isWide)]]">
|
||||
<ha-config-section-server-control
|
||||
is-wide="[[isWide]]"
|
||||
show-advanced="[[showAdvanced]]"
|
||||
hass="[[hass]]"
|
||||
></ha-config-section-server-control>
|
||||
</div>
|
||||
</hass-tabs-subpage>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
hass: Object,
|
||||
isWide: Boolean,
|
||||
narrow: Boolean,
|
||||
route: Object,
|
||||
showAdvanced: Boolean,
|
||||
};
|
||||
}
|
||||
|
||||
_computeTabs() {
|
||||
return configSections.general;
|
||||
}
|
||||
|
||||
computeClasses(isWide) {
|
||||
return isWide ? "content" : "content narrow";
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("ha-config-server-control", HaConfigServerControl);
|
||||
269
src/panels/config/server_control/ha-config-server-control.ts
Normal file
269
src/panels/config/server_control/ha-config-server-control.ts
Normal file
@ -0,0 +1,269 @@
|
||||
import "@polymer/app-layout/app-header/app-header";
|
||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
||||
import "../../../layouts/hass-tabs-subpage";
|
||||
import { configSections } from "../ha-panel-config";
|
||||
import {
|
||||
LitElement,
|
||||
property,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
CSSResult,
|
||||
TemplateResult,
|
||||
} from "lit-element";
|
||||
import { HomeAssistant, Route } from "../../../types";
|
||||
|
||||
import "@material/mwc-button";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
|
||||
import "../../../components/buttons/ha-call-service-button";
|
||||
import "../../../components/ha-card";
|
||||
import "../ha-config-section";
|
||||
import { haStyle } from "../../../resources/styles";
|
||||
import { checkCoreConfig } from "../../../data/core";
|
||||
|
||||
const reloadableDomains = [
|
||||
"group",
|
||||
"automation",
|
||||
"scripts",
|
||||
"scene",
|
||||
"person",
|
||||
"zone",
|
||||
"input_boolean",
|
||||
"input_text",
|
||||
"input_number",
|
||||
"input_datetime",
|
||||
"input_select",
|
||||
];
|
||||
|
||||
@customElement("ha-config-server-control")
|
||||
export class HaConfigServerControl extends LitElement {
|
||||
@property() public hass!: HomeAssistant;
|
||||
|
||||
@property() public isWide!: boolean;
|
||||
|
||||
@property() public narrow!: boolean;
|
||||
|
||||
@property() public route!: Route;
|
||||
|
||||
@property() public showAdvanced!: boolean;
|
||||
|
||||
@property() private _validating = false;
|
||||
|
||||
private _validateLog = "";
|
||||
|
||||
private _isValid: boolean | null = null;
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<hass-tabs-subpage
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.route=${this.route}
|
||||
back-path="/config"
|
||||
.tabs=${configSections.general}
|
||||
.showAdvanced=${this.showAdvanced}
|
||||
>
|
||||
<ha-config-section .isWide=${this.isWide}>
|
||||
<span slot="header"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.server_control.caption"
|
||||
)}</span
|
||||
>
|
||||
<span slot="introduction"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.server_control.description"
|
||||
)}</span
|
||||
>
|
||||
|
||||
${this.showAdvanced
|
||||
? html` <ha-card
|
||||
header=${this.hass.localize(
|
||||
"ui.panel.config.server_control.section.validation.heading"
|
||||
)}
|
||||
>
|
||||
<div class="card-content">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.server_control.section.validation.introduction"
|
||||
)}
|
||||
${!this._validateLog
|
||||
? html`
|
||||
<div
|
||||
class="validate-container layout vertical center-center"
|
||||
>
|
||||
${!this._validating
|
||||
? html`
|
||||
${this._isValid
|
||||
? html` <div
|
||||
class="validate-result"
|
||||
id="result"
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.server_control.section.validation.valid"
|
||||
)}
|
||||
</div>`
|
||||
: ""}
|
||||
<mwc-button
|
||||
raised
|
||||
@click=${this._validateConfig}
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.server_control.section.validation.check_config"
|
||||
)}
|
||||
</mwc-button>
|
||||
`
|
||||
: html` <paper-spinner active></paper-spinner> `}
|
||||
</div>
|
||||
`
|
||||
: html`
|
||||
<div class="config-invalid">
|
||||
<span class="text">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.server_control.section.validation.invalid"
|
||||
)}
|
||||
</span>
|
||||
<mwc-button raised @click=${this._validateConfig}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.server_control.section.validation.check_config"
|
||||
)}
|
||||
</mwc-button>
|
||||
</div>
|
||||
<div id="configLog" class="validate-log">
|
||||
${this._validateLog}
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
</ha-card>`
|
||||
: ""}
|
||||
|
||||
<ha-card
|
||||
header=${this.hass.localize(
|
||||
"ui.panel.config.server_control.section.server_management.heading"
|
||||
)}
|
||||
>
|
||||
<div class="card-content">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.server_control.section.server_management.introduction"
|
||||
)}
|
||||
</div>
|
||||
<div class="card-actions warning">
|
||||
<ha-call-service-button
|
||||
class="warning"
|
||||
.hass=${this.hass}
|
||||
domain="homeassistant"
|
||||
service="restart"
|
||||
.confirmation=${this.hass.localize(
|
||||
"ui.panel.config.server_control.section.server_management.confirm_restart"
|
||||
)}
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.server_control.section.server_management.restart"
|
||||
)}
|
||||
</ha-call-service-button>
|
||||
<ha-call-service-button
|
||||
class="warning"
|
||||
.hass=${this.hass}
|
||||
domain="homeassistant"
|
||||
service="stop"
|
||||
confirmation=${this.hass.localize(
|
||||
"ui.panel.config.server_control.section.server_management.confirm_stop"
|
||||
)}
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.server_control.section.server_management.stop"
|
||||
)}
|
||||
</ha-call-service-button>
|
||||
</div>
|
||||
</ha-card>
|
||||
|
||||
${this.showAdvanced
|
||||
? html`
|
||||
<ha-card
|
||||
header=${this.hass.localize(
|
||||
"ui.panel.config.server_control.section.reloading.heading"
|
||||
)}
|
||||
>
|
||||
<div class="card-content">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.server_control.section.reloading.introduction"
|
||||
)}
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<ha-call-service-button
|
||||
.hass=${this.hass}
|
||||
domain="homeassistant"
|
||||
service="reload_core_config"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.server_control.section.reloading.core"
|
||||
)}
|
||||
</ha-call-service-button>
|
||||
</div>
|
||||
${reloadableDomains.map((domain) =>
|
||||
isComponentLoaded(this.hass, domain)
|
||||
? html`<div class="card-actions">
|
||||
<ha-call-service-button
|
||||
.hass=${this.hass}
|
||||
.domain=${domain}
|
||||
service="reload"
|
||||
>${this.hass.localize(
|
||||
`ui.panel.config.server_control.section.reloading.${domain}`
|
||||
)}
|
||||
</ha-call-service-button>
|
||||
</div>`
|
||||
: ""
|
||||
)}
|
||||
</ha-card>
|
||||
`
|
||||
: ""}
|
||||
</ha-config-section>
|
||||
</hass-tabs-subpage>
|
||||
`;
|
||||
}
|
||||
|
||||
private async _validateConfig() {
|
||||
this._validating = true;
|
||||
this._validateLog = "";
|
||||
this._isValid = null;
|
||||
|
||||
const configCheck = await checkCoreConfig(this.hass);
|
||||
this._validating = false;
|
||||
this._isValid = configCheck.result === "valid";
|
||||
|
||||
if (configCheck.errors) {
|
||||
this._validateLog = configCheck.errors;
|
||||
}
|
||||
}
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
haStyle,
|
||||
css`
|
||||
.validate-container {
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.validate-result {
|
||||
color: var(--google-green-500);
|
||||
font-weight: 500;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.config-invalid {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.config-invalid .text {
|
||||
color: var(--google-red-500);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.config-invalid mwc-button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.validate-log {
|
||||
white-space: pre-wrap;
|
||||
direction: ltr;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
@ -737,7 +737,12 @@
|
||||
"script": "Reload scripts",
|
||||
"scene": "Reload scenes",
|
||||
"person": "Reload persons",
|
||||
"zone": "Reload zones"
|
||||
"zone": "Reload zones",
|
||||
"input_boolean": "Reload input booleans",
|
||||
"input_text": "Reload input texts",
|
||||
"input_number": "Reload input numbers",
|
||||
"input_datetime": "Reload input date times",
|
||||
"input_select": "Reload input selects"
|
||||
},
|
||||
"server_management": {
|
||||
"heading": "Server management",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user