add relative time format back

src/components/settings/SettingsDatetimeFormat.vue

@@ -24,6 +24,14 @@
 			@update:checked="setDateTimeFormat">
 			{{ t('logreader', 'UTC time') }}
 		</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch :checked="dateTimeFormat"
+			:disabled="isLocalLogfile"
+			value="relative"
+			name="timestamp_format"
+			type="radio"
+			@update:checked="setDateTimeFormat">
+			{{ t('logreader', 'Relative') }}
+		</NcCheckboxRadioSwitch>
 	</fieldset>
 </template>
 

src/components/table/LogTableRow.vue

@@ -35,8 +35,13 @@
 				</div>
 			</div>
 		</td>
-		<td :title="timeString">
-			{{ timeString }}
+		<td>
+			<span v-if="isRawDate">{{ row.time }}</span>
+			<NcDateTime v-else
+				:key="settingsStore.dateTimeFormat"
+				:timestamp="timestamp"
+				:relative-time="isRelativeDate && 'long'"
+				:format="dateTimeFormat" />
 		</td>
 		<td>
 			<NcActions placement="left-start">
@@ -76,11 +81,13 @@ import { useLogFormatting } from '../../utils/format'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
 import IconChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import IconChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import IconContentCopy from 'vue-material-design-icons/ContentCopy.vue'
 import IconViewList from 'vue-material-design-icons/ViewList.vue'
 import LogException from '../exception/LogException.vue'
+import { useSettingsStore } from '../../store/settings'
 
 const props = withDefaults(
 	defineProps<{
@@ -92,7 +99,18 @@ const props = withDefaults(
 	},
 )
 
-const { formatTime, formatLogEntry } = useLogFormatting()
+const settingsStore = useSettingsStore()
+const isRawDate = computed(() => settingsStore.dateTimeFormat === 'raw')
+const isRelativeDate = computed(() => settingsStore.dateTimeFormat === 'relative')
+const dateTimeFormat = computed(() => ({
+	dateStyle: 'medium',
+	timeStyle: 'medium',
+	timeZone: settingsStore.dateTimeFormat === 'utc' ? 'UTC' : undefined,
+}))
+
+const { formatLogEntry } = useLogFormatting()
+
+const timestamp = computed(() => Date.parse(props.row.time))
 
 /**
  * Whether the row is expanded to show an overflowing log message
@@ -112,11 +130,6 @@ const cssLevelClass = computed(() => [
 	`logging-level--${LOGGING_LEVEL[props.row.level]}`,
 ])
 
-/**
- * Formatted / human readable time stamp of the log entry
- */
-const timeString = computed(() => formatTime(props.row.time))
-
 /**
  * Reference to the current table row element (`tr`)
  */

src/utils/format.spec.ts

@@ -7,7 +7,6 @@ import { expect, describe, it, vi, beforeAll } from 'vitest'
 
 import type { ILogEntry } from '../interfaces'
 import { useLogFormatting } from './format'
-import { useSettingsStore } from '../store/settings'
 
 describe('utils:format', () => {
 	beforeAll(() => {
@@ -17,33 +16,6 @@ describe('utils:format', () => {
 		})
 	})
 
-	describe('formatTime', () => {
-		it('formats a datetime to raw', () => {
-			const { formatTime } = useLogFormatting()
-			const a = formatTime('2023-07-11T19:08:02.102Z')
-			expect(a).to.be.eq('2023-07-11T19:08:02.102Z')
-		})
-
-		it('formats a datetime to utc', () => {
-			const store = useSettingsStore()
-			store.dateTimeFormat = 'utc'
-
-			const { formatTime } = useLogFormatting()
-			const a = formatTime('2023-07-11T19:08:02.102Z')
-			expect(a).toBe('Jul 11, 2023, 7:08:02 PM')
-		})
-
-		it('formats a datetime to local', () => {
-			// It is importent for this test that we run it with a different timezone than UTC to check that it is not the same as `dateTimeFormat = utc`. In this case 'Etc/GMT+1' (-01:00)
-			const store = useSettingsStore()
-			store.dateTimeFormat = 'local'
-
-			const { formatTime } = useLogFormatting()
-			const a = formatTime('2023-07-11T19:08:02.102Z')
-			expect(a).toBe('Jul 11, 2023, 6:08:02 PM')
-		})
-	})
-
 	describe('formatLogEntry', () => {
 		it('formats a log entry', () => {
 			const { formatLogEntry } = useLogFormatting()

src/utils/format.ts

@@ -13,29 +13,14 @@ import { useSettingsStore } from '../store/settings'
 export const useLogFormatting = (pinia?: Pinia) => {
 	const settingsStore = useSettingsStore(pinia)
 
-	/**
-	 * Format time according to current time format
-	 *
-	 * @param time Raw time string
-	 */
 	const formatTime = (time: string) => {
-		if (settingsStore.dateTimeFormat === 'local') {
-			const dateFormat = Intl.DateTimeFormat(getCanonicalLocale(), {
-				dateStyle: 'medium',
-				timeStyle: 'medium',
-			})
-			return dateFormat.format(new Date(time))
-		} else if (settingsStore.dateTimeFormat === 'utc') {
-			const dateFormat = Intl.DateTimeFormat(getCanonicalLocale(), {
-				dateStyle: 'medium',
-				timeStyle: 'medium',
-				timeZone: 'UTC',
-			})
-			return dateFormat.format(new Date(time))
-		}
-		return time
+		const dateFormat = Intl.DateTimeFormat(getCanonicalLocale(), {
+			dateStyle: 'medium',
+			timeStyle: 'medium',
+			timeZone: settingsStore.dateTimeFormat === 'utc' ? 'UTC' : undefined,
+		})
+		return dateFormat.format(new Date(time))
 	}
-
 	/**
 	 * Format a log entry into a human readable text
 	 *
@@ -53,7 +38,6 @@ export const useLogFormatting = (pinia?: Pinia) => {
 		)
 	}
 	return {
-		formatTime,
 		formatLogEntry,
 	}
 }