Issues #183: done.

src/assets/vendors.css

@@ -83,3 +83,7 @@ p-radiobutton-icon */
 .p-dialog-content {
   @apply !p-0
 }
+/* DataTable */
+.p-datatable-resizable > .p-datatable-wrapper {
+  @apply !overflow-x-visible
+}

src/components/Discover/Map/SidebarTraces.vue

@@ -41,10 +41,16 @@
             <div id="cyTrace" ref="cyTrace" class="h-full min-w-full relative"></div>
           </div>
         </div>
-        <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)] infiniteTable" @scroll="handleScroll">
+        <div class="overflow-y-auto overflow-x-auto scrollbar w-full h-[calc(100%_-_264px)] infiniteTable " @scroll="handleScroll">
           <DataTable :value="caseData" showGridlines tableClass="text-sm" breakpoint="0">
             <div v-for="(col, index) in columnData" :key="index">
-              <Column :field="col.field" :header="col.header"></Column>
+              <Column :field="col.field" :header="col.header">
+                <template #body="{ data }">
+                  <div :class="data[col.field]?.length > 18 ? 'whitespace-normal' : 'whitespace-nowrap'">
+                     {{ data[col.field] }}
+                  </div>
+                </template>
+              </Column>
             </div>
           </DataTable>
         </div>
@@ -94,7 +100,6 @@ export default {
           ratio: this.getPercentLabel(trace.count / sum),
         };
       })
-
       return result;
     },
     caseData: function() {
@@ -141,7 +146,7 @@ export default {
     },
     infiniteFirstCases: function(newValue){
       if(this.infiniteFirstCases) this.infiniteData = JSON.parse(JSON.stringify(newValue));
-    }
+    },
   },
   methods: {
     /**
@@ -269,7 +274,7 @@ export default {
   @apply bg-primary
 }
 /* Table set */
-:deep(.p-datatable-thead th) {
+:deep(.p-datatable-thead) {
   @apply sticky top-0 left-0 z-10 bg-neutral-10
 }
 :deep(.p-datatable .p-datatable-thead > tr > th) {
@@ -278,4 +283,13 @@ export default {
 :deep(.p-datatable .p-datatable-tbody > tr > td) {
   @apply border-neutral-500 !border-t-0
 }
+:deep(.p-datatable .p-datatable-thead > tr > th) {
+  white-space: nowrap;
+}
+:deep(.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td) {
+  min-width: 72px;
+  max-width: 184px;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
 </style>

src/stores/allMapData.js

@@ -192,8 +192,19 @@ export default defineStore('allMapDataStore', {
         this.allTraceTaskSeq = response.data.task_seq;
         this.allCase = response.data.cases;
         this.allCase.map(c => {
-          c.started_at = moment(c.started_at).format('YYYY-MM-DD HH:mm');
-          c.completed_at = moment(c.completed_at).format('YYYY-MM-DD HH:mm');
+          c.started_at = moment(c.started_at).format('YYYY/MM/DD HH:mm');
+          c.completed_at = moment(c.completed_at).format('YYYY/MM/DD HH:mm');
+          c.attributes.map(att => {
+            switch (att.type) {
+              case 'date':
+                att.value = att.value !== null ? moment(att.value).format('YYYY/MM/DD HH:mm') : null;
+                break;
+              case 'float':
+                att.value = att.value !== null ? Number(new Decimal(att.value).toFixed(2)) : null;
+              default:
+                break;
+            }
+          })
           return this.allCase;
         });
         return this.allCase;
@@ -216,8 +227,19 @@ export default defineStore('allMapDataStore', {
         this.allBaseTraceTaskSeq = response.data.task_seq;
         this.allBaseCase = response.data.cases;
         this.allBaseCase.map(c => {
-          c.started_at = moment(c.started_at).format('YYYY-MM-DD HH:mm');
-          c.completed_at = moment(c.completed_at).format('YYYY-MM-DD HH:mm');
+          c.started_at = moment(c.started_at).format('YYYY/MM/DD HH:mm');
+          c.completed_at = moment(c.completed_at).format('YYYY/MM/DD HH:mm');
+          c.attributes.map(att => {
+            switch (att.type) {
+              case 'date':
+                att.value = att.value !== null ? moment(att.value).format('YYYY/MM/DD HH:mm') : null;
+                break;
+              case 'float':
+                att.value = att.value !== null ? Number(new Decimal(att.value).toFixed(2)) : null;
+              default:
+                break;
+            }
+          })
           return this.allBaseCase;
         });
         return this.allBaseCase;

src/views/Files/index.vue

@@ -148,7 +148,6 @@
           case 'Filter':
             this.createFilterId = file.id;
             this.baseLogId = file.log.id;
-            console.log('files filter:', this.baseLogId);
             fileId = file.id;
             type = 'filter';
             params = { type: type, fileId: fileId };