Address UX feedback. Issues: #33

public/pages/Dashboard/Components/AnomaliesDistribution.tsx

@@ -190,13 +190,13 @@ export const AnomaliesDistributionChart = (
                       return d;
                     },
                     fillLabel: {
-                      textInvertible: false,
+                      textInvertible: true,
                     },
                     shape: {
                       fillColor: d => {
                         return fillOutColors(
                           d,
-                          (d.x0 + d.x1) / 3 / (2 * Math.PI),
+                          (d.x0 + d.x1) / 2 / (2 * Math.PI),
                           []
                         );
                       },
@@ -224,10 +224,9 @@ export const AnomaliesDistributionChart = (
                 config={{
                   partitionLayout: PartitionLayout.sunburst,
                   fontFamily: 'Arial',
-                  outerSizeRatio: 0.6,
+                  outerSizeRatio: 1,
                   fillLabel: {
                     textInvertible: true,
-                    fontStyle: 'italic',
                   },
                   // TODO: Given only 1 detector exists, the inside Index circle will have issue in following scenarios:
                   // 1: if Linked Label is configured for identifying index, label of Index circle will be invisible;

public/pages/Dashboard/Components/AnomaliesLiveChart.tsx

@@ -77,7 +77,7 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
     (state: AppState) => state.elasticsearch
   );
 
-  const [lastAnomalyResult, setLastAnomalyResult] = useState();
+  const [lastAnomalyResult, setLastAnomalyResult] = useState<object>();
 
   const [liveAnomalyData, setLiveAnomalyData] = useState([] as object[]);
 
@@ -157,12 +157,13 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
   // Issue link: https://github.com/opendistro-for-elasticsearch/anomaly-detection-kibana-plugin/issues/26
   return (
     <ContentPanel
-      title={[
-        <EuiTitle size={'s'} className={'content-panel-title'}>
-          <h3>{'Live Anomalies'}</h3>
-        </EuiTitle>,
-        <EuiBadge color={'#db1374'}>{'Live'}</EuiBadge>,
-      ]}
+      title={
+        <EuiTitle size="s" className="content-panel-title">
+          <h3>
+            Live anomalies <EuiBadge color={'#DB1374'}>Live</EuiBadge>
+          </h3>
+        </EuiTitle>
+      }
       subTitle={
         <EuiFlexItem>
           <EuiText className={'live-anomaly-results-subtile'}>
@@ -206,7 +207,7 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
       </EuiFlexGroup>
       <div
         style={{
-          height: '300px',
+          height: '200px',
           width: '100%',
           opacity: 1,
         }}
@@ -225,9 +226,9 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
           </EuiFlexGroup>
         ) : (
           [
-            <EuiTitle size="xxs" style={{ 'margin-left': '10px' }}>
-              <h4>10 detectors with the most recent anomaly occurrence</h4>
-            </EuiTitle>,
+            <EuiText size="s" style={{ marginLeft: '10px' }}>
+              <p>10 detectors with the most recent anomaly occurrence</p>
+            </EuiText>,
             <Chart>
               <Settings showLegend legendPosition={Position.Right} />
               <LineAnnotation

public/pages/Dashboard/Components/utils/DashboardHeader.tsx

@@ -1,11 +1,38 @@
 import React from 'react';
-import { EuiPageHeader, EuiTitle } from '@elastic/eui';
-export const DashboardHeader = () => {
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPageHeader,
+  EuiTitle,
+} from '@elastic/eui';
+import { PLUGIN_NAME, APP_PATH } from '../../../../utils/constants';
+export interface DashboardHeaderProps {
+  hasDetectors: boolean;
+}
+
+export const DashboardHeader = (props: DashboardHeaderProps) => {
   return (
     <EuiPageHeader>
-      <EuiTitle size="l">
-        <h1>Dashboard</h1>
-      </EuiTitle>
+      <EuiFlexGroup justifyContent="spaceBetween">
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="l">
+            <h1>Dashboard</h1>
+          </EuiTitle>
+        </EuiFlexItem>
+        {props.hasDetectors ? (
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              fill
+              href={`${PLUGIN_NAME}#${APP_PATH.CREATE_DETECTOR}`}
+              target="_blank"
+              data-test-subj="add_detector"
+            >
+              Create detector
+            </EuiButton>
+          </EuiFlexItem>
+        ) : null}
+      </EuiFlexGroup>
     </EuiPageHeader>
   );
 };

public/pages/Dashboard/Container/Dashboard.tsx

@@ -45,12 +45,14 @@ export const Dashboard = () => {
     (state: AppState) => state.ad.totalDetectors
   );
 
+  const hasDetectors = totalDetectors > 0;
+
   useEffect(() => {
     onRefreshPage();
   }, []);
   return (
     <Fragment>
-      <DashboardHeader />
+      <DashboardHeader hasDetectors={hasDetectors} />
       {isLoading == true ? (
         <div>
           <EuiLoadingSpinner size="s" />
@@ -61,7 +63,7 @@ export const Dashboard = () => {
           &nbsp;&nbsp;
           <EuiLoadingSpinner size="xl" />
         </div>
-      ) : totalDetectors == 0 ? (
+      ) : !hasDetectors ? (
         <EmptyDashboard />
       ) : (
         <DashboardOverview />

public/pages/Dashboard/Container/DashboardOverview.tsx

@@ -187,17 +187,6 @@ export function DashboardOverview() {
 
   return (
     <Fragment>
-      <EuiFlexGroup justifyContent="flexEnd" style={{ padding: '0px 10px' }}>
-        <EuiButton
-          fill
-          href={`${PLUGIN_NAME}#${APP_PATH.CREATE_DETECTOR}`}
-          target="_blank"
-          data-test-subj="add_detector"
-        >
-          Create detector
-        </EuiButton>
-      </EuiFlexGroup>
-      <EuiSpacer />
       <EuiFlexGroup justifyContent="flexStart">
         <EuiFlexItem grow={1}>
           <EuiComboBox

public/pages/Dashboard/index.scss

@@ -31,6 +31,6 @@
 }
 
 .anomalies-distribution-sunburst {
-  height: 443px;
-  width: 441px;
+  height: 500px;
+  width: 500px;
 }