discourse/app/assets/javascripts/admin/addon/components/admin-report.hbs
Joffrey JAFFEUX 043b4a4187
FIX: replaces data-tooltip usage by <DTooltip /> (#24062)
As much as possible I would like us to avoid having to go the with a global event listener on click/mouseover. For now I have removed all cases of `data-tooltip`, if we clearly identify a use case of a global event listener we might reconsider this.

The following changes are also included:
- by default tooltips won't attempt to focus first focusable element anymore
- tooltip will now use `cursor: pointer` by default
- a new service has been introduced: `InternalTooltip` which is responsible to track the current instance displayed by a `<DTooltip />`. Portal elements when replaced are not properly cleaned and I couldn't figure out a way to have a proper hook to ensure the previous `DTooltipInstance` is properly set as not expanded; this problem was very visible when using a tooltip as interactive and hovering another tooltip, which would replace the interactive tooltip as not closed.
2023-10-23 21:09:02 +02:00

246 lines
8.4 KiB
Handlebars

{{#unless this.isHidden}}
{{#if this.isEnabled}}
<ConditionalLoadingSection @isLoading={{this.isLoading}}>
{{#if this.showHeader}}
<div class="header">
{{#if this.showTitle}}
<ul class="breadcrumb">
{{#if this.showAllReportsLink}}
<li class="item all-reports">
<LinkTo @route="admin.dashboardReports" class="report-url">
{{i18n "admin.dashboard.all_reports"}}
</LinkTo>
</li>
{{#unless this.showNotFoundError}}
<li class="item separator">|</li>
{{/unless}}
{{/if}}
{{#unless this.showNotFoundError}}
<li class="item report">
<a href={{this.model.reportUrl}} class="report-url">
{{this.model.title}}
</a>
{{#if this.model.description}}
<DTooltip
@interactive={{this.model.description_link.length}}
>
<:trigger>
{{d-icon "question-circle"}}
</:trigger>
<:content>
{{#if this.model.description_link}}
<a
target="_blank"
rel="noopener noreferrer"
href={{this.model.description_link}}
class="info"
>
{{this.model.description}}
</a>
{{else}}
<span>{{this.model.description}}</span>
{{/if}}
</:content>
</DTooltip>
{{/if}}
</li>
{{/unless}}
</ul>
{{/if}}
{{#if this.shouldDisplayTrend}}
<div class="trend {{this.model.trend}}">
<span class="value" title={{this.model.trendTitle}}>
{{#if this.model.average}}
{{number this.model.currentAverage}}{{#if
this.model.percent
}}%{{/if}}
{{else}}
{{number this.model.currentTotal noTitle="true"}}{{#if
this.model.percent
}}%{{/if}}
{{/if}}
{{#if this.model.trendIcon}}
{{d-icon this.model.trendIcon class="icon"}}
{{/if}}
</span>
</div>
{{/if}}
</div>
{{/if}}
<div class="body">
<div class="main">
{{#if this.showError}}
{{#if this.showTimeoutError}}
<div class="alert alert-error report-alert timeout">
{{d-icon "exclamation-triangle"}}
<span>{{i18n "admin.dashboard.timeout_error"}}</span>
</div>
{{/if}}
{{#if this.showExceptionError}}
<div class="alert alert-error report-alert exception">
{{d-icon "exclamation-triangle"}}
<span>{{i18n "admin.dashboard.exception_error"}}</span>
</div>
{{/if}}
{{#if this.showNotFoundError}}
<div class="alert alert-error report-alert not-found">
{{d-icon "exclamation-triangle"}}
<span>{{i18n "admin.dashboard.not_found_error"}}</span>
</div>
{{/if}}
{{else}}
{{#if this.hasData}}
{{#if this.currentMode}}
{{component
this.modeComponent
model=this.model
options=this.options
}}
{{#if this.model.relatedReport}}
<AdminReport
@showFilteringUI={{false}}
@dataSourceName={{this.model.relatedReport.type}}
/>
{{/if}}
{{/if}}
{{else}}
{{#if this.rateLimitationString}}
<div class="alert alert-error report-alert rate-limited">
{{d-icon "thermometer-three-quarters"}}
<span>{{this.rateLimitationString}}</span>
</div>
{{else}}
<div class="alert alert-info report-alert no-data">
{{d-icon "chart-pie"}}
{{#if this.model.reportUrl}}
<a href={{this.model.reportUrl}} class="report-url">
<span>
{{#if this.model.title}}
{{this.model.title}}
{{/if}}
{{i18n "admin.dashboard.reports.no_data"}}
</span>
</a>
{{else}}
<span>{{i18n "admin.dashboard.reports.no_data"}}</span>
{{/if}}
</div>
{{/if}}
{{/if}}
{{/if}}
</div>
{{#if this.showFilteringUI}}
<div class="filters">
{{#if this.showModes}}
<div class="modes">
{{#each this.displayedModes as |displayedMode|}}
<DButton
@action={{fn this.onChangeMode displayedMode.mode}}
@icon={{displayedMode.icon}}
class={{displayedMode.cssClass}}
/>
{{/each}}
</div>
{{/if}}
{{#if this.isChartMode}}
{{#if this.model.average}}
<span class="average-chart">
{{i18n "admin.dashboard.reports.average_chart_label"}}
</span>
{{/if}}
<div class="chart-groupings">
{{#each this.chartGroupings as |chartGrouping|}}
<DButton
@label={{chartGrouping.label}}
@action={{fn this.changeGrouping chartGrouping.id}}
@disabled={{chartGrouping.disabled}}
class={{chartGrouping.class}}
/>
{{/each}}
</div>
{{/if}}
{{#if this.showDatesOptions}}
<div class="control">
<span class="label">
{{i18n "admin.dashboard.reports.dates"}}
</span>
<div class="input">
<DateTimeInputRange
@from={{this.startDate}}
@to={{this.endDate}}
@onChange={{action "onChangeDateRange"}}
@showFromTime={{false}}
@showToTime={{false}}
/>
</div>
</div>
{{/if}}
{{#each this.model.available_filters as |filter|}}
<div class="control">
<span class="label">
{{i18n
(concat
"admin.dashboard.reports.filters." filter.id ".label"
)
}}
</span>
<div class="input">
{{component
(concat "report-filters/" filter.type)
model=this.model
filter=filter
applyFilter=(action "applyFilter")
}}
</div>
</div>
{{/each}}
<div class="control">
<div class="input">
<DButton
@action={{this.exportCsv}}
@label="admin.export_csv.button_text"
@icon="download"
class="btn-default export-csv-btn"
/>
</div>
</div>
{{#if this.showRefresh}}
<div class="control">
<div class="input">
<DButton
@action={{this.refreshReport}}
@label="admin.dashboard.reports.refresh_report"
@icon="sync"
class="refresh-report-btn btn-primary"
/>
</div>
</div>
{{/if}}
</div>
{{/if}}
</div>
</ConditionalLoadingSection>
{{else}}
<div class="alert alert-info">
{{html-safe this.disabledLabel}}
</div>
{{/if}}
{{/unless}}