Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
akillibulut
/
coriolis-web
-ын хуулбар https://github.com/cloudbase/coriolis-web.git
2
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Эх сурвалжийг харах

Add support for multiple task 'dependsOn' values

Multiple dependencies (other task IDs) are now shown in execution's
tasks' info.

Each ID shown in dependencies is also a link to that dependency.

Previously, only the first one was shown.
Sergiu Miclea 6 жил өмнө
parent
b8d8e8c0b2
commit
b3f517f775
2 өөрчлөгдсөн 117 нэмэгдсэн , 43 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 67 39
      src/components/molecules/TaskItem/TaskItem.jsx
  2. 50 4
      src/components/organisms/Executions/story.jsx

+ 67 - 39
src/components/molecules/TaskItem/TaskItem.jsx
Файл харах 

@@ -77,19 +77,25 @@ const Body = styled.div`
 
   flex-direction: column;
 
   flex-direction: column;
 
   padding: 24px 8px;
 
   padding: 24px 8px;
 
 `
 
 `
 
+const Columns = styled.div`
 
+  display: flex;
 
+`
 
+const Column = styled.div`
 
+  display: flex;
 
+  flex-direction: column;
 
+`
 
 const Row = styled.div`
 
 const Row = styled.div`
 
   display: flex;
 
   display: flex;
 
   margin-bottom: 24px;
 
   margin-bottom: 24px;
 
-  &:last-child {
 
-    margin-bottom: 0;
 
-  }
 
 `
 
 `
 
 const RowData = styled.div`
 
 const RowData = styled.div`
 
-  ${props => props.width ? css`width: ${props.width};` : ''}
 
-  &:first-child {
 
-    padding-left: 24px;
 
-    ${props => css`width: calc(${props.width} - 24px);`}
 
-  }
 
+  ${props => props.width ? css`min-width: ${props.width};` : ''}
 
+  ${props => !props.skipPaddingLeft ? css`
 
+    &:first-child {
 
+      padding-left: 24px;
 
+      ${props => css`min-width: calc(${props.width} + 21px);`}
 
+    }
 
+  ` : ''}
 
 `
 
 `
 
 const Label = styled.div`
 
 const Label = styled.div`
 
   text-transform: uppercase;
 
   text-transform: uppercase;
 
@@ -108,6 +114,10 @@ const Value = styled.div`
 
     ${props => props.primaryOnHover ? css`color: ${Palette.primary};` : ''}
 
     ${props => props.primaryOnHover ? css`color: ${Palette.primary};` : ''}
 
   }
 
   }
 
 `
 
 `
 
+const DependsOnIds = styled.div`
 
+  display: flex;
 
+  flex-direction: column;
 
+`
 
 const ExceptionText = styled.div`
 
 const ExceptionText = styled.div`
 
   cursor: pointer;
 
   cursor: pointer;
 
   text-overflow: ellipsis;
 
   text-overflow: ellipsis;
 
