diff --git a/public/pages/Dashboard/Components/AnomaliesDistribution.tsx b/public/pages/Dashboard/Components/AnomaliesDistribution.tsx index 73e6bb5f..190f6ed4 100644 --- a/public/pages/Dashboard/Components/AnomaliesDistribution.tsx +++ b/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; diff --git a/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx b/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx index 3f30118d..640551c2 100644 --- a/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx +++ b/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(); 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 ( -

{'Live Anomalies'}

- , - {'Live'}, - ]} + title={ + +

+ Live anomalies Live +

+
+ } subTitle={ @@ -206,7 +207,7 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
{ ) : ( [ - -

10 detectors with the most recent anomaly occurrence

-
, + +

10 detectors with the most recent anomaly occurrence

+
, { +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 ( - -

Dashboard

-
+ + + +

Dashboard

+
+
+ {props.hasDetectors ? ( + + + Create detector + + + ) : null} +
); }; diff --git a/public/pages/Dashboard/Container/Dashboard.tsx b/public/pages/Dashboard/Container/Dashboard.tsx index 1da34348..acdd07ad 100644 --- a/public/pages/Dashboard/Container/Dashboard.tsx +++ b/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 ( - + {isLoading == true ? (
@@ -61,7 +63,7 @@ export const Dashboard = () => {   
- ) : totalDetectors == 0 ? ( + ) : !hasDetectors ? ( ) : ( diff --git a/public/pages/Dashboard/Container/DashboardOverview.tsx b/public/pages/Dashboard/Container/DashboardOverview.tsx index a24e6798..952e2190 100644 --- a/public/pages/Dashboard/Container/DashboardOverview.tsx +++ b/public/pages/Dashboard/Container/DashboardOverview.tsx @@ -187,17 +187,6 @@ export function DashboardOverview() { return ( - - - Create detector - - -