feature/CONNECTOR-40/source-logs

src/modals/Log/ViewLog.vue

@@ -0,0 +1,170 @@
+<script setup>
+import { logStore, navigationStore } from '../../store/store.js'
+</script>
+
+<template>
+	<NcModal v-if="navigationStore.modal === 'viewLog'"
+		ref="modalRef"
+		label-id="viewLog"
+		@close="closeModal">
+		<div class="logModalContent">
+			<div class="logModalContentHeader">
+				<h2>View Log</h2>
+			</div>
+
+			<strong>Standard</strong>
+			<table>
+				<tr v-for="(value, key) in standardItems"
+
+					:key="key">
+					<td class="keyColumn">
+						{{ key }}
+					</td>
+					<td>{{ value }}</td>
+				</tr>
+			</table>
+			<br>
+
+			<strong>Created At</strong>
+			<table>
+				<tr v-for="(value, key) in createdAtItems"
+					:key="key">
+					<td class="keyColumn">
+						{{ key }}
+					</td>
+					<td>{{ value }}</td>
+				</tr>
+			</table>
+			<br>
+
+			<strong>Request</strong>
+			<table>
+				<tr v-for="(value, key) in requestItems"
+					:key="key">
+					<td class="keyColumn">
+						{{ key }}
+					</td>
+					<td>{{ value }}</td>
+				</tr>
+			</table>
+			<br>
+			<div>
+				<strong>Response</strong>
+				<table>
+					<tr v-for="(value, key) in responseItems"
+						:key="key">
+						<td v-if="key !== 'body' && key !== 'headers'" class="keyColumn">
+							{{ key }}
+						</td>
+						<td v-if="key !== 'body' && key !== 'headers'">
+							{{ value }}
+						</td>
+					</tr>
+				</table>
+				<span>headers</span>
+				<table class="responseHeadersTable">
+					<tr v-for="(value, key) in headersItems"
+						:key="key">
+						<td class="keyColumn">
+							{{ key }}
+						</td>
+						<td>{{ value }}</td>
+					</tr>
+				</table>
+
+				<div>
+					<span>body</span>
+					<div class="responseBody">
+						{{ responseItems.body }}
+					</div>
+				</div>
+			</div>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import {
+	NcModal,
+} from '@nextcloud/vue'
+
+export default {
+	name: 'ViewLog',
+	components: {
+		NcModal,
+	},
+	data() {
+		return {
+			hasUpdated: false,
+			standardItems: {},
+			requestItems: {},
+			responseItems: {},
+			headersItems: {},
+			createdAtItems: {},
+		}
+	},
+	mounted() {
+		logStore.viewLogItem && this.splitItems()
+	},
+	updated() {
+		if (navigationStore.modal === 'viewLog' && !this.hasUpdated) {
+			logStore.viewLogItem && this.splitItems()
+			this.hasUpdated = true
+		}
+	},
+	methods: {
+		splitItems() {
+			Object.entries(logStore.viewLogItem).forEach(([key, value]) => {
+				if (key === 'request' || key === 'response' || key === 'createdAt') {
+					this[`${key}Items`] = { ...value }
+				} else {
+					this.standardItems = { ...this.standardItems, [key]: value }
+				}
+			})
+			this.headersToObject()
+		},
+		headersToObject() {
+			Object.entries(this.requestItems).forEach(([key, value]) => {
+				this.headersItems = { ...this.headersItems, [key]: value }
+			})
+		},
+		closeModal() {
+			navigationStore.setModal(false)
+			this.hasUpdated = false
+			this.standardItems = {}
+			this.requestItems = {}
+			this.responseItems = {}
+			this.createdAtItems = {}
+			this.headersItems = {}
+		},
+	},
+
+}
+</script>
+<style>
+
+.responseHeadersTable {
+    margin-inline-start: 65px;
+}
+
+.responseBody {
+    word-break: break-all;
+}
+
+.keyColumn {
+    padding-inline-end: 10px;
+}
+
+.logModalContent {
+    margin: var(--OC-margin-30);
+}
+
+.logModalContentHeader {
+    text-align: center;
+}
+
+.logModalContent > *:not(:last-child) {
+    margin-block-end: 1rem;
+}
+
+</style>

src/modals/Modals.vue

@@ -16,6 +16,7 @@
 		<DeleteJobArgument />
 		<EditSourceConfiguration />
 		<DeleteSourceConfiguration />
+		<ViewLog />
 	</div>
 </template>
 
@@ -37,7 +38,7 @@ import EditJobArgument from './JobArgument/EditJobArgument.vue'
 import DeleteJobArgument from './JobArgument/DeleteJobArgument.vue'
 import EditSourceConfiguration from './SourceConfiguration/EditSourceConfiguration.vue'
 import DeleteSourceConfiguration from './SourceConfiguration/DeleteSourceConfiguration.vue'
