Add overflow menu to error-log-card (#22684)

* Add overflow menu to error-log-card

* Add toggle line wrap icon-button in error-log-card
This commit is contained in:
Wendelin 2024-11-06 10:59:01 +01:00 committed by GitHub
parent e908fbb48e
commit 4bd70167ad
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 68 additions and 6 deletions

View File

@ -12,6 +12,7 @@ import {
query,
state as litState,
} from "lit/decorators";
import { classMap } from "lit/directives/class-map";
interface State {
bold: boolean;
@ -26,12 +27,15 @@ interface State {
export class HaAnsiToHtml extends LitElement {
@property() public content!: string;
@property({ type: Boolean, attribute: "wrap-disabled" }) public wrapDisabled =
false;
@query("pre") private _pre?: HTMLPreElement;
@litState() private _filter = "";
protected render(): TemplateResult | void {
return html`<pre></pre>`;
return html`<pre class=${classMap({ wrap: !this.wrapDisabled })}></pre>`;
}
protected firstUpdated(_changedProperties: PropertyValues): void {
@ -47,9 +51,11 @@ export class HaAnsiToHtml extends LitElement {
return css`
pre {
overflow-x: auto;
margin: 0;
}
pre.wrap {
white-space: pre-wrap;
overflow-wrap: break-word;
margin: 0;
}
.bold {
font-weight: bold;

View File

@ -1,10 +1,16 @@
import "@material/mwc-list/mwc-list-item";
import type { ActionDetail } from "@material/mwc-list";
import {
mdiArrowCollapseDown,
mdiDotsVertical,
mdiCircle,
mdiDownload,
mdiFormatListNumbered,
mdiMenuDown,
mdiRefresh,
mdiWrap,
mdiWrapDisabled,
} from "@mdi/js";
import {
css,
@ -32,6 +38,8 @@ import "../../../components/chips/ha-assist-chip";
import "../../../components/ha-menu";
import "../../../components/ha-md-menu-item";
import "../../../components/ha-md-divider";
import "../../../components/ha-button-menu";
import "../../../components/ha-list-item";
import { getSignedPath } from "../../../data/auth";
@ -114,6 +122,10 @@ class ErrorLogCard extends LitElement {
@state() private _boots?: number[];
@state() private _showBootsSelect = false;
@state() private _wrapLines = true;
@state() private _downloadSupported;
@state() private _logsFileLink;
@ -123,7 +135,7 @@ class ErrorLogCard extends LitElement {
<div class="error-log-intro">
${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
: nothing}
<ha-card outlined class=${classMap({ hidden: this.show === false })}>
<div class="header">
<h1 class="card-header">
@ -131,9 +143,14 @@ class ErrorLogCard extends LitElement {
this.hass.localize("ui.panel.config.logs.show_full_logs")}
</h1>
<div class="action-buttons">
${this._streamSupported && Array.isArray(this._boots)
${this._streamSupported &&
Array.isArray(this._boots) &&
this._showBootsSelect
? html`
<ha-assist-chip
.title=${this.hass.localize(
"ui.panel.config.logs.haos_boots_title"
)}
.label=${this._boot === 0
? this.hass.localize("ui.panel.config.logs.current")
: this._boot === -1
@ -211,6 +228,13 @@ class ErrorLogCard extends LitElement {
</a>
`
: nothing}
<ha-icon-button
.path=${this._wrapLines ? mdiWrapDisabled : mdiWrap}
@click=${this._toggleLineWrap}
.label=${this.hass.localize(
`ui.panel.config.logs.${this._wrapLines ? "full_width" : "wrap_lines"}`
)}
></ha-icon-button>
${!this._streamSupported || this._error
? html`<ha-icon-button
.path=${mdiRefresh}
@ -218,6 +242,19 @@ class ErrorLogCard extends LitElement {
.label=${this.hass.localize("ui.common.refresh")}
></ha-icon-button>`
: nothing}
<ha-button-menu @action=${this._handleOverflowAction}>
<ha-icon-button slot="trigger" .path=${mdiDotsVertical}>
</ha-icon-button>
<ha-list-item graphic="icon">
<ha-svg-icon
slot="graphic"
.path=${mdiFormatListNumbered}
></ha-svg-icon>
${this.hass.localize(
`ui.panel.config.logs.${this._showBootsSelect ? "hide" : "show"}_haos_boots`
)}
</ha-list-item>
</ha-button-menu>
</div>
</div>
<div class="card-content error-log">
@ -248,7 +285,9 @@ class ErrorLogCard extends LitElement {
)}
</div>`
: nothing}
<ha-ansi-to-html></ha-ansi-to-html>
<ha-ansi-to-html
?wrap-disabled=${!this._wrapLines}
></ha-ansi-to-html>
<div id="scroll-bottom-marker"></div>
</div>
<ha-button
@ -295,7 +334,7 @@ class ErrorLogCard extends LitElement {
${this.hass.localize("ui.panel.config.logs.load_logs")}
</mwc-button>
`
: ""}
: nothing}
</div>
`;
}
@ -653,6 +692,18 @@ class ErrorLogCard extends LitElement {
}
}
private _toggleLineWrap() {
this._wrapLines = !this._wrapLines;
}
private _handleOverflowAction(ev: CustomEvent<ActionDetail>) {
switch (ev.detail.index) {
case 0:
this._showBootsSelect = !this._showBootsSelect;
break;
}
}
private _toggleBootsMenu() {
if (this._bootsMenu) {
this._bootsMenu.open = !this._bootsMenu.open;

View File

@ -2496,6 +2496,11 @@
"scroll_down_button": "New logs - Click to scroll",
"provider_not_found": "Log provider not found",
"provider_not_available": "Logs for ''{provider}'' are not available on your system.",
"haos_boots_title": "Logs of HAOS startup",
"show_haos_boots": "Show HAOS startups",
"hide_haos_boots": "Hide HAOS startups",
"full_width": "Full width",
"wrap_lines": "Wrap lines",
"current": "Current",
"previous": "Previous",
"startups_ago": "{boot} startups ago",