feat(#117): task viewer and dialogs UI improvements

lukashornych · Oct 7, 2024 · 74468d6 · 74468d6
1 parent 4771f86
commit 74468d6
Show file tree

Hide file tree

Showing 15 changed files with 63 additions and 36 deletions.
diff --git a/src/modules/base/component/VCardTitleWithActions.vue b/src/modules/base/component/VCardTitleWithActions.vue
@@ -7,7 +7,7 @@
 <template>
     <VCardTitle>
         <div class="title-container">
-            <div>
+            <div class="title-container__title">
                 <slot />
             </div>
             <div v-if="$slots['actions']" class="title-container__actions">
@@ -20,10 +20,15 @@
 <style lang="scss" scoped>
 .title-container {
     width: 100%;
-    display: flex;
+    display: inline-grid;
+    grid-template-columns: 1fr auto;
     justify-content: space-between;
     align-items: center;
 
+    &__title {
+        text-wrap: wrap;
+    }
+
     &__actions {
         display: flex;
         gap: 0.5rem;

diff --git a/...aliser/component/MissingDataIndicator.vue → .../base/component/VMissingDataIndicator.vue b/...aliser/component/MissingDataIndicator.vue → .../base/component/VMissingDataIndicator.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /**
- * Informative component that is displayed when there is no data or argument for visualisation.
+ * Informative component that is displayed when there is no data or argument.
  */
 
 const props = defineProps<{

diff --git a/src/modules/connection/driver/grpc/service/TaskStatusConverter.ts b/src/modules/connection/driver/grpc/service/TaskStatusConverter.ts
@@ -43,12 +43,15 @@ export class TaskStatusConverter {
     }
 
     convert(grpcTaskStatus: GrpcTaskStatus): TaskStatus {
+        const taskTypes: string[] = grpcTaskStatus.taskType
+            .split(',')
+            .map(it => it.trim())
         const result: TaskResult | undefined = this.convertResult(
             grpcTaskStatus.result.case,
             grpcTaskStatus.result.value
         )
         return new TaskStatus(
-            grpcTaskStatus.taskType,
+            Immutable.List(taskTypes),
             grpcTaskStatus.taskName,
             Uuid.createUUID(
                 grpcTaskStatus.taskId!.mostSignificantBits!,

diff --git a/src/modules/connection/model/task/TaskStatus.ts b/src/modules/connection/model/task/TaskStatus.ts
@@ -10,7 +10,7 @@ import { DateTime, Duration } from 'luxon'
  * Represents a single server task that is being processed by the evitaDB.
  */
 export class TaskStatus {
-    readonly taskType: string
+    readonly taskTypes: Immutable.List<string>
     readonly taskName: string
     readonly taskId: Uuid
     readonly catalogName: string | undefined
@@ -27,7 +27,7 @@ export class TaskStatus {
     private _cancelRequested: boolean = false
     private _duration?: Duration = undefined
 
-    constructor(taskType: string,
+    constructor(taskTypes: Immutable.List<string>,
                 taskName: string,
                 taskId: Uuid,
                 catalogName: string | undefined,
@@ -40,7 +40,7 @@ export class TaskStatus {
                 exception: string | undefined,
                 state: TaskState,
                 traits: Immutable.Set<TaskTrait>){
-        this.taskType = taskType
+        this.taskTypes = taskTypes
         this.taskName = taskName
         this.taskId = taskId
         this.catalogName = catalogName
@@ -55,6 +55,10 @@ export class TaskStatus {
         this.traits = traits
     }
 
+    get mainTaskType(): string {
+        return this.taskTypes.get(0)!
+    }
+
     /**
      * Whether the task was cancelled by the user by was not yet propagated to server
      * and returned back with update.

diff --git a/src/modules/console/result-visualiser/component/ResultVisualiser.vue b/src/modules/console/result-visualiser/component/ResultVisualiser.vue
@@ -19,9 +19,9 @@ import AttributeHistogramsVisualiser
     from '@/modules/console/result-visualiser/component/histogram/AttributeHistogramsVisualiser.vue'
 import PriceHistogramVisualiser
     from '@/modules/console/result-visualiser/component/histogram/PriceHistogramVisualiser.vue'
-import MissingDataIndicator from '@/modules/console/result-visualiser/component/MissingDataIndicator.vue'
 import VLoadingCircular from '@/modules/base/component/VLoadingCircular.vue'
 import { Response } from '@/modules/connection/model/data/Response'
+import VMissingDataIndicator from '@/modules/base/component/VMissingDataIndicator.vue'
 
 const toaster: Toaster = useToaster()
 const { t } = useI18n()
@@ -230,24 +230,24 @@ defineExpose<{
             :price-histogram-result="resultForVisualiser"
         />
 
-        <MissingDataIndicator
+        <VMissingDataIndicator
             v-else-if="queries.length == 0"
             icon="mdi-text-search"
             :title="t('resultVisualizer.visualiser.placeholder.noQueries')"
         />
-        <MissingDataIndicator
+        <VMissingDataIndicator
             v-else-if="selectedQuery == undefined"
             icon="mdi-database-search"
             :title="t('resultVisualizer.visualiser.placeholder.noSelectedQuery')"
         />
-        <MissingDataIndicator
+        <VMissingDataIndicator
             v-else-if="selectedVisualiserType == undefined"
             icon="mdi-format-list-bulleted-type"
             :title="t('resultVisualizer.visualiser.placeholder.noSelectedData')"
         />
-        <MissingDataIndicator v-else-if="selectedQueryResult == undefined || selectedQueryEntitySchema == undefined || resultForVisualiser == undefined">
+        <VMissingDataIndicator v-else-if="selectedQueryResult == undefined || selectedQueryEntitySchema == undefined || resultForVisualiser == undefined">
             <VLoadingCircular :size="64" />
-        </MissingDataIndicator>
+        </VMissingDataIndicator>
     </div>
 </template>
 

diff --git a/src/modules/console/result-visualiser/component/facet-summary/FacetSummaryVisualiser.vue b/src/modules/console/result-visualiser/component/facet-summary/FacetSummaryVisualiser.vue
@@ -13,9 +13,9 @@ import { EntitySchema } from '@/modules/connection/model/schema/EntitySchema'
 import { ReferenceSchema } from '@/modules/connection/model/schema/ReferenceSchema'
 import ReferenceFacetGroupStatisticsVisualiser
     from '@/modules/console/result-visualiser/component/facet-summary/ReferenceFacetGroupStatisticsVisualiser.vue'
-import MissingDataIndicator from '@/modules/console/result-visualiser/component/MissingDataIndicator.vue'
 import { List } from 'immutable'
 import { UnexpectedError } from '@/modules/base/exception/UnexpectedError'
+import VMissingDataIndicator from '@/modules/base/component/VMissingDataIndicator.vue'
 
 const toaster: Toaster = useToaster()
 const { t } = useI18n()
@@ -78,7 +78,7 @@ function getCountForReference(referenceSchema: ReferenceSchema, groupStatisticsR
         </VExpansionPanel>
     </VExpansionPanels>
 
-    <MissingDataIndicator
+    <VMissingDataIndicator
         v-else
         icon="mdi-text-search"
         :title="t('resultVisualizer.facetStatisticsVisualiser.placeholder.noGroups')"

diff --git a/src/modules/console/result-visualiser/component/hierarchy/HierarchyVisualiser.vue b/src/modules/console/result-visualiser/component/hierarchy/HierarchyVisualiser.vue
@@ -13,7 +13,7 @@ import { EntitySchema } from '@/modules/connection/model/schema/EntitySchema'
 import { ReferenceSchema } from '@/modules/connection/model/schema/ReferenceSchema'
 import NamedHierarchiesVisualiser
     from '@/modules/console/result-visualiser/component/hierarchy/NamedHierarchiesVisualiser.vue'
-import MissingDataIndicator from '@/modules/console/result-visualiser/component/MissingDataIndicator.vue'
+import VMissingDataIndicator from '@/modules/base/component/VMissingDataIndicator.vue'
 
 const toaster: Toaster = useToaster()
 const { t } = useI18n()
@@ -63,7 +63,7 @@ function getPanelKey(referenceSchema: ReferenceSchema | undefined): string {
         </VExpansionPanel>
     </VExpansionPanels>
 
-    <MissingDataIndicator
+    <VMissingDataIndicator
         v-else
         icon="mdi-text-search"
         :title="t('resultVisualizer.hierarchyVisualiser.placeholder.noHierarchies')"

diff --git a/src/modules/console/result-visualiser/component/histogram/AttributeHistogramsVisualiser.vue b/src/modules/console/result-visualiser/component/histogram/AttributeHistogramsVisualiser.vue
@@ -12,7 +12,7 @@ import { EntitySchema } from '@/modules/connection/model/schema/EntitySchema'
 import { AttributeSchema } from '@/modules/connection/model/schema/AttributeSchema'
 import { VisualisedHistogram } from '@/modules/console/result-visualiser/model/histogram/VisualisedHistogram'
 import HistogramVisualiser from '@/modules/console/result-visualiser/component/histogram/HistogramVisualiser.vue'
-import MissingDataIndicator from '@/modules/console/result-visualiser/component/MissingDataIndicator.vue'
+import VMissingDataIndicator from '@/modules/base/component/VMissingDataIndicator.vue'
 
 const toaster: Toaster = useToaster()
 const { t } = useI18n()
@@ -48,7 +48,7 @@ const histogramsByAttributes = computed<[AttributeSchema, VisualisedHistogram][]
         </VExpansionPanel>
     </VExpansionPanels>
 
-    <MissingDataIndicator
+    <VMissingDataIndicator
         v-else
         icon="mdi-text-search"
         :title="t('resultVisualizer.attributeHistogram.placeholder.noAttributeHistograms')"

diff --git a/src/modules/console/result-visualiser/component/histogram/PriceHistogramVisualiser.vue b/src/modules/console/result-visualiser/component/histogram/PriceHistogramVisualiser.vue
@@ -10,7 +10,7 @@ import { ResultVisualiserService } from '@/modules/console/result-visualiser/ser
 import { Result } from '@/modules/console/result-visualiser/model/Result'
 import { VisualisedHistogram } from '@/modules/console/result-visualiser/model/histogram/VisualisedHistogram'
 import HistogramVisualiser from '@/modules/console/result-visualiser/component/histogram/HistogramVisualiser.vue'
-import MissingDataIndicator from '@/modules/console/result-visualiser/component/MissingDataIndicator.vue'
+import VMissingDataIndicator from '@/modules/base/component/VMissingDataIndicator.vue'
 
 const toaster: Toaster = useToaster()
 const { t } = useI18n()
@@ -35,7 +35,7 @@ const histogram = computed<VisualisedHistogram | undefined>(() => {
 <template>
     <HistogramVisualiser v-if="histogram" :histogram="histogram" />
 
-    <MissingDataIndicator
+    <VMissingDataIndicator
         v-else
         icon="mdi-text-search"
         :title="t('resultVisualizer.priceHistogram.placeholder.noPriceHistograms')"

diff --git a/src/modules/i18n/en.json b/src/modules/i18n/en.json
@@ -1004,6 +1004,7 @@
       "button": {
         "reload": "Reload tasks"
       },
+      "noTasks": "No tasks are running",
       "task": {
         "state": {
           "queued": "queued",
@@ -1030,7 +1031,7 @@
           "title": "Task",
           "property": {
             "id": "ID",
-            "type": "Type",
+            "types": "Types",
             "name": "Name",
             "state": "State",
             "catalogName": "Catalog name",

diff --git a/src/modules/task-viewer/components/TaskDetailDialog.vue b/src/modules/task-viewer/components/TaskDetailDialog.vue
@@ -52,8 +52,9 @@ const properties = computed<Property[]>(() => {
         new PropertyValue(props.task.taskId.code)
     ))
     properties.push(new Property(
-        t('taskViewer.tasksVisualizer.task.detail.property.type'),
-        new PropertyValue(new KeywordValue(props.task.taskType))
+        t('taskViewer.tasksVisualizer.task.detail.property.types'),
+        props.task.taskTypes
+            .map(taskType => new PropertyValue(new KeywordValue(taskType)))
     ))
     properties.push(new Property(
         t('taskViewer.tasksVisualizer.task.detail.property.name'),

diff --git a/src/modules/task-viewer/components/TaskIcon.vue b/src/modules/task-viewer/components/TaskIcon.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
 }>()
 
 const taskIcon = computed<string>(() => {
-    const icon: string | undefined = taskTypeToIconMapping.get(props.task.taskType)
+    const icon: string | undefined = taskTypeToIconMapping.get(props.task.mainTaskType)
     if (icon != undefined) {
         return icon
     }
@@ -18,13 +18,15 @@ const taskIcon = computed<string>(() => {
 </script>
 
 <template>
-    <VIcon>
-        {{ taskIcon }}
+    <VTooltip>
+        <template #activator="{ props }">
+            <VIcon v-bind="props">{{ taskIcon }}</VIcon>
+        </template>
 
-        <VTooltip activator="parent">
-            {{ task.taskType }}
-        </VTooltip>
-    </VIcon>
+        <template #default>
+            {{ task.mainTaskType }}
+        </template>
+    </VTooltip>
 </template>
 
 <style lang="scss" scoped>

diff --git a/src/modules/task-viewer/components/TaskList.vue b/src/modules/task-viewer/components/TaskList.vue
@@ -13,6 +13,7 @@ import { useI18n } from 'vue-i18n'
 import { PaginatedList } from '@/modules/connection/model/PaginatedList'
 import TaskListItem from '@/modules/task-viewer/components/TaskListItem.vue'
 import VListItemDivider from '@/modules/base/component/VListItemDivider.vue'
+import VMissingDataIndicator from '@/modules/base/component/VMissingDataIndicator.vue'
 
 const taskViewerService: TaskViewerService = useTaskViewerService()
 const toaster: Toaster = useToaster()
@@ -128,7 +129,7 @@ defineExpose<{
 </script>
 
 <template>
-    <VList v-if="loadedTaskStatuses">
+    <VList v-if="loadedTaskStatuses && taskStatusesItems.length > 0">
         <VListSubheader v-if="subheader !== undefined && subheader.length > 0">
             {{ subheader }}
         </VListSubheader>
@@ -164,7 +165,14 @@ defineExpose<{
                 />
             </template>
         </VDataIterator>
+
     </VList>
+
+    <VMissingDataIndicator
+        v-else
+        icon="mdi-chart-gantt"
+        :title="t('taskViewer.tasksVisualizer.noTasks')"
+    />
 </template>
 
 <style lang="scss" scoped>

diff --git a/src/modules/task-viewer/components/TaskListItem.vue b/src/modules/task-viewer/components/TaskListItem.vue
@@ -69,6 +69,7 @@ const props = defineProps<{
     display: flex;
     gap: 1rem;
     align-items: center;
+    margin-left: 1rem;
 
     &__buttons {
         display: flex;

diff --git a/src/modules/task-viewer/components/TaskTitle.vue b/src/modules/task-viewer/components/TaskTitle.vue
@@ -34,27 +34,29 @@ onUnmounted(() => clearTimeout(taskDurationRefreshTimeoutId))
 </script>
 
 <template>
-    <div class="task-title">
+    <span class="task-title">
         <span>{{ task.taskName }}</span>
 
         <!-- not using chip group because of https://github.com/vuetifyjs/vuetify/issues/19678 -->
-        <div class="task-title__chips">
+        <span class="task-title__chips">
             <VChip :color="taskColor">
                 {{ t(`taskViewer.tasksVisualizer.task.state.${task.state}`) }}
             </VChip>
 
             <VChip v-if="taskDuration != undefined">
                 {{ taskDuration.toHuman() }}
             </VChip>
-        </div>
-    </div>
+        </span>
+    </span>
 </template>
 
 <style lang="scss" scoped>
 .task-title {
     display: flex;
     gap: 1rem;
     align-items: center;
+    flex-flow: row wrap;
+    max-height: 1.5rem;
 
     &__chips {
         display: flex;