@@ -194,19 +204,26 @@ class TaskItem extends React.Component<Props> {
 
   }
 
   }
 
 
 
   renderDependsOnValue() {
 
   renderDependsOnValue() {
 
-    if (this.props.item.depends_on && this.props.item.depends_on.length > 0 && this.props.item.depends_on[0]) {
 
-      return (
 
-        <Value
 
-          width="calc(100% - 16px)"
 
-          primaryOnHover
 
-          textEllipsis
 
-          onClick={e => { e.stopPropagation(); this.props.onDependsOnClick(this.props.item.depends_on[0]) }}
 
-          onMouseDown={e => { e.stopPropagation() }}
 
-          onMouseUp={e => { e.stopPropagation() }}
 
-        >{this.props.item.depends_on[0]}</Value>)
 
+    const { depends_on: dependsOn } = this.props.item
 
+    if (!dependsOn || !dependsOn.length || !dependsOn.find(Boolean)) {
 
+      return <Value>N/A</Value>
 
     }
 
     }
 
 
 
-    return <Value>N/A</Value>
 
+    return (
 
+      <DependsOnIds>
 
+        {dependsOn.map(id => id ? (
 
+          <Value
 
+            key={id}
 
+            width="140px"
 
+            primaryOnHover
 
+            textEllipsis
 
+            onClick={e => { e.stopPropagation(); this.props.onDependsOnClick(id) }}
 
+            onMouseDown={e => { e.stopPropagation() }}
 
+            onMouseUp={e => { e.stopPropagation() }}
 
+          >{id}</Value>
 
+        ) : null)}
 
+      </DependsOnIds>
 
+    )
 
   }
 
   }
 
 
 
   renderProgressUpdates() {
 
   renderProgressUpdates() {
 
@@ -259,29 +276,40 @@ class TaskItem extends React.Component<Props> {
 
   }
 
   }
 
 
 
   renderBody() {
 
   renderBody() {
 
+    let { columnWidths } = this.props
 
     return (
 
     return (
 
       <Collapse isOpened={this.props.open} springConfig={{ stiffness: 100, damping: 20 }}>
 
       <Collapse isOpened={this.props.open} springConfig={{ stiffness: 100, damping: 20 }}>
 
         <Body>
 
         <Body>
 
-          <Row>
 
-            <RowData width={this.props.columnWidths[0]}>
 
-              <Label>Status</Label>
 
-              <StatusPill small status={this.props.item.status} />
 
-            </RowData>
 
-            <RowData width={`${parseInt(this.props.columnWidths[1], 10) + parseInt(this.props.columnWidths[2], 10)}%`}>
 
-              <Label>ID</Label>
 
-              <CopyValue value={this.props.item.id} width="auto" />
 
-            </RowData>
 
-            <RowData width={this.props.columnWidths[3]}>
 
-              <Label>Depends on</Label>
 
-              {this.renderDependsOnValue()}
 
-            </RowData>
 
-          </Row>
 
-          <Row>
 
-            <RowData width="100%">
 
-              <Label>Exception Details</Label>
 
-              {this.renderExceptionDetails()}
 
-            </RowData>
 
-          </Row>
 
+          <Columns>
 
+            <Column style={{
 
+              minWidth: `calc(${columnWidths[0]} + ${columnWidths[1]} + ${columnWidths[2]} - 16px)`,
 
+              paddingRight: '16px',
 
+            }}
 
+            >
 
+              <Row>
 
+                <RowData width={columnWidths[0]}>
 
+                  <Label>Status</Label>
 
+                  <StatusPill small status={this.props.item.status} />
 
+                </RowData>
 
+                <RowData width={`calc(${columnWidths[1]} + ${columnWidths[2]})`}>
 
+                  <Label>ID</Label>
 
+                  <CopyValue value={this.props.item.id} width="auto" />
 
+                </RowData>
 
+              </Row>
 
+              <Row>
 
+                <RowData style={{ width: 'calc(100% - 24px)' }}>
 
+                  <Label>Exception Details</Label>
 
+                  {this.renderExceptionDetails()}
 
+                </RowData>
 
+              </Row>
 
+            </Column>
 
+            <Column style={{ minWidth: columnWidths[3] }}>
 
+              <RowData skipPaddingLeft>
 
+                <Label>Depends on</Label>
 
+                {this.renderDependsOnValue()}
 
+              </RowData>
 
+            </Column>
 
+          </Columns>
 
           <Row style={{ marginBottom: 0 }}>
 
           <Row style={{ marginBottom: 0 }}>
 
             <RowData width="100%">
 
             <RowData width="100%">
 
               <Label>Progress Updates</Label>
 
               <Label>Progress Updates</Label>

+ 50 - 4
src/components/organisms/Executions/story.jsx
Файл харах 

@@ -25,7 +25,51 @@ let tasks = [
 
     status: 'COMPLETED',
 
     status: 'COMPLETED',
 
     created_at: new Date(),
 
     created_at: new Date(),
 
     depends_on: ['depends on id'],
 
     depends_on: ['depends on id'],
 
-    id: 'task-1',
 
+    id: 'abcdefg-abcdefg-abcdefg-abcdefg-abcdefg',
 
+    task_type: 'Task name 1',
 
+  },
 
+  {
 
+    progress_updates: [
 
+      { message: 'the task has a progress of 10%', created_at: new Date() },
 
+    ],
 
+    exception_details: 'Exception details',
 
+    status: 'COMPLETED',
 
+    created_at: new Date(),
 
+    depends_on: ['depends on id'],
 
+    id: 'hijklmn-hijklmn-hijklmn-hijklmn-hijklmn',
 
+    task_type: 'Task name 1',
 
+  },
 
+  {
 
+    progress_updates: [
 
+      { message: 'the task has a progress of 10%', created_at: new Date() },
 
+    ],
 
+    exception_details: 'Exception details',
 
+    status: 'COMPLETED',
 
+    created_at: new Date(),
 
+    depends_on: ['depends on id'],
 
+    id: 'opqrst-opqrst-opqrst-opqrst-opqrst',
 
+    task_type: 'Task name 1',
 
+  },
 
+  {
 
+    progress_updates: [
 
+      { message: 'the task has a progress of 10%', created_at: new Date() },
 
+    ],
 
+    exception_details: 'Exception details',
 
+    status: 'COMPLETED',
 
+    created_at: new Date(),
 
+    depends_on: ['depends on id'],
 
+    id: 'uvwxyz-uvwxyz-uvwxyz-uvwxyz-uvwxyz',
 
+    task_type: 'Task name 1',
 
+  },
 
+  {
 
+    progress_updates: [
 
+      { message: 'the task has a progress of 10%', created_at: new Date() },
 
+    ],
 
+    exception_details: 'Exception details',
 
+    status: 'COMPLETED',
 
+    created_at: new Date(),
 
+    depends_on: ['task-2'],
 
+    id: '01234-01234-01234-01234-01234',
 
     task_type: 'Task name 1',
 
     task_type: 'Task name 1',
 
   },
 
   },
 
   {
 
   {
 
@@ -33,11 +77,13 @@ let tasks = [
 
       { message: 'the task has a progress of 50%', created_at: new Date() },
 
       { message: 'the task has a progress of 50%', created_at: new Date() },
 
       { message: 'the task is almost done', created_at: new Date() },
 
       { message: 'the task is almost done', created_at: new Date() },
 
     ],
 
     ],
 
-    exception_details: 'Exception details',
 
+    exception_details: 'Long Exception details Long Exception details Long Exception details Long Exception details Long Exception details Long Exception details Long Exception details Long Exception details Long Exception details Long Exception details Long Exception details Long Exception details Long Exception details Long Exception details Long Exception details Long Exception',
 
+    // exception_details: 'NA',
 
     status: 'RUNNING',
 
     status: 'RUNNING',
 
     created_at: new Date(),
 
     created_at: new Date(),
 
-    depends_on: ['depends on id'],
 
-    id: 'task-2',
 
+    depends_on: ['abcdefg-abcdefg-abcdefg-abcdefg-abcdefg', 'hijklmn-hijklmn-hijklmn-hijklmn-hijklmn', 'opqrst-opqrst-opqrst-opqrst-opqrst', 'uvwxyz-uvwxyz-uvwxyz-uvwxyz-uvwxyz', '01234-01234-01234-01234-01234'],
 
+    // depends_on: ['', 0, 's'],
 
+    id: '67890-67890-67890-67890',
 
     task_type: 'Task name 2',
 
     task_type: 'Task name 2',
 
   },
 
   },
 
 ]
 
 ]