chore: revert timelineRuler class to camel case and prefix with 'explore'

Signed-off-by: Nathan Yang <yanatha@amazon.com>

Author: Nathan Yang

src/plugins/explore/public/application/pages/traces/trace_details/public/traces/timeline_waterfall_bar/timeline_ruler.scss

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-.timeline_ruler {
+.exploreTimelineRuler {
   color: $euiColorMediumShade;
 
   &__baseline {
@@ -15,12 +15,12 @@
     background-color: currentColor;
   }
 
-  &__tick_container {
+  &__tickContainer {
     position: absolute;
     bottom: 0;
     transform: translateX(-50%);
 
-    .timeline_ruler__label {
+    .exploreTimelineRuler__label {
       font-size: $euiFontSizeXS;
       line-height: 1;
       white-space: nowrap;
@@ -42,7 +42,7 @@
       }
     }
 
-    .timeline_ruler__tick {
+    .exploreTimelineRuler__tick {
       height: 8px;
       width: 2px;
       background-color: currentColor;

src/plugins/explore/public/application/pages/traces/trace_details/public/traces/timeline_waterfall_bar/timeline_ruler.test.tsx

@@ -56,9 +56,9 @@ describe('TimelineRuler', () => {
 
     const { getByTestId } = render(<TimelineRuler traceTimeRange={mockTraceTimeRange} />);
 
-    expect(getByTestId('tick-label-0')).toHaveClass('timeline_ruler__label--first');
-    expect(getByTestId('tick-label-500')).toHaveClass('timeline_ruler__label--center');
-    expect(getByTestId('tick-label-1000')).toHaveClass('timeline_ruler__label--last');
+    expect(getByTestId('tick-label-0')).toHaveClass('exploreTimelineRuler__label--first');
+    expect(getByTestId('tick-label-500')).toHaveClass('exploreTimelineRuler__label--center');
+    expect(getByTestId('tick-label-1000')).toHaveClass('exploreTimelineRuler__label--last');
   });
 
   it('should pass correct parameters to useTimelineTicks', () => {
@@ -74,6 +74,6 @@ describe('TimelineRuler', () => {
 
     const { container } = render(<TimelineRuler traceTimeRange={mockTraceTimeRange} />);
 
-    expect(container.querySelectorAll('.timeline_ruler__tick_container')).toHaveLength(0);
+    expect(container.querySelectorAll('.exploreTimelineRuler__tickContainer')).toHaveLength(0);
   });
 });

src/plugins/explore/public/application/pages/traces/trace_details/public/traces/timeline_waterfall_bar/timeline_ruler.tsx

@@ -20,30 +20,33 @@ export const TimelineRuler: React.FC<TimelineRulerProps> = ({
   const ticks = useTimelineTicks(traceTimeRange.durationMs, 0, 8, paddingPercent);
 
   return (
-    <div className="timeline_ruler" style={{ height: '30px', position: 'relative' }}>
-      <div className="timeline_ruler__baseline" />
+    <div className="exploreTimelineRuler" style={{ height: '30px', position: 'relative' }}>
+      <div className="exploreTimelineRuler__baseline" />
       {ticks.map((tick, index) => {
         const labelClassName =
           index === 0
-            ? 'timeline_ruler__label--first'
+            ? 'exploreTimelineRuler__label--first'
             : index === ticks.length - 1
-            ? 'timeline_ruler__label--last'
-            : 'timeline_ruler__label--center';
+            ? 'exploreTimelineRuler__label--last'
+            : 'exploreTimelineRuler__label--center';
 
         return (
           <div
             key={tick.value}
-            className="timeline_ruler__tick_container"
+            className="exploreTimelineRuler__tickContainer"
             style={{ left: `${tick.offsetPercent}%` }}
             data-test-subj={`tick-container-${tick.value}`}
           >
             <div
-              className={`timeline_ruler__label ${labelClassName}`}
+              className={`exploreTimelineRuler__label ${labelClassName}`}
               data-test-subj={`tick-label-${tick.value}`}
             >
               {tick.value}ms
             </div>
-            <div className="timeline_ruler__tick" data-test-subj={`tick-mark-${tick.value}`} />
+            <div
+              className="exploreTimelineRuler__tick"
+              data-test-subj={`tick-mark-${tick.value}`}
+            />
           </div>
         );
       })}