[APM] Move style variables to commons

.eslintrc.js

@@ -278,6 +278,7 @@ module.exports = {
       rules: {
         'no-unused-vars': ['error', { ignoreRestSiblings: true }],
         'no-console': ['warn', { allow: ['error'] }],
+        'import/no-extraneous-dependencies': 'off',
       },
     },
 

x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.js

@@ -13,7 +13,7 @@ import {
   px,
   colors,
   borderRadius
-} from '../../../../style/variables';
+} from 'x-pack/plugins/apm/common/variables';
 import { get, capitalize, isEmpty } from 'lodash';
 import { STATUS } from '../../../../constants';
 import { StickyProperties } from '../../../shared/StickyProperties';

x-pack/plugins/apm/public/components/app/ErrorGroupDetails/view.js

@@ -21,7 +21,7 @@ import {
   colors,
   fontFamilyCode,
   fontSizes
-} from '../../../style/variables';
+} from 'x-pack/plugins/apm/common/variables';
 import {
   ERROR_CULPRIT,
   ERROR_LOG_MESSAGE,

x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/index.js

@@ -23,7 +23,7 @@ import {
   fontFamilyCode,
   fontSizes,
   truncate
-} from '../../../../style/variables';
+} from 'x-pack/plugins/apm/common/variables';
 
 function paginateItems({ items, pageIndex, pageSize }) {
   return items.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);

x-pack/plugins/apm/public/components/app/Main/index.js

@@ -9,7 +9,12 @@ import styled from 'styled-components';
 import { Route, Switch } from 'react-router-dom';
 import { routes } from './routeConfig';
 import ScrollToTopOnPathChange from './ScrollToTopOnPathChange';
-import { px, units, unit, topNavHeight } from '../../../style/variables';
+import {
+  px,
+  units,
+  unit,
+  topNavHeight
+} from 'x-pack/plugins/apm/common/variables';
 import ConnectRouterToRedux from '../../shared/ConnectRouterToRedux';
 
 const MainContainer = styled.div`

x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/index.tsx

@@ -7,8 +7,8 @@
 import { EuiToolTip } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
+import { fontSizes, truncate } from 'x-pack/plugins/apm/common/variables';
 import { IServiceListItem } from 'x-pack/plugins/apm/server/lib/services/get_services';
-import { fontSizes, truncate } from '../../../../style/variables';
 import { asDecimal, asMillis } from '../../../../utils/formatters';
 import { RelativeLink } from '../../../../utils/url';
 import { ManagedTable } from '../../../shared/ManagedTable';

x-pack/plugins/apm/public/components/app/TraceOverview/TraceList.tsx

@@ -6,8 +6,8 @@
 
 import React from 'react';
 import styled from 'styled-components';
+import { fontSizes, truncate } from 'x-pack/plugins/apm/common/variables';
 import { ITransactionGroup } from 'x-pack/plugins/apm/server/lib/transaction_groups/transform';
-import { fontSizes, truncate } from '../../../style/variables';
 import { asMillis } from '../../../utils/formatters';
 import { ImpactBar } from '../../shared/ImpactBar';
 import { ITableColumn, ManagedTable } from '../../shared/ManagedTable';

x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/SamplingTooltip.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { units, px } from '../../../../style/variables';
+import { units, px } from 'x-pack/plugins/apm/common/variables';
 import { EuiIcon } from '@elastic/eui';
 import { Tooltip } from 'pivotal-ui/react/tooltip';
 import { OverlayTrigger } from 'pivotal-ui/react/overlay-trigger';

x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/TransactionPropertiesTable.tsx

@@ -14,9 +14,9 @@ import {
 import { capitalize, first, get } from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
+import { px, units } from 'x-pack/plugins/apm/common/variables';
 import { Transaction } from '../../../../../typings/Transaction';
 import { IUrlParams } from '../../../../store/urlParams';
-import { px, units } from '../../../../style/variables';
 import { fromQuery, history, toQuery } from '../../../../utils/url';
 import {
   getPropertyTabNames,

x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/ServiceLegends.tsx

@@ -7,7 +7,7 @@
 import { EuiTitle } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
-import { px, unit } from '../../../../../style/variables';
+import { px, unit } from 'x-pack/plugins/apm/common/variables';
 // @ts-ignore
 import Legend from '../../../../shared/charts/Legend';
 import { IServiceColors } from './Waterfall/waterfall_helpers/waterfall_helpers';

x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx

@@ -13,7 +13,7 @@ import {
   px,
   unit,
   units
-} from '../../../../../../../style/variables';
+} from 'x-pack/plugins/apm/common/variables';
 
 import SyntaxHighlighter, {
   registerLanguage

x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/SpanFlyout/index.tsx

@@ -19,12 +19,12 @@ import React from 'react';
 import styled from 'styled-components';
 
 // @ts-ignore
+import { px, unit } from 'x-pack/plugins/apm/common/variables';
 import {
   SERVICE_LANGUAGE_NAME,
   SPAN_HEX_ID,
   SPAN_ID
 } from '../../../../../../../../common/constants';
-import { px, unit } from '../../../../../../../style/variables';
 
 // @ts-ignore
 import Stacktrace from '../../../../../../shared/Stacktrace';

x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/WaterfallItem.tsx

@@ -17,7 +17,7 @@ import {
   px,
   unit,
   units
-} from '../../../../../../style/variables';
+} from 'x-pack/plugins/apm/common/variables';
 import { IWaterfallItem } from './waterfall_helpers/waterfall_helpers';
 
 type ItemType = 'transaction' | 'span';

x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts

@@ -14,7 +14,7 @@ import {
   uniq,
   zipObject
 } from 'lodash';
-import { colors } from 'x-pack/plugins/apm/public/style/variables';
+import { colors } from 'x-pack/plugins/apm/common/variables';
 import { Span } from '../../../../../../../../typings/Span';
 import { Transaction } from '../../../../../../../../typings/Transaction';
 

x-pack/plugins/apm/public/components/app/TransactionOverview/List/ImpactSparkLine.js

@@ -6,7 +6,12 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { units, borderRadius, px, colors } from '../../../../style/variables';
+import {
+  units,
+  borderRadius,
+  px,
+  colors
+} from 'x-pack/plugins/apm/common/variables';
 
 const ImpactBarBackground = styled.div`
   height: ${px(units.minus)};

