fix: SequenceDiagram bar widths are pretty buggy

Fixes #6408
kubernetes-sigs · Dec 15, 2020 · 323f5a5 · 323f5a5
1 parent 3618acf
commit 323f5a5
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 16 deletions.
diff --git a/plugins/plugin-client-common/src/components/Content/Table/SequenceDiagram.tsx b/plugins/plugin-client-common/src/components/Content/Table/SequenceDiagram.tsx
@@ -93,7 +93,7 @@ export default class SequenceDiagram extends React.PureComponent<Props, State> {
   }
 
   /** @return numerator/interval formatted */
-  private getFraction(numerator: number, interval?: DenseInterval): number {
+  private getFraction(numerator: number, interval: DenseInterval): number {
     if (interval && (!interval.startMillis || !interval.endMillis)) {
       return 0
     } else {
@@ -179,7 +179,8 @@ export default class SequenceDiagram extends React.PureComponent<Props, State> {
             // case 2: the gap is small relative to the start of the
             // current interval and for the same job as the current
             // interval, in which case we add to current interval
-            currentInterval.endMillis = endMillis
+            currentInterval.endMillis = Math.max(endMillis, currentInterval.endMillis)
+            currentInterval.startMillis = Math.min(startMillis, currentInterval.startMillis)
             currentInterval.rows.push(row)
           } else {
             // case 3: gap too long, or new job -- create new interval
@@ -341,7 +342,7 @@ export default class SequenceDiagram extends React.PureComponent<Props, State> {
             const duration = durationCol || (!endMillis ? 0 : endMillis - startMillis)
 
             const left = this.getFraction(startMillis - interval.startMillis, interval)
-            let width = !duration ? undefined : this.getFraction(duration)
+            let width = !duration ? undefined : this.getFraction(duration, interval)
             if (left + width > 1) {
               /* console.error(
                 'oops',
@@ -360,10 +361,10 @@ export default class SequenceDiagram extends React.PureComponent<Props, State> {
               this.props.response.coldStartColumnIdx >= 0 && row.attributes[this.props.response.coldStartColumnIdx]
                 ? parseInt(row.attributes[this.props.response.coldStartColumnIdx].value, 10)
                 : undefined
-            let widthB = coldStart ? this.getFraction(coldStart) : undefined
+            let widthB = coldStart ? this.getFraction(coldStart, interval) : undefined
             const title = strings('Duration', prettyPrintDuration(duration))
             const titleB = coldStart ? strings('Cold Start', prettyPrintDuration(coldStart), title) : undefined
-            const className = colorByStatus ? trafficLight(row.attributes[idx4]) : durationColor(duration, false)
+            const className = colorByStatus ? '' /* trafficLight(row.attributes[idx4]) */ : durationColor(duration, false)
             if (left + widthB > 1) {
               /* console.error(
                 'oopsB',
@@ -407,7 +408,7 @@ export default class SequenceDiagram extends React.PureComponent<Props, State> {
                   (rowIdx === interval.rows.length - 1 ? ' kui--sequence-diagram-last-row-in-interval' : '')
                 }
               >
-                {colorByStatus && (
+                {false && colorByStatus && (
                   <td className="kui--secondary-text">
                     <span
                       className={
@@ -419,13 +420,6 @@ export default class SequenceDiagram extends React.PureComponent<Props, State> {
                     </span>
                   </td>
                 )}
-                {colorByStatus && (
-                  <td className="kui--secondary-text">
-                    <span className={'cell-inner ' + trafficLight(row.attributes[idx4])}>
-                      {!isOverheadRow && row.attributes[idx4].value}
-                    </span>
-                  </td>
-                )}
                 <td className="kui--sequence-diagram-bar-cell" onClick={onClick}>
                   <Bar
                     left={left}
@@ -438,6 +432,13 @@ export default class SequenceDiagram extends React.PureComponent<Props, State> {
                   />
                 </td>
                 <td className="kui--tertiary-text">{gapText}</td>
+                {colorByStatus && (
+                  <td className="kui--secondary-text">
+                    <span className={'cell-inner ' + trafficLight(row.attributes[idx4])}>
+                      {!isOverheadRow && row.attributes[idx4].value}
+                    </span>
+                  </td>
+                )}
                 {/* this.props.response.statusColumnIdx >= 0
                   ? renderCell(
                       this.props.response,
@@ -481,7 +482,7 @@ export default class SequenceDiagram extends React.PureComponent<Props, State> {
         <table
           className="bx--data-table bx--data-table--compact kui--sequence-diagram"
           data-size={this.size()}
-          data-color-by={this.props.response.colorBy || 'duration'}
+          data-color-by="duration"
         >
           {/* this.header() */}
           <tbody>{this.rows()}</tbody>

diff --git a/plugins/plugin-client-common/web/scss/components/Table/SequenceDiagram/Bar.scss b/plugins/plugin-client-common/web/scss/components/Table/SequenceDiagram/Bar.scss
@@ -69,7 +69,7 @@
   }
 
   &.kui--bar-default-color {
-    background-color: var(--color-latency-1);
+    background-color: var(--color-base05);
   }
 
   &.gray-background {

diff --git a/plugins/plugin-client-common/web/scss/components/Table/SequenceDiagram/_index.scss b/plugins/plugin-client-common/web/scss/components/Table/SequenceDiagram/_index.scss
@@ -63,7 +63,7 @@ body[kui-theme-style] {
     }
 
     td.kui--secondary-text {
-      font-size: 0.75rem;
+      font-size: 0.6875rem;
     }
     td.kui--tertiary-text {
       font-size: 0.625rem;

diff --git a/plugins/plugin-ibmcloud/ce/src/controller/job/kubectl.ts b/plugins/plugin-ibmcloud/ce/src/controller/job/kubectl.ts
@@ -61,6 +61,7 @@ export default async function KubectlGetJob(args: Arguments<KubeOptions>) {
       hideWithSidecar.forEach(idx => (table.header.attributes[idx].outerCSS = 'hide-with-sidecar'))
 
       // we want to use a sequence diagram
+      table.colorBy = 'status'
       table.defaultPresentation = 'sequence-diagram'
 
       table.body.forEach(_ => {