Merge pull request #1040 from nextcloud/fix/ui-vue-8

feat: Allow pasting log entries

lib/Constants.php

@@ -28,22 +28,41 @@
 
 // !! Keep in sync with src/constants.ts
 class Constants {
+ // Used config Keys
+
  /**
- * Used AppConfig Keys
+ * Logging levels to show, used for filtering
  */
  public const CONFIG_KEY_SHOWNLEVELS = 'shownLevels';
+ /**
+ * The backend logging level
+ */
  public const CONFIG_KEY_LOGLEVEL = 'logLevel';
+ /**
+ * Display format of the timestamp
+ */
  public const CONFIG_KEY_DATETIMEFORMAT = 'dateTimeFormat';
+ /**
+ * If relative dates should be shown for the timestamp (e.g. '3 hours ago')
+ */
  public const CONFIG_KEY_RELATIVEDATES = 'relativedates';
+ /**
+ * If automatic updates of the UI are enabled (polling for new entries)
+ */
  public const CONFIG_KEY_LIVELOG = 'liveLog';
+
+ /**
+ * All valid config keys
+ */
  public const CONFIG_KEYS = [
  self::CONFIG_KEY_SHOWNLEVELS,
  self::CONFIG_KEY_LOGLEVEL,
  self::CONFIG_KEY_DATETIMEFORMAT,
  self::CONFIG_KEY_RELATIVEDATES,
- self::CONFIG_KEY_LIVELOG
+ self::CONFIG_KEY_LIVELOG,
  ];
 
+ // other constants
  public const LOGGING_LEVELS = [0, 1, 2, 3, 4];
  public const LOGGING_LEVEL_NAMES = [
  'debug',

src/App.vue

@@ -81,6 +81,23 @@ const onShowServerLog = () => {
  loggingStore.loadMore()
 }
 
+/**
+ * Handle paste events with log entries
+ * @param event The keyboard event
+ */
+const onHandlePaste = (event: ClipboardEvent) => {
+ event.preventDefault()
+
+ if (event.clipboardData) {
+ const paste = event.clipboardData.getData('text')
+ loggingStore.loadText(paste)
+ }
+
+}
+// Add / remove event listeners
+onMounted(() => window.addEventListener('paste', onHandlePaste))
+onUnmounted(() => window.removeEventListener('paste', onHandlePaste))
+
 /**
  * Toggle polling if live log is dis- / enabled
  */

src/components/settings/SettingsActions.vue

@@ -1,5 +1,9 @@
 <template>
  <div>
+ <NcNoteCard type="info" class="info-note">
+ <!-- eslint-disable-next-line vue/no-v-html -->
+ <p v-html="t('logreader', 'You can also show log entries copied from your clipboard by pasting them on the log view using: {keyboardShortcut}', { keyboardShortcut: keyboardShortcutText }, undefined, { escape: false })" />
+ </NcNoteCard>
  <NcButton :href="settingsStore.enabled ? downloadURL : null" :disabled="!settingsStore.enabled" download="nextcloud.log">
  <template #icon>
  <IconDownload :size="20" />
@@ -31,6 +35,7 @@ import { useLogStore } from '../../store/logging'
 import { useSettingsStore } from '../../store/settings.js'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import IconDownload from 'vue-material-design-icons/Download.vue'
 import IconUpload from 'vue-material-design-icons/Upload.vue'
 import { logger } from '../../utils/logger'
@@ -39,6 +44,9 @@ import { showError } from '@nextcloud/dialogs'
 const settingsStore = useSettingsStore()
 const logStore = useLogStore()
 
+// TRANSLATORS The control key abbreviation
+const keyboardShortcutText = `<kbd>${t('logreader', 'Ctrl')}</kbd> + <kbd>v</kbd>`
+
 /**
  * Logfile download URL
  */
@@ -71,6 +79,11 @@ const onFileSelected = async () => {
 <style lang="scss" scoped>
 div {
  display: flex;
+ flex-wrap: wrap;
  gap: 12px;
+ padding-inline-end: 12px;
+}
+.info-note {
+ justify-self: stretch;
 }
 </style>

src/store/logging.spec.ts

@@ -14,16 +14,30 @@ import { POLLING_INTERVAL } from '../constants'
 const mocks = vi.hoisted(() => {
  return {
  parseLogFile: vi.fn(),
+ parseLogString: vi.fn(),
  logger: {
  debug: vi.fn(),
  warn: vi.fn(),
+ error: vi.fn(),
  },
  getLog: vi.fn(),
  pollLog: vi.fn(),
  showError: vi.fn(),
  }
 })
 
+vi.mock('@nextcloud/dialogs', () => ({
+ showError: mocks.showError
+}))
+
+vi.mock('../utils/logfile.ts', () => {
+ return {
+ parseLogFile: mocks.parseLogFile,
+ parseLogString: mocks.parseLogString,
+ parseRawLogEntry: vi.fn((v) => v),
+ }
+})
+
 class ServerError extends Error {
 
  public status = 500
@@ -162,13 +176,6 @@ describe('store:logging', () => {
  })
 
  it('loads entries from file', async () => {
- vi.mock('../utils/logfile.ts', () => {
- return {
- parseLogFile: mocks.parseLogFile,
- parseRawLogEntry: vi.fn((v) => v),
- }
- })
-
  vi.mocked(mocks.parseLogFile).mockImplementation(async () => {
  return [{ message: 'hello' }]
  })
@@ -197,13 +204,6 @@ describe('store:logging', () => {
  })
 
  it('does not load file if no file was selected', async () => {
- vi.mock('../utils/logfile.ts', () => {
- return {
- parseLogFile: mocks.parseLogFile,
- parseRawLogEntry: vi.fn((v) => v),
- }
- })
-
  vi.mock('../utils/logger.ts', () => {
  return {
  logger: mocks.logger,
@@ -227,6 +227,81 @@ describe('store:logging', () => {
  expect(mocks.parseLogFile).not.toBeCalled()
  })
 
+ it('loads entries from clipboard', async () => {
+ mocks.parseLogString.mockImplementationOnce(() => [{ message: 'hello' }])
+
+ // clean pinia
+ createTestingPinia({
+ fakeApp: true,
+ createSpy: vi.fn,
+ stubActions: false,
+ })
+
+ const clipboard = '{message: "hello"}'
+
+ const store = useLogStore()
+ const settings = useSettingsStore()
+
+ store.hasRemainingEntries = true
+ expect(store.hasRemainingEntries).toBe(true)
+
+ await store.loadText(clipboard)
+
+ // File parsed, so there are no remaining entries
+ expect(store.hasRemainingEntries).toBe(false)
+ expect(settings.localFileName).toBe('Clipboard')
+ expect(mocks.parseLogString).toBeCalledWith(clipboard)
+ expect(store.allEntries).toEqual([{ message: 'hello' }])
+ })
+
+ it('handles empty clipboard paste', async () => {
+ // clean pinia
+ createTestingPinia({
+ fakeApp: true,
+ createSpy: vi.fn,
+ stubActions: false,
+ })
+
+ const store = useLogStore()
+ const settings = useSettingsStore()
+
+ store.hasRemainingEntries = true
+ expect(store.hasRemainingEntries).toBe(true)
+
+ await store.loadText('')
+
+ // File parsed, so there are no remaining entries
+ expect(store.hasRemainingEntries).toBe(true)
+ expect(settings.localFile).toBe(undefined)
+ expect(settings.localFileName).toBe('')
+ })
+
+ it('handles invalid clipboard paste', async () => {
+ // clean pinia
+ createTestingPinia({
+ fakeApp: true,
+ createSpy: vi.fn,
+ stubActions: false,
+ })
+
+ // throw an error
+ mocks.parseLogString.mockImplementationOnce(() => { throw new Error() })
+
+ const store = useLogStore()
+ const settings = useSettingsStore()
+
+ store.hasRemainingEntries = true
+ expect(store.hasRemainingEntries).toBe(true)
+
+ await store.loadText('invalid')
+
+ // File parsed, so there are no remaining entries
+ expect(store.hasRemainingEntries).toBe(true)
+ expect(mocks.showError).toBeCalled()
+ expect(settings.localFile).toBe(undefined)
+ expect(settings.localFileName).toBe('')
+ })
+
  it('loads more from server', async () => {
  vi.mock('../api.ts', () => {
  return {
@@ -547,11 +622,6 @@ describe('store:logging', () => {
  logger: mocks.logger,
  }
  })
- vi.mock('@nextcloud/dialogs', () => {
- return {
- showError: mocks.showError,
- }
- })
  vi.mocked(mocks.pollLog).mockImplementationOnce(() => { throw Error() })
 
  // clean pinia
@@ -581,11 +651,6 @@ describe('store:logging', () => {
  logger: mocks.logger,
  }
  })
- vi.mock('@nextcloud/dialogs', () => {
- return {
- showError: mocks.showError,
- }
- })
  vi.mocked(mocks.pollLog).mockImplementationOnce(() => { throw new ServerError() })
 
  // clean pinia

src/store/logging.ts

@@ -13,7 +13,7 @@ import { POLLING_INTERVAL } from '../constants'
 import { showError } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
 import { useSettingsStore } from './settings'
-import { parseLogFile, parseRawLogEntry } from '../utils/logfile'
+import { parseLogFile, parseLogString, parseRawLogEntry } from '../utils/logfile'
 import { logger } from '../utils/logger'
 
 /**
@@ -101,6 +101,28 @@ export const useLogStore = defineStore('logreader-logs', () => {
  hasRemainingEntries.value = false
  }
 
+ /**
+ * Load entries from string
+ */
+ async function loadText(text: string) {
+ // Skip if aborted
+ if (text === '') {
+ return
+ }
+
+ try {
+ allEntries.value = await parseLogString(text)
+ // TRANSLATORS The clipboard used to paste stuff
+ _settings.localFile = new File([], t('logreader', 'Clipboard'))
+ // From clipboard so no more entries
+ hasRemainingEntries.value = false
+ } catch (e) {
+ // TRANSLATORS Error when the pasted content from the clipboard could not be parsed
+ showError(t('logreader', 'Could not parse clipboard content'))
+ logger.error(e as Error)
+ }
+ }
+
  /**
  * Stop polling entries
  */
@@ -169,5 +191,5 @@ export const useLogStore = defineStore('logreader-logs', () => {
  }
  }
 
- return { allEntries, entries, hasRemainingEntries, query, loadMore, loadFile, startPolling, stopPolling, searchLogs }
+ return { allEntries, entries, hasRemainingEntries, query, loadMore, loadText, loadFile, startPolling, stopPolling, searchLogs }
 })