x-pack/plugins/apm/public/components/app/TransactionOverview/List/ImpactTooltip.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { units, px } from '../../../../style/variables';
+import { units, px } from 'x-pack/plugins/apm/common/variables';
 import { EuiIcon } from '@elastic/eui';
 import { Tooltip } from 'pivotal-ui/react/tooltip';
 import { OverlayTrigger } from 'pivotal-ui/react/overlay-trigger';

x-pack/plugins/apm/public/components/app/TransactionOverview/List/index.js

@@ -11,7 +11,7 @@ import { RelativeLink, legacyEncodeURIComponent } from '../../../../utils/url';
 import { asMillis, asDecimal, tpmUnit } from '../../../../utils/formatters';
 import { ImpactBar } from '../../../shared/ImpactBar';
 
-import { fontFamilyCode, truncate } from '../../../../style/variables';
+import { fontFamilyCode, truncate } from 'x-pack/plugins/apm/common/variables';
 import { ManagedTable } from '../../../shared/ManagedTable';
 
 function tpmLabel(type) {

x-pack/plugins/apm/public/components/app/TransactionOverview/view.js

@@ -15,7 +15,7 @@ import TabNavigation from '../../shared/TabNavigation';
 import TransactionCharts from '../../shared/charts/TransactionCharts';
 import { ViewMLJob } from '../../../utils/url';
 import List from './List';
-import { units, px, fontSizes } from '../../../style/variables';
+import { units, px, fontSizes } from 'x-pack/plugins/apm/common/variables';
 import { TransactionOverviewChartsRequest } from '../../../store/reactReduxRequest/transactionOverviewCharts';
 import { TransactionListRequest } from '../../../store/reactReduxRequest/transactionList';
 import { ServiceDetailsRequest } from '../../../store/reactReduxRequest/serviceDetails';

x-pack/plugins/apm/public/components/shared/CodePreview/Context.js

@@ -16,7 +16,7 @@ import {
   px,
   colors,
   borderRadius
-} from '../../../style/variables';
+} from 'x-pack/plugins/apm/common/variables';
 
 const ContextContainer = styled.div`
   position: relative;

x-pack/plugins/apm/public/components/shared/CodePreview/Variables.js

@@ -13,7 +13,7 @@ import {
   units,
   fontFamily,
   unit
-} from '../../../style/variables';
+} from 'x-pack/plugins/apm/common/variables';
 
 import { Ellipsis } from '../../shared/Icons';
 import { PropertiesTable } from '../../shared/PropertiesTable';

x-pack/plugins/apm/public/components/shared/CodePreview/index.js

@@ -12,7 +12,7 @@ import {
   colors,
   fontFamilyCode,
   borderRadius
-} from '../../../style/variables';
+} from 'x-pack/plugins/apm/common/variables';
 
 import { isEmpty } from 'lodash';
 

x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestion.js

@@ -15,7 +15,7 @@ import {
   units,
   fontSizes,
   unit
-} from '../../../../style/variables';
+} from 'x-pack/plugins/apm/common/variables';
 import { tint } from 'polished';
 
 function getIconColor(type) {

x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestions.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { isEmpty } from 'lodash';
 import Suggestion from './Suggestion';
-import { units, colors, px, unit } from '../../../../style/variables';
+import { units, colors, px, unit } from 'x-pack/plugins/apm/common/variables';
 import { rgba } from 'polished';
 
 const List = styled.ul`

