Home Explore Help
Sign In
akillibulut
/
coriolis-web
mirror of https://github.com/cloudbase/coriolis-web.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

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 years ago
parent
b8d8e8c0b2
commit
b3f517f775
2 changed files with 117 additions and 43 deletions
Split View Show Diff Stats
  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
View File 

@@ -77,19 +77,25 @@ const Body = styled.div`
 
   flex-direction: column;
 
   padding: 24px 8px;
 
 `
 
+const Columns = styled.div`
 
+  display: flex;
 
+`
 
+const Column = styled.div`
 
+  display: flex;
 
+  flex-direction: column;
 
+`
 
 const Row = styled.div`
 
   display: flex;
 
   margin-bottom: 24px;
 
-  &:last-child {
 
-    margin-bottom: 0;
 
-  }
 
 `
 
 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`
 
   text-transform: uppercase;
 
@@ -108,6 +114,10 @@ const Value = styled.div`
 
     ${props => props.primaryOnHover ? css`color: ${Palette.primary};` : ''}
 
   }
 
 `
 
+const DependsOnIds = styled.div`
 
+  display: flex;
 
+  flex-direction: column;
 
+`
 
 const ExceptionText = styled.div`
 
   cursor: pointer;
 
   text-overflow: ellipsis;
 
@@ -194,19 +204,26 @@ class TaskItem extends React.Component<Props> {
 
   }
 
 
   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() {
 
@@ -259,29 +276,40 @@ class TaskItem extends React.Component<Props> {
 
   }
 
 
   renderBody() {
 
+    let { columnWidths } = this.props
 
     return (
 
       <Collapse isOpened={this.props.open} springConfig={{ stiffness: 100, damping: 20 }}>
 
         <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 }}>
 
             <RowData width="100%">
 
               <Label>Progress Updates</Label>

+ 50 - 4
src/components/organisms/Executions/story.jsx
View File 

@@ -25,7 +25,51 @@ let tasks = [
 
     status: 'COMPLETED',
 
     created_at: new Date(),
 
     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',
 
   },
 
   {
 
@@ -33,11 +77,13 @@ let tasks = [
 
       { message: 'the task has a progress of 50%', 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',
 
     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',
 
   },
 
 ]