Add events and alerts to monitoring tab on overview page

frontend/packages/console-shared/src/types/resource.ts

@@ -1,4 +1,4 @@
-import { K8sResourceKind, PodKind, RouteKind } from '@console/internal/module/k8s';
+import { K8sResourceKind, PodKind, RouteKind, EventKind } from '@console/internal/module/k8s';
 import { DEPLOYMENT_STRATEGY } from '../constants';
 import { OverviewItemAlerts, PodControllerOverviewItem } from './pod';
 
@@ -21,7 +21,7 @@ export type OverviewItem<T = K8sResourceKind> = {
   configurations?: K8sResourceKind[];
   ksservices?: K8sResourceKind[];
   revisions?: K8sResourceKind[];
-  events?: K8sResourceKind[];
+  events?: EventKind[];
 };
 
 export type DeploymentStrategy = DEPLOYMENT_STRATEGY.recreate | DEPLOYMENT_STRATEGY.rolling;

frontend/packages/dev-console/src/components/monitoring/overview/MonitoringEvents.scss

@@ -0,0 +1,14 @@
+.odc-monitoring-events {
+  &__event-item {
+    margin-bottom: var(--pf-global--spacer--md);
+  }
+  &__warning-icon {
+    font-size: var(--pf-global--FontSize--xl);
+  }
+  &__event-message {
+    font-size: var(--pf-global--FontSize--sm);
+    color: var(--pf-global--Color--100);
+    margin-top: var(--pf-global--spacer--sm);
+    word-wrap: break-word;
+  }
+}

frontend/packages/dev-console/src/components/monitoring/overview/MonitoringEvents.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import { Flex, FlexItem, FlexModifiers } from '@patternfly/react-core';
+import { twentyFourHourTime } from '@console/internal/components/utils/datetime';
+import { YellowExclamationTriangleIcon } from '@console/shared';
+import { referenceFor, EventKind } from '@console/internal/module/k8s';
+import { ResourceLink } from '@console/internal/components/utils';
+import MonitoringEventsWarning from './MonitoringEventsWarning';
+import './MonitoringEvents.scss';
+
+type MonitoringEventsProps = React.ComponentProps<typeof MonitoringEventsWarning>;
+
+const MonitoringEvents: React.FC<MonitoringEventsProps> = ({ events }) => (
+  <div className="odc-monitoring-events">
+    {!_.isEmpty(events) ? (
+      _.map(events, (e: EventKind) => {
+        return (
+          <div className="odc-monitoring-events__event-item" key={e.metadata.uid}>
+            <Flex breakpointMods={[{ modifier: FlexModifiers['align-self-baseline'] }]}>
+              <FlexItem title={e.lastTimestamp} className="text-secondary">
+                {twentyFourHourTime(new Date(e.lastTimestamp))}
+              </FlexItem>
+              {e.type === 'Warning' && (
+                <FlexItem>
+                  <YellowExclamationTriangleIcon className="odc-monitoring-events__warning-icon" />
+                </FlexItem>
+              )}
+              <FlexItem>
+                <ResourceLink
+                  kind={referenceFor(e.involvedObject)}
+                  namespace={e.involvedObject.namespace}
+                  name={e.involvedObject.name}
+                  title={e.involvedObject.uid}
+                />
+              </FlexItem>
+            </Flex>
+            <div className="odc-monitoring-events__event-message">{e.message}</div>
+          </div>
+        );
+      })
+    ) : (
+      <div className="text-secondary">There are no recent events.</div>
+    )}
+  </div>
+);
+
+export default MonitoringEvents;

frontend/packages/dev-console/src/components/monitoring/overview/MonitoringEventsWarning.scss

@@ -0,0 +1,8 @@
+.odc-monitoring-events-warning {
+  &__no-alerts {
+    padding-left: var(--pf-global--spacer--xl);
+  }
+  &__timestamp {
+    margin-top: var(--pf-global--spacer--sm);
+  }
+}

frontend/packages/dev-console/src/components/monitoring/overview/MonitoringEventsWarning.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Alert } from '@patternfly/react-core';
+import * as _ from 'lodash';
+import { fromNow } from '@console/internal/components/utils/datetime';
+import { EventKind } from '@console/internal/module/k8s';
+import './MonitoringEventsWarning.scss';
+
+interface MonitoringEventsWarningProps {
+  events: EventKind[];
+}
+
+const MonitoringEventsWarning: React.FC<MonitoringEventsWarningProps> = ({ events }) => (
+  <div className="odc-monitoring-events-warning">
+    {!_.isEmpty(events) ? (
+      _.map(events, (e: EventKind) => {
+        return (
+          <Alert variant="warning" isInline title={e.reason} key={e.metadata.uid}>
+            {e.message}
+            <div className="odc-monitoring-events-warning__timestamp">
+              <small className="text-secondary">{fromNow(e.lastTimestamp)}</small>
+            </div>
+          </Alert>
+        );
+      })
+    ) : (
+      <div className="text-secondary odc-monitoring-events-warning__no-alerts">
+        There are no events warning.
+      </div>
+    )}
+  </div>
+);
+
+export default MonitoringEventsWarning;