x-pack/plugins/apm/public/components/shared/PropertiesTable/NestedKeyValueTable.tsx

@@ -8,14 +8,14 @@ import _ from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
 
-import { StringMap } from '../../../../typings/common';
 import {
   colors,
   fontFamilyCode,
   fontSizes,
   px,
   units
-} from '../../../style/variables';
+} from 'x-pack/plugins/apm/common/variables';
+import { StringMap } from '../../../../typings/common';
 
 export type KeySorter = (data: StringMap, parentKey?: string) => string[];
 

x-pack/plugins/apm/public/components/shared/PropertiesTable/index.tsx

@@ -9,15 +9,15 @@ import _ from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
 
-import { StringMap } from '../../../../typings/common';
 import {
   colors,
   fontSize,
   fontSizes,
   px,
   unit,
   units
-} from '../../../style/variables';
+} from 'x-pack/plugins/apm/common/variables';
+import { StringMap } from '../../../../typings/common';
 import { getAgentFeatureDocsUrl } from '../../../utils/documentation/agents';
 // @ts-ignore
 import { ExternalLink } from '../../../utils/url';

x-pack/plugins/apm/public/components/shared/Stacktrace/index.js

@@ -9,7 +9,7 @@ import styled from 'styled-components';
 import { isEmpty, get } from 'lodash';
 import CodePreview from '../../shared/CodePreview';
 import { Ellipsis } from '../../shared/Icons';
-import { units, px } from '../../../style/variables';
+import { units, px } from 'x-pack/plugins/apm/common/variables';
 import { EmptyMessage } from '../../shared/EmptyMessage';
 import { EuiLink, EuiTitle } from '@elastic/eui';
 

x-pack/plugins/apm/public/components/shared/StickyProperties/index.tsx

@@ -17,7 +17,7 @@ import {
   truncate,
   unit,
   units
-} from '../../../style/variables';
+} from 'x-pack/plugins/apm/common/variables';
 
 export interface IStickyProperty {
   val: any;

x-pack/plugins/apm/public/components/shared/TabNavigation/view.js

@@ -15,7 +15,7 @@ import {
   colors,
   fontSizes,
   truncate
-} from '../../../style/variables';
+} from 'x-pack/plugins/apm/common/variables';
 import { isEmpty } from 'lodash';
 
 import TooltipOverlay from '../../shared/TooltipOverlay';

x-pack/plugins/apm/public/components/shared/UIComponents.js

@@ -5,7 +5,13 @@
  */
 
 import styled from 'styled-components';
-import { unit, units, px, fontSizes, colors } from '../../style/variables';
+import {
+  unit,
+  units,
+  px,
+  fontSizes,
+  colors
+} from 'x-pack/plugins/apm/common/variables';
 import { RelativeLink } from '../../utils/url';
 
 export const HeaderContainer = styled.div`

x-pack/plugins/apm/public/components/shared/charts/CustomPlot/Legends.js

@@ -15,7 +15,7 @@ import {
   px,
   colors,
   truncate
-} from '../../../../style/variables';
+} from 'x-pack/plugins/apm/common/variables';
 
 const Container = styled.div`
   display: flex;

