Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implemented: The proposed UI for the DataManager Logs in Job Manager(#680) #728

Merged
merged 2 commits into from
Nov 13, 2024
Merged

Implemented: The proposed UI for the DataManager Logs in Job Manager(#680) #728

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6700d52
Implemented: added the ui displays the file information(#680)
R-Sourabh Sep 17, 2024
c20f911
Implemented: the proposed UI for the DataManager Logs in Job Manager(…
R-Sourabh Sep 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions src/components/DownloadLogsFilePopover.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<template>
<ion-content>
<ion-list>
<ion-list-header>Log Id</ion-list-header>
<ion-item button>
Log file
</ion-item>
<ion-item button>
Uploaded file
</ion-item>
<ion-item button lines="none">
Failed records
</ion-item>
</ion-list>
</ion-content>
</template>

<script lang="ts">
import {
IonContent,
IonItem,
IonList,
IonListHeader,
} from "@ionic/vue";
import { defineComponent } from "vue";
import { translate } from "@hotwax/dxp-components";

export default defineComponent({
name: "DownloadLogsFilePopover",
components: {
IonContent,
IonItem,
IonList,
IonListHeader
},
setup() {

return {
translate
}
}
});
</script>
238 changes: 238 additions & 0 deletions src/components/ImportLogsDetail.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,238 @@
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-back-button slot="start" default-href="/pipeline" />
<ion-title>{{ translate("Import logs")}}</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<div class="header">
<div class="search ion-padding">
<section>
<ion-item lines="none">
<h1>Import logs</h1>
</ion-item>
<ion-list>
<ion-item>
<ion-icon slot="start" :icon="pulseOutline" />
<ion-label>Job</ion-label>
<ion-label slot="end" class="ion-text-wrap">Job Id</ion-label>
</ion-item>
<ion-item>
<ion-icon slot="start" :icon="fileTrayFullOutline" />
<ion-label>Files received</ion-label>
<ion-label slot="end">14</ion-label>
</ion-item>
<ion-item>
<ion-icon slot="start" :icon="codeWorkingOutline" />
<ion-label>Files processed</ion-label>
<ion-label slot="end">14</ion-label>
</ion-item>
<ion-item lines="none">
<ion-icon slot="start" :icon="warningOutline" />
<ion-label>Files with errors</ion-label>
<ion-label slot="end">14</ion-label>
</ion-item>
</ion-list>
</section>
</div>
<div class="filters ion-padding">
<ion-label lines="none">
<p class="overline">Config Id</p>
<h1>Config Name</h1>
</ion-label>
<ion-list>
<ion-item>
<ion-icon slot="start" :icon="shareSocialOutline" />
<ion-label>Multithreading</ion-label>
<ion-label slot="end">facilityId</ion-label>
</ion-item>
<ion-item>
<ion-icon slot="start" :icon="globeOutline" />
<ion-label>SFTP</ion-label>
<ion-label slot="end" class="ion-text-wrap">path/SFTP</ion-label>
</ion-item>
<ion-item>
<ion-icon slot="start" :icon="optionsOutline" />
<ion-label>Mode</ion-label>
<ion-label slot="end">Queued</ion-label>
</ion-item>
</ion-list>
</div>
</div>

<div class="ion-padding">
<ion-chip outline>
<ion-label>All</ion-label>
<ion-icon :icon="checkmarkOutline"/>
</ion-chip>
<ion-chip outline>
<ion-label>Failed log</ion-label>
</ion-chip>
<ion-chip outline>
<ion-label>Failed records</ion-label>
</ion-chip>
</div>

<div class="list-item">
<ion-item lines="none">
<ion-icon slot="start" :icon="documentTextOutline" />
<ion-label>
<p class="overline">Log id</p>
File Name
<p>07/09/2024 10:00 PM</p>
</ion-label>
</ion-item>

<ion-label>
07/09/2024 10:00 PM
<p>Started</p>
</ion-label>

<ion-label>
07/09/2024 10:00 PM
<p>Finished</p>
</ion-label>

<ion-badge color="success">Finished</ion-badge>

<ion-label>
<ion-icon slot="start" :icon="cloudDownloadOutline" />
<p>Failed records</p>
</ion-label>

<ion-button fill="clear" color="medium" @click="openDownloadLogsFilePopover($event)">
<ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
</ion-button>
</div>

<div class="list-item">
<ion-item lines="none">
<ion-icon slot="start" :icon="documentTextOutline" />
<ion-label>
<p class="overline">Log id</p>
File Name
<p>07/09/2024 10:00 PM</p>
</ion-label>
</ion-item>

<ion-label>
07/09/2024 10:00 PM
<p>Started</p>
</ion-label>

<ion-label>
07/09/2024 10:00 PM
<p>Finished</p>
</ion-label>

<ion-badge color="danger">Failed</ion-badge>

<ion-label>
<ion-icon slot="start" :icon="cloudDownloadOutline" />
<p>Failed records</p>
</ion-label>

<ion-button fill="clear" color="medium" @click="openDownloadLogsFilePopover($event)">
<ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
</ion-button>
</div>
</ion-content>
</ion-page>
</template>

<script>
import { checkmarkOutline, codeWorkingOutline, cloudDownloadOutline, documentTextOutline, ellipsisVerticalOutline, fileTrayFullOutline, globeOutline, optionsOutline, pulseOutline, shareSocialOutline, warningOutline } from "ionicons/icons";
import { IonBackButton, IonBadge, IonButton, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonPage, IonTitle, IonToolbar, popoverController } from "@ionic/vue";
import { defineComponent } from 'vue'
import { translate } from '@hotwax/dxp-components'
import DownloadLogsFilePopover from "./DownloadLogsFilePopover.vue";

export default defineComponent ({
name: "ImportLogsDetail",
components: {
IonBackButton,
IonBadge,
IonButton,
IonChip,
IonContent,
IonHeader,
IonIcon,
IonItem,
IonLabel,
IonList,
IonPage,
IonTitle,
IonToolbar,
},
methods : {
async openDownloadLogsFilePopover(event) {
const popover = await popoverController.create({
component: DownloadLogsFilePopover,
showBackdrop: false,
event: event
});
return popover.present()
}
},
setup() {
return {
checkmarkOutline,
codeWorkingOutline,
cloudDownloadOutline,
documentTextOutline,
ellipsisVerticalOutline,
fileTrayFullOutline,
globeOutline,
optionsOutline,
pulseOutline,
shareSocialOutline,
warningOutline,
translate
}
}
})
</script>

<style scoped>
section {
overflow: hidden;
border: var(--border-medium);
border-radius: 16px;
}

.list-item {
--columns-desktop: 6;
border-bottom : 1px solid var(--ion-color-medium);
}

.list-item > ion-item {
width: 100%;
}

.header {
display: grid;
grid: "search filters"
/1fr 1fr;
}

.search {
grid-area: search;
}

.filters {
grid-area: filters;
align-self: end;
}

@media (max-width: 991px) {
.header {
grid: "search"
"filters"
/ auto;
padding: 0;
}
}
</style>
47 changes: 41 additions & 6 deletions src/components/JobConfiguration.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,31 @@
</ion-checkbox>
</ion-item>
</div>

<!-- Import logs -->
<section>
<ion-item lines="none">
<h1>Import logs</h1>
<ion-button slot="end" fill="clear" @click="openImportLogsDetails()">View details</ion-button>
</ion-item>
<ion-progress-bar></ion-progress-bar>
<ion-list>
<ion-item>
<ion-icon slot="start" :icon="fileTrayFullOutline" />
<ion-label>Files received</ion-label>
<ion-label slot="end">14</ion-label>
</ion-item>
<ion-item>
<ion-icon slot="start" :icon="codeWorkingOutline" />
<ion-label>Files processed</ion-label>
<ion-label slot="end">14</ion-label>
</ion-item>
<ion-item lines="none">
<ion-icon slot="start" :icon="warningOutline" />
<ion-label>Files with errors</ion-label>
<ion-label slot="end">14</ion-label>
</ion-item>
</ion-list>
</section>
</template>

<script lang="ts">
Expand All @@ -129,6 +153,7 @@ import {
IonLabel,
IonList,
IonModal,
IonProgressBar,
IonRow,
IonSelect,
IonSelectOption,
Expand All @@ -138,15 +163,18 @@ import {
import {
addOutline,
calendarClearOutline,
codeWorkingOutline,
flashOutline,
fileTrayFullOutline,
listCircleOutline,
copyOutline,
timeOutline,
timerOutline,
syncOutline,
personCircleOutline,
pinOutline,
refreshOutline
refreshOutline,
warningOutline
} from "ionicons/icons";
import JobHistoryModal from '@/components/JobHistoryModal.vue'
import { Plugins } from '@capacitor/core';
Expand All @@ -173,6 +201,7 @@ export default defineComponent({
IonLabel,
IonList,
IonModal,
IonProgressBar,
IonRow,
IonSelect,
IonSelectOption,
Expand Down Expand Up @@ -225,6 +254,9 @@ export default defineComponent({
}
},
methods: {
openImportLogsDetails() {
this.router.push({ name: 'ImportLogsDetail', replace: false });
},
getDateTime(time: any) {
return DateTime.fromMillis(time).toISO()
},
Expand Down Expand Up @@ -525,10 +557,12 @@ export default defineComponent({
Actions,
addOutline,
calendarClearOutline,
codeWorkingOutline,
copyOutline,
DateTime,
listCircleOutline,
flashOutline,
fileTrayFullOutline,
hasPermission,
isCustomRunTime,
getNowTimestamp,
Expand All @@ -540,17 +574,18 @@ export default defineComponent({
personCircleOutline,
pinOutline,
refreshOutline,
translate
translate,
warningOutline
};
}
});
</script>

<style scoped>
ion-list {
margin: 0 0 var(--spacer-base);
section {
margin-top: var(--spacer-sm);
margin-bottom: var(--spacer-sm);
}

.actions > ion-button {
margin: var(--spacer-sm);
}
Expand Down
Loading
Loading