mirror of https://github.com/buster-so/buster.git
better version selecting
This commit is contained in:
parent
1a361bf102
commit
3106198875
|
@ -2,7 +2,8 @@ import { useGetDashboard } from '@/api/buster_rest/dashboards';
|
||||||
import { useGetMetric } from '@/api/buster_rest/metrics';
|
import { useGetMetric } from '@/api/buster_rest/metrics';
|
||||||
import React, { useMemo } from 'react';
|
import React, { useMemo } from 'react';
|
||||||
import { Button } from '@/components/ui/buttons';
|
import { Button } from '@/components/ui/buttons';
|
||||||
import { Check3, Xmark } from '@/components/ui/icons';
|
import { Xmark } from '@/components/ui/icons';
|
||||||
|
import { Check3 } from '@/components/ui/icons/NucleoIconFilled';
|
||||||
import { Text } from '@/components/ui/typography';
|
import { Text } from '@/components/ui/typography';
|
||||||
import { useCloseVersionHistory } from '@/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/FileContainerVersionHistory';
|
import { useCloseVersionHistory } from '@/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/FileContainerVersionHistory';
|
||||||
import { cn } from '@/lib/classMerge';
|
import { cn } from '@/lib/classMerge';
|
||||||
|
@ -50,7 +51,7 @@ export const VersionHistoryPanel = React.memo(
|
||||||
scrollable
|
scrollable
|
||||||
headerBorderVariant="ghost"
|
headerBorderVariant="ghost"
|
||||||
headerClassName="border-l">
|
headerClassName="border-l">
|
||||||
<div className="my-2 flex flex-col px-1">
|
<div className="mx-1.5 my-1.5 flex flex-col">
|
||||||
{listItems?.map((item) => (
|
{listItems?.map((item) => (
|
||||||
<ListItem
|
<ListItem
|
||||||
key={item.version_number}
|
key={item.version_number}
|
||||||
|
|
|
@ -83,22 +83,19 @@ export const DashboardThreeDotMenu = React.memo(({ dashboardId }: { dashboardId:
|
||||||
DashboardThreeDotMenu.displayName = 'ThreeDotMenuButton';
|
DashboardThreeDotMenu.displayName = 'ThreeDotMenuButton';
|
||||||
|
|
||||||
const useVersionHistorySelectMenu = ({ dashboardId }: { dashboardId: string }) => {
|
const useVersionHistorySelectMenu = ({ dashboardId }: { dashboardId: string }) => {
|
||||||
const DEFAULT_VERSION_HISTORY_ITEMS: DropdownItems = [];
|
|
||||||
const { data } = useGetDashboard({ id: dashboardId }, (x) => ({
|
const { data } = useGetDashboard({ id: dashboardId }, (x) => ({
|
||||||
versions: x?.dashboard?.versions,
|
versions: x?.dashboard?.versions || [],
|
||||||
version_number: x?.dashboard?.version_number
|
version_number: x?.dashboard?.version_number
|
||||||
}));
|
}));
|
||||||
const { versions, version_number } = data || {};
|
const { versions, version_number } = data || {};
|
||||||
|
|
||||||
const versionHistoryItems: DropdownItems = useMemo(() => {
|
const versionHistoryItems: DropdownItems = useMemo(() => {
|
||||||
return (
|
return [...(versions || [])].reverse().map((x) => ({
|
||||||
versions?.map((x) => ({
|
label: `Version ${x.version_number}`,
|
||||||
label: `Version ${x.version_number}`,
|
secondaryLabel: timeFromNow(x.updated_at, false),
|
||||||
secondaryLabel: timeFromNow(x.updated_at, false),
|
value: x.version_number.toString(),
|
||||||
value: x.version_number.toString(),
|
selected: x.version_number === version_number
|
||||||
selected: x.version_number === version_number
|
}));
|
||||||
})) || DEFAULT_VERSION_HISTORY_ITEMS
|
|
||||||
);
|
|
||||||
}, [versions, version_number]);
|
}, [versions, version_number]);
|
||||||
|
|
||||||
return useMemo(
|
return useMemo(
|
||||||
|
|
|
@ -190,7 +190,7 @@ const useVersionHistorySelectMenu = ({ metricId }: { metricId: string }) => {
|
||||||
});
|
});
|
||||||
|
|
||||||
const versionHistoryItems: DropdownItems = useMemo(() => {
|
const versionHistoryItems: DropdownItems = useMemo(() => {
|
||||||
return versions.map((x) => ({
|
return [...versions].reverse().map((x) => ({
|
||||||
label: `Version ${x.version_number}`,
|
label: `Version ${x.version_number}`,
|
||||||
secondaryLabel: timeFromNow(x.updated_at, false),
|
secondaryLabel: timeFromNow(x.updated_at, false),
|
||||||
value: x.version_number.toString(),
|
value: x.version_number.toString(),
|
||||||
|
|
|
@ -10,19 +10,19 @@
|
||||||
scroll-timeline-name: --scrollShadowContainer;
|
scroll-timeline-name: --scrollShadowContainer;
|
||||||
|
|
||||||
.scroll-header {
|
.scroll-header {
|
||||||
@apply fixed top-[30px] right-0 left-0 h-2 w-full;
|
@apply pointer-events-none absolute top-[0px] right-0 left-0 h-[0.5px] w-full border-b border-transparent;
|
||||||
animation: shadowAnimation linear;
|
animation: shadowAnimation linear;
|
||||||
animation-range: 0px 100px;
|
animation-range: 0px 120px;
|
||||||
animation-timeline: --scrollShadowContainer;
|
animation-timeline: --scrollShadowContainer;
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes shadowAnimation {
|
@keyframes shadowAnimation {
|
||||||
from {
|
from {
|
||||||
box-shadow: 0px 0px 0px 0px var(--color-border) !important;
|
border-color: transparent;
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
box-shadow: 0px 0px 0px 0.5px var(--color-border) !important;
|
border-color: var(--color-border);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue