Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui): skeletons based on type like for chart and table. #7417

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

fix(ui): skeletons based on type like for chart and table. #7417

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
aaa68f9
fix(ui): skeletons based on type like for chart and table.
Piyush-r-bhaskar Feb 15, 2025
37c43b1
minor tweak
Piyush-r-bhaskar Feb 15, 2025
5619c7d
Merge branch 'develop' into new
MilosPaunovic Feb 28, 2025
39c9eb7
Merge branch 'kestra-io:develop' into new
Piyush-r-bhaskar Feb 28, 2025
3b5dbaf
fix(ui): fixed momentary No Data visual.
Piyush-r-bhaskar Feb 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 39 additions & 20 deletions ui/src/components/dashboard/Dashboard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,12 +131,14 @@
<ExecutionsBar
:data="graphData"
:total="stats.total"
:loading="executionsLoading"
class="card card-2/3"
/>

<ExecutionsDoughnut
:data="graphData"
:total="stats.total"
:loading="executionsLoading"
class="card card-1/3"
/>

Expand Down Expand Up @@ -169,30 +171,42 @@
v-else
:flow="props.flowId"
:namespace="props.namespace"
:loading="executionsLoading"
class="card card-1/2"
/>

<ExecutionsNextScheduled
v-if="props.flow"
:flow="props.flowId"
:namespace="props.namespace"
:loading="executionsLoading"
class="card card-1/2"
/>
<ExecutionsNextScheduled
v-else-if="isAllowedTriggers"
:flow="props.flowId"
:namespace="props.namespace"
:loading="executionsLoading"
class="card card-1/2"
/>

<ExecutionsEmptyNextScheduled v-else class="card card-1/2" />
<ExecutionsEmptyNextScheduled
v-else
:loading="executionsLoading"
class="card card-1/2"
/>
<ExecutionsNamespace
v-if="!props.flow && Object.keys(namespaceExecutions).length > 1"
class="card card-1"
:data="namespaceExecutions"
:total="stats.total"
/>
<Logs v-if="!props.flow" :data="logs" class="card card-1" />
<Logs
v-if="!props.flow"
:data="logs"
:loading="executionsLoading"
class="card card-1"
/>
</div>
</template>

Expand Down Expand Up @@ -403,20 +417,22 @@
const fetchExecutions = () => {
executionsLoading.value = true;

store.dispatch("stat/daily", mergeQuery()).then((response) => {
const sorted = response.sort(
(a, b) => new Date(b.date) - new Date(a.date),
);

executions.value = {
raw: sorted,
all: transformer(sorted),
yesterday: sorted.at(-2),
today: sorted.at(-1),
};
}).finally(() => {
executionsLoading.value = false;
});
return store.dispatch("stat/daily", mergeQuery())
.then((response) => {
const sorted = response.sort(
(a, b) => new Date(b.date) - new Date(a.date),
);

executions.value = {
raw: sorted,
all: transformer(sorted),
yesterday: sorted.at(-2),
today: sorted.at(-1),
};
})
.finally(() => {
executionsLoading.value = false;
});
};

const graphData = computed(() => store.state.stat.daily || []);
Expand Down Expand Up @@ -453,14 +469,17 @@

if (!custom.value.shown) {
try {
await Promise.any([
executionsLoading.value = true;
await Promise.all([
fetchNumbers(),
fetchExecutions(),
fetchNamespaceExecutions(),
fetchLogs(),
]);
} catch (error) {
console.error("All promises failed:", error);
]).catch(error => {
console.error("Failed to fetch dashboard data:", error);
});
} finally {
executionsLoading.value = false;
}
}
};
Expand Down
11 changes: 9 additions & 2 deletions ui/src/components/dashboard/components/charts/executions/Bar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
</span>
</p>
<p class="m-0 fs-2">
{{ total }}
<el-skeleton v-if="loading" :rows="0" />
<span v-else>{{ total }}</span>
</p>
</div>

Expand All @@ -23,6 +24,7 @@
v-model="duration"
:active-icon="CheckIcon"
inline-prompt
:disabled="loading"
/>
<span class="d-flex align-items-center ps-2 fw-light small">{{ t("duration") }}</span>
</div>
Expand All @@ -31,12 +33,13 @@
</div>

<BarChart
v-if="total > 0"
v-if="total > 0 || loading"
:data="data"
:total="total"
:duration="duration"
:plugins="[barLegend]"
:small="isSmallScreen"
:loading="loading"
class="tall"
/>

Expand Down Expand Up @@ -71,6 +74,10 @@
type: Number,
required: true,
},
loading: {
type: Boolean,
default: false
}
});
</script>

Expand Down
60 changes: 58 additions & 2 deletions ui/src/components/dashboard/components/charts/executions/BarChart.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,13 @@
>
<div>
<Bar
v-if="loading"
:class="small ? 'small' : ''"
:data="skeletonData"
:options="skeletonOptions"
/>
<Bar
v-else
:class="small ? 'small' : ''"
:data="parsedData"
:options="options"
Expand Down Expand Up @@ -66,13 +73,62 @@
type: Boolean,
default: false,
},
loading: {
type: Boolean,
default: false
}
});

const theme = useTheme()
const scheme = useScheme();

const tooltipContent = ref("")

const skeletonData = computed(() => {
const barColor = theme.value === "dark"
? "rgba(255, 255, 255, 0.08)"
: "rgba(0, 0, 0, 0.06)";

return {
labels: Array(18).fill(""),
datasets: [{
data: Array(18).fill(0).map(() => Math.random() * 70 + 30),
backgroundColor: barColor,
borderRadius: 2,
barThickness: props.small ? 8 : 12,
}]
};
});

const skeletonOptions = computed(() => ({
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
},
scales: {
x: {
display: false,
grid: {
display: false
}
},
y: {
display: false,
grid: {
display: false
},
min: 0,
max: 100
}
}
}));

const parsedData = computed(() => {
let datasets = props.data.reduce(function (accumulator, value) {
Object.keys(value.executionCounts).forEach(function (state) {
Expand Down Expand Up @@ -234,8 +290,8 @@
);
</script>

<style>
.small{
<style lang="scss" scoped>
.small {
height: 40px;
}
</style>
43 changes: 40 additions & 3 deletions ui/src/components/dashboard/components/charts/executions/Doughnut.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,13 @@
>
<div class="w-75">
<Doughnut
v-if="total > 0"
v-if="loading"
:data="skeletonData"
:options="skeletonOptions"
class="tall"
/>
<Doughnut
v-else-if="total > 0"
:data="parsedData"
:options="options"
:plugins="[totalsLegend, centerPlugin, thicknessPlugin]"
Expand Down Expand Up @@ -50,6 +56,10 @@
type: Number,
required: true,
},
loading: {
type: Boolean,
default: false
}
});

const theme = useTheme();
Expand Down Expand Up @@ -82,8 +92,6 @@
};
});



const options = computed(() =>
defaultConfig({
plugins: {
Expand Down Expand Up @@ -161,6 +169,35 @@
});
},
};

const skeletonData = computed(() => {
const barColor = theme.value === "dark"
? "rgba(255, 255, 255, 0.08)"
: "rgba(0, 0, 0, 0.06)";

return {
labels: ["Loading"],
datasets: [{
data: [100],
backgroundColor: [barColor],
borderWidth: 0
}]
};
});

const skeletonOptions = computed(() => ({
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
},
cutout: "40%"
}));
</script>

<style lang="scss" scoped>
Expand Down
Loading
Loading