feat(ui): increase button bar size

kestra-io · Feb 23, 2023 · 01df02c · 01df02c
1 parent 2708262
commit 01df02c
Show file tree

Hide file tree

Showing 18 changed files with 125 additions and 92 deletions.
diff --git a/ui/src/components/executions/ExecutionRoot.vue b/ui/src/components/executions/ExecutionRoot.vue
@@ -6,16 +6,18 @@
         <bottom-line v-if="canDelete || isAllowedTrigger || isAllowedEdit">
             <ul>
                 <li>
-                    <el-button :icon="Delete" type="danger" v-if="canDelete" @click="deleteExecution">
+                    <el-button :icon="Delete" type="danger" size="large" v-if="canDelete" @click="deleteExecution">
                         {{ $t('delete') }}
                     </el-button>
-
+                </li>
+                <li>
                     <template v-if="isAllowedTrigger">
-                        <trigger-flow :flow-id="$route.params.flowId" :namespace="$route.params.namespace" />
+                        <trigger-flow type="default" :flow-id="$route.params.flowId" :namespace="$route.params.namespace" />
                     </template>
-
+                </li>
+                <li>
                     <template v-if="isAllowedEdit">
-                        <el-button :icon="Pencil" @click="editFlow">
+                        <el-button :icon="Pencil" type="default" size="large" @click="editFlow">
                             {{ $t('edit flow') }}
                         </el-button>
                     </template>

diff --git a/ui/src/components/executions/Executions.vue b/ui/src/components/executions/Executions.vue
@@ -116,22 +116,20 @@
 
         <bottom-line v-if="executionsSelection.length !== 0 && (canUpdate || canDelete)">
             <ul>
-                <bottom-line-counter v-model="queryBulkAction" :selections="executionsSelection" :total="total" @update:model-value="selectAll()" />
-                <li v-if="canUpdate">
-                    <el-button :icon="Restart" type="success" class="bulk-button" @click="restartExecutions()">
-                        {{ $t('restart') }}
-                    </el-button>
-                </li>
-                <li v-if="canUpdate">
-                    <el-button :icon="StopCircleOutline" type="warning" class="bulk-button" @click="killExecutions()">
-                        {{ $t('kill') }}
-                    </el-button>
-                </li>
-                <li v-if="canDelete">
-                    <el-button :icon="Delete" type="danger" class="bulk-button" @click="deleteExecutions()">
-                        {{ $t('delete') }}
-                    </el-button>
+                <li>
+                    <bottom-line-counter v-model="queryBulkAction" :selections="executionsSelection" :total="total" @update:model-value="selectAll()">
+                        <el-button v-if="canUpdate" :icon="Restart" size="large" @click="restartExecutions()">
+                            {{ $t('restart') }}
+                        </el-button>
+                        <el-button v-if="canUpdate" :icon="StopCircleOutline" size="large" @click="killExecutions()">
+                            {{ $t('kill') }}
+                        </el-button>
+                        <el-button v-if="canDelete" :icon="Delete" size="large" @click="deleteExecutions()">
+                            {{ $t('delete') }}
+                        </el-button>
+                    </bottom-line-counter>
                 </li>
+
                 <li class="spacer" />
             </ul>
         </bottom-line>
@@ -293,6 +291,7 @@
             durationFrom(item) {
                 return (+new Date() - new Date(item.state.startDate).getTime()) / 1000
             },
