Skip to content

Commit

Permalink
Merge branch 'develop' into refactor/migrate-plugin-core-log-package
Browse files Browse the repository at this point in the history
  • Loading branch information
mgabelle authored Jan 23, 2025
2 parents 2761ab3 + 2045635 commit 7bd394b
Show file tree
Hide file tree
Showing 36 changed files with 624 additions and 682 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@
@Getter
@NoArgsConstructor
@Schema(
title = "This task's `spec` property allows you to fully template all task properties using Kestra's Pebble templating. This way, all task properties and their values can be dynamically rendered based on your custom inputs, variables, and outputs from other tasks!"
title = "Templatize a task.",
description = "This task's `spec` property allows you to fully templatize all task properties using Kestra's Pebble templating. This way, all task properties and their values can be dynamically rendered based on your custom inputs, variables, and outputs from other tasks."
)
@Plugin(
examples = {
Expand Down
518 changes: 100 additions & 418 deletions ui/package-lock.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
},
"dependencies": {
"@js-joda/core": "^5.6.3",
"@kestra-io/ui-libs": "^0.0.113",
"@kestra-io/ui-libs": "^0.0.114",
"@vue-flow/background": "^1.3.2",
"@vue-flow/controls": "^1.1.2",
"@vue-flow/core": "^1.42.1",
Expand Down
18 changes: 16 additions & 2 deletions ui/src/components/Tabs.vue
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@
this.setActiveName();
},
methods: {
...mapMutations("editor", ["changeExplorerWidth"]),
...mapMutations("editor", ["changeExplorerWidth", "closeExplorer"]),
dragSidebar(e){
const SELF = this;
Expand Down Expand Up @@ -170,7 +170,21 @@
.filter(tab => (this.embedActiveTab ?? this.$route.params.tab) === tab.name)[0] || this.tabs[0];
},
isEditorActiveTab() {
return this.activeTab.name === "edit";
const TAB = this.activeTab.name;
const ROUTE = this.$route.name;
if (["flows/update", "flows/create"].includes(ROUTE)) {
return TAB === "edit";
} else if (
["namespaces/update", "namespaces/create"].includes(ROUTE)
) {
if (TAB === "files") return true;
this.closeExplorer();
return false;
}
return false;
},
isNamespaceEditor(){
return this.activeTab?.props?.isNamespace === true;
Expand Down
24 changes: 23 additions & 1 deletion ui/src/components/code/components/collapse/Collapse.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
:key="elementIndex"
:section="item.title"
:element
@remove-element="removeElement(item.title, elementIndex)"
/>
</template>

Expand All @@ -26,18 +27,21 @@
</template>

<script setup lang="ts">
import {PropType, ref} from "vue";
import {nextTick, PropType, ref} from "vue";
import {CollapseItem} from "../../utils/types";
import Creation from "./buttons/Creation.vue";
import Element from "./Element.vue";
const emits = defineEmits(["remove"]);
const props = defineProps({
items: {
type: Array as PropType<CollapseItem[]>,
required: true,
},
flow: {type: String, default: undefined},
creation: {type: Boolean, default: false},
});
const expanded = ref<CollapseItem["title"][]>([]);
Expand All @@ -47,6 +51,24 @@
if (item.elements?.length) expanded.value.push(item.title);
});
}
import YamlUtils from "../../../../utils/yamlUtils";
const removeElement = (title: string, index: number) => {
props.items.forEach((item) => {
if (item.title === title) {
nextTick(() => {
const ID = item.elements?.[index].id;
item.elements?.splice(index, 1);
emits(
"remove",
YamlUtils.deleteTask(props.flow, ID, title.toUpperCase()),
);
expanded.value = expanded.value.filter((v) => v !== title);
});
}
});
};
</script>

<style scoped lang="scss">
Expand Down
11 changes: 11 additions & 0 deletions ui/src/components/code/components/collapse/Element.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,25 @@
<div class="flex-grow-1 label">
{{ props.element.id }}
</div>

