UI: Handle new deployment statuses

Generate latest GraphQL schema for the frontend with: ``` npm run relay:generate-schema npm run format ``` The code is adapted to handle the new schema and TypeScript types, handling all new initial deployment statuses as the synthetic "Deploying" status. Signed-off-by: Davide Briani <[email protected]>
edgehog-device-manager · Nov 26, 2024 · 2b135b4 · 2b135b4
1 parent 15344fd
commit 2b135b4
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 17 deletions.
diff --git a/frontend/src/api/schema.graphql b/frontend/src/api/schema.graphql
@@ -437,6 +437,27 @@ enum ApplicationDeploymentStatus {
 
   "The deploymen is stopping."
   STOPPING
+
+  "The deployment has been received by the backend and will be sent to the device."
+  CREATED
+
+  "All the necessary resources have been sent to the device."
+  SENT
+
+  "The deployment is ready on the device. All necessary resources are available."
+  READY
+
+  "The device is currently pulling the necessary images for the deployment."
+  PULLED_IMAGES
+
+  "The device is setting up the networks necessary for the deployment."
+  CREATED_NETWORKS
+
+  "The device is setting up the containers necessary for the deployment."
+  CREATED_CONTAINERS
+
+  "The device is setting up the release of the the deployment."
+  CREATED_DEPLOYMENT
 }
 
 input LocalizedAttributeUpdateInput {
@@ -847,6 +868,8 @@ input ReleaseCreateContainersInput {
   env: JsonString
   image: ContainerCreateWithNestedImageInput
   hostname: String
+  networkMode: String
+  portBindings: [String!]
   privileged: Boolean
   restartPolicy: String
 }
@@ -1228,6 +1251,28 @@ type Image {
   credentials: ImageCredentials
 }
 
+"The result of the :upgrade_deployment mutation"
+type UpgradeDeploymentResult {
+  "The successful result of the mutation"
+  result: Deployment
+
+  "Any errors generated, if the mutation failed"
+  errors: [MutationError!]!
+}
+
+input UpgradeDeploymentInput {
+  target: ID!
+}
+
+"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"
@@ -1263,6 +1308,7 @@ input DeployReleaseInput {
 enum DeploymentSortField {
   ID
   STATUS
+  MESSAGE
   DEVICE_ID
   RELEASE_ID
 }
@@ -1310,11 +1356,24 @@ input DeploymentFilterDeviceId {
   greaterThanOrEqual: Int
 }
 
+input DeploymentFilterMessage {
+  isNil: Boolean
+  eq: String
+  notEq: String
+  in: [String]
+  lessThan: String
+  greaterThan: String
+  lessThanOrEqual: String
+  greaterThanOrEqual: String
+  like: String
+  ilike: String
+}
+
 input DeploymentFilterStatus {
   isNil: Boolean
   eq: ApplicationDeploymentStatus
   notEq: ApplicationDeploymentStatus
-  in: [ApplicationDeploymentStatus]
+  in: [ApplicationDeploymentStatus!]
   lessThan: ApplicationDeploymentStatus
   greaterThan: ApplicationDeploymentStatus
   lessThanOrEqual: ApplicationDeploymentStatus
@@ -1338,6 +1397,7 @@ input DeploymentFilterInput {
   not: [DeploymentFilterInput!]
   id: DeploymentFilterId
   status: DeploymentFilterStatus
+  message: DeploymentFilterMessage
   deviceId: DeploymentFilterDeviceId
   releaseId: DeploymentFilterReleaseId
   device: DeviceFilterInput
@@ -1351,7 +1411,8 @@ input DeploymentSortInput {
 
 type Deployment {
   id: ID!
-  status: ApplicationDeploymentStatus
+  status: ApplicationDeploymentStatus!
+  message: String
   deviceId: Int
   releaseId: ID
   device: Device
@@ -3755,6 +3816,14 @@ 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
+
+  upgradeDeployment(
+    id: ID!
+    input: UpgradeDeploymentInput!
+  ): UpgradeDeploymentResult
+
   "Create image credentials."
   createImageCredentials(
     input: CreateImageCredentialsInput!

diff --git a/frontend/src/components/DeployedApplicationsTable.tsx b/frontend/src/components/DeployedApplicationsTable.tsx
@@ -83,12 +83,37 @@ const STOP_DEPLOYMENT_MUTATION = graphql`
   }
 `;
 
-type ExtendedApplicationDeploymentStatus =
-  | ApplicationDeploymentStatus
-  | "DEPLOYING";
+type DeploymentStatus =
+  | "DEPLOYING"
+  | "STARTING"
+  | "STARTED"
+  | "STOPPING"
+  | "STOPPED"
+  | "ERROR"
+  | "DELETING";
 
-// Define colors for each ApplicationDeploymentStatus
-const statusColors: Record<ExtendedApplicationDeploymentStatus, string> = {
+const parseDeploymentStatus = (
+  apiStatus?: ApplicationDeploymentStatus,
+): DeploymentStatus => {
+  switch (apiStatus) {
+    case "STARTED":
+      return "STARTED";
+    case "STARTING":
+      return "STARTING";
+    case "STOPPED":
+      return "STOPPED";
+    case "STOPPING":
+      return "STOPPING";
+    case "ERROR":
+      return "ERROR";
+    case "DELETING":
+      return "DELETING";
+    default:
+      return "DEPLOYING";
+  }
+};
+
+const statusColors: Record<DeploymentStatus, string> = {
   STARTING: "text-success",
   STARTED: "text-success",
   STOPPING: "text-warning",
@@ -99,7 +124,7 @@ const statusColors: Record<ExtendedApplicationDeploymentStatus, string> = {
 };
 
 // Define status messages for localization
-const statusMessages = defineMessages<ExtendedApplicationDeploymentStatus>({
+const statusMessages = defineMessages<DeploymentStatus>({
   STARTING: {
     id: "components.DeployedApplicationsTable.starting",
     defaultMessage: "Starting",
@@ -134,7 +159,7 @@ const statusMessages = defineMessages<ExtendedApplicationDeploymentStatus>({
 const DeploymentStatusComponent = ({
   status,
 }: {
-  status: ExtendedApplicationDeploymentStatus;
+  status: DeploymentStatus;
 }) => (
   <div className="d-flex align-items-center">
     <Icon
@@ -159,7 +184,7 @@ const ActionButtons = ({
   onStart,
   onStop,
 }: {
-  status: ExtendedApplicationDeploymentStatus;
+  status: DeploymentStatus;
   onStart: () => void;
   onStop: () => void;
 }) => (
@@ -224,7 +249,7 @@ const DeployedApplicationsTable = ({
       applicationName: edge.node.release?.application?.name || "Unknown",
       releaseId: edge.node.release?.id || "Unknown",
       releaseVersion: edge.node.release?.version || "N/A",
-      status: edge.node.status || "DEPLOYING",
+      status: parseDeploymentStatus(edge.node.status),
     })) || [];
 
   const handleStartDeployedApplication = useCallback(
@@ -326,11 +351,7 @@ const DeployedApplicationsTable = ({
           defaultMessage="Status"
         />
       ),
-      cell: ({ getValue }) => (
-        <DeploymentStatusComponent
-          status={getValue() as ExtendedApplicationDeploymentStatus}
-        />
-      ),
+      cell: ({ getValue }) => <DeploymentStatusComponent status={getValue()} />,
     }),
     columnHelper.accessor((row) => row, {
       id: "action",
@@ -342,7 +363,7 @@ const DeployedApplicationsTable = ({
       ),
       cell: ({ getValue }) => (
         <ActionButtons
-          status={getValue().status as ExtendedApplicationDeploymentStatus}
+          status={getValue().status}
           onStart={() => handleStartDeployedApplication(getValue().id)}
           onStop={() => handleStopDeployedApplication(getValue().id)}
         />