-
+import ViewLog from './Log/ViewLog.vue'
 export default {
 	name: 'Modals',
 	components: {
@@ -57,6 +58,7 @@ export default {
 	  DeleteJobArgument,
 	  EditSourceConfiguration,
 	  DeleteSourceConfiguration,
+	  ViewLog,
 	},
 	setup() {
 	  return {

src/store/modules/log.js

@@ -7,6 +7,8 @@ export const useLogStore = defineStore(
 		state: () => ({
 			logItem: false,
 			logList: [],
+			activeLogKey: null,
+			viewLogItem: null,
 		}),
 		actions: {
 			setLogItem(logItem) {
@@ -19,6 +21,14 @@ export const useLogStore = defineStore(
 				)
 				console.log('Log list set to ' + logList.length + ' items')
 			},
+			setViewLogItem(logItem) {
+				this.viewLogItem = logItem
+				console.log('Active log item set to ' + logItem)
+			},
+			setActiveLogKey(activeLogKey) {
+				this.activeLogKey = activeLogKey
+				console.log('Active log key set to ' + activeLogKey)
+			},
 			/* istanbul ignore next */ // ignore this for Jest until moved into a service
 			async refreshLogList(search = null) {
 				// @todo this might belong in a service?

src/store/modules/source.js

@@ -16,6 +16,8 @@ export const useSourceStore = defineStore(
 			setSourceItem(sourceItem) {
 				this.sourceItem = sourceItem && new Source(sourceItem)
 				console.log('Active source item set to ' + sourceItem)
+				this.refreshSourceLogs()
+
 			},
 			setSourceTest(sourceTest) {
 				this.sourceTest = sourceTest

src/views/Source/SourceDetails.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { sourceStore, navigationStore } from '../../store/store.js'
+import { sourceStore, navigationStore, logStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -133,21 +133,31 @@ import { sourceStore, navigationStore } from '../../store/store.js'
 							<div v-if="sourceStore.sourceLogs?.length">
 								<NcListItem v-for="(log, i) in sourceStore.sourceLogs"
 									:key="log.id + i"
-									:class="log.status === 'error' ? 'errorStatus' : 'okStatus'"
+									:class="checkIfStatusIsOk(log.statusCode) ? 'okStatus' : 'errorStatus'"
 									:name="log.response.body"
 									:bold="false"
 									:counter-number="log.statusCode"
-									:force-display-actions="true">
+									:force-display-actions="true"
+									:active="logStore.activeLogKey === log?.id"
+									@click="logStore.setActiveLogKey(log.id)">
 									<template #counter-number>
-										<BriefcaseAccountOutline disable-menu
+										<MathLog disable-menu
 											:size="44" />
 									</template>
 									<template #icon>
-										<BriefcaseAccountOutline disable-menu
+										<MathLog disable-menu
 											:size="44" />
 									</template>
 									<template #subname>
-										{{ new Date(log.createdAt.date) }}
+										{{ log.createdAt.date }} - {{ log.createdAt.timezone }}
+									</template>
+									<template #actions>
+										<NcActionButton @click="viewLog(log)">
+											<template #icon>
+												<EyeOutline :size="20" />
+											</template>
+											View
+										</NcActionButton>
 									</template>
 								</NcListItem>
 							</div>
@@ -176,7 +186,8 @@ import BriefcaseAccountOutline from 'vue-material-design-icons/BriefcaseAccountO
 import Delete from 'vue-material-design-icons/Delete.vue'
 import FileCogOutline from 'vue-material-design-icons/FileCogOutline.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
-
+import MathLog from 'vue-material-design-icons/MathLog.vue'
+import EyeOutline from 'vue-material-design-icons/EyeOutline.vue'
 export default {
 	name: 'SourceDetails',
 	components: {
@@ -207,6 +218,10 @@ export default {
 			sourceStore.setSourceConfigurationKey(null)
 			navigationStore.setModal('editSourceConfiguration')
 		},
+		viewLog(log) {
+			logStore.setViewLogItem(log)
+			navigationStore.setModal('viewLog')
+		},
 		setActiveSourceConfigurationKey(sourceConfigurationKey) {
 			if (sourceStore.sourceConfigurationKey === sourceConfigurationKey) {
 				sourceStore.setSourceConfigurationKey(false)
@@ -216,6 +231,12 @@ export default {
 			sourceStore.refreshSourceLogs()
 
 		},
+		checkIfStatusIsOk(statusCode) {
+			if (statusCode > 199 && statusCode < 300) {
+				return true
+			}
+			return false
+		},
 	},
 }
 </script>
@@ -233,12 +254,12 @@ export default {
   }
 
   .okStatus * .counter-bubble__counter {
-	background-color: green;
+	background-color: #69b090;
 	color: white
   }
 
   .errorStatus * .counter-bubble__counter {
-	background-color: red;
+	background-color: #dd3c49;
 	color: white
   }
 </style>