dyrector-io · polaroi8d · Sep 6, 2022 · Sep 1, 2022 · Sep 1, 2022 · Sep 2, 2022
@@ -700,6 +700,9 @@ message CreateDeploymentRequest {
 
   string versionId = 100;
   string nodeId = 101;
+  string name = 102;
+  optional string description = 103;
+  string prefix = 104;
 }
 
 message UpdateDeploymentRequest {
@@ -772,6 +775,7 @@ message DeploymentByVersionResponse {
   string nodeId = 102;
   string nodeName = 103;
   common.DeploymentStatus status = 104;
+  NodeConnectionStatus nodeStatus = 105;
 }
 
 message DeploymentDetailsResponse {

@@ -23,6 +23,7 @@
 
   "filters": "Filters",
   "search": "Search",
+  "all": "All",
   "id": "#",
   "description": "Description",
   "icon": "Icon",
@@ -103,6 +104,8 @@
     "shark": "Shark icon"
   },
 
+  "nodeUnreachable": "Node is unreachable!",
+
   "nodeStatuses": {
     "connecting": "Connecting",
     "running": "Running",

@@ -4,5 +4,6 @@
   "log": "Log",
   "environmentConfig": "Environment config",
   "created": "Created",
+  "actions": "Actions",
   "noItems": "You haven't made a deployment."
 }
@@ -11,9 +11,9 @@ const ContainerStatusTag = (props: ContainerStatusTagProps) => {
 
   const statusToBgColor = () => {
     switch (state) {
-      case 'exited':
       case 'running':
         return 'bg-dyo-green'
+      case 'exited':
       case 'dead':
       case 'restarting':
         return 'bg-error-red'
@@ -26,9 +26,9 @@ const ContainerStatusTag = (props: ContainerStatusTagProps) => {
 
   const statusToTextColor = () => {
     switch (state) {
-      case 'exited':
       case 'running':
         return 'text-dyo-green'
+      case 'exited':
       case 'dead':
       case 'restarting':
         return 'text-error-red'

@@ -2,7 +2,10 @@ import DyoButton from '@app/elements/dyo-button'
 import { DyoCard } from '@app/elements/dyo-card'
 import DyoChips from '@app/elements/dyo-chips'
 import { DyoHeading } from '@app/elements/dyo-heading'
+import { DyoInput } from '@app/elements/dyo-input'
 import { DyoLabel } from '@app/elements/dyo-label'
+import DyoMessage from '@app/elements/dyo-message'
+import DyoTextArea from '@app/elements/dyo-text-area'
 import { defaultApiErrorHandler } from '@app/errors'
 import { CreateDeployment, DeploymentCreated, DyoApiError, DyoNode } from '@app/models'
 import { API_NODES, versionDeploymentsApiUrl } from '@app/routes'
@@ -33,6 +36,9 @@ const AddDeploymentCard = (props: AddDeploymentCardProps) => {
     validationSchema: createDeploymentSchema,
     initialValues: {
       nodeId: null as string,
+      name: '',
+      description: '',
+      prefix: '',
     },
     onSubmit: async (values, { setSubmitting, setFieldError }) => {
       setSubmitting(true)
@@ -69,11 +75,9 @@ const AddDeploymentCard = (props: AddDeploymentCardProps) => {
           {t('common:discard')}
         </DyoButton>
 
-        {!formik.values.nodeId ? null : (
-          <DyoButton outlined className="ml-2 px-10" onClick={() => formik.submitForm()}>
-            {t('common:add')}
-          </DyoButton>
-        )}
+        <DyoButton outlined className="ml-2 px-10" onClick={() => formik.submitForm()}>
+          {t('common:add')}
+        </DyoButton>
       </div>
 
       {fetchNodesError ? (
@@ -86,15 +90,45 @@ const AddDeploymentCard = (props: AddDeploymentCardProps) => {
         <DyoLabel>{t('common:loading')}</DyoLabel>
       ) : (
         <div className="flex flex-col">
-          <div className="flex flex-wrap mt-4">
-            <DyoLabel className="ml-8 mr-2 my-auto">{t('common:nodes')}</DyoLabel>
-
-            <DyoChips
-              choices={nodes}
-              converter={(it: DyoNode) => it.name}
-              onSelectionChange={it => formik.setFieldValue('nodeId', it.id)}
-            />
-          </div>
+          <DyoLabel className="mt-8 mb-2.5">{t('common:nodes')}</DyoLabel>
+
+          <DyoChips
+            choices={nodes}
+            converter={(it: DyoNode) => it.name}
+            onSelectionChange={it => formik.setFieldValue('nodeId', it.id)}
+          />
+          {!formik.errors.nodeId ? null : <DyoMessage message={formik.errors.nodeId} messageType="error" />}
+
+          <DyoInput
+            className="max-w-lg"
+            grow
+            name="name"
+            required
+            label={t('common:name')}
+            onChange={formik.handleChange}
+            value={formik.values.name}
+            message={formik.errors.name}
+          />
+
+          <DyoInput
+            className="max-w-lg"
+            grow
+            name="prefix"
+            required
+            label={t('common:prefix')}
+            onChange={formik.handleChange}
+            value={formik.values.prefix}
+            message={formik.errors.prefix}
+          />
+
+          <DyoTextArea
+            className="h-48"
+            grow
+            name="description"
+            label={t('common:description')}
+            onChange={formik.handleChange}
+            value={formik.values.description}
+          />
         </div>
       )}
     </DyoCard>

@@ -45,7 +45,7 @@ const DeploymentContainerStatusList = (props: DeploymentContainerStatusListProps
       <ContainerStatusIndicator state={item.state} />,
       <span>{item.name}</span>,
       <span>{timeAgo(t, seconds)}</span>,
-      <ContainerStatusTag state={item.state} />,
+      <ContainerStatusTag className="inline-block" state={item.state} />,
     ]
     /* eslint-enable react/jsx-key */
   }

@@ -7,7 +7,6 @@ import { DeploymentRoot, NodeStatusMessage, WS_TYPE_NODE_STATUS } from '@app/mod
 import { WS_NODES } from '@app/routes'
 import clsx from 'clsx'
 import React, { useState } from 'react'
-import DeploymentStatusIndicator from './deployment-status-indicator'
 import DeploymentStatusTag from './deployment-status-tag'
 
 interface DeploymentDetailsCardProps {
@@ -33,7 +32,6 @@ const DeploymentDetailsCard = (props: DeploymentDetailsCardProps) => {
     <DyoCard className={clsx('flex flex-col', className ?? 'p-6')}>
       <div className="flex flex-row justify-between">
         <div className="flex">
-          <DeploymentStatusIndicator className="mr-4" status={deployment.status} />
           <DyoHeading element="h4" className="text-xl font-bold text-bright">
             {deployment.name}
           </DyoHeading>

@@ -20,7 +20,7 @@ interface EditDeploymentCardProps {
 }
 
 const EditDeploymentCard = (props: EditDeploymentCardProps) => {
-  const { deployment, className, submitRef, onDeploymentEdited } = props
+  const { deployment, className, onDeploymentEdited, submitRef } = props
 
   const { t } = useTranslation('deployments')
 
@@ -77,15 +77,6 @@ const EditDeploymentCard = (props: EditDeploymentCardProps) => {
           message={formik.errors.name}
         />
 
-        <DyoTextArea
-          className="h-48"
-          grow
-          name="description"
-          label={t('common:description')}
-          onChange={formik.handleChange}
-          value={formik.values.description}
-        />
-
         <DyoInput
           className="max-w-lg"
           grow
@@ -97,6 +88,15 @@ const EditDeploymentCard = (props: EditDeploymentCardProps) => {
           message={formik.errors.prefix}
         />
 
+        <DyoTextArea
+          className="h-48"
+          grow
+          name="description"
+          label={t('common:description')}
+          onChange={formik.handleChange}
+          value={formik.values.description}
+        />
+
         <DyoButton className="hidden" type="submit" />
       </form>
     </DyoCard>