fix(plugins/plugin-client-common): refine Timeline a bit more

Fixes #5409
kubernetes-sigs · Aug 20, 2020 · 1418f38 · 1418f38
1 parent c8aa399
commit 1418f38
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/plugins/plugin-client-common/src/components/Content/Table/Timeline.tsx b/plugins/plugin-client-common/src/components/Content/Table/Timeline.tsx
@@ -49,7 +49,7 @@ export default class Timeline extends React.PureComponent<Props, State> {
    * Default number of buckets in the timeline
    *
    */
-  private static readonly defaultNBuckets = 20
+  private static readonly defaultNBuckets = 50
 
   public constructor(props: Props) {
     super(props)
@@ -214,7 +214,7 @@ export default class Timeline extends React.PureComponent<Props, State> {
           {Array(nTicks)
             .fill(0)
             .map((_, idx) => (
-              <div key={idx} className="kui--timeline-tick" style={{ top: ~~((100 * (idx + 1)) / (nTicks + 1)) + '%' }}>
+              <div key={idx} className="kui--timeline-tick">
                 &nbsp;
               </div>
             ))}

diff --git a/plugins/plugin-client-common/web/scss/components/Table/Timeline.scss b/plugins/plugin-client-common/web/scss/components/Table/Timeline.scss
@@ -42,6 +42,8 @@
   right: 0;
   bottom: 0;
   pointer-events: none;
+  display: flex;
+  flex-direction: column;
 
   .kui--timeline-tick {
     left: 0;
@@ -50,20 +52,26 @@
 }
 
 .kui--timeline-ticks {
-  position: relative;
-  height: 100%;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.09) 15%, rgba(0, 0, 0, 0.03) 45%, rgba(0, 0, 0, 0.01));
 }
 
 .kui--timeline-tick {
-  position: absolute;
-  border-top: 1px dashed var(--color-base03);
+  flex: 1;
+  opacity: 0.15;
+  border-top: 1px dashed var(--color-base05);
 }
 
 .kui--timeline-occupancy-line {
   top: 0;
   display: flex;
   justify-content: flex-end;
   padding: 0 0.5rem;
+  opacity: 1;
+  border-style: solid;
+  border-color: var(--color-base-03);
 }
 
 .kui--timeline-occupancy-line-label {
@@ -91,16 +99,12 @@
   .kui--timeline-buckets {
     height: 100%;
   }
-  .kui--timeline-bucket {
-    padding: 0;
-  }
 }
 
 .kui--timeline-bucket {
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding: 0 2px;
 
   [data-is='execution'],
   [data-is='cold-start'] {