jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): fix metric category max height calculation

Browse source
This commit is contained in:
sylenien 2022-05-18 13:25:18 +02:00 • committed by Delirium
parent eaf162c5f8
commit cde2a6e2d5
2 changed files with 7 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
View file

@ -80,7 +80,7 @@ function DashboardMetricSelection(props) {
</div>
<div className="grid grid-cols-12 gap-4">
<div className="col-span-3">
<div className="grid grid-cols-1 gap-4 py-1" style={{ maxHeight: "calc(100vh - 300px)", overflowY: 'auto' }}>
<div className="grid grid-cols-1 gap-4 py-1" style={{ maxHeight: `calc(100vh - ${props.isDashboardExists ? 175 : 300}px)`, overflowY: 'auto' }}>
{activeCategory && widgetCategories.map((category, index) =>
<WidgetCategoryItem
key={category.name}

11
frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx
View file

@ -37,6 +37,7 @@ function DashboardModal(props) {
history.push(path);
hideModal();
}
const isDashboardExists = dashboard.exists()
return useObserver(() => (
<div style={{ width: '85vw' }}>
@ -47,20 +48,20 @@ function DashboardModal(props) {
<div className="mb-6 flex items-end justify-between">
<div>
<h1 className="text-2xl">
{ dashboard.exists() ? "Add metrics to dashboard" : "Create Dashboard" }
{ isDashboardExists ? "Add metrics to dashboard" : "Create Dashboard" }
</h1>
</div>
<div>
{dashboard.exists() && <Button outline size="small" onClick={handleCreateNew}>Create New</Button>}
{isDashboardExists && <Button outline size="small" onClick={handleCreateNew}>Create New</Button>}
</div>
</div>
{ !dashboard.exists() && (
{ !isDashboardExists && (
<>
<DashboardForm />
<p>Create new dashboard by choosing from the range of predefined metrics that you care about. You can always add your custom metrics later.</p>
</>
)}
<DashboardMetricSelection />
<DashboardMetricSelection isDashboardExists={isDashboardExists} />
<div className="flex items-center absolute bottom-0 left-0 right-0 bg-white border-t p-3">
<Button
@ -69,7 +70,7 @@ function DashboardModal(props) {
disabled={!dashboard.isValid || loading}
onClick={onSave}
>
{ dashboard.exists() ? "Add Selected to Dashboard" : "Create" }
{isDashboardExists ? "Add Selected to Dashboard" : "Create" }
</Button>
<span className="ml-2 color-gray-medium">{selectedWidgetsCount} Metrics</span>
</div>