frontend/packages/dev-console/src/components/monitoring/overview/MonitoringMetrics.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import { requirePrometheus } from '@console/internal/components/graphs';
+import { workloadMetricQueries } from './queries';
+import MonitoringDashboardGraph from '../dashboard/MonitoringDashboardGraph';
+
+const WorkloadGraphs = requirePrometheus(({ resource }) => {
+  const ns = resource?.metadata?.namespace;
+  const workloadName = resource?.metadata?.name;
+  const workloadType = resource?.kind?.toLowerCase();
+  return (
+    <>
+      {_.map(workloadMetricQueries, (q) => (
+        <MonitoringDashboardGraph
+          key={q.title}
+          title={q.title}
+          namespace={ns}
+          graphType={q.chartType}
+          query={q.query({ ns, workloadName, workloadType })}
+          humanize={q.humanize}
+          byteDataType={q.byteDataType}
+        />
+      ))}
+    </>
+  );
+});
+
+export default WorkloadGraphs;

frontend/packages/dev-console/src/components/monitoring/overview/MonitoringOverview.scss

@@ -0,0 +1,24 @@
+.odc-monitoring-overview {
+  &__metric-accordion {
+    padding: 0;
+  }
+  &__event-warning-toggle {
+    .pf-c-accordion__toggle-text {
+        width: 100%
+    }
+  }
+  &__event-warning-body {
+    .pf-c-accordion__expanded-content-body {
+      padding: var(--pf-global--spacer--sm) 0;
+    }
+  }
+  h5 {
+    margin: 0;
+  }
+  .pf-c-accordion__expanded-content.pf-m-expanded {
+    --pf-c-accordion__expanded-content--BorderLeftColor: transparent;
+  }
+  .pf-c-accordion__toggle.pf-m-expanded {
+    --pf-c-accordion__toggle--BorderLeftColor: transparent;
+  }
+}

frontend/packages/dev-console/src/components/monitoring/overview/MonitoringOverview.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionToggle,
+  AccordionContent,
+  Split,
+  SplitItem,
+  Badge,
+} from '@patternfly/react-core';
+import { K8sResourceKind, EventKind } from '@console/internal/module/k8s';
+import MonitoringEventsWarning from './MonitoringEventsWarning';
+import MonitoringEvents from './MonitoringEvents';
+import WorkloadGraphs from './MonitoringMetrics';
+import './MonitoringOverview.scss';
+
+type MonitoringOverviewProps = {
+  resource: K8sResourceKind;
+  events: EventKind[];
+};
+
+const MonitoringOverview: React.FC<MonitoringOverviewProps> = ({ resource, events }) => {
+  const [expanded, setExpanded] = React.useState(['metrics']);
+  const eventWarning = _.filter(events, ['type', 'Warning']);
+
+  const onToggle = (id: string) => {
+    const index = expanded.indexOf(id);
+    const newExpanded =
+      index >= 0
+        ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)]
+        : [...expanded, id];
+    setExpanded(newExpanded);
+  };
+
+  return (
+    <div className="odc-monitoring-overview">
+      <Accordion
+        asDefinitionList={false}
+        noBoxShadow
+        className="odc-monitoring-overview__metric-accordion"
+        headingLevel="h5"
+      >
+        <AccordionItem>
+          <AccordionToggle
+            onClick={() => {
+              onToggle('events-warning');
+            }}
+            isExpanded={expanded.includes('events-warning')}
+            id="events-warning"
+            className="odc-monitoring-overview__event-warning-toggle"
+          >
+            <Split>
+              <SplitItem>Events (Warning)</SplitItem>
+              <SplitItem isFilled />
+              <SplitItem>
+                <Badge>{eventWarning.length}</Badge>
+              </SplitItem>
+            </Split>
+          </AccordionToggle>
+          <AccordionContent
+            className="odc-monitoring-overview__event-warning-body"
+            id="events-warning-content"
+            isHidden={!expanded.includes('events-warning')}
+          >
+            <MonitoringEventsWarning events={eventWarning} />
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem>
+          <AccordionToggle
+            onClick={() => {
+              onToggle('metrics');
+            }}
+            isExpanded={expanded.includes('metrics')}
+            id="metrics"
+          >
+            Metrics
+          </AccordionToggle>
+          <AccordionContent id="metrics-content" isHidden={!expanded.includes('metrics')}>
+            <WorkloadGraphs resource={resource} />
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem>
+          <AccordionToggle
+            onClick={() => {
+              onToggle('all-events');
+            }}
+            isExpanded={expanded.includes('all-events')}
+            id="all-events"
+          >
+            All Events
+          </AccordionToggle>
+          <AccordionContent id="all-events-content" isHidden={!expanded.includes('all-events')}>
+            <MonitoringEvents events={events} />
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+};
+
+export default MonitoringOverview;

frontend/packages/dev-console/src/components/monitoring/overview/MonitoringTab.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { OverviewItem } from '@console/shared';
-import MonitoringMetricsSection from './MonitoringMetricsSection';
+import MonitoringOverview from './MonitoringOverview';
 
 type MonitoringTabProps = {
   item: OverviewItem;
 };
 
-const MonitoringTab: React.FC<MonitoringTabProps> = ({ item: { obj: res } }) => {
-  return <MonitoringMetricsSection resource={res} />;
+const MonitoringTab: React.FC<MonitoringTabProps> = ({ item: { obj: res, events } }) => {
+  return <MonitoringOverview resource={res} events={events} />;
 };
 
 export default MonitoringTab;