From 3b7e8a5da3b338f6f504c1341644b5979e926a62 Mon Sep 17 00:00:00 2001
From: Ludovic DEHON <tchiot.ludo@gmail.com>
Date: Tue, 4 Oct 2022 23:27:26 +0200
Subject: [PATCH] feat(ui): add edit on logs tabs

close #754
---
 ui/src/components/executions/ChangeStatus.vue | 11 ++-
 ui/src/components/executions/Restart.vue      | 15 ++-
 ui/src/components/flows/SubFlowLink.vue       | 24 ++---
 ui/src/components/graph/TreeNode.vue          | 27 ++----
 ui/src/components/logs/LogList.vue            | 60 ++++++++----
 ui/src/override/components/flows/TaskEdit.vue | 93 +++++++++++++------
 ui/src/stores/flow.js                         | 11 +++
 ui/src/translations.json                      |  6 +-
 .../webserver/controllers/FlowController.java | 20 ++++
 .../controllers/FlowControllerTest.java       | 17 ++++
 10 files changed, 201 insertions(+), 83 deletions(-)

diff --git a/ui/src/components/executions/ChangeStatus.vue b/ui/src/components/executions/ChangeStatus.vue
index 04f812268c..44e8637393 100644
--- a/ui/src/components/executions/ChangeStatus.vue
+++ b/ui/src/components/executions/ChangeStatus.vue
@@ -1,5 +1,6 @@
 <template>
-    <b-button
+    <component
+        :is="component"
         @click="$bvModal.show(uuid)"
         :disabled="!enabled"
     >
@@ -7,6 +8,8 @@
             <state-machine />
         </kicon>
 
+        <span v-if="component !== 'b-button'">{{ $t('change status') }}</span>
+
         <b-modal v-if="enabled" :id="uuid">
             <template #modal-header>
                 <h5>{{ $t("confirmation") }}</h5>
@@ -59,7 +62,7 @@
                 </b-button>
             </template>
         </b-modal>
-    </b-button>
+    </component>
 </template>
 <script>
     import StateMachine from "vue-material-design-icons/StateMachine";
