add monitor datasource to ppl alert flyout

Author: KashKondaka

public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponentPpl.js

@@ -30,6 +30,11 @@ import {
   PplPreviewTable,
   pplRespToDocs,
 } from '../../../../pages/CreateMonitor/components/PplPreviewTable/PplPreviewTable';
+import {
+  getDataSources,
+  getLocalClusterName,
+} from '../../../../pages/CreateMonitor/components/CrossClusterConfigurations/utils/helpers';
+import { getDataSourceQueryObj } from '../../../../pages/utils/helpers';
 
 const DEFAULT_PAGE_SIZE = 5;
 
@@ -41,6 +46,7 @@ export default class AlertsDashboardFlyoutComponentPpl extends Component {
       alerts: [],
       alertState: 'ALL',
       loading: true,
+      localClusterName: undefined,
       page: 0,
       size: DEFAULT_PAGE_SIZE,
       sortDirection: 'desc',
@@ -55,8 +61,18 @@ export default class AlertsDashboardFlyoutComponentPpl extends Component {
   componentDidMount() {
     this._isMounted = true;
     this.getAlerts();
+    this.getLocalClusterName();
   }
 
+  getLocalClusterName = async () => {
+    const { httpClient } = this.props;
+    const dataSourceQuery = getDataSourceQueryObj();
+    const localClusterName = await getLocalClusterName(httpClient, dataSourceQuery);
+    if (this._isMounted) {
+      this.setState({ localClusterName });
+    }
+  };
+
   componentDidUpdate(prevProps, prevState) {
     const watchedStateFields = ['page', 'size', 'alertState', 'sortDirection', 'sortField'];
 
@@ -243,6 +259,7 @@ export default class AlertsDashboardFlyoutComponentPpl extends Component {
       alerts,
       alertState,
       loading,
+      localClusterName,
       openResultPopoverId,
       page,
       size,
@@ -389,6 +406,14 @@ export default class AlertsDashboardFlyoutComponentPpl extends Component {
               </p>
             </EuiText>
           </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiText size="s">
+              <strong>Monitor data sources</strong>
+              <p style={{ whiteSpace: 'pre-wrap' }}>
+                {getDataSources(monitor, localClusterName).join('\n')}
+              </p>
+            </EuiText>
+          </EuiFlexItem>
         </EuiFlexGroup>
 
         <EuiHorizontalRule margin="xxl" />

public/pages/MonitorDetails/components/MonitorOverview/utils/getOverviewStatsV2.js

@@ -19,10 +19,10 @@ const getTime = (time) => {
 
 const getLastUpdatedHeader = () => {
   return (
-    <span style={{ display: 'inline-flex', alignItems: 'center' }}>
+    <span style={{ display: 'inline-flex', alignItems: 'baseline' }}>
       Last updated
       <EuiToolTip content="Time displayed in UTC">
-        <EuiIcon type="iInCircle" size="s" style={{ marginLeft: '4px' }} />
+        <EuiIcon type="iInCircle" size="s" style={{ marginLeft: '4px', marginTop: '-2px' }} />
       </EuiToolTip>
     </span>
   );

public/pages/MonitorDetails/containers/Triggers/TriggersPpl.js

@@ -50,10 +50,10 @@ const formatMinutes = (value) =>
 
 const getExpireDurationHeader = () => {
   return (
-    <span style={{ display: 'inline-flex', alignItems: 'center' }}>
+    <span style={{ display: 'inline-flex', alignItems: 'baseline' }}>
       Expire duration
       <EuiToolTip content="Default to 7 days if not specified">
-        <EuiIcon type="iInCircle" size="s" style={{ marginLeft: '4px' }} />
+        <EuiIcon type="iInCircle" size="s" style={{ marginLeft: '4px', marginTop: '-2px' }} />
       </EuiToolTip>
     </span>
   );