Explore: Add tracing switch (#25539)

* Add tracing switch to explore

* Prettify

public/app/features/explore/ExploreToolbar.test.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { UnConnectedExploreToolbar } from './ExploreToolbar';
+import { ExploreMode } from '@grafana/data';
+import { ExploreId } from '../../types';
+import { ToggleButtonGroup } from '@grafana/ui';
+
+jest.mock('./state/selectors', () => {
+  return {
+    __esModule: true,
+    getExploreDatasources: () => [] as any,
+  };
+});
+
+describe('ExploreToolbar', () => {
+  it('displays correct modes', () => {
+    let wrapper = shallow(createToolbar([ExploreMode.Tracing, ExploreMode.Logs]));
+    checkModes(wrapper, ['Logs', 'Tracing']);
+
+    wrapper = shallow(createToolbar([ExploreMode.Logs]));
+    checkModes(wrapper, []);
+
+    wrapper = shallow(createToolbar([ExploreMode.Logs, ExploreMode.Tracing, ExploreMode.Metrics]));
+    checkModes(wrapper, ['Metrics', 'Logs', 'Tracing']);
+  });
+});
+
+function checkModes(wrapper: ShallowWrapper, modes: string[]) {
+  expect(
+    wrapper
+      .find(ToggleButtonGroup)
+      .children()
+      .map(node => node.children().text())
+  ).toEqual(modes);
+}
+
+function createToolbar(supportedModes: ExploreMode[]) {
+  return (
+    <UnConnectedExploreToolbar
+      datasourceMissing={false}
+      loading={false}
+      range={{} as any}
+      timeZone={'UTC'}
+      splitted={false}
+      syncedTimes={false}
+      supportedModes={supportedModes}
+      selectedMode={ExploreMode.Tracing}
+      hasLiveOption={false}
+      isLive={false}
+      isPaused={false}
+      queries={[]}
+      containerWidth={0}
+      changeDatasource={(() => {}) as any}
+      clearAll={(() => {}) as any}
+      cancelQueries={(() => {}) as any}
+      runQueries={(() => {}) as any}
+      closeSplit={(() => {}) as any}
+      split={(() => {}) as any}
+      syncTimes={(() => {}) as any}
+      changeRefreshInterval={(() => {}) as any}
+      changeMode={(() => {}) as any}
+      updateLocation={(() => {}) as any}
+      setDashboardQueriesToUpdateOnLoad={(() => {}) as any}
+      exploreId={ExploreId.left}
+      onChangeTime={(() => {}) as any}
+    />
+  );
+}

public/app/features/explore/ExploreToolbar.tsx

@@ -6,21 +6,20 @@ import classNames from 'classnames';
 import { css } from 'emotion';
 
 import { ExploreId, ExploreItemState } from 'app/types/explore';
-import { ToggleButtonGroup, ToggleButton, Tooltip, LegacyForms, SetInterval, Icon, IconButton } from '@grafana/ui';
-const { ButtonSelect } = LegacyForms;
-import { RawTimeRange, TimeZone, TimeRange, DataQuery, ExploreMode } from '@grafana/data';
+import { Icon, IconButton, LegacyForms, SetInterval, ToggleButton, ToggleButtonGroup, Tooltip } from '@grafana/ui';
+import { DataQuery, ExploreMode, RawTimeRange, TimeRange, TimeZone } from '@grafana/data';
 import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 import { StoreState } from 'app/types/store';
 import {
-  changeDatasource,
   cancelQueries,
+  changeDatasource,
+  changeMode,
+  changeRefreshInterval,
   clearQueries,
-  splitClose,
   runQueries,
+  splitClose,
   splitOpen,
   syncTimes,
-  changeRefreshInterval,
-  changeMode,
 } from './state/actions';
 import { updateLocation } from 'app/core/actions';
 import { getTimeZone } from '../profile/state/selectors';
@@ -34,6 +33,8 @@ import { LiveTailControls } from './useLiveTailControls';
 import { getExploreDatasources } from './state/selectors';
 import { setDashboardQueriesToUpdateOnLoad } from '../dashboard/state/reducers';
 
+const { ButtonSelect } = LegacyForms;
+
 const getStyles = memoizeOne(() => {
   return {
     liveTailButtons: css`
@@ -238,22 +239,20 @@ export class UnConnectedExploreToolbar extends PureComponent<Props> {
                 {showModeToggle ? (
                   <div className="query-type-toggle">
                     <ToggleButtonGroup label="" transparent={true}>
-                      <ToggleButton
-                        key={ExploreMode.Metrics}
-                        value={ExploreMode.Metrics}
-                        onChange={this.onModeChange}
-                        selected={selectedMode === ExploreMode.Metrics}
-                      >
-                        {'Metrics'}
-                      </ToggleButton>
-                      <ToggleButton
-                        key={ExploreMode.Logs}
-                        value={ExploreMode.Logs}
-                        onChange={this.onModeChange}
-                        selected={selectedMode === ExploreMode.Logs}
-                      >
-                        {'Logs'}
-                      </ToggleButton>
+                      {[ExploreMode.Metrics, ExploreMode.Logs, ExploreMode.Tracing]
+                        .filter(mode => supportedModes.includes(mode))
+                        .map(mode => {
+                          return (
+                            <ToggleButton
+                              key={mode}
+                              value={mode}
+                              onChange={this.onModeChange}
+                              selected={selectedMode === mode}
+                            >
+                              {mode}
+                            </ToggleButton>
+                          );
+                        })}
                     </ToggleButtonGroup>
                   </div>
                 ) : null}