feat(dashboard): mandatory id + add autogenerated id to source for legacy handling (#10912)

closes kestra-io/kestra-ee#4484

Author: brian-mulier-p

ui/scripts/product/flow.ts renamed to ui/scripts/id.ts

@@ -25,4 +25,4 @@ const ANIMALS: string[] = [
 const getRandomNumber = (minimum: number = MINIMUM, maximum: number = MAXIMUM): number => Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
 const getRandomAnimal = (): string => ANIMALS[Math.floor(Math.random() * ANIMALS.length)];
 
-export const getRandomFlowID = (): string => `${getRandomAnimal()}_${getRandomNumber()}`.toLowerCase();
+export const getRandomID = (): string => `${getRandomAnimal()}_${getRandomNumber()}`.toLowerCase();

ui/src/components/dashboard/components/Create.vue

@@ -38,6 +38,8 @@
     import type {Dashboard} from "../../../components/dashboard/composables/useDashboards";
     import {getDashboard, processFlowYaml} from "../../../components/dashboard/composables/useDashboards";
 
+    import {getRandomID} from "../../../../scripts/id";
+
     const dashboard = ref<Dashboard>({id: "", charts: []});
     const save = async (source: string) => {
         const response = await dashboardStore.create(source)
@@ -69,6 +71,8 @@
             } else {
                 dashboard.value.sourceCode = name === "namespaces/update" ? YAML_NAMESPACE : YAML_MAIN;
             }
+
+            dashboard.value.sourceCode = "id: " + getRandomID() + "\n" + dashboard.value.sourceCode;
         }
     });
 

ui/src/components/flows/FlowCreate.vue

@@ -16,7 +16,7 @@
     import {useBlueprintsStore} from "../../stores/blueprints";
     import {useCoreStore} from "../../stores/core";
 