x-pack/plugins/apm/public/components/shared/charts/CustomPlot/plotUtils.js

@@ -11,7 +11,7 @@ import d3 from 'd3';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { unit } from '../../../../style/variables';
+import { unit } from 'x-pack/plugins/apm/common/variables';
 
 const XY_HEIGHT = unit * 16;
 const XY_MARGIN = {

x-pack/plugins/apm/public/components/shared/charts/Histogram/index.js

@@ -21,7 +21,7 @@ import {
   makeWidthFlexible,
   VerticalGridLines
 } from 'react-vis';
-import { unit, colors } from '../../../../style/variables';
+import { unit, colors } from 'x-pack/plugins/apm/common/variables';
 import Tooltip from '../Tooltip';
 
 const XY_HEIGHT = unit * 10;

x-pack/plugins/apm/public/components/shared/charts/Legend/index.js

@@ -6,7 +6,12 @@
 
 import React, { PureComponent } from 'react';
 import styled from 'styled-components';
-import { units, px, colors, fontSizes } from '../../../../style/variables';
+import {
+  units,
+  px,
+  colors,
+  fontSizes
+} from 'x-pack/plugins/apm/common/variables';
 
 const Container = styled.div`
   display: flex;

x-pack/plugins/apm/public/components/shared/charts/Timeline/AgentMarker.js

@@ -8,7 +8,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { EuiToolTip } from '@elastic/eui';
 import Legend from '../Legend';
-import { colors, units, px } from '../../../../style/variables';
+import { colors, units, px } from 'x-pack/plugins/apm/common/variables';
 import styled from 'styled-components';
 import { asTime } from '../../../../utils/formatters';
 

x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js

@@ -11,7 +11,7 @@ import { Sticky } from 'react-sticky';
 import { XYPlot, XAxis } from 'react-vis';
 import LastTickValue from './LastTickValue';
 import AgentMarker from './AgentMarker';
-import { colors, px } from '../../../../style/variables';
+import { colors, px } from 'x-pack/plugins/apm/common/variables';
 import { getTimeFormatter } from '../../../../utils/formatters';
 
 // Remove any tick that is too close to traceRootDuration

x-pack/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.js

@@ -7,7 +7,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { XYPlot, VerticalGridLines } from 'react-vis';
-import { colors } from '../../../../style/variables';
+import { colors } from 'x-pack/plugins/apm/common/variables';
 
 class VerticalLines extends PureComponent {
   render() {

x-pack/plugins/apm/public/components/shared/charts/Tooltip/index.js

@@ -18,7 +18,7 @@ import {
   borderRadius,
   fontSize,
   fontSizes
-} from '../../../../style/variables';
+} from 'x-pack/plugins/apm/common/variables';
 import Legend from '../Legend';
 
 const TooltipElm = styled.div`

x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/index.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import CustomPlot from '../CustomPlot';
 import { asMillis, tpmUnit, asInteger } from '../../../../utils/formatters';
 import styled from 'styled-components';
-import { units, unit, px } from '../../../../style/variables';
+import { units, unit, px } from 'x-pack/plugins/apm/common/variables';
 import { timefilter } from 'ui/timefilter';
 import moment from 'moment';
 

x-pack/plugins/apm/public/store/selectors/chartSelectors.ts

@@ -7,10 +7,10 @@
 import d3 from 'd3';
 import { difference, last, memoize, zipObject } from 'lodash';
 import { rgba } from 'polished';
+import { colors } from 'x-pack/plugins/apm/common/variables';
 import { AvgAnomalyBucket } from 'x-pack/plugins/apm/server/lib/transactions/charts/get_avg_response_time_anomalies/get_anomaly_aggs/transform';
 import { TimeSeriesAPIResponse } from 'x-pack/plugins/apm/server/lib/transactions/charts/get_timeseries_data/transform';
 import { StringMap } from 'x-pack/plugins/apm/typings/common';
-import { colors } from '../../style/variables';
 import { asDecimal, asMillis, tpmUnit } from '../../utils/formatters';
 import { IUrlParams } from '../urlParams';