fix: add ellipsis for Namespace charts (#6730)

ui/src/components/dashboard/components/charts/executions/Namespace.vue

@@ -89,6 +89,8 @@
         };
     });
 
+    const MAX_LABEL_LENGTH = 15;
+
     const options = computed(() =>
         defaultConfig({
             barThickness: 25,
@@ -123,6 +125,13 @@
                     position: "bottom",
                     display: true,
                     stacked: true,
+           
+                    ticks: {
+                        callback: function(value) {
+                            const namespaceName = this.getLabelForValue(value)
+                            return namespaceName.length > MAX_LABEL_LENGTH ? `${namespaceName.substring(0, MAX_LABEL_LENGTH)}...` : namespaceName;
+                        },
+                    }
                 },
                 y: {
                     title: {

ui/tests/storybook/components/dashboard/charts/executions/Bar.stories.jsx

@@ -0,0 +1,105 @@
+import Bar from "../../../../../../src/components/dashboard/components/charts/executions/Bar.vue";
+
+export default {
+    title: "Dashboard/Charts/Executions/Bar",
+    component: Bar,
+    parameters: {
+        layout: "centered",
+    },
+};
+
+// Helper to generate sample data for the last n days
+const generateSampleData = (days) => {
+    const data = [];
+    const states = ["SUCCESS", "FAILED", "RUNNING"];
+    const now = new Date();
+
+    for (let i = 0; i < days; i++) {
+        const date = new Date(now);
+        date.setDate(date.getDate() - i);
+
+        const executionCounts = {};
+        states.forEach(state => {
+            executionCounts[state] = Math.floor(Math.random() * 50); // Random count between 0-50
+        });
+
+        data.push({
+            startDate: date.toISOString(),
+            executionCounts,
+            duration: {
+                avg: Math.floor(Math.random() * 300), // Random duration between 0-300 seconds
+            },
+            groupBy: "DAY"
+        });
+    }
+
+    return data.reverse(); // Reverse to show oldest to newest
+};
+
+// Template for all stories
+const Template = (args) => ({
+    components: {Bar},
+    setup() {
+        return () => {
+            return <div style="width: 800px;"><Bar {...args} /></div>
+        }
+    }
+});
+
+// Basic story with 7 days of data
+export const SevenDays = Template.bind({});
+SevenDays.args = {
+    data: generateSampleData(7),
+    total: 350, // Example total
+};
+
+// Story with 30 days of data
+export const ThirtyDays = Template.bind({});
+ThirtyDays.args = {
+    data: generateSampleData(30),
+    total: 1500,
+};
+
+// Story with no data
+export const NoData = Template.bind({});
+NoData.args = {
+    data: [],
+    total: 0,
+};
+
+// Story with single day data
+export const SingleDay = Template.bind({});
+SingleDay.args = {
+    data: generateSampleData(1),
+    total: 50,
+};
+
+// Story with hourly data
+export const HourlyData = Template.bind({});
+HourlyData.args = {
+    data: Array.from({length: 24}, (_, i) => {
+        const date = new Date();
+        date.setHours(i);
+        return {
+            startDate: date.toISOString(),
+            executionCounts: {
+                SUCCESS: Math.floor(Math.random() * 30),
+                FAILED: Math.floor(Math.random() * 10),
+                RUNNING: Math.floor(Math.random() * 5),
+            },
+            duration: {
+                avg: Math.floor(Math.random() * 300),
+            },
+            groupBy: "HOUR"
+        };
+    }),
+    total: 500,
+}; 
+
+// Story with execution names as labels
+export const ExecutionNamesAsLabels = Template.bind({});
+ExecutionNamesAsLabels.args = {
+    data: generateSampleData(7),
+    total: 350,
+    labels: ["Execution 1", "Execution 2", "Execution 3", "Execution 4", "Execution 5", "Execution 6", "Execution 7"]
+};

ui/tests/storybook/components/dashboard/charts/executions/Namespace.stories.jsx

@@ -0,0 +1,120 @@
+import Namespace from "../../../../../../src/components/dashboard/components/charts/executions/Namespace.vue";
+
+export default {
+    title: "Dashboard/Charts/Executions/Namespace",
+    component: Namespace,
+    parameters: {
+        layout: "centered",
+    },
+};
+
+// Helper to generate sample namespace data
+const generateNamespaceData = (namespaceCount, prefix = "namespace-") => {
+    const states = ["SUCCESS", "FAILED", "RUNNING"];
+    const data = {};
+
+    for (let i = 1; i <= namespaceCount; i++) {
+        const counts = {};
+        states.forEach(state => {
+            counts[state] = Math.floor(Math.random() * 50); // Random count between 0-50
+        });
+
+        const total = Object.values(counts).reduce((sum, count) => sum + count, 0);
+
+        data[`${prefix}${i}`] = {
+            counts,
+            total
+        };
+    }
+
+    return data;
+};
+
+// Calculate total executions from namespace data
+const calculateTotal = (data) => {
+    return Object.values(data).reduce((sum, namespace) => sum + namespace.total, 0);
+};
+
+// Template for all stories
+const Template = (args) => ({
+    components: {Namespace},
+    setup() {
+        return () => {
+            return <div style="width: 800px;"><Namespace {...args} /></div>
+        }
+    }
+});
+
+// Story with 5 namespaces
+export const FiveNamespaces = Template.bind({});
+const fiveNamespacesData = generateNamespaceData(5);
+FiveNamespaces.args = {
+    data: fiveNamespacesData,
+    total: calculateTotal(fiveNamespacesData)
+};
+
+// Story with many namespaces
+export const ManyNamespaces = Template.bind({});
+const manyNamespacesData = generateNamespaceData(15);
+ManyNamespaces.args = {
+    data: manyNamespacesData,
+    total: calculateTotal(manyNamespacesData)
+};
+
+// Story with single namespace
+export const SingleNamespace = Template.bind({});
+const singleNamespaceData = generateNamespaceData(1);
+SingleNamespace.args = {
+    data: singleNamespaceData,
+    total: calculateTotal(singleNamespaceData)
+};
+
+// Story with no data
+export const NoData = Template.bind({});
+NoData.args = {
+    data: {},
+    total: 0
+};
+
+// Story with custom namespace names
+export const CustomNamespaces = Template.bind({});
+const customData = {
+    "dev-team": {
+        counts: {
+            SUCCESS: 45,
+            FAILED: 5,
+            RUNNING: 3
+        },
+        total: 53
+    },
+    "prod-pipeline": {
+        counts: {
+            SUCCESS: 98,
+            FAILED: 2,
+            RUNNING: 5
+        },
+        total: 105
+    },
+    "data-ingestion": {
+        counts: {
+            SUCCESS: 75,
+            FAILED: 8,
+            RUNNING: 4
+        },
+        total: 87
+    }
+};
+
+CustomNamespaces.args = {
+    data: customData,
+    total: calculateTotal(customData)
+};
+
+// Story with super long namespace names
+export const LongNamespaces = Template.bind({});
+const customDataLong = generateNamespaceData(25, "super-long-namespace-name-");
+
+LongNamespaces.args = {
+    data: customDataLong,
+    total: calculateTotal(customDataLong)
+};