-
Notifications
You must be signed in to change notification settings - Fork 36
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(instance) allow instance migration to a new project. fixes #1048
Signed-off-by: David Edler <[email protected]>
- Loading branch information
Showing
8 changed files
with
271 additions
and
64 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { FC } from "react"; | ||
| import { ActionButton, Button } from "@canonical/react-components"; | ||
| import { LxdInstance } from "types/instance"; | ||
| import ProjectSelectTable from "pages/projects/ProjectSelectTable"; | ||
|
|
||
| interface Props { | ||
| instance: LxdInstance; | ||
| onSelect: (pool: string) => void; | ||
| targetProject: string; | ||
| onCancel: () => void; | ||
| migrate: (pool: string) => void; | ||
| } | ||
|
|
||
| const InstanceProjectMigration: FC<Props> = ({ | ||
| instance, | ||
| onSelect, | ||
| targetProject, | ||
| onCancel, | ||
| migrate, | ||
| }) => { | ||
| const summary = ( | ||
| <div className="migrate-instance-summary"> | ||
| <p> | ||
| This will migrate the instance <strong>{instance.name}</strong> to the | ||
| project <b>{targetProject}</b>. | ||
| </p> | ||
| </div> | ||
| ); | ||
|
|
||
| return ( | ||
| <> | ||
| {targetProject && summary} | ||
| {!targetProject && ( | ||
| <ProjectSelectTable | ||
| onSelect={onSelect} | ||
| disableProject={{ | ||
| name: instance.project, | ||
| reason: "Instance already in this project", | ||
| }} | ||
| /> | ||
| )} | ||
| <footer id="migrate-instance-actions" className="p-modal__footer"> | ||
| <Button | ||
| className="u-no-margin--bottom" | ||
| type="button" | ||
| aria-label="cancel migrate" | ||
| appearance="base" | ||
| onClick={onCancel} | ||
| > | ||
| Cancel | ||
| </Button> | ||
| <ActionButton | ||
| appearance="positive" | ||
| className="u-no-margin--bottom" | ||
| onClick={() => migrate(targetProject)} | ||
| disabled={!targetProject} | ||
| > | ||
| Migrate | ||
| </ActionButton> | ||
| </footer> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default InstanceProjectMigration; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| import { FC } from "react"; | ||
| import { Button, MainTable } from "@canonical/react-components"; | ||
| import ScrollableTable from "components/ScrollableTable"; | ||
| import { useQuery } from "@tanstack/react-query"; | ||
| import { queryKeys } from "util/queryKeys"; | ||
| import classnames from "classnames"; | ||
| import { fetchProjects } from "api/projects"; | ||
|
|
||
| interface Props { | ||
| onSelect: (member: string) => void; | ||
| disableProject?: { | ||
| name: string; | ||
| reason: string; | ||
| }; | ||
| } | ||
|
|
||
| const ProjectSelectTable: FC<Props> = ({ onSelect, disableProject }) => { | ||
| const { data: projects = [], isLoading } = useQuery({ | ||
| queryKey: [queryKeys.projects], | ||
| queryFn: fetchProjects, | ||
| }); | ||
|
|
||
| const headers = [ | ||
| { content: "Name", sortKey: "name" }, | ||
| { "aria-label": "Actions", className: "actions" }, | ||
| ]; | ||
|
|
||
| const rows = projects.map((project) => { | ||
| const disableReason = | ||
| disableProject?.name === project.name ? disableProject?.reason : null; | ||
| const selectMember = () => { | ||
| if (disableReason) { | ||
| return; | ||
| } | ||
| onSelect(project.name); | ||
| }; | ||
|
|
||
| return { | ||
| className: classnames("u-row", { | ||
| "u-text--muted": disableReason, | ||
| "u-row--disabled": disableReason, | ||
| }), | ||
| columns: [ | ||
| { | ||
| content: ( | ||
| <div | ||
| className="u-truncate migrate-instance-name" | ||
| title={project.name} | ||
| > | ||
| {project.name} | ||
| </div> | ||
| ), | ||
| role: "cell", | ||
| "aria-label": "Name", | ||
| onClick: selectMember, | ||
| }, | ||
| { | ||
| content: ( | ||
| <Button | ||
| onClick={selectMember} | ||
| dense | ||
| title={disableReason} | ||
| disabled={Boolean(disableReason)} | ||
| > | ||
| Select | ||
| </Button> | ||
| ), | ||
| role: "cell", | ||
| "aria-label": "Actions", | ||
| className: "u-align--right", | ||
| onClick: selectMember, | ||
| }, | ||
| ], | ||
| sortData: { | ||
| name: project.name.toLowerCase(), | ||
| }, | ||
| }; | ||
| }); | ||
|
|
||
| return ( | ||
| <div className="migrate-instance-table u-selectable-table-rows"> | ||
| <ScrollableTable | ||
| dependencies={[projects]} | ||
| tableId="migrate-instance-table" | ||
| belowIds={["status-bar", "migrate-instance-actions"]} | ||
| > | ||
| <MainTable | ||
| id="migrate-instance-table" | ||
| headers={headers} | ||
| rows={rows} | ||
| sortable | ||
| className="u-table-layout--auto" | ||
| emptyStateMsg={ | ||
| isLoading | ||
| ? "Loading cluster members..." | ||
| : "No cluster members available" | ||
| } | ||
| /> | ||
| </ScrollableTable> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ProjectSelectTable; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.