Repository: directus/directus
File: app/src/modules/settings/routes/flows/components/logs-sidebar-detail.vue (Vue)

Code before:
		@toggle="onToggle"
	>
		<v-progress-linear v-if="!revisionsByDate && loading" indeterminate />

		<div v-else-if="revisionsCount === 0" class="empty">{{ t('no_logs') }}</div>

		<template v-else>
			<button class="toggle-failed" :class="{ active: showFailedOnly }" @click="showFailedOnly = !showFailedOnly">
				<v-icon v-if="!showFailedOnly" name="circle" small />
				<v-icon v-else name="cancel" small />
				{{ t('show_failed_only') }}
			</button>

			<v-detail
				v-for="group in revisionsByDate"
				:key="group.dateFormatted"
				:label="group.dateFormatted"
				class="revisions-date-group"
				start-open
			>
				<div v-show="showFailedOnly && countFailedLogs(group) === 0" class="empty">
					{{ t('no_failed_logs') }}
				</div>
				<div class="scroll-container">
					<div v-for="revision in group.revisions" :key="revision.id" class="log">
						<button v-show="isLogVisible(revision)" @click="selectedRevision = revision">
							<v-icon v-if="revision.status === 'resolve'" name="check_circle" color="var(--theme--primary)" small />
							<v-icon v-else name="cancel" color="var(--theme--secondary)" small />
							{{ revision.timeRelative }}
						</button>
					</div>
				</div>
			</v-detail>
		</template>

		<v-pagination v-if="pagesCount > 1" v-model="page" :length="pagesCount" :total-visible="3" />
	</sidebar-detail>

	<logs-drawer :close-drawer="() => (selectedRevision = null)" :flow="flow" :revision="selectedRevision"></logs-drawer>
</template>

<style lang="scss" scoped>
.v-progress-linear {
	margin: 24px 0;
}

.v-icon {
	vertical-align: text-top;
}

.toggle-failed {

Review comment (bug):
Instead of just hiding the elements with CSS, it would be beneficial if we could just filter the `revisionsByDate` items directly. Then we could remove the `t('no_failed_logs')` part and pagination would make more sense.

Code after:
		:title
		icon="fact_check"
		:badge="!loadingCount && revisionsCount > 0 ? abbreviateNumber(revisionsCount) : null"
		@toggle="onToggle"
	>
		<v-progress-linear v-if="!revisionsByDate && loading" indeterminate />

		<div v-else-if="revisionsCount === 0" class="empty">{{ t('no_logs') }}</div>

		<template v-else>
			<button class="toggle-failed" :class="{ active: showFailedOnly }" @click="showFailedOnly = !showFailedOnly">
				<v-icon v-if="!showFailedOnly" name="circle" small />
				<v-icon v-else name="cancel" small />
				{{ t('show_failed_only') }}
			</button>

			<div v-if="!revisionsByDate?.length" class="empty">{{ t('no_logs_on_page') }}</div>

			<v-detail
				v-for="group in revisionsByDate"
				:key="group.dateFormatted"
				:label="group.dateFormatted"
				class="revisions-date-group"
				start-open
			>
				<div class="scroll-container">
					<div v-for="revision in group.revisions" :key="revision.id" class="log">
						<button @click="selectedRevision = revision">
							<v-icon v-if="revision.status === 'resolve'" name="check_circle" color="var(--theme--primary)" small />
							<v-icon v-else name="cancel" color="var(--theme--secondary)" small />
							{{ revision.timeRelative }}
						</button>
					</div>
				</div>
			</v-detail>
		</template>

		<v-pagination v-if="pagesCount > 1" v-model="page" :length="pagesCount" :total-visible="3" />
	</sidebar-detail>

	<logs-drawer :flow="flow" :revision="selectedRevision" @close="selectedRevision = null"></logs-drawer>
</template>

<style lang="scss" scoped>
.v-progress-linear {
	margin: 24px 0;
}

.v-detail + .v-detail {
	margin-top: 12px;
}