Skip to content

Commit

Permalink
feat(cc-logs-loading-progress): inline layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@pdesoyres-cc
pdesoyres-cc committed Mar 4, 2025
1 parent 8a6d360 commit e6c0fe5
Show file tree
Hide file tree
Showing 4 changed files with 168 additions and 137 deletions.
229 changes: 124 additions & 105 deletions src/components/cc-logs-loading-progress/cc-logs-loading-progress.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import { css, html, LitElement } from 'lit';
import { iconRemixPauseLine, iconRemixPlayLine } from '../../assets/cc-remix.icons.js';
import { classMap } from 'lit/directives/class-map.js';
import {
iconRemixInformationFill as iconInfo,
iconRemixPauseLine,
iconRemixPlayLine,
iconRemixAlertFill as iconWarning,
} from '../../assets/cc-remix.icons.js';
import { dispatchCustomEvent } from '../../lib/events.js';
import { i18n } from '../../translations/translation.js';
import '../cc-button/cc-button.js';
Expand Down Expand Up @@ -42,20 +48,20 @@ export class CcLogsLoadingProgress extends LitElement {

/* region Private methods */

_getLoadingProgressTitle() {
if (this.state.type === 'idle') {
return null;
}

if (this.state.type === 'completed') {
return i18n('cc-logs-loading-progress.progress.loaded');
/**
* @param {number} value
* @param {number|null} percent
*/
_getLoadingProgressMessage(value, percent) {
if (value === 0) {
return i18n('cc-logs-loading-progress.progress.none');
}

if (this.state.percent == null) {
return i18n('cc-logs-loading-progress.progress.loading.live');
if (percent == null) {
return i18n('cc-logs-loading-progress.progress.indeterminate', { count: value });
}

return i18n('cc-logs-loading-progress.progress.loading', { percent: this.state.percent / 100 });
return i18n('cc-logs-loading-progress.progress.percentage', { count: value, percent: percent / 100 });
}

/* endregion */
Expand Down Expand Up @@ -88,98 +94,91 @@ export class CcLogsLoadingProgress extends LitElement {
const percent = this.state.type === 'completed' ? 100 : this.state.percent;

const shouldAskForOverflowDecision = this.state.type === 'overflowLimitReached';
const shouldDisplayPauseResumeControls =
!shouldAskForOverflowDecision && (this.state.type === 'running' || this.state.type === 'paused');
const shouldDisplayOverflowWarning =
!shouldAskForOverflowDecision &&
(this.state.type === 'running' || this.state.type === 'paused' || this.state.type === 'completed') &&
this.state.overflowing;

const getPlayPauseButton = () => {
if (!shouldDisplayPauseResumeControls) {
return null;
}
if (this.state.type === 'running') {
return {
icon: iconRemixPauseLine,
a11yName: i18n('cc-logs-loading-progress.progress.pause'),
onclick: this._onPause,
};
}
if (this.state.type === 'paused') {
return {
icon: iconRemixPlayLine,
a11yName: i18n('cc-logs-loading-progress.progress.resume'),
onclick: this._onResume,
};
}
return null;
};

const playPauseButton = getPlayPauseButton();

return html`
<div class="wrapper">
<div class="heading">
<div class="title">${this._getLoadingProgressTitle()}</div>
${playPauseButton != null
? html`
<cc-button
.icon=${playPauseButton.icon}
hide-text
a11y-name=${playPauseButton.a11yName}
@cc-button:click=${playPauseButton.onclick}
></cc-button>
`
: ''}
</div>
${percent != null
? html`
<div class="progress-bar">
<div class="progress-bar-track" style="width: ${percent}%;"></div>
</div>
`
: ''}
<div class="content">
<div>${i18n('cc-logs-loading-progress.progress.message', { count: this.state.value })}</div>
${shouldAskForOverflowDecision
? html`
<cc-notice intent="info" heading="${i18n('cc-logs-loading-progress.progress.overflow.title')}">
<div slot="message">
${i18n('cc-logs-loading-progress.progress.overflow.message.almost', { limit: this.limit })}
<div class="overflow-control">
<cc-button link @cc-button:click=${this._onAcceptOverflow}>
${i18n('cc-logs-loading-progress.progress.overflow.continue')}
</cc-button>
<cc-button link @cc-button:click=${this._onDiscardOverflow}>
${i18n('cc-logs-loading-progress.progress.overflow.stop')}
</cc-button>
<div class="wrapper ${classMap({ warning: shouldAskForOverflowDecision })}">
<div class="content inline">
${this._renderPlayPauseButton()}
${
shouldAskForOverflowDecision
? html`
<div class="notice warning">
<cc-icon .icon="${iconWarning}" a11y-name="${i18n('cc-notice.icon-alt.warning')}"></cc-icon>
<div class="notice-message">
<div>${i18n('cc-logs-loading-progress.overflow.warning', { limit: this.limit })}</div>
<div class="overflow-buttons">
<cc-button link @cc-button:click=${this._onAcceptOverflow}>
${i18n('cc-logs-loading-progress.overflow.accept')}
</cc-button>
<cc-button link @cc-button:click=${this._onDiscardOverflow}>
${i18n('cc-logs-loading-progress.overflow.discard')}
</cc-button>
</div>
</div>
</div>
</cc-notice>
`
: ''}
${shouldDisplayOverflowWarning
? html`
<cc-notice intent="info" no-icon>
<div slot="message">
${i18n('cc-logs-loading-progress.progress.overflow.message', { limit: this.limit })}
`
: ''
}
${
!shouldAskForOverflowDecision
? html`<div class="loading-progress-message">
${this._getLoadingProgressMessage(this.state.value, percent)}
</div>`
: ''
}
${
shouldDisplayOverflowWarning
? html`
<div class="notice info">
<cc-icon .icon="${iconInfo}" a11y-name="${i18n('cc-notice.icon-alt.info')}"></cc-icon>
<div class="notice-message">
${i18n('cc-logs-loading-progress.overflow.info', { limit: this.limit })}
</div>
</div>
</cc-notice>
`
: ''}
`
: ''
}
</div>
${
percent != null
? html`
<div class="progress-bar">
<div class="progress-bar-track" style="width: ${percent}%;"></div>
</div>
`
: ''
}
</div>
</div>`;
}

_renderPlayPauseButton() {
const running = this.state.type === 'running';
const paused = this.state.type === 'paused';

if (!running && !paused) {
return null;
}

return html`
<cc-button
.icon=${running ? iconRemixPauseLine : iconRemixPlayLine}
hide-text
a11y-name=${running
? i18n('cc-logs-loading-progress.control.pause')
: i18n('cc-logs-loading-progress.control.resume')}
@cc-button:click=${running ? this._onPause : this._onResume}
></cc-button>
`;
}

static get styles() {
return [
// language=CSS
css`
/* stylelint-disable no-duplicate-selectors */
:host {
display: block;
}
Expand All @@ -190,29 +189,54 @@ export class CcLogsLoadingProgress extends LitElement {
border-radius: var(--cc-border-radius-default, 0.25em);
}
.heading {
.wrapper.warning {
background-color: var(--cc-color-bg-warning-weaker);
border: 1px solid var(--cc-color-border-warning-weak);
}
.content {
align-items: center;
background-color: var(--cc-color-bg-neutral, #eee);
border-top-left-radius: var(--cc-border-radius-default, 0.25em);
border-top-right-radius: var(--cc-border-radius-default, 0.25em);
color: var(--cc-color-text-weak);
display: flex;
gap: 0.3em;
max-height: 2em;
flex-wrap: wrap;
gap: 0.5em;
height: 1.75em;
padding: 0.5em;
}
.title {
color: var(--cc-color-text-default, #000);
.overflow-buttons {
display: flex;
gap: 0.5em;
}
.loading-progress-message {
flex: 1;
font-weight: bold;
}
.content {
color: var(--cc-color-text-weak);
.notice {
align-items: center;
display: flex;
flex-direction: column;
gap: 1em;
padding: 1em;
gap: 0.5em;
}
.notice-message {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 0.5em;
}
.notice cc-icon {
min-height: 1.5em;
min-width: 1.5em;
}
.notice.info cc-icon {
--cc-icon-color: var(--cc-color-text-primary);
}
.notice.warning cc-icon {
--cc-icon-color: var(--cc-color-text-warning);
}
.progress-bar {
Expand All @@ -226,11 +250,6 @@ export class CcLogsLoadingProgress extends LitElement {
background-color: var(--cc-color-bg-primary);
height: 100%;
}
.overflow-control {
display: flex;
gap: 1.5em;
}
`,
];
}
Expand Down
20 changes: 16 additions & 4 deletions src/components/cc-logs-loading-progress/cc-logs-loading-progress.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,7 @@ const conf = {
// language=CSS
css: `
cc-logs-loading-progress-beta {
height: 18em;
width: 18em;
margin: 1em;
width: 100%;
}
`,
};
Expand Down Expand Up @@ -167,10 +165,24 @@ export const completed = makeStory(conf, {
{
state: {
type: 'completed',
value: 0,
value: 100,
overflowing: false,
},
limit: 1000,
},
],
});

export const completedWithOverflowing = makeStory(conf, {
/** @type {Array<Partial<CcLogsLoadingProgress>>} */
items: [
{
state: {
type: 'completed',
value: 10000,
overflowing: true,
},
limit: 1000,
},
],
});
28 changes: 14 additions & 14 deletions src/translations/translations.en.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -897,21 +897,21 @@ export const translations = {
'cc-logs-instances.stopping.header': `Stopping instances`,
//#endregion
//#region cc-logs-loading-progress
'cc-logs-loading-progress.progress.loaded': `Logs loaded: 100%`,
'cc-logs-loading-progress.progress.loading': /** @param {{percent: number}} _ */ ({ percent }) =>
`Loading logs: ${formatPercent(lang, percent)}`,
'cc-logs-loading-progress.progress.loading.live': `Fetching realtime...`,
'cc-logs-loading-progress.progress.message': /** @param {{count: number}} _ */ ({ count }) =>
`${formatNumber(lang, count)} entries loaded`,
'cc-logs-loading-progress.progress.overflow.continue': `Continue`,
'cc-logs-loading-progress.progress.overflow.message': /** @param {{limit: number}} _ */ ({ limit }) =>
`To maintain optimal performance, only the last ${formatNumber(lang, limit)} logs are shown.`,
'cc-logs-loading-progress.progress.overflow.message.almost': /** @param {{limit: number}} _ */ ({ limit }) =>
'cc-logs-loading-progress.control.pause': `Pause`,
'cc-logs-loading-progress.control.resume': `Resume`,
'cc-logs-loading-progress.overflow.accept': `Continue`,
'cc-logs-loading-progress.overflow.discard': `Stop`,
'cc-logs-loading-progress.overflow.info': /** @param {{limit: number}} _ */ ({ limit }) =>
`Only the last ${formatNumber(lang, limit)} logs are displayed`,
'cc-logs-loading-progress.overflow.warning': /** @param {{limit: number}} _ */ ({ limit }) =>
`You'll soon reach ${formatNumber(lang, limit)} logs loaded. What do you want to do?`,
'cc-logs-loading-progress.progress.overflow.stop': `Stop`,
'cc-logs-loading-progress.progress.overflow.title': `Large volume`,
'cc-logs-loading-progress.progress.pause': `Pause`,
'cc-logs-loading-progress.progress.resume': `Resume`,
'cc-logs-loading-progress.progress.indeterminate': /** @param {{count: number}} _ */ ({ count }) =>
`${formatNumber(lang, count)} logs loaded`,
'cc-logs-loading-progress.progress.none': `No logs loaded`,
'cc-logs-loading-progress.progress.percentage': /** @param {{count: number, percent: number}} _ */ ({
count,
percent,
}) => `${formatNumber(lang, count)} logs loaded (${formatPercent(lang, percent)})`,
//#endregion
//#region cc-logs-message-filter
'cc-logs-message-filter.bad-format': `Invalid regex`,
Expand Down
Loading

0 comments on commit e6c0fe5

Please sign in to comment.