+
             restartExecutions() {
                 this.$toast().confirm(
                     this.$t("bulk restart", {"executionCount": this.queryBulkAction ? this.total : this.executionsSelection.length}),
@@ -301,8 +300,8 @@
                             return this.$store
                                 .dispatch("execution/queryRestartExecution", this.loadQuery({
                                     sort: this.$route.query.sort || "state.startDate:desc",
-                                    state: this.$route.query.state ? [this.$route.query.state] : this.statuses
-                                }, false))
+                                    state: this.$route.query.state ? [this.$route.query.state] : this.statuses,
+                                }))
                                 .then(r => {
                                     this.$toast().success(this.$t("executions restarted", {executionCount: r.data.count}));
                                     this.loadData();

diff --git a/ui/src/components/flows/FlowDependencies.vue b/ui/src/components/flows/FlowDependencies.vue
@@ -168,7 +168,7 @@
 
 <style lang="scss" scoped>
     .el-card {
-        height: calc(100vh - 360px);
+        height: calc(100vh - 300px);
         :deep(.el-card__body) {
             height: 100%;
         }

diff --git a/ui/src/components/flows/FlowEdit.vue b/ui/src/components/flows/FlowEdit.vue
@@ -4,25 +4,25 @@
         <bottom-line v-if="canSave || canDelete || canExecute">
             <ul>
                 <li>
-                    <el-button :icon="icon.Delete" type="danger" v-if="canDelete" @click="deleteFile">
+                    <el-button :icon="icon.Delete" type="danger" size="large" v-if="canDelete" @click="deleteFile">
                         {{ $t('delete') }}
                     </el-button>
                 </li>
 
                 <li>
                     <router-link v-if="flow" :to="{name: 'flows/create', query: {copy: true}}">
-                        <el-button :icon="icon.ContentCopy">
+                        <el-button :icon="icon.ContentCopy" size="large">
                             {{ $t('copy') }}
                         </el-button>
                     </router-link>
                 </li>
 
                 <li>
-                    <trigger-flow v-if="flow && canExecute" :disabled="flow.disabled" :flow-id="flow.id" :namespace="flow.namespace" />
+                    <trigger-flow v-if="flow && canExecute" :disabled="flow.disabled" :flow-id="flow.id" type="default" :namespace="flow.namespace" />
                 </li>
 
                 <li>
-                    <el-button :icon="icon.ContentSave" @click="save" v-if="canSave" type="primary">
+                    <el-button :icon="icon.ContentSave" size="large" @click="save" v-if="canSave" type="info">
                         {{ $t('save') }}
                     </el-button>
                 </li>

diff --git a/ui/src/components/flows/FlowRoot.vue b/ui/src/components/flows/FlowRoot.vue
@@ -1,9 +1,16 @@
 <template>
     <div>
         <div v-if="ready">
-            <tabs route-name="flows/update" ref="currentTab" :tabs="tabs" @hook:mounted="mounted = true" />
-            <bottom-line v-if="mounted && displayBottomLine()">
+            <tabs route-name="flows/update" ref="currentTab" :tabs="tabs" />
+            <bottom-line v-if="displayBottomLine()">
                 <ul>
+                    <li>
+                        <template v-if="isAllowedEdit">
+                            <el-button :icon="Pencil" size="large" @click="editFlow">
+                                {{ $t('edit flow') }}
+                            </el-button>
+                        </template>
+                    </li>
                     <li>
                         <trigger-flow v-if="flow" :disabled="flow.disabled" :flow-id="flow.id" :namespace="flow.namespace" />
                     </li>
@@ -12,6 +19,12 @@
         </div>
     </div>
 </template>
+
+
+<script setup>
+    import Pencil from "vue-material-design-icons/Pencil.vue";
+</script>
+
 <script>
     import Topology from "./Topology.vue";
     import Schedule from "./Schedule.vue";
@@ -40,7 +53,6 @@
         data() {
             return {
                 tabIndex: undefined,
-                mounted: false,
                 previousFlow: undefined,
                 depedenciesCount: undefined
             };
@@ -104,14 +116,6 @@
                     });
                 }
 
-                if (this.user && this.flow && this.user.isAllowed(permission.EXECUTION, action.CREATE, this.flow.namespace)) {
-                    tabs.push({
-                        name: "execute",
-                        component: FlowRun,
-                        title: this.$t("launch execution")
-                    });
-                }
-
                 if (this.user && this.flow && this.user.isAllowed(permission.FLOW, action.READ, this.flow.namespace)) {
                     tabs.push({
                         name: "source",
@@ -161,7 +165,14 @@
             displayBottomLine() {
                 const name = this.activeTabName();
                 return name != null &&  this.canExecute && name !== "execute" && name !== "source" && name !== "schedule";
-            }
+            },
+            editFlow() {
+                this.$router.push({name:"flows/update", params: {
+                    namespace: this.flow.namespace,
+                    id: this.flow.id,
+                    tab: "source"
+                }})
+            },
         },
         computed: {
             ...mapState("flow", ["flow"]),
@@ -194,6 +205,9 @@
             ready() {
                 return this.flow !== undefined;
             },
+            isAllowedEdit() {
+                return this.user.isAllowed(permission.FLOW, action.UPDATE, this.flow.namespace);
+            },
             canExecute() {
                 return this.user.isAllowed(permission.EXECUTION, action.CREATE, this.flow.namespace)
             },

diff --git a/ui/src/components/flows/Flows.vue b/ui/src/components/flows/Flows.vue
@@ -105,16 +105,15 @@
         <bottom-line>
             <ul>
                 <ul v-if="flowsSelection.length !== 0 && canRead">
-                    <bottom-line-counter v-model="queryBulkAction" :selections="flowsSelection" :total="total" @update:model-value="selectAll()" />
-                    <li v-if="canRead">
-                        <el-button :icon="Download" type="info" class="bulk-button" @click="exportFlows()">
+                    <bottom-line-counter v-model="queryBulkAction" :selections="flowsSelection" :total="total" @update:model-value="selectAll()">
+                        <el-button v-if="canRead" :icon="Download" size="large" @click="exportFlows()">
                             {{ $t('export') }}
                         </el-button>
-                    </li>
+                    </bottom-line-counter>
                 </ul>
                 <li class="spacer" />
                 <li>
-                    <div class="el-input el-input-file custom-upload">
+                    <div class="el-input el-input-file el-input--large custom-upload">
                         <div class="el-input__wrapper">
                             <label for="importFlows">
                                 <Upload />
@@ -132,14 +131,14 @@
                 </li>
                 <li>
                     <router-link :to="{name: 'flows/search'}">
-                        <el-button :icon="TextBoxSearch">
+                        <el-button :icon="TextBoxSearch" size="large">
                             {{ $t('source search') }}
                         </el-button>
                     </router-link>
                 </li>
                 <li v-if="user && user.hasAnyAction(permission.FLOW, action.CREATE)">
                     <router-link :to="{name: 'flows/create'}">
-                        <el-button :icon="Plus" type="primary">
+                        <el-button :icon="Plus" type="info" size="large">
                             {{ $t('create') }}
                         </el-button>
                     </router-link>

diff --git a/ui/src/components/flows/Schedule.vue b/ui/src/components/flows/Schedule.vue
@@ -16,15 +16,12 @@
         <bottom-line v-if="canSave">
             <ul>
                 <li>
-                    <el-button
-                        @click="addSchedule"
-                        v-if="canSave"
-                    >
+                    <el-button @click="addSchedule" v-if="canSave" size="large">
                         <plus />
                         {{ $t("add schedule") }}
                     </el-button>
 
-                    <el-button @click="save" v-if="canSave" type="primary">
+                    <el-button @click="save" v-if="canSave" type="info" size="large">
                         <content-save />
                         <span>{{ $t("save") }}</span>
                     </el-button>

diff --git a/ui/src/components/flows/TriggerFlow.vue b/ui/src/components/flows/TriggerFlow.vue
@@ -1,9 +1,12 @@
 <template>
     <div class="trigger-flow-wrapper">
-        <el-button :icon="icon.Flash" :disabled="disabled" @click="onClick">
+        <el-button :icon="icon.Flash" :disabled="disabled" size="large" :type="type" @click="onClick">
             {{ $t('New execution') }}
         </el-button>
-        <el-dialog v-if="isOpen" v-model="isOpen" :title="$t('execute the flow')" destroy-on-close :append-to-body="true">
+        <el-dialog v-if="isOpen" v-model="isOpen" destroy-on-close :append-to-body="true">
+            <template #title>
+                <span v-html="$t('execute the flow', {id: flowId})"/>
+            </template>
             <flow-run @execution-trigger="closeModal" :redirect="true" />
         </el-dialog>
     </div>
@@ -34,6 +37,10 @@
                 type: Boolean,
                 default: false
             },
+            type: {
+                type: String,
+                default: "info"
+            },
         },
         data() {
             return {

diff --git a/ui/src/components/graph/Topology.vue b/ui/src/components/graph/Topology.vue
@@ -272,7 +272,7 @@
 
 <style lang="scss" scoped>
     .el-card {
-        height: calc(100vh - 360px);
+        height: calc(100vh - 300px);
         :deep(.el-card__body) {
             height: 100%;
         }

diff --git a/ui/src/components/inputs/Editor.vue b/ui/src/components/inputs/Editor.vue
@@ -288,11 +288,11 @@
         .editor-container {
             display: flex;
             &.full-height {
-                height: calc(100vh - 335px);
+                height: calc(100vh - 361px);
             }
 
             &.diff {
-                height: calc(100vh - 380px);
+                height: calc(100vh - 435px);
             }
 
             &.single-line {

diff --git a/ui/src/components/layout/BottomLine.vue b/ui/src/components/layout/BottomLine.vue
@@ -16,12 +16,12 @@
         border-top: 1px solid var(--bs-border-color);
         z-index: 90;
         background-color: var(--bs-white);
-        padding: 0.5rem 1rem;
+        padding: var(--spacer);
         text-align: right;
         transition: margin-left ease 0.2s;
 
         html.dark & {
-            background-color: var(--bs-gray-100-darken-3);
+            background-color: var(--bs-gray-100-darken-5);
         }
 
         button {

diff --git a/ui/src/components/layout/BottomLineCounter.vue b/ui/src/components/layout/BottomLineCounter.vue
@@ -1,20 +1,12 @@
 <template>
-    <li class="left">
-        <p>
-            <span
-                class="counter"
-                v-html="$t('selection.selected', {count: modelValue ? total : selections.length})">
-            </span>
+    <el-button-group>
+        <el-button size="large" @click="all()">
+            <span v-html="$t('selection.selected', {count: modelValue ? total : selections.length})" />
 
-            <el-link
-                type="info"
-                v-if="selections.length<total && !modelValue"
-                @click="all()"
-            >
-                {{ $t('selection.all', {count: total}) }}
-            </el-link>
-        </p>
-    </li>
+            <span class="counter" v-if="selections.length<total && !modelValue" v-html="$t('selection.all', {count: total})" />
+        </el-button>
+        <slot />
+    </el-button-group>
 </template>
 <script>
     export default {
@@ -32,9 +24,14 @@
     }
 </script>
 <style lang="scss" scoped>
+    span {
+        color: var(--bs-tertiary);
+    }
+
     span.counter {
-        border-left: 6px solid var(--el-color-warning);
+        border-left: 1px solid var(--bs-gray-100-darken-5);
         padding-left: 0.5rem;
+        margin-left: 5px;
         margin-right: 5px;
     }
 </style>
diff --git a/ui/src/components/templates/TemplateEdit.vue b/ui/src/components/templates/TemplateEdit.vue
@@ -4,12 +4,12 @@
         <bottom-line v-if="canSave || canDelete">
             <ul>
                 <li>
-                    <el-button :icon="Delete" type="danger" v-if="canDelete" @click="deleteFile">
+                    <el-button :icon="Delete" type="danger" size="large" v-if="canDelete" @click="deleteFile">
                         {{ $t('delete') }}
                     </el-button>
 
                     <template v-if="canSave">
-                        <el-button :icon="ContentSave" @click="save" type="primary">
+                        <el-button :icon="ContentSave" @click="save" type="info" size="large">
                             {{ $t('save') }}
                         </el-button>
                     </template>