@@ -74,6 +77,10 @@
     export default {
         components: {StateMachine, Status, Kicon},
         props: {
+            component: {
+                type: String,
+                default: "b-button"
+            },
             execution: {
                 type: Object,
                 required: true
diff --git a/ui/src/components/executions/Restart.vue b/ui/src/components/executions/Restart.vue
index b25439f59f..6009b9d17a 100644
--- a/ui/src/components/executions/Restart.vue
+++ b/ui/src/components/executions/Restart.vue
@@ -1,5 +1,6 @@
 <template>
-    <b-button
+    <component
+        :is="component"
         @click="$bvModal.show(uuid)"
         v-if="isReplay || enabled"
         :disabled="!enabled"
@@ -11,6 +12,8 @@
             {{ (isReplay ? '' : $t(replayOrRestart)) }}
         </kicon>
 
+        <span v-if="component !== 'b-button'">{{ $t(replayOrRestart) }}</span>
+
         <b-modal v-if="enabled" :id="uuid" @show="loadRevision">
             <template #modal-header>
                 <h5>{{ $t("confirmation") }}</h5>
@@ -36,7 +39,7 @@
                 </b-button>
             </template>
         </b-modal>
-    </b-button>
+    </component>
 </template>
 <script>
     import RestartIcon from "vue-material-design-icons/Restart";
@@ -51,10 +54,18 @@
     export default {
         components: {RestartIcon, PlayBoxMultiple, Kicon},
         props: {
+            component: {
+                type: String,
+                default: "b-button"
+            },
             isReplay: {
                 type: Boolean,
                 default: false
             },
+            isButton: {
+                type: Boolean,
+                default: true
+            },
             execution: {
                 type: Object,
                 required: true
diff --git a/ui/src/components/flows/SubFlowLink.vue b/ui/src/components/flows/SubFlowLink.vue
index 54260a2969..cec390aebf 100644
--- a/ui/src/components/flows/SubFlowLink.vue
+++ b/ui/src/components/flows/SubFlowLink.vue
@@ -1,10 +1,8 @@
 <template>
-    <b-button
-        @click="click"
-        class="node-action"
-    >
-        <axis-y-arrow :title="$t('link to sub flow')" />
-    </b-button>
+    <component :is="component" @click="click" class="node-action">
+        <axis-y-arrow :title="$t('sub flow')" />
+        <span v-if="component !== 'b-button'">{{ $t('sub flow') }}</span>
+    </component>
 </template>
 <script>
     import AxisYArrow from "vue-material-design-icons/AxisYArrow";
@@ -14,24 +12,28 @@
             AxisYArrow
         },
         props: {
+            component: {
+                type: String,
+                default: "b-button"
+            },
             executionId: {
-                type :String,
+                type: String,
                 default: undefined
             },
             namespace: {
-                type :String,
+                type: String,
                 default: undefined
             },
             flowId: {
-                type :String,
+                type: String,
                 default: undefined
             },
             tabFlow: {
-                type :String,
+                type: String,
                 default: "overview"
             },
             tabExecution: {
-                type :String,
+                type: String,
                 default: "topology"
             }
         },
diff --git a/ui/src/components/graph/TreeNode.vue b/ui/src/components/graph/TreeNode.vue
index dceae73648..bd4cf4a472 100644
--- a/ui/src/components/graph/TreeNode.vue
+++ b/ui/src/components/graph/TreeNode.vue
@@ -54,25 +54,18 @@
                         </kicon>
                     </b-button>
 
-                    <b-button
+                    <task-edit
                         class="node-action"
-                        size="sm"
-                        v-b-modal="`modal-source-${hash}`"
-                    >
-                        <kicon :tooltip="$t('show task source')">
-                            <code-tags />
-                        </kicon>
-                    </b-button>
+                        :modal-id="`modal-source-${hash}`"
+                        :task="task"
+                        :flow-id="flowId"
+                        :namespace="namespace"
+                    />
                 </b-btn-group>
             </div>
         </div>
 
-        <task-edit
-            :modal-id="`modal-source-${hash}`"
-            :task="task"
-            :flow-id="flowId"
-            :namespace="namespace"
-        />
+
 
         <b-modal
             :id="`modal-logs-${task.id}`"
@@ -103,8 +96,6 @@
     </div>
 </template>
 <script>
-    import CodeTags from "vue-material-design-icons/CodeTags";
-    import TextBoxSearch from "vue-material-design-icons/TextBoxSearch";
 
     import {mapState} from "vuex";
     import Status from "../Status";
@@ -117,12 +108,12 @@
     import Kicon from "../Kicon"
     import TaskEdit from "override/components/flows/TaskEdit.vue";
     import SubFlowLink from "../flows/SubFlowLink"
+    import TextBoxSearch from "vue-material-design-icons/TextBoxSearch";
 
     export default {
         components: {
             MarkdownTooltip,
             Status,
-            CodeTags,
             TextBoxSearch,
             LogList,
             LogLevelSelector,
@@ -321,7 +312,7 @@
                 white-space: nowrap;
             }
 
-            .node-action {
+            ::v-deep .node-action {
                 flex-shrink: 2;
                 padding-top: 18px;
                 padding-right: 18px;
diff --git a/ui/src/components/logs/LogList.vue b/ui/src/components/logs/LogList.vue
index 12e0263cd8..bc22de4055 100644
--- a/ui/src/components/logs/LogList.vue
+++ b/ui/src/components/logs/LogList.vue
@@ -53,34 +53,36 @@
                                     />
                                 </div>
 
-                                <b-button-group>
+                                <b-dropdown right no-caret>
+                                    <template #button-content>
+                                        <DotsVertical title="" />
+                                    </template>
+
                                     <sub-flow-link
                                         v-if="currentTaskRun.outputs && currentTaskRun.outputs.executionId"
+                                        component="b-dropdown-item"
                                         tab-execution="gantt"
                                         :execution-id="currentTaskRun.outputs.executionId"
                                     />
 
-                                    <b-button
+                                    <b-dropdown-item
                                         :disabled="!(attempt.metrics && attempt.metrics.length > 0) "
-                                        @click="
-                                            toggleShowMetric(currentTaskRun, index)
-                                        "
+                                        @click="toggleShowMetric(currentTaskRun, index)"
                                     >
-                                        <kicon :tooltip="$t('toggle metrics')">
-                                            <chart-areaspline />
-                                        </kicon>
-                                    </b-button>
+                                        <chart-areaspline title="" />
+                                        <span>{{ $t('metrics') }}</span>
+                                    </b-dropdown-item>
 
-                                    <b-button
+                                    <b-dropdown-item
                                         :disabled="!currentTaskRun.outputs || currentTaskRun.outputs.length ===0"
                                         @click="toggleShowOutput(currentTaskRun)"
                                     >
-                                        <kicon :tooltip="$t('toggle output')">
-                                            <location-exit />
-                                        </kicon>
-                                    </b-button>
+                                        <location-exit title="" />
+                                        <span>{{ $t('outputs') }}</span>
+                                    </b-dropdown-item>
 
                                     <restart
+                                        component="b-dropdown-item"
                                         :key="`restart-${index}-${attempt.state.startDate}`"
                                         :is-replay="true"
                                         :execution="execution"
@@ -90,13 +92,21 @@
                                     />
 
                                     <change-status
+                                        component="b-dropdown-item"
                                         :key="`change-status-${index}-${attempt.state.startDate}`"
                                         :execution="execution"
                                         :task-run="currentTaskRun"
                                         :attempt-index="index"
                                         @follow="forwardEvent('follow', $event)"
                                     />
-                                </b-button-group>
+
+                                    <task-edit
+                                        component="b-dropdown-item"
+                                        :task-id="currentTaskRun.taskId"
+                                        :flow-id="execution.flowId"
+                                        :namespace="execution.namespace"
+                                    />
+                                </b-dropdown>
                             </div>
                         </div>
 
@@ -148,10 +158,11 @@
     import Clock from "vue-material-design-icons/Clock";
     import LocationExit from "vue-material-design-icons/LocationExit";
     import ChartAreaspline from "vue-material-design-icons/ChartAreaspline";
+    import DotsVertical from "vue-material-design-icons/DotsVertical.vue";
     import State from "../../utils/state";
     import Status from "../Status";
     import SubFlowLink from "../flows/SubFlowLink"
-    import Kicon from "../Kicon"
+    import TaskEdit from "override/components/flows/TaskEdit.vue";
     import Duration from "../layout/Duration";
 
     export default {
@@ -164,9 +175,10 @@
             Vars,
             Metrics,
             ChartAreaspline,
+            DotsVertical,
             Status,
             SubFlowLink,
-            Kicon,
+            TaskEdit,
             Duration
         },
         props: {
@@ -365,9 +377,21 @@
             }
         }
 
-        button {
+        ::v-deep button.btn {
             border-radius: 0 !important;
         }
+
+        ::v-deep {
+
+            .dropdown-menu {
+                .dropdown-item {
+                    span.material-design-icon {
+                        width: $font-size-base * 2;
+                    }
+                }
+            }
+
+        }
     }
 
     .attempt-wrapper {
diff --git a/ui/src/override/components/flows/TaskEdit.vue b/ui/src/override/components/flows/TaskEdit.vue
index 6beaed2a61..c7c33083e9 100644
--- a/ui/src/override/components/flows/TaskEdit.vue
+++ b/ui/src/override/components/flows/TaskEdit.vue
@@ -1,33 +1,48 @@
 <template>
-    <b-modal
-        :id="modalId"
-        :title="`Task ${task.id}`"
-        hide-backdrop
-        modal-class="right"
-        size="xl"
-        @shown="onShow"
+    <component
+        :is="component"
+        v-b-modal="`modal-source-${uuid}`"
     >
-        <template #modal-footer>
-            <b-button @click="saveTask" v-if="canSave" variant="primary">
-                <content-save />&nbsp;
-                <span>{{ $t('save') }}</span>
-            </b-button>
-        </template>
+        <kicon :tooltip="$t('show task source')">
+            <code-tags />
+        </kicon>
 
-        <editor
-            ref="editor"
-            @onSave="saveTask"
-            v-model="taskYaml"
-            :full-height="false"
-            :navbar="false"
-            lang="yaml"
-        />
-    </b-modal>
+        <span v-if="component !== 'b-button'">{{ $t('show task source') }}</span>
+
+        <b-modal
+            :id="`modal-source-${uuid}`"
+            :title="`Task ${taskId || task.id}`"
+            hide-backdrop
+            modal-class="right"
+            size="xl"
+            @show="onShow"
+            @shown="onShown"
+        >
+            <template #modal-footer>
+                <b-button @click="saveTask" v-if="canSave" variant="primary">
+                    <content-save />&nbsp;
+                    <span>{{ $t('save') }}</span>
+                </b-button>
+            </template>
+
+            <editor
+                ref="editor"
+                v-if="taskYaml"
+                @onSave="saveTask"
+                v-model="taskYaml"
+                :full-height="false"
+                :navbar="false"
+                lang="yaml"
+            />
+        </b-modal>
+    </component>
 </template>
 <script>
     import YamlUtils from "../../../utils/yamlUtils";
     import Editor from "../../../components/inputs/Editor";
     import ContentSave from "vue-material-design-icons/ContentSave";
+    import Kicon from "../../../components/Kicon"
+    import CodeTags from "vue-material-design-icons/CodeTags";
     import {canSaveFlowTemplate} from "../../../utils/flowTemplate";
     import {mapState} from "vuex";
 
@@ -35,26 +50,35 @@
         components: {
             Editor,
             ContentSave,
+            Kicon,
+            CodeTags,
         },
         props: {
+            component: {
+                type: String,
+                default: "b-button"
+            },
             task: {
                 type: Object,
-                required: true
+                default: undefined
             },
-            flowId: {
+            taskId: {
                 type: String,
-                required: true
+                default: undefined
             },
-            namespace: {
+            flowId: {
                 type: String,
                 required: true
             },
-            modalId: {
+            namespace: {
                 type: String,
                 required: true
             },
         },
         methods: {
+            load() {
+                return this.$store.dispatch("flow/loadTask", {namespace: this.namespace, id: this.flowId, taskId: this.taskId});
+            },
             saveTask() {
                 let task;
                 try {
@@ -81,6 +105,16 @@
                     })
             },
             onShow() {
+                if (this.taskId) {
+                    this.load()
+                        .then(value => {
+                            this.taskYaml = YamlUtils.stringify(value);
+                        })
+                } else {
+                    this.taskYaml = YamlUtils.stringify(this.task);
+                }
+            },
+            onShown() {
                 if (this.$refs.editor) {
                     this.$refs.editor.onResize();
                 }
@@ -92,10 +126,13 @@
             };
         },
         created() {
-            this.taskYaml = YamlUtils.stringify(this.task);
+
         },
         computed: {
             ...mapState("auth", ["user"]),
+            uuid() {
+                return "source-" + this.namespace + "-" + this.flowId + "-" + (this.taskId || this.task.id);
+            },
             canSave() {
                 return canSaveFlowTemplate(true, this.user, {namespace:this.namespace}, "flow");
             }
diff --git a/ui/src/stores/flow.js b/ui/src/stores/flow.js
index 6331fd622e..c847db727b 100644
--- a/ui/src/stores/flow.js
+++ b/ui/src/stores/flow.js
@@ -5,6 +5,7 @@ export default {
     state: {
         flows: undefined,
         flow: undefined,
+        task: undefined,
         search: undefined,
         total: 0,
         flowGraph: undefined,
@@ -49,6 +50,13 @@ export default {
                 return response.data;
             })
         },
+        loadTask({commit}, options) {
+            return Vue.axios.get(`/api/v1/flows/${options.namespace}/${options.id}/tasks/${options.taskId}`).then(response => {
+                commit("setTask", response.data)
+
+                return response.data;
+            })
+        },
         saveFlow({commit, dispatch}, options) {
             return Vue.axios.put(`/api/v1/flows/${options.flow.namespace}/${options.flow.id}`, options.flow)
                 .then(response => {
@@ -120,6 +128,9 @@ export default {
             state.flow = flow;
             state.flowGraph = undefined
         },
+        setTask(state, task) {
+            state.task = task;
+        },
         setTrigger(state, {index, trigger}) {
             let flow = state.flow;
 
diff --git a/ui/src/translations.json b/ui/src/translations.json
index 0aea421632..cffe40a5f4 100644
--- a/ui/src/translations.json
+++ b/ui/src/translations.json
@@ -135,7 +135,6 @@
     "killed done": "Execution is queued for killing",
     "toggle output": "Toggle outputs",
     "metrics": "Metrics",
-    "toggle metrics": "Toggle metrics",
     "no data current task": "No data available for current task",
     "outputs": "Outputs",
     "output": "Output",
@@ -215,7 +214,7 @@
     "Unfold content lines": "Unfold multiline strings",
     "Max displayable": "Max displayable",
     "Total": "Total",
-    "link to sub flow": "Go to sub flow",
+    "sub flow": "Sub-flow",
     "New execution": "New execution",
     "execute the flow": "Trigger the flow",
     "execute flow now ?": "Do you want to execute this flow ?",
@@ -377,7 +376,6 @@
     "killed done": "L'exécution est en attente d'arrêt",
     "toggle output": "Voir les sorties",
     "metrics": "Mesures",
-    "toggle metrics": "Voir les mesures",
     "no data current task": "Aucune données pour cette tache",
     "outputs": "Sorties",
     "output": "Sortie",
@@ -458,7 +456,7 @@
     "Unfold content lines": "Déplier les multilignes",
     "Max displayable": "Max affichables",
     "Total": "Total",
-    "link to sub flow": "Lien vers le sous flow",
+    "sub flow": "Sous-flow",
     "New execution": "Nouvelle execution",
     "execute the flow": "Créer une exécution",
     "execute flow now ?": "Voulez-vous exécuter ce flow ?",
diff --git a/webserver/src/main/java/io/kestra/webserver/controllers/FlowController.java b/webserver/src/main/java/io/kestra/webserver/controllers/FlowController.java
index 0b439d0651..0ca3532a8b 100644
--- a/webserver/src/main/java/io/kestra/webserver/controllers/FlowController.java
+++ b/webserver/src/main/java/io/kestra/webserver/controllers/FlowController.java
@@ -75,6 +75,26 @@ public List<Flow> revisions(
         return flowRepository.findRevisions(namespace, id);
     }
 
+    @ExecuteOn(TaskExecutors.IO)
+    @Get(uri = "{namespace}/{id}/tasks/{taskId}", produces = MediaType.TEXT_JSON)
+    @Operation(tags = {"Flows"}, summary = "Get a flow task")
+    public Task flowTask(
+        @Parameter(description = "The flow namespace") String namespace,
+        @Parameter(description = "The flow id") String id,
+        @Parameter(description = "The task id") String taskId
+    ) {
+        return flowRepository
+            .findById(namespace, id)
+            .flatMap(flow -> {
+                try {
+                    return Optional.of(flow.findTaskByTaskId(taskId));
+                } catch (InternalException e) {
+                    return Optional.empty();
+                }
+            })
+            .orElse(null);
+    }
+
     @ExecuteOn(TaskExecutors.IO)
     @Get(uri = "/search", produces = MediaType.TEXT_JSON)
     @Operation(tags = {"Flows"}, summary = "Search for flows")
diff --git a/webserver/src/test/java/io/kestra/webserver/controllers/FlowControllerTest.java b/webserver/src/test/java/io/kestra/webserver/controllers/FlowControllerTest.java
index c8c0c508e0..bfae99b9eb 100644
--- a/webserver/src/test/java/io/kestra/webserver/controllers/FlowControllerTest.java
+++ b/webserver/src/test/java/io/kestra/webserver/controllers/FlowControllerTest.java
@@ -47,6 +47,23 @@ void id() {
         assertThat(result.getTasks().size(), is(5));
     }
 
+    @Test
+    void task() {
+        Task result = client.toBlocking().retrieve(HttpRequest.GET("/api/v1/flows/io.kestra.tests/full/tasks/t5-t1"), Task.class);
+
+        assertThat(result.getId(), is("t5-t1"));
+        assertThat(result.getType(), is("io.kestra.core.tasks.scripts.Bash"));
+    }
+
+    @Test
+    void taskNotFound() {
+        HttpClientResponseException e = assertThrows(HttpClientResponseException.class, () -> {
+            client.toBlocking().retrieve(HttpRequest.GET("/api/v1/flows/io.kestra.tests/full/tasks/notFound"));
+        });
+
+        assertThat(e.getStatus(), is(HttpStatus.NOT_FOUND));
+    }
+
     @Test
     void graph() {
         FlowGraph result = client.toBlocking().retrieve(HttpRequest.GET("/api/v1/flows/io.kestra" +