Problems count mode (#1493)

* Problems count mode * Use tooltip from grafana ui * Add editors for new modes * Fix macro mode * Fix bugs * Unify editors to use one Triggers editor for all count queries * Use time range toggle for triggers query, #918 * Add item tags suport for triggers count mode * Fix triggers count by items * Use data frames for triggers data, #1441 * Return empty result if no items found * Add migration for problems count mode * bump version to 4.3.0-pre * Add zip task to makefile * Add schema to query model * Minor refactor * Refactor: move components to separate files * Minor refactor * Support url in event tags * Add tooltip with link url * Update grafana packages * Fix adding new problems panel * ProblemDetails: rewrite as a functional component * minor refactor
2023-01-20 14:23:46 +01:00
parent 445b46a6aa
commit a5c239f77b
31 changed files with 2216 additions and 514 deletions
--- a/src/panel-triggers/components/AlertList/AlertCard.tsx
+++ b/src/panel-triggers/components/AlertList/AlertCard.tsx
@@ -6,7 +6,7 @@ import moment from 'moment';
 import { isNewProblem, formatLastChange } from '../../utils';
 import { ProblemsPanelOptions, TriggerSeverity } from '../../types';
 import { AckProblemData, AckModal } from '../AckModal';
-import EventTag from '../EventTag';
+import { EventTag } from '../EventTag';
 import AlertAcknowledges from './AlertAcknowledges';
 import AlertIcon from './AlertIcon';
 import { ProblemDTO, ZBXTag } from '../../../datasource/types';
--- a/src/panel-triggers/components/EventTag.tsx
+++ b/src/panel-triggers/components/EventTag.tsx
@@ -1,5 +1,7 @@
-import React, { PureComponent } from 'react';
-import { DataSourceRef } from '@grafana/data';
+import React from 'react';
+import { css } from '@emotion/css';
+import { Icon, Tooltip, useStyles2 } from '@grafana/ui';
+import { DataSourceRef, GrafanaTheme2 } from '@grafana/data';
 import { ZBXTag } from '../../datasource/types';

 const TAG_COLORS = [
@@ -85,39 +87,58 @@ function djb2(str) {
  return hash;
 }

-interface EventTagProps {
+const URLPattern = /^https?:\/\/.+/;
+
+interface Props {
  tag: ZBXTag;
  datasource: DataSourceRef | string;
  highlight?: boolean;
  onClick?: (tag: ZBXTag, datasource: DataSourceRef | string, ctrlKey?: boolean, shiftKey?: boolean) => void;
 }

-export default class EventTag extends PureComponent<EventTagProps> {
-  handleClick = (event) => {
-    if (this.props.onClick) {
-      const { tag, datasource } = this.props;
-      this.props.onClick(tag, datasource, event.ctrlKey, event.shiftKey);
+export const EventTag = ({ tag, datasource, highlight, onClick }: Props) => {
+  const styles = useStyles2(getStyles);
+  const onClickInternal = (event) => {
+    if (onClick) {
+      onClick(tag, datasource, event.ctrlKey, event.shiftKey);
    }
  };

-  render() {
-    const { tag, highlight } = this.props;
-    const tagColor = getTagColorsFromName(tag.tag);
-    const style: React.CSSProperties = {
-      background: tagColor.color,
-      borderColor: tagColor.borderColor,
-    };
-    return (
-      // TODO: show tooltip when click feature is fixed
-      // <Tooltip placement="bottom" content="Click to add tag filter or Ctrl/Shift+click to remove">
-      <span
-        className={`label label-tag zbx-tag ${highlight ? 'highlighted' : ''}`}
-        style={style}
-        onClick={this.handleClick}
-      >
-        {tag.value ? `${tag.tag}: ${tag.value}` : `${tag.tag}`}
-      </span>
-      // </Tooltip>
+  const tagColor = getTagColorsFromName(tag.tag);
+  const style: React.CSSProperties = {
+    background: tagColor.color,
+    borderColor: tagColor.borderColor,
+  };
+
+  const isUrl = URLPattern.test(tag.value);
+  let tagElement = <>{tag.value ? `${tag.tag}: ${tag.value}` : `${tag.tag}`}</>;
+  if (isUrl) {
+    tagElement = (
+      <Tooltip placement="top" content={tag.value}>
+        <a href={tag.value} target="_blank" rel="noreferrer">
+          <Icon name="link" className={styles.icon} />
+          {tag.tag}
+        </a>
+      </Tooltip>
    );
  }
-}
+
+  return (
+    // TODO: show tooltip when click feature is fixed
+    // <Tooltip placement="bottom" content="Click to add tag filter or Ctrl/Shift+click to remove">
+    <span
+      className={`label label-tag zbx-tag ${highlight ? 'highlighted' : ''}`}
+      style={style}
+      onClick={onClickInternal}
+    >
+      {tagElement}
+    </span>
+    // </Tooltip>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  icon: css`
+    margin-right: ${theme.spacing(0.5)};
+  `,
+});
--- a/src/panel-triggers/components/ProblemColorEditor.tsx
+++ b/src/panel-triggers/components/ProblemColorEditor.tsx
@@ -4,6 +4,7 @@ import { ColorPicker, InlineField, InlineFieldRow, InlineLabel, InlineSwitch, In
 import { TriggerSeverity } from '../types';

 type Props = StandardEditorProps<TriggerSeverity[]>;
+
 export const ProblemColorEditor = ({ value, onChange }: Props): JSX.Element => {
  const onSeverityItemChange = (severity: TriggerSeverity) => {
    value.forEach((v, i) => {
--- a/src/panel-triggers/components/Problems/ProblemDetails.tsx
+++ b/src/panel-triggers/components/Problems/ProblemDetails.tsx
@@ -1,22 +1,26 @@
-import React, { FC, PureComponent } from 'react';
+import React, { useState, useEffect } from 'react';
+import { css } from '@emotion/css';
 // eslint-disable-next-line
 import moment from 'moment';
-import { TimeRange, DataSourceRef } from '@grafana/data';
-import { Tooltip } from '@grafana/ui';
+import { TimeRange, DataSourceRef, GrafanaTheme2 } from '@grafana/data';
+import { Tooltip, useStyles2 } from '@grafana/ui';
 import { getDataSourceSrv } from '@grafana/runtime';
-import * as utils from '../../../datasource/utils';
-import { ProblemDTO, ZBXAlert, ZBXEvent, ZBXGroup, ZBXHost, ZBXTag, ZBXItem } from '../../../datasource/types';
+import { ProblemDTO, ZBXAlert, ZBXEvent, ZBXTag } from '../../../datasource/types';
 import { APIExecuteScriptResponse, ZBXScript } from '../../../datasource/zabbix/connectors/zabbix_api/types';
 import { AckModal, AckProblemData } from '../AckModal';
-import EventTag from '../EventTag';
+import { EventTag } from '../EventTag';
 import AcknowledgesList from './AcknowledgesList';
 import ProblemTimeline from './ProblemTimeline';
 import { AckButton, ExecScriptButton, ExploreButton, FAIcon, ModalController } from '../../../components';
 import { ExecScriptData, ExecScriptModal } from '../ExecScriptModal';
 import ProblemStatusBar from './ProblemStatusBar';
 import { RTRow } from '../../types';
+import { ProblemItems } from './ProblemItems';
+import { ProblemHosts, ProblemHostsDescription } from './ProblemHosts';
+import { ProblemGroups } from './ProblemGroups';
+import { ProblemExpression } from './ProblemExpression';

-interface ProblemDetailsProps extends RTRow<ProblemDTO> {
+interface Props extends RTRow<ProblemDTO> {
  rootWidth: number;
  timeRange: TimeRange;
  showTimeline?: boolean;
@@ -24,280 +28,220 @@ interface ProblemDetailsProps extends RTRow<ProblemDTO> {
  getProblemEvents: (problem: ProblemDTO) => Promise<ZBXEvent[]>;
  getProblemAlerts: (problem: ProblemDTO) => Promise<ZBXAlert[]>;
  getScripts: (problem: ProblemDTO) => Promise<ZBXScript[]>;
-
  onExecuteScript(problem: ProblemDTO, scriptid: string): Promise<APIExecuteScriptResponse>;
-
  onProblemAck?: (problem: ProblemDTO, data: AckProblemData) => Promise<any> | any;
  onTagClick?: (tag: ZBXTag, datasource: DataSourceRef | string, ctrlKey?: boolean, shiftKey?: boolean) => void;
 }

-interface ProblemDetailsState {
-  events: ZBXEvent[];
-  alerts: ZBXAlert[];
-  show: boolean;
-}
+export const ProblemDetails = ({
+  original,
+  rootWidth,
+  timeRange,
+  showTimeline,
+  panelId,
+  getProblemAlerts,
+  getProblemEvents,
+  getScripts,
+  onExecuteScript,
+  onProblemAck,
+  onTagClick,
+}: Props) => {
+  const [events, setEvents] = useState([]);
+  const [alerts, setAletrs] = useState([]);
+  const [show, setShow] = useState(false);

-export class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDetailsState> {
-  constructor(props) {
-    super(props);
-    this.state = {
-      events: [],
-      alerts: [],
-      show: false,
-    };
-  }
-
-  componentDidMount() {
-    if (this.props.showTimeline) {
-      this.fetchProblemEvents();
+  useEffect(() => {
+    if (showTimeline) {
+      fetchProblemEvents();
    }
-    this.fetchProblemAlerts();
+    fetchProblemAlerts();
    requestAnimationFrame(() => {
-      this.setState({ show: true });
+      setShow(true);
    });
-  }
+  }, []);

-  handleTagClick = (tag: ZBXTag, datasource: DataSourceRef | string, ctrlKey?: boolean, shiftKey?: boolean) => {
-    if (this.props.onTagClick) {
-      this.props.onTagClick(tag, datasource, ctrlKey, shiftKey);
+  const fetchProblemEvents = async () => {
+    const problem = original;
+    const events = await getProblemEvents(problem);
+    setEvents(events);
+  };
+
+  const fetchProblemAlerts = async () => {
+    const problem = original;
+    const alerts = await getProblemAlerts(problem);
+    setAletrs(alerts);
+  };
+
+  const handleTagClick = (tag: ZBXTag, datasource: DataSourceRef | string, ctrlKey?: boolean, shiftKey?: boolean) => {
+    if (onTagClick) {
+      onTagClick(tag, datasource, ctrlKey, shiftKey);
    }
  };

-  fetchProblemEvents() {
-    const problem = this.props.original;
-    this.props.getProblemEvents(problem).then((events) => {
-      this.setState({ events });
-    });
+  const ackProblem = (data: AckProblemData) => {
+    const problem = original as ProblemDTO;
+    return onProblemAck(problem, data);
+  };
+
+  const getScriptsInternal = () => {
+    const problem = original as ProblemDTO;
+    return getScripts(problem);
+  };
+
+  const onExecuteScriptInternal = (data: ExecScriptData) => {
+    const problem = original as ProblemDTO;
+    return onExecuteScript(problem, data.scriptid);
+  };
+
+  const problem = original as ProblemDTO;
+  const displayClass = show ? 'show' : '';
+  const wideLayout = rootWidth > 1200;
+  const compactStatusBar = rootWidth < 800 || (problem.acknowledges && wideLayout && rootWidth < 1400);
+  const age = moment.unix(problem.timestamp).fromNow(true);
+  const showAcknowledges = problem.acknowledges && problem.acknowledges.length !== 0;
+  const problemSeverity = Number(problem.severity);
+
+  let dsName: string = original.datasource as string;
+  if ((original.datasource as DataSourceRef)?.uid) {
+    const dsInstance = getDataSourceSrv().getInstanceSettings((original.datasource as DataSourceRef).uid);
+    dsName = dsInstance.name;
  }
+  const styles = useStyles2(getStyles);

-  fetchProblemAlerts() {
-    const problem = this.props.original;
-    this.props.getProblemAlerts(problem).then((alerts) => {
-      this.setState({ alerts });
-    });
-  }
-
-  ackProblem = (data: AckProblemData) => {
-    const problem = this.props.original as ProblemDTO;
-    return this.props.onProblemAck(problem, data);
-  };
-
-  getScripts = () => {
-    const problem = this.props.original as ProblemDTO;
-    return this.props.getScripts(problem);
-  };
-
-  onExecuteScript = (data: ExecScriptData) => {
-    const problem = this.props.original as ProblemDTO;
-    return this.props.onExecuteScript(problem, data.scriptid);
-  };
-
-  render() {
-    const problem = this.props.original as ProblemDTO;
-    const alerts = this.state.alerts;
-    const { rootWidth, panelId, timeRange } = this.props;
-    const displayClass = this.state.show ? 'show' : '';
-    const wideLayout = rootWidth > 1200;
-    const compactStatusBar = rootWidth < 800 || (problem.acknowledges && wideLayout && rootWidth < 1400);
-    const age = moment.unix(problem.timestamp).fromNow(true);
-    const showAcknowledges = problem.acknowledges && problem.acknowledges.length !== 0;
-    const problemSeverity = Number(problem.severity);
-
-    let dsName: string = this.props.original.datasource as string;
-    if ((this.props.original.datasource as DataSourceRef)?.uid) {
-      const dsInstance = getDataSourceSrv().getInstanceSettings((this.props.original.datasource as DataSourceRef).uid);
-      dsName = dsInstance.name;
-    }
-
-    return (
-      <div className={`problem-details-container ${displayClass}`}>
-        <div className="problem-details-body">
-          <div className="problem-details">
-            <div className="problem-details-head">
-              <div className="problem-actions-left">
-                <ExploreButton problem={problem} panelId={panelId} range={timeRange} />
-              </div>
-              {problem.showAckButton && (
-                <div className="problem-actions">
-                  <ModalController>
-                    {({ showModal, hideModal }) => (
-                      <ExecScriptButton
-                        className="problem-action-button"
-                        onClick={() => {
-                          showModal(ExecScriptModal, {
-                            getScripts: this.getScripts,
-                            onSubmit: this.onExecuteScript,
-                            onDismiss: hideModal,
-                          });
-                        }}
-                      />
-                    )}
-                  </ModalController>
-                  <ModalController>
-                    {({ showModal, hideModal }) => (
-                      <AckButton
-                        className="problem-action-button"
-                        onClick={() => {
-                          showModal(AckModal, {
-                            canClose: problem.manual_close === '1',
-                            severity: problemSeverity,
-                            onSubmit: this.ackProblem,
-                            onDismiss: hideModal,
-                          });
-                        }}
-                      />
-                    )}
-                  </ModalController>
-                </div>
-              )}
-              <ProblemStatusBar problem={problem} alerts={alerts} className={compactStatusBar && 'compact'} />
+  return (
+    <div className={`problem-details-container ${displayClass}`}>
+      <div className="problem-details-body">
+        <div className={styles.problemDetails}>
+          <div className="problem-details-head">
+            <div className="problem-actions-left">
+              <ExploreButton problem={problem} panelId={panelId} range={timeRange} />
            </div>
-            <div className="problem-details-row">
-              <div className="problem-value-container">
-                <div className="problem-age">
-                  <FAIcon icon="clock-o" />
-                  <span>{age}</span>
-                </div>
-                {problem.items && <ProblemItems items={problem.items} />}
-              </div>
-            </div>
-            {problem.comments && (
-              <div className="problem-description-row">
-                <div className="problem-description">
-                  <Tooltip placement="right" content={problem.comments}>
-                    <span className="description-label">Description:&nbsp;</span>
-                  </Tooltip>
-                  <span>{problem.comments}</span>
-                </div>
-              </div>
-            )}
-            {problem.tags && problem.tags.length > 0 && (
-              <div className="problem-tags">
-                {problem.tags &&
-                  problem.tags.map((tag) => (
-                    <EventTag
-                      key={tag.tag + tag.value}
-                      tag={tag}
-                      datasource={problem.datasource}
-                      highlight={tag.tag === problem.correlation_tag}
-                      onClick={this.handleTagClick}
+            {problem.showAckButton && (
+              <div className="problem-actions">
+                <ModalController>
+                  {({ showModal, hideModal }) => (
+                    <ExecScriptButton
+                      className="problem-action-button"
+                      onClick={() => {
+                        showModal(ExecScriptModal, {
+                          getScripts: getScriptsInternal,
+                          onSubmit: onExecuteScriptInternal,
+                          onDismiss: hideModal,
+                        });
+                      }}
                    />
-                  ))}
-              </div>
-            )}
-            {this.props.showTimeline && this.state.events.length > 0 && (
-              <ProblemTimeline events={this.state.events} timeRange={this.props.timeRange} />
-            )}
-            {showAcknowledges && !wideLayout && (
-              <div className="problem-ack-container">
-                <h6>
-                  <FAIcon icon="reply-all" /> Acknowledges
-                </h6>
-                <AcknowledgesList acknowledges={problem.acknowledges} />
+                  )}
+                </ModalController>
+                <ModalController>
+                  {({ showModal, hideModal }) => (
+                    <AckButton
+                      className="problem-action-button"
+                      onClick={() => {
+                        showModal(AckModal, {
+                          canClose: problem.manual_close === '1',
+                          severity: problemSeverity,
+                          onSubmit: ackProblem,
+                          onDismiss: hideModal,
+                        });
+                      }}
+                    />
+                  )}
+                </ModalController>
              </div>
            )}
+            <ProblemStatusBar problem={problem} alerts={alerts} className={compactStatusBar && 'compact'} />
          </div>
-          {showAcknowledges && wideLayout && (
-            <div className="problem-details-middle">
-              <div className="problem-ack-container">
-                <h6>
-                  <FAIcon icon="reply-all" /> Acknowledges
-                </h6>
-                <AcknowledgesList acknowledges={problem.acknowledges} />
+          <div className="problem-details-row">
+            <div className="problem-value-container">
+              <div className="problem-age">
+                <FAIcon icon="clock-o" />
+                <span>{age}</span>
+              </div>
+              {problem.items && <ProblemItems items={problem.items} />}
+            </div>
+          </div>
+          {problem.comments && (
+            <div className="problem-description-row">
+              <div className="problem-description">
+                <Tooltip placement="right" content={<span dangerouslySetInnerHTML={{ __html: problem.comments }} />}>
+                  <span className="description-label">Description:&nbsp;</span>
+                </Tooltip>
+                {/* <span>{problem.comments}</span> */}
+                <span dangerouslySetInnerHTML={{ __html: problem.comments }} />
              </div>
            </div>
          )}
-          <div className="problem-details-right">
-            <div className="problem-details-right-item">
-              <FAIcon icon="database" />
-              <span>{dsName}</span>
+          {problem.items && (
+            <div className="problem-description-row">
+              <ProblemExpression problem={problem} />
+            </div>
+          )}
+          {problem.hosts && (
+            <div className="problem-description-row">
+              <ProblemHostsDescription hosts={problem.hosts} />
+            </div>
+          )}
+          {problem.tags && problem.tags.length > 0 && (
+            <div className="problem-tags">
+              {problem.tags &&
+                problem.tags.map((tag) => (
+                  <EventTag
+                    key={tag.tag + tag.value}
+                    tag={tag}
+                    datasource={problem.datasource}
+                    highlight={tag.tag === problem.correlation_tag}
+                    onClick={handleTagClick}
+                  />
+                ))}
+            </div>
+          )}
+          {showTimeline && events.length > 0 && <ProblemTimeline events={events} timeRange={timeRange} />}
+          {showAcknowledges && !wideLayout && (
+            <div className="problem-ack-container">
+              <h6>
+                <FAIcon icon="reply-all" /> Acknowledges
+              </h6>
+              <AcknowledgesList acknowledges={problem.acknowledges} />
+            </div>
+          )}
+        </div>
+        {showAcknowledges && wideLayout && (
+          <div className="problem-details-middle">
+            <div className="problem-ack-container">
+              <h6>
+                <FAIcon icon="reply-all" /> Acknowledges
+              </h6>
+              <AcknowledgesList acknowledges={problem.acknowledges} />
            </div>
-            {problem.proxy && (
-              <div className="problem-details-right-item">
-                <FAIcon icon="cloud" />
-                <span>{problem.proxy}</span>
-              </div>
-            )}
-            {problem.groups && <ProblemGroups groups={problem.groups} className="problem-details-right-item" />}
-            {problem.hosts && <ProblemHosts hosts={problem.hosts} className="problem-details-right-item" />}
          </div>
+        )}
+        <div className="problem-details-right">
+          <div className="problem-details-right-item">
+            <FAIcon icon="database" />
+            <span>{dsName}</span>
+          </div>
+          {problem.proxy && (
+            <div className="problem-details-right-item">
+              <FAIcon icon="cloud" />
+              <span>{problem.proxy}</span>
+            </div>
+          )}
+          {problem.groups && <ProblemGroups groups={problem.groups} />}
+          {problem.hosts && <ProblemHosts hosts={problem.hosts} />}
        </div>
      </div>
-    );
-  }
-}
-
-interface ProblemItemProps {
-  item: ZBXItem;
-  showName?: boolean;
-}
-
-function ProblemItem(props: ProblemItemProps) {
-  const { item, showName } = props;
-  const itemName = utils.expandItemName(item.name, item.key_);
-  const tooltipContent = () => (
-    <>
-      {itemName}
-      <br />
-      {item.lastvalue}
-    </>
-  );
-
-  return (
-    <div className="problem-item">
-      <FAIcon icon="thermometer-three-quarters" />
-      {showName && <span className="problem-item-name">{item.name}: </span>}
-      <Tooltip placement="top-start" content={tooltipContent}>
-        <span className="problem-item-value">{item.lastvalue}</span>
-      </Tooltip>
-    </div>
-  );
-}
-
-interface ProblemItemsProps {
-  items: ZBXItem[];
-}
-
-const ProblemItems: FC<ProblemItemsProps> = ({ items }) => {
-  return (
-    <div className="problem-items-row">
-      {items.length > 1 ? (
-        items.map((item) => <ProblemItem item={item} key={item.itemid} showName={true} />)
-      ) : (
-        <ProblemItem item={items[0]} />
-      )}
    </div>
  );
 };

-interface ProblemGroupsProps {
-  groups: ZBXGroup[];
-  className?: string;
-}
-
-class ProblemGroups extends PureComponent<ProblemGroupsProps> {
-  render() {
-    return this.props.groups.map((g) => (
-      <div className={this.props.className || ''} key={g.groupid}>
-        <FAIcon icon="folder" />
-        <span>{g.name}</span>
-      </div>
-    ));
-  }
-}
-
-interface ProblemHostsProps {
-  hosts: ZBXHost[];
-  className?: string;
-}
-
-class ProblemHosts extends PureComponent<ProblemHostsProps> {
-  render() {
-    return this.props.hosts.map((h) => (
-      <div className={this.props.className || ''} key={h.hostid}>
-        <FAIcon icon="server" />
-        <span>{h.name}</span>
-      </div>
-    ));
-  }
-}
+const getStyles = (theme: GrafanaTheme2) => ({
+  problemDetails: css`
+    position: relative;
+    flex: 10 1 auto;
+    // padding: 0.5rem 1rem 0.5rem 1.2rem;
+    padding: ${theme.spacing(0.5)} ${theme.spacing(1)} ${theme.spacing(0.5)} ${theme.spacing(1.2)}
+    display: flex;
+    flex-direction: column;
+    // white-space: pre-line;
+  `,
+});
--- a/src/panel-triggers/components/Problems/ProblemExpression.tsx
+++ b/src/panel-triggers/components/Problems/ProblemExpression.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { css } from '@emotion/css';
+import { Tooltip, useStyles2 } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { ProblemDTO } from '../../../datasource/types';
+
+interface Props {
+  problem: ProblemDTO;
+}
+
+export const ProblemExpression = ({ problem }: Props) => {
+  const styles = useStyles2(getStyles);
+  return (
+    <>
+      <Tooltip placement="right" content={problem.expression}>
+        <span className={styles.label}>Expression:&nbsp;</span>
+      </Tooltip>
+      <span className={styles.expression}>{problem.expression}</span>
+    </>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  label: css`
+    color: ${theme.colors.text.secondary};
+  `,
+  expression: css`
+    font-family: ${theme.typography.fontFamilyMonospace};
+  `,
+});
--- a/src/panel-triggers/components/Problems/ProblemGroups.tsx
+++ b/src/panel-triggers/components/Problems/ProblemGroups.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { css } from '@emotion/css';
+import { useStyles2 } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { FAIcon } from '../../../components';
+import { ZBXGroup } from '../../../datasource/types';
+
+interface ProblemGroupsProps {
+  groups: ZBXGroup[];
+  className?: string;
+}
+
+export const ProblemGroups = ({ groups }: ProblemGroupsProps) => {
+  const styles = useStyles2(getStyles);
+  return (
+    <>
+      {groups.map((g) => (
+        <div className={styles.groupContainer} key={g.groupid}>
+          <FAIcon icon="folder" />
+          <span>{g.name}</span>
+        </div>
+      ))}
+    </>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  groupContainer: css`
+    margin-bottom: ${theme.spacing(0.2)};
+  `,
+});
--- a/src/panel-triggers/components/Problems/ProblemHosts.tsx
+++ b/src/panel-triggers/components/Problems/ProblemHosts.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { css } from '@emotion/css';
+import { useStyles2 } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { FAIcon } from '../../../components';
+import { ZBXHost } from '../../../datasource/types';
+
+interface ProblemHostsProps {
+  hosts: ZBXHost[];
+  className?: string;
+}
+
+export const ProblemHosts = ({ hosts }: ProblemHostsProps) => {
+  const styles = useStyles2(getStyles);
+  return (
+    <>
+      {hosts.map((h) => (
+        <div className={styles.hostContainer} key={h.hostid}>
+          <FAIcon icon="server" />
+          <span>{h.name}</span>
+        </div>
+      ))}
+    </>
+  );
+};
+
+export const ProblemHostsDescription = ({ hosts }: ProblemHostsProps) => {
+  const styles = useStyles2(getStyles);
+  return (
+    <>
+      <span className={styles.label}>Host Description:&nbsp;</span>
+      {hosts.map((h, i) => (
+        <span key={`${h.hostid}-${i}`}>{h.description}</span>
+      ))}
+    </>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  hostContainer: css`
+    margin-bottom: ${theme.spacing(0.2)};
+  `,
+  label: css`
+    color: ${theme.colors.text.secondary};
+  `,
+});
--- a/src/panel-triggers/components/Problems/ProblemItems.tsx
+++ b/src/panel-triggers/components/Problems/ProblemItems.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { css } from '@emotion/css';
+import { Tooltip, useStyles2 } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { FAIcon } from '../../../components';
+import { expandItemName } from '../../../datasource/utils';
+import { ZBXItem } from '../../../datasource/types';
+
+interface ProblemItemsProps {
+  items: ZBXItem[];
+}
+
+export const ProblemItems = ({ items }: ProblemItemsProps) => {
+  const styles = useStyles2(getStyles);
+  return (
+    <div className={styles.itemsRow}>
+      {items.length > 1 ? (
+        items.map((item) => <ProblemItem item={item} key={item.itemid} showName={true} />)
+      ) : (
+        <ProblemItem item={items[0]} />
+      )}
+    </div>
+  );
+};
+
+interface ProblemItemProps {
+  item: ZBXItem;
+  showName?: boolean;
+}
+
+const ProblemItem = ({ item, showName }: ProblemItemProps) => {
+  const styles = useStyles2(getStyles);
+  const itemName = expandItemName(item.name, item.key_);
+  const tooltipContent = () => (
+    <>
+      {itemName}
+      <br />
+      {item.lastvalue}
+    </>
+  );
+
+  return (
+    <div className={styles.itemContainer}>
+      <FAIcon icon="thermometer-three-quarters" />
+      {showName && <span className={styles.itemName}>{item.name}:&nbsp;</span>}
+      <Tooltip placement="top-start" content={tooltipContent}>
+        <span>{item.lastvalue}</span>
+      </Tooltip>
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  itemContainer: css`
+    display: flex;
+  `,
+  itemName: css`
+    color: ${theme.colors.text.secondary};
+  `,
+  itemsRow: css`
+    overflow: hidden;
+  `,
+});
--- a/src/panel-triggers/components/Problems/Problems.tsx
+++ b/src/panel-triggers/components/Problems/Problems.tsx
@@ -5,7 +5,7 @@ import _ from 'lodash';
 // eslint-disable-next-line
 import moment from 'moment';
 import { isNewProblem } from '../../utils';
-import EventTag from '../EventTag';
+import { EventTag } from '../EventTag';
 import { ProblemDetails } from './ProblemDetails';
 import { AckProblemData } from '../AckModal';
 import { FAIcon, GFHeartIcon } from '../../../components';
@@ -173,7 +173,7 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
        Cell: statusIconCell,
      },
      { Header: 'Status', accessor: 'value', show: options.statusField, width: 100, Cell: statusCell },
-      { Header: 'Problem', accessor: 'description', minWidth: 200, Cell: ProblemCell },
+      { Header: 'Problem', accessor: 'name', minWidth: 200, Cell: ProblemCell },
      {
        Header: 'Ack',
        id: 'ack',
--- a/src/panel-triggers/module.tsx
+++ b/src/panel-triggers/module.tsx
@@ -102,6 +102,7 @@ export const plugin = new PanelPlugin<ProblemsPanelOptions, {}>(ProblemsPanel)
        path: 'triggerSeverity',
        name: 'Problem colors',
        editor: ProblemColorEditor,
+        defaultValue: defaultPanelOptions.triggerSeverity,
        category: ['Colors'],
      })
      .addBooleanSwitch({
--- a/src/panel-triggers/types.ts
+++ b/src/panel-triggers/types.ts
@@ -41,7 +41,7 @@ export interface ProblemsPanelOptions {
  markAckEvents?: boolean;
 }

-export const DEFAULT_SEVERITY = [
+export const DEFAULT_SEVERITY: TriggerSeverity[] = [
  { priority: 0, severity: 'Not classified', color: 'rgb(108, 108, 108)', show: true },
  { priority: 1, severity: 'Information', color: 'rgb(120, 158, 183)', show: true },
  { priority: 2, severity: 'Warning', color: 'rgb(175, 180, 36)', show: true },