8000 [ENHANCEMENT] Autocomplete project name in the migration page by Nexucis · Pull Request #1425 · perses/perses · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

[ENHANCEMENT] Autocomplete project name in the migration page #1425

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

Merged
merged 2 commits into from
Sep 12, 2023
Merged

[ENHANCEMENT] Autocomplete project name in the migration page #1425

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0319511
[ENHANCEMENT] Autocomplete project name in the migration page
Nexucis Sep 11, 2023
344bf5d
fixed feedback review
Nexucis Sep 12, 2023
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
47 changes: 30 additions & 17 deletions ui/app/src/views/MigrateView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@

import {
Alert,
Autocomplete,
Box,
Button,
CircularProgress,
Expand All @@ -27,11 +28,12 @@ import AutoFix from 'mdi-material-ui/AutoFix';
import Upload from 'mdi-material-ui/Upload';
import Import from 'mdi-material-ui/Import';
import { ChangeEvent, useState } from 'react';
import { JSONEditor } from '@perses-dev/components';
import { JSONEditor, useSnackbar } from '@perses-dev/components';
import { useNavigate } from 'react-router-dom';
import { useMigrate } from '../model/migrate-client';
import { useCreateDashboardMutation } from '../model/dashboard-client';
import { useIsReadonly } from '../model/config-client';
import { useProjectList } from '../model/project-client';

interface GrafanaLightDashboard {
// The only part that is interesting us is the list of the input that can exists in the Grafana dashboard definition.
Expand All @@ -53,6 +55,8 @@ function MigrateView() {
const dashboardMutation = useCreateDashboardMutation((data) => {
navigate(`/projects/${data.metadata.project}/dashboards/${data.metadata.name}`);
});
const { exceptionSnackbar } = useSnackbar();
const { data, isLoading } = useProjectList({ onError: exceptionSnackbar });
const fileUploadOnChange = async (event: ChangeEvent<HTMLInputElement>) => {
const files = event.target.files;
if (files === null) {
Expand Down Expand Up @@ -82,11 +86,11 @@ function MigrateView() {
return (
<Container maxWidth="md" sx={{ marginY: 2 }}>
<Stack direction="row" alignItems="center" gap={1} mb={2}>
<AutoFix fontSize={'large'} />
<AutoFix fontSize="large" />
<Typography variant="h1">Migrate</Typography>
</Stack>
<Stack direction={'column'} spacing={1} mt={2}>
<Alert variant={'outlined'} severity={'warning'}>
<Stack direction="column" spacing={1} mt={2}>
<Alert variant="outlined" severity="warning">
<Typography>
As we do not support every feature from Grafana, the migration to Perses can only be partial. For example,
unsupported panels are replaced by &quot;placeholder&quot; Markdown panels, to at least preserve the
Expand Down Expand Up @@ -144,22 +148,31 @@ function MigrateView() {
</Button>
{migrateMutation.isLoading && <CircularProgress sx={{ alignSelf: 'center' }} />}
{migrateMutation.isError && (
<Alert variant={'outlined'} severity={'error'}>
<Alert variant="outlined" severity="error">
{migrateMutation.error.message}
</Alert>
)}
{migrateMutation.isSuccess && (
<Stack direction={'row'} spacing={1}>
{!isLoading && data !== undefined && data !== null && migrateMutation.isSuccess && (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

{!isLoading && data && migrateMutation.isSuccess && (

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am following the Perses UI guidelines here:

Use explicit null or undefined checks instead of relying on JS falsiness

<Stack direction="row">
<Box width={'80%'}>
<JSONEditor value={migrateMutation.data} maxHeight={'50rem'} width={'100%'} />
<JSONEditor value={migrateMutation.data} maxHeight="50rem" width="100%" />
</Box>
<Stack spacing={1}>
<TextField
required
label={'Project Name'}
=> {
setProjectName(event.target.value);
}}
<Stack width={'100%'}>
<Autocomplete
disablePortal
renderInput={(params) => (
<TextField
{...params}
required
label="Project name"
=> {
setProjectName(event.target.value);
}}
/>
)}
options={data.map((project) => {
return project.metadata.name;
})}
/>
<Button
variant="contained"
Expand All @@ -170,12 +183,12 @@ function MigrateView() {
Import
</Button>
{dashboardMutation.isError && (
<Alert variant={'outlined'} severity={'error'}>
<Alert variant="outlined" severity="error">
{dashboardMutation.error.message}
</Alert>
)}
{isReadonly && (
<Alert severity={'warning'} sx={{ backgroundColor: 'transparent', padding: 0 }}>
<Alert severity="warning" sx={{ backgroundColor: 'transparent', padding: 0 }}>
Dashboard managed via code only.
</Alert>
)}
Expand Down
0