-    import {getRandomFlowID} from "../../../scripts/product/flow";
+    import {getRandomID} from "../../../scripts/id";
 
     export default {
         mixins: [RouteContext],
@@ -52,7 +52,7 @@
                 } else {
                     const defaultNamespace = localStorage.getItem(storageKeys.DEFAULT_NAMESPACE);
                     const selectedNamespace = this.$route.query.namespace || defaultNamespace || "company.team";
-                    flowYaml = `id: ${getRandomFlowID()}
+                    flowYaml = `id: ${getRandomID()}
 namespace: ${selectedNamespace}
 
 tasks:

ui/src/override/components/dashboard/Edit.vue

@@ -2,17 +2,20 @@
     <TopNavBar :title="header.title" :breadcrumb="header.breadcrumb" />
     <section class="full-container">
         <Editor
-            v-if="dashboard.sourceCode"
-            :initial-source="dashboard.sourceCode"
+            v-if="sourceCode"
+            v-model="sourceCode"
             @save="save"
         />
     </section>
 </template>
 
 <script setup lang="ts">
-    import {onMounted, computed, ref} from "vue";
+    import {onMounted, computed, ref, watch} from "vue";
 
     import {useRoute} from "vue-router";
+
+    import * as YAML_UTILS from "@kestra-io/ui-libs/flow-yaml-utils";
+
     const route = useRoute();
 
     import {useCoreStore} from "../../../stores/core";
@@ -21,6 +24,8 @@
     import {useDashboardStore} from "../../../stores/dashboard";
     const dashboardStore = useDashboardStore();
 
+    const sourceCode = ref("");
+
     import {useI18n} from "vue-i18n";
     const {t} = useI18n({useScope: "global"});
 
@@ -45,9 +50,26 @@
     onMounted(() => {
         dashboardStore.load(route.params.dashboard as string).then((response) => {
             dashboard.value = response;
+            sourceCode.value = response.sourceCode;
         });
     });
 
+    watch(sourceCode, (newValue) => {
+        if (YAML_UTILS.parse(newValue).id !== dashboard.value.id) {
+            const coreStore = useCoreStore();
+            coreStore.message = {
+                variant: "error",
+                title: t("readonly property"),
+                message: t("dashboards.edition.id readonly"),
+            };
+            sourceCode.value = YAML_UTILS.replaceBlockWithPath({
+                source: sourceCode.value,
+                path: "id",
+                newContent: dashboard.value.id
+            });
+        }
+    })
+
     const header = computed(() => ({
         title: dashboard.value?.title || route.params.dashboard,
         breadcrumb: [{label: t("dashboards.edition.label"), link: {}}],

ui/src/translations/en.json

@@ -1369,7 +1369,8 @@
       "edition": {
         "label": "Edit Dashboard",
         "confirmation": "Changes in dashboard <code>{title}</code> are saved.",
-        "chart": "Edit this chart"
+        "chart": "Edit this chart",
+        "id readonly": "The property `id` cannot be changed — it's now set to its initial values. If you want to change it, you can create a new dashboard and remove the old one."
       },
       "deletion": {
         "confirmation": "Are you sure you want to delete <code>{title}</code> dashboard?"

webserver/src/main/java/io/kestra/webserver/controllers/api/DashboardController.java

@@ -8,14 +8,14 @@
 import io.kestra.core.models.dashboards.charts.DataChart;
 import io.kestra.core.models.dashboards.charts.DataChartKPI;
 import io.kestra.core.models.flows.Flow;
+import io.kestra.core.models.validations.ManualConstraintViolation;
 import io.kestra.core.models.validations.ModelValidator;
 import io.kestra.core.models.validations.ValidateConstraintViolation;
 import io.kestra.core.repositories.ArrayListTotal;
 import io.kestra.core.repositories.DashboardRepositoryInterface;
 import io.kestra.core.repositories.FlowRepositoryInterface;
 import io.kestra.core.serializers.YamlParser;
 import io.kestra.core.tenant.TenantService;
-import io.kestra.core.utils.IdUtils;
 import io.kestra.plugin.core.dashboard.chart.Markdown;
 import io.kestra.plugin.core.dashboard.chart.Table;
 import io.kestra.plugin.core.dashboard.chart.mardown.sources.FlowDescription;
@@ -49,9 +49,8 @@
 import java.io.OutputStreamWriter;
 import java.time.Duration;
 import java.time.ZonedDateTime;
-import java.util.List;
-import java.util.Map;
-import java.util.Optional;
+import java.util.*;
+import java.util.regex.Pattern;
 
 import static io.kestra.core.utils.DateUtils.validateTimeline;
 
@@ -60,6 +59,7 @@
 @Slf4j
 public class DashboardController {
     protected static final YamlParser YAML_PARSER = new YamlParser();
+    public static final Pattern DASHBOARD_ID_PATTERN = Pattern.compile("^id:.*$", Pattern.MULTILINE);
 
     @Inject
     private DashboardRepositoryInterface dashboardRepository;
@@ -91,7 +91,12 @@ public PagedResults<Dashboard> searchDashboards(
     public Dashboard getDashboard(
         @Parameter(description = "The dashboard id") @PathVariable String id
     ) throws ConstraintViolationException {
-        return dashboardRepository.get(tenantService.resolveTenant(), id).orElse(null);
+        return dashboardRepository.get(tenantService.resolveTenant(), id).map(d -> {
+            if (!DASHBOARD_ID_PATTERN.matcher(d.getSourceCode()).matches()) {
+                return d.toBuilder().sourceCode("id: " + d.getId() + "\n" + d.getSourceCode()).build();
+            }
+            return d;
+        }).orElse(null);
     }
 
     @ExecuteOn(TaskExecutors.IO)
@@ -101,13 +106,24 @@ public HttpResponse<Dashboard> createDashboard(
         @RequestBody(description = "The dashboard definition as YAML") @Body String dashboard
     ) throws ConstraintViolationException {
         Dashboard dashboardParsed = parseDashboard(dashboard);
+
+        if (dashboardParsed.getId() == null) {
+            throw new IllegalArgumentException("Dashboard id is mandatory");
+        }
         modelValidator.validate(dashboardParsed);
 
-        if (dashboardParsed.getId() != null) {
-            throw new IllegalArgumentException("Dashboard id is not editable");
+        Optional<Dashboard> existingDashboard = dashboardRepository.get(tenantService.resolveTenant(), dashboardParsed.getId());
+        if (existingDashboard.isPresent()) {
+            throw new ConstraintViolationException(Collections.singleton(ManualConstraintViolation.of(
+                "Dashboard id already exists",
+                dashboardParsed,
+                Dashboard.class,
+                "dashboard.id",
+                dashboardParsed.getId()
+            )));
         }
 
-        return HttpResponse.ok(this.save(null, dashboardParsed.toBuilder().id(IdUtils.create()).build(), dashboard));
+        return HttpResponse.ok(this.save(null, dashboardParsed, dashboard));
     }
 
     @ExecuteOn(TaskExecutors.IO)
@@ -148,6 +164,15 @@ public HttpResponse<Dashboard> updateDashboard(
             return HttpResponse.status(HttpStatus.NOT_FOUND);
         }
         Dashboard dashboardToSave = parseDashboard(dashboard);
+        if (!dashboardToSave.getId().equals(id)) {
+            throw new ConstraintViolationException(Set.of(ManualConstraintViolation.of(
+                "Illegal dashboard id update",
+                dashboardToSave,
+                Dashboard.class,
+                "dashboard.id",
+                dashboardToSave.getId()
+            )));
+        }
         modelValidator.validate(dashboardToSave);
 
         return HttpResponse.ok(this.save(existingDashboard.get(), dashboardToSave, dashboard));