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

feature: upgrade application deployment #721

Closed
wants to merge 2 commits into from
Closed

feature: upgrade application deployment #721

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a575532
TODO: schema
shinnokdisengir Nov 15, 2024
88fd704
changed graphql query
shinnokdisengir Nov 17, 2024
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
14 changes: 14 additions & 0 deletions frontend/src/api/schema.graphql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -847,6 +847,8 @@ input ReleaseCreateContainersInput {
env: JsonString
image: ContainerCreateWithNestedImageInput
hostname: String
networkMode: String
portBindings: [String!]
privileged: Boolean
restartPolicy: String
}
Expand Down Expand Up @@ -1228,6 +1230,15 @@ type Image {
credentials: ImageCredentials
}

"The result of the :delete_deployment mutation"
type DeleteDeploymentResult {
"The successful result of the mutation"
result: Deployment

"Any errors generated, if the mutation failed"
errors: [MutationError!]!
}

"The result of the :stop_deployment mutation"
type StopDeploymentResult {
"The successful result of the mutation"
Expand Down Expand Up @@ -3755,6 +3766,9 @@ type RootMutationType {
"Sends a :stop command to the release on the device."
stopDeployment(id: ID!): StopDeploymentResult

"Sends a :delete command to the release on the device."
deleteDeployment(id: ID!): DeleteDeploymentResult

"Create image credentials."
createImageCredentials(
input: CreateImageCredentialsInput!
Expand Down
95 changes: 78 additions & 17 deletions frontend/src/components/DeployedApplicationsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@
SPDX-License-Identifier: Apache-2.0
*/

import { useCallback } from "react";
import { defineMessages, FormattedMessage } from "react-intl";
import { graphql, useFragment, useMutation } from "react-relay/hooks";
import { useCallback } from "react";

import type {
ApplicationDeploymentStatus,
Expand All @@ -31,8 +31,10 @@ import type { DeployedApplicationsTable_startDeployment_Mutation } from "api/__g
import type { DeployedApplicationsTable_stopDeployment_Mutation } from "api/__generated__/DeployedApplicationsTable_stopDeployment_Mutation.graphql";

import Icon from "components/Icon";
import { Link, Route } from "Navigation";
import Table, { createColumnHelper } from "components/Table";
import { Link, Route } from "Navigation";
import Tag from "./Tag";
import Button from "./Button";

// We use graphql fields below in columns configuration
/* eslint-disable relay/unused-fields */
Expand All @@ -49,6 +51,15 @@ const DEPLOYED_APPLICATIONS_TABLE_FRAGMENT = graphql`
application {
id
name
# TODO sorting by created_id
releases(sort: { field: VERSION }) {
edges {
node {
id
version
}
}
}
}
}
}
Expand Down Expand Up @@ -83,6 +94,19 @@ const STOP_DEPLOYMENT_MUTATION = graphql`
}
`;

// const UPGRADE_DEPLOYMENT_MUTATION = graphql`
// mutation DeployedApplicationsTable_upgradeDeployment_Mutation($id: ID!, $target: ID!) {
// upgradeDeployment(id: $id, target: $target) {
// result {
// id
// }
// errors {
// message
// }
// }
// }
// `;

// Define colors for each ApplicationDeploymentStatus
const statusColors: Record<ApplicationDeploymentStatus, string> = {
STARTING: "text-muted",
Expand Down Expand Up @@ -154,26 +178,26 @@ const ActionButtons = ({
}) => (
<div>
{status === "STOPPED" || status === "ERROR" ? (
<button
<Button
onClick={onStart}
className="btn p-0 text-success border-0 bg-transparent"
>
<Icon icon="play" className="text-success" />
</button>
</Button>
) : status === "STARTED" ? (
<button
<Button
onClick={onStop}
className="btn p-0 text-danger border-0 bg-transparent"
>
<Icon icon="stop" className="text-danger" />
</button>
</Button>
) : (
<button className="btn p-0 border-0 bg-transparent" disabled>
<Button className="btn p-0 border-0 bg-transparent" disabled>
<Icon
icon={status === "STARTING" ? "play" : "stop"}
className="text-muted"
/>
</button>
</Button>
)}
</div>
);
Expand All @@ -194,7 +218,7 @@ const DeployedApplicationsTable = ({
onDeploymentChange,
}: DeploymentTableProps) => {
const data = useFragment(DEPLOYED_APPLICATIONS_TABLE_FRAGMENT, deviceRef);

console.log("data", data);
const [startDeployment] =
useMutation<DeployedApplicationsTable_startDeployment_Mutation>(
START_DEPLOYMENT_MUTATION,
Expand All @@ -215,7 +239,7 @@ const DeployedApplicationsTable = ({
})) || [];

const handleStartDeployedApplication = useCallback(
(deploymentId: string) => {
async (deploymentId: string) => {
startDeployment({
variables: { id: deploymentId },
onCompleted: (data, errors) => {
Expand Down Expand Up @@ -244,7 +268,7 @@ const DeployedApplicationsTable = ({
);

const handleStopDeployedApplication = useCallback(
(deploymentId: string) => {
async (deploymentId: string) => {
stopDeployment({
variables: { id: deploymentId },
onCompleted: (data, errors) => {
Expand Down Expand Up @@ -272,6 +296,31 @@ const DeployedApplicationsTable = ({
[stopDeployment, setErrorFeedback, onDeploymentChange],
);

const handleUpgradeDeployedRelease = useCallback(
async (deploymentId: string) => {
try {
await handleStopDeployedApplication(deploymentId);
// TODO upgrade
await handleStartDeployedApplication(deploymentId);
onDeploymentChange(); // Trigger data refresh
setErrorFeedback(null);
} catch (error) {
setErrorFeedback(
<FormattedMessage
id="XXXXXXX"
defaultMessage="Could not Upgrade the Deployed Application, please try again."
/>,
);
}
},
[
handleStopDeployedApplication,
handleStartDeployedApplication,
onDeploymentChange,
setErrorFeedback,
],
);

const columnHelper = createColumnHelper<(typeof deployments)[0]>();
const columns = [
columnHelper.accessor("applicationName", {
Expand All @@ -298,12 +347,24 @@ const DeployedApplicationsTable = ({
/>
),
cell: ({ row, getValue }) => (
<Link
route={Route.release}
params={{ releaseId: row.original.releaseId }}
>
{getValue()}
</Link>
<span>
<span className="d-inline-block">
<Link
route={Route.release}
params={{ releaseId: row.original.releaseId }}
>
{getValue()}
</Link>
</span>
<span className="d-inline-block mx-1">
<Button
as={Tag}
onClick={() => handleUpgradeDeployedRelease(row.original.id)}
>
Upgrade
</Button>
</span>
</span>
),
}),
columnHelper.accessor("status", {
Expand Down
Loading