@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
20 lines • 3.6 kB
JavaScript
import*as i18n from"../../../core/i18n/i18n.js";import*as DataGrid from"../../../ui/components/data_grid/data_grid.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as IconButton from"../../../ui/components/icon_button/icon_button.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import*as Root from"../../../core/root/root.js";import reportingApiGridStyles from"./reportingApiGrid.css.js";const UIStrings={noReportsToDisplay:"No reports to display",status:"Status",destination:"Destination",generatedAt:"Generated at"},str_=i18n.i18n.registerUIStrings("panels/application/components/ReportsGrid.ts",UIStrings);export const i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);const{render:render,html:html}=LitHtml;export class ReportsGridStatusHeader extends HTMLElement{static litTagName=LitHtml.literal`devtools-resources-reports-grid-status-header`;#t=this.attachShadow({mode:"open"});connectedCallback(){this.#t.adoptedStyleSheets=[reportingApiGridStyles],this.#e()}#e(){render(html`
${i18nString(UIStrings.status)}
<x-link href="https://web.dev/reporting-api/#report-status">
<${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{iconName:"help",color:"var(--icon-link)",width:"16px",height:"16px"}}></${IconButton.Icon.Icon.litTagName}>
</x-link>
`,this.#t,{host:this})}}export class ReportsGrid extends HTMLElement{static litTagName=LitHtml.literal`devtools-resources-reports-grid`;#t=this.attachShadow({mode:"open"});#i=[];#o=!1;connectedCallback(){this.#t.adoptedStyleSheets=[reportingApiGridStyles],this.#o=Root.Runtime.experiments.isEnabled("protocolMonitor"),this.#e()}set data(t){this.#i=t.reports,this.#e()}#e(){const t={columns:[{id:"url",title:i18n.i18n.lockedString("URL"),widthWeighting:30,hideable:!1,visible:!0},{id:"type",title:i18n.i18n.lockedString("Type"),widthWeighting:20,hideable:!1,visible:!0},{id:"status",title:i18nString(UIStrings.status),widthWeighting:20,hideable:!1,visible:!0,titleElement:html`
<${ReportsGridStatusHeader.litTagName}></${ReportsGridStatusHeader.litTagName}>
`},{id:"destination",title:i18nString(UIStrings.destination),widthWeighting:20,hideable:!1,visible:!0},{id:"timestamp",title:i18nString(UIStrings.generatedAt),widthWeighting:20,hideable:!1,visible:!0},{id:"body",title:i18n.i18n.lockedString("Body"),widthWeighting:20,hideable:!1,visible:!0}],rows:this.#r()};this.#o&&t.columns.unshift({id:"id",title:"ID",widthWeighting:30,hideable:!1,visible:!0}),render(html`
<div class="reporting-container">
<div class="reporting-header">${i18n.i18n.lockedString("Reports")}</div>
${this.#i.length>0?html`
<${DataGrid.DataGridController.DataGridController.litTagName} .data=${t}>
</${DataGrid.DataGridController.DataGridController.litTagName}>
`:html`
<div class="reporting-placeholder">
<div>${i18nString(UIStrings.noReportsToDisplay)}</div>
</div>
`}
</div>
`,this.#t,{host:this})}#r(){return this.#i.map((t=>({cells:[{columnId:"id",value:t.id},{columnId:"url",value:t.initiatorUrl},{columnId:"type",value:t.type},{columnId:"status",value:t.status},{columnId:"destination",value:t.destination},{columnId:"timestamp",value:new Date(1e3*t.timestamp).toLocaleString()},{columnId:"body",value:JSON.stringify(t.body)}]})))}}ComponentHelpers.CustomElements.defineComponent("devtools-resources-reports-grid-status-header",ReportsGridStatusHeader),ComponentHelpers.CustomElements.defineComponent("devtools-resources-reports-grid",ReportsGrid);