Главная Обзор Помощь
Вход
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 лет назад
Родитель
b8d8e8c0b2
Сommit
b3f517f775
2 измененных файлов с 117 добавлено и 43 удалено
Разделённый вид Показать статистику Diff
  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;
 
   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
Просмотреть файл 

@@ -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',
 
   },
 
 ]