feat(ui): add edit on logs tabs

close #754
kestra-io · Oct 4, 2022 · 3b7e8a5 · 3b7e8a5
1 parent 1dac656
commit 3b7e8a5
Show file tree

Hide file tree

Showing 10 changed files with 201 additions and 83 deletions.
diff --git a/ui/src/components/executions/ChangeStatus.vue b/ui/src/components/executions/ChangeStatus.vue
@@ -1,12 +1,15 @@
 <template>
-    <b-button
+    <component
+        :is="component"
         @click="$bvModal.show(uuid)"
         :disabled="!enabled"
     >
         <kicon :tooltip="$t('change status')">
             <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
@@ -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
@@ -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
@@ -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
@@ -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 {