<el-button
@click.prevent.stop="emits('removeElement')"
:icon="DeleteOutline"
size="small"
class="border-0"
/>
</div>
</template>

<script setup lang="ts">
import {computed} from "vue";
import {DeleteOutline} from "../../utils/icons";
import TaskIcon from "@kestra-io/ui-libs/src/components/misc/TaskIcon.vue";
const emits = defineEmits(["removeElement"]);
const props = defineProps({
section: {type: String, required: true},
element: {type: Object, required: true},
Expand Down
7 changes: 6 additions & 1 deletion ui/src/components/code/segments/Editor.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,12 @@

<hr class="m-0 mt-3">

<Collapse :items="sections" creation />
<Collapse
:items="sections"
creation
:flow
@remove="(yaml) => emits('updateTask', yaml)"
/>
</template>

<Task
Expand Down
30 changes: 11 additions & 19 deletions ui/src/components/code/segments/Task.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,19 @@
:is="lastBreadcumb.component.type"
v-bind="lastBreadcumb.component.props"
v-on="lastBreadcumb.component.listeners"
:model-value="lastBreadcumb.component.props.modelValue"
@update:model-value="validateTask"
/>

<template v-if="yaml">
<div class="d-flex justify-content-between">
<div class="d-flex align-items-center">
<!-- TODO: Properly handle validation errors -->
<ValidationError v-if="false" :errors link />
</div>

<Save
@click="saveTask"
:what="route.query.section?.toString()"
class="w-100 mt-3"
/>
</div>
<!-- TODO: Improve the validation for single tasks -->
<ValidationError v-if="false" :errors link />

<Save
@click="saveTask"
:what="route.query.section?.toString()"
class="w-100 mt-3"
/>
</template>
</template>

Expand Down Expand Up @@ -94,13 +91,8 @@
let temp = YamlUtils.parse(yaml.value);
if (lastBreadcumb.value.shown) {
temp = {
...temp,
[breadcrumbs.value.at(-1).label]: {
...temp[breadcrumbs.value.at(-1).label],
...task,
},
};
const field = breadcrumbs.value.at(-1).label;
temp = {...temp, [field]: task};
}
temp = YamlUtils.stringify(temp);
Expand Down
111 changes: 68 additions & 43 deletions ui/src/components/flows/blueprints/BlueprintDetail.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<top-nav-bar v-if="!embed && blueprint" :title="blueprint.title" :breadcrumb="breadcrumb" v-loading="!blueprint">
<template #additional-right>
<ul v-if="userCanCreateFlow">
<ul v-if="userCanCreateFlow && kind === 'flow' ">
<router-link :to="{name: 'flows/create', query: {blueprintId: blueprint.id, blueprintSource: embedFriendlyBlueprintBaseUri.includes('community') ? 'community' : 'custom'}}">
<el-button type="primary" v-if="!embed">
{{ $t('use') }}
Expand All @@ -24,14 +24,14 @@
</div>

<section v-bind="$attrs" :class="{'container': !embed}" class="blueprint-container" v-loading="!blueprint">
<el-card v-if="blueprint">
<el-card v-if="blueprint && kind === 'flow'">
<div class="embedded-topology" v-if="flowGraph">
<low-code-editor
v-if="flowGraph"
:flow-id="parsedFlow.id"
:namespace="parsedFlow.namespace"
:flow-graph="flowGraph"
:source="blueprint.flow"
:source="blueprint.source"
:view-type="embed ? 'source-blueprints' : 'blueprints'"
is-read-only
/>
Expand All @@ -47,12 +47,12 @@
:input="true"
:full-height="false"
:minimap="false"
:model-value="blueprint.flow"
:model-value="blueprint.source"
lang="yaml"
:navbar="false"
>
<template #absolute>
<copy-to-clipboard class="position-absolute" :text="blueprint.flow" />
<copy-to-clipboard class="position-absolute" :text="blueprint.source" />
</template>
</editor>
</el-card>
Expand All @@ -68,7 +68,7 @@
<markdown :source="blueprint.description" />
</template>
</el-col>
<el-col :md="24" :lg="embed ? 24 : 6">
<el-col :md="24" :lg="embed ? 24 : 6" v-if="blueprint?.includedTasks?.length > 0">
<h4>Plugins</h4>
<div class="plugins-container">
<div v-for="task in [...new Set(blueprint.includedTasks)]" :key="task">
Expand Down Expand Up @@ -129,7 +129,11 @@
blueprintBaseUri: {
type: String,
default: undefined,
}
},
kind: {
type: String,
default: "flow",
},
},
methods: {
goBack() {
Expand All @@ -147,43 +151,64 @@
}
},
async created() {
this.blueprint = (await this.$http.get(`${this.embedFriendlyBlueprintBaseUri}/${this.blueprintId}`)).data;
try {
if (this.embedFriendlyBlueprintBaseUri.endsWith("community")) {
this.flowGraph = (await this.$http.get(`${this.embedFriendlyBlueprintBaseUri}/${this.blueprintId}/graph`, {
validateStatus: (status) => {
return status === 200;
}
}))?.data;
} else {
this.flowGraph = await this.$store.dispatch("flow/getGraphFromSourceResponse", {
flow: this.blueprint.flow, config: {
validateStatus: (status) => {
return status === 200;
this.$store.dispatch("blueprints/getBlueprint", {type: this.blueprintType, kind: this.blueprintKind, id: this.blueprintId})
.then(data => {
this.blueprint = data;
if (this.kind === "flow") {
try {
if (this.embedFriendlyBlueprintBaseUri.endsWith("community")) {
this.$store.dispatch(
"blueprints/getBlueprintGraph",
{
type: this.blueprintType,
kind: this.blueprintKind,
id: this.blueprintId,
validateStatus: (status) => {
return status === 200;
}
})
.then(data => {
this.flowGraph = data;
});
} else {
this.$store.dispatch("flow/getGraphFromSourceResponse", {
flow: this.blueprint.source, config: {
validateStatus: (status) => {
return status === 200;
}
}
}).then(data => {
this.flowGraph = data ;
});
}
} catch (e) {
console.error("Unable to create the blueprint's topology : " + e);
}
});
}
} catch (e) {
console.error("Unable to create the blueprint's topology : " + e);
}
}
});
},
computed: {
...mapState("auth", ["user"]),
...mapState("plugin", ["icons"]),
...mapState("blueprints", ["blueprint"]),
userCanCreateFlow() {
return this.user.hasAnyAction(permission.FLOW, action.CREATE);
},
parsedFlow() {
return {
...YamlUtils.parse(this.blueprint.flow),
source: this.blueprint.flow
...YamlUtils.parse(this.blueprint.source),
source: this.blueprint.source
}
},
embedFriendlyBlueprintBaseUri() {
return this.blueprintBaseUri ?? (`${apiUrl(this.$store)}/blueprints/` + (this?.$route?.params?.tab ?? "community"))
}
},
blueprintType() {
return this.tab ?? this?.$route?.params?.tab ?? "community";
},
blueprintKind() {
return this.blueprintType === "community" ? this.kind : undefined;
},
}
};
</script>
Expand Down Expand Up @@ -280,21 +305,21 @@
}
}
.tags {
margin: 10px 0;
display: flex;
.tags {
margin: 10px 0;
display: flex;
.el-tag.el-tag--info {
background-color: var(--ks-background-card);
padding: 15px 10px;
color: var(--ks-content-primary);
text-transform: capitalize;
font-size: var(--el-font-size-small);
border: 1px solid var(--ks-border-primary);
}
.el-tag.el-tag--info {
background-color: var(--ks-background-card);
padding: 15px 10px;
color: var(--ks-content-primary);
text-transform: capitalize;
font-size: var(--el-font-size-small);
border: 1px solid var(--ks-border-primary);
}
.tag-box {
margin-right: calc($spacer / 3);
}
.tag-box {
margin-right: calc($spacer / 3);
}
}
</style>
Loading

0 comments on commit 7bd394b

Please sign in to comment.