fix detector configuration page style based on UX review comments

public/pages/DetectorConfig/containers/DetectorConfig.tsx

@@ -29,23 +29,21 @@ interface DetectorConfigProps extends RouteComponentProps {
 
 export const DetectorConfig = (props: DetectorConfigProps) => {
   return (
-    <div>
-      <EuiPage>
-        <EuiPageBody>
-          <EuiSpacer size="l" />
-          <MetaData
-            detectorId={props.detectorId}
-            detector={props.detector}
-            onEditDetector={props.onEditDetector}
-          />
-          <EuiSpacer />
-          <Features
-            detectorId={props.detectorId}
-            detector={props.detector}
-            onEditFeatures={props.onEditFeatures}
-          />
-        </EuiPageBody>
-      </EuiPage>
-    </div>
+    <EuiPage style={{ marginTop: '16px', paddingTop: '0px' }}>
+      <EuiPageBody>
+        <EuiSpacer size="l" />
+        <MetaData
+          detectorId={props.detectorId}
+          detector={props.detector}
+          onEditDetector={props.onEditDetector}
+        />
+        <EuiSpacer />
+        <Features
+          detectorId={props.detectorId}
+          detector={props.detector}
+          onEditFeatures={props.onEditFeatures}
+        />
+      </EuiPageBody>
+    </EuiPage>
   );
 };

public/pages/DetectorConfig/containers/Features.tsx

@@ -51,7 +51,7 @@ export class Features extends Component<FeaturesProps, FeaturesState> {
         () => false
       ),
       sortField: 'name',
-      sortDirection: 'desc',
+      sortDirection: 'asc',
     };
   }
 
@@ -175,7 +175,6 @@ export class Features extends Component<FeaturesProps, FeaturesState> {
 
     const getCellProps = () => {
       return {
-        className: 'featureText',
         textOnly: true,
       };
     };
@@ -187,27 +186,25 @@ export class Features extends Component<FeaturesProps, FeaturesState> {
         title={`Features (${featureNum})`}
         titleSize="s"
         subTitle={
-          <EuiText style={{ padding: '0px 10px' }} className="fieldsSubtitle">
-            Specify index fields that you want to find anomalies for by defining
-            features. A detector can discover anomalies across up to 5 features.
-            Once you define the features, you can preview your anomalies from a
-            sample feature output.{' '}
-            <EuiLink
-              href="https://opendistro.github.io/for-elasticsearch-docs/docs/ad/"
-              target="_blank"
-            >
-              Learn more &nbsp;
-              <EuiIcon size="s" type="popout" />
-            </EuiLink>
+          <EuiText className="anomaly-distribution-subtitle">
+            <p>
+              Specify index fields that you want to find anomalies for by
+              defining features. A detector can discover anomalies for up to 5
+              features. Once you define the features, you can preview your
+              anomalies from a sample feature output.{' '}
+              <EuiLink
+                href="https://opendistro.github.io/for-elasticsearch-docs/docs/ad/"
+                target="_blank"
+              >
+                Learn more &nbsp;
+                <EuiIcon size="s" type="popout" />
+              </EuiLink>
+            </p>
           </EuiText>
         }
         actions={[
           <EuiButton onClick={this.props.onEditFeatures}>Edit</EuiButton>,
         ]}
-        panelStyles={{
-          left: '10px',
-          width: '1120px',
-        }}
       >
         {featureNum == 0 ? (
           <EuiEmptyPrompt

public/pages/DetectorConfig/containers/MetaData.tsx

@@ -35,8 +35,7 @@ import {
 import React, { Component, FunctionComponent } from 'react';
 import { displayText } from '../../createDetector/components/DataFilters/utils/helpers';
 import { CodeModal } from '../components/CodeModal/CodeModal';
-import { renderTime } from '../../DetectorResults/utils/tableUtils';
-import { render } from 'enzyme';
+import moment from 'moment';
 
 interface MetaDataProps {
   detectorId: string;
@@ -73,7 +72,7 @@ export function toString(obj: any): string {
       return period.interval + ' ' + period.unit;
     } else if (typeof obj == 'number') {
       // epoch
-      return renderTime(obj);
+      return moment(obj).format('MM/DD/YY hh:mm A');
     }
   }
   return '-';
@@ -189,10 +188,6 @@ export const MetaData = (props: MetaDataProps) => {
       title="Detector configuration"
       titleSize="s"
       actions={[<EuiButton onClick={props.onEditDetector}>Edit</EuiButton>]}
-      panelStyles={{
-        left: '10px',
-        width: '1120px',
-      }}
     >
       <EuiFlexGrid columns={4} gutterSize="l" style={{ border: 'none' }}>
         <EuiFlexItem>

public/pages/DetectorDetail/containers/__tests__/__snapshots__/DetectorDetail.test.tsx.snap

@@ -159,6 +159,17 @@ exports[`<DetectorDetail /> spec detector detail renders detector detail compone
       </div>
     </div>
   </div>
-  <div />
+  <div
+    class="euiPage"
+    style="margin-top: 16px; padding-top: 0px;"
+  >
+    <div
+      class="euiPageBody"
+    >
+      <div
+        class="euiSpacer euiSpacer--l"
+      />
+    </div>
+  </div>
 </div>
 `;