Migrate problems panel to React (#1532)

* Replace default angular app config editor

* Problems panel: migrate module to ts

* Problems panel options editor to react

* Problems panel react WIP

* Fix explore button

* Problems panel alert list layout WIP

* Refactor

* Minor tweaks on panel options

* remove outdated tests

* Update typescript

* Draft for tag event handling

* Remove unused files

src/panel-triggers/types.ts

@@ -1,9 +1,11 @@
-import { DataSourceRef } from "@grafana/data";
+import { DataSourceRef } from '@grafana/data';
+import { CURRENT_SCHEMA_VERSION } from './migrations';
 
 export interface ProblemsPanelOptions {
   schemaVersion: number;
   datasources: any[];
   targets: ProblemsPanelTarget[];
+  layout: 'table' | 'list';
   // Fields
   hostField?: boolean;
   hostTechNameField?: boolean;
@@ -19,15 +21,9 @@ export interface ProblemsPanelOptions {
   descriptionAtNewLine?: boolean;
   // Options
   hostsInMaintenance?: boolean;
-  showTriggers?: 'all triggers' | 'unacknowledged' | 'acknowledges';
-  sortTriggersBy?: {
-    text: string;
-    value: 'lastchange' | 'priority';
-  };
-  showEvents?: {
-    text: 'All' | 'OK' | 'Problems';
-    value: 1 | Array<0 | 1>;
-  };
+  showTriggers?: 'all triggers' | 'unacknowledged' | 'acknowledged';
+  sortProblems?: 'default' | 'lastchange' | 'priority';
+  showEvents?: Number[];
   limit?: number;
   // View options
   fontSize?: string;
@@ -46,24 +42,71 @@ export interface ProblemsPanelOptions {
   markAckEvents?: boolean;
 }
 
+export const DEFAULT_SEVERITY = [
+  { 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 },
+  { priority: 3, severity: 'Average', color: 'rgb(255, 137, 30)', show: true },
+  { priority: 4, severity: 'High', color: 'rgb(255, 101, 72)', show: true },
+  { priority: 5, severity: 'Disaster', color: 'rgb(215, 0, 0)', show: true },
+];
+
+export const getDefaultSeverity = () => DEFAULT_SEVERITY;
+
+export const defaultPanelOptions: Partial<ProblemsPanelOptions> = {
+  schemaVersion: CURRENT_SCHEMA_VERSION,
+  // Fields
+  hostField: true,
+  hostTechNameField: false,
+  hostProxy: false,
+  hostGroups: false,
+  showTags: true,
+  statusField: true,
+  statusIcon: false,
+  severityField: true,
+  ackField: true,
+  ageField: false,
+  descriptionField: true,
+  descriptionAtNewLine: false,
+  // Options
+  sortProblems: 'lastchange',
+  limit: null,
+  // View options
+  layout: 'table',
+  fontSize: '100%',
+  pageSize: 10,
+  problemTimeline: true,
+  highlightBackground: false,
+  highlightNewEvents: false,
+  highlightNewerThan: '1h',
+  customLastChangeFormat: false,
+  lastChangeFormat: '',
+  resizedColumns: [],
+  // Triggers severity and colors
+  triggerSeverity: getDefaultSeverity(),
+  okEventColor: 'rgb(56, 189, 113)',
+  ackEventColor: 'rgb(56, 219, 156)',
+  markAckEvents: false,
+};
+
 export interface ProblemsPanelTarget {
   group: {
-    filter: string
+    filter: string;
   };
   host: {
-    filter: string
+    filter: string;
   };
   application: {
-    filter: string
+    filter: string;
   };
   trigger: {
-    filter: string
+    filter: string;
   };
   tags: {
-    filter: string
+    filter: string;
   };
   proxy: {
-    filter: string
+    filter: string;
   };
   datasource: string;
 }
@@ -77,108 +120,6 @@ export interface TriggerSeverity {
 
 export type TriggerColor = string;
 
-export interface ZBXTrigger {
-  acknowledges?: ZBXAcknowledge[];
-  showAckButton?: boolean;
-  alerts?: ZBXAlert[];
-  age?: string;
-  color?: TriggerColor;
-  comments?: string;
-  correlation_mode?: string;
-  correlation_tag?: string;
-  datasource?: DataSourceRef | string;
-  description?: string;
-  error?: string;
-  expression?: string;
-  flags?: string;
-  groups?: ZBXGroup[];
-  host?: string;
-  hostTechName?: string;
-  hosts?: ZBXHost[];
-  items?: ZBXItem[];
-  lastEvent?: ZBXEvent;
-  lastchange?: string;
-  lastchangeUnix?: number;
-  maintenance?: boolean;
-  manual_close?: string;
-  priority?: string;
-  proxy?: string;
-  recovery_expression?: string;
-  recovery_mode?: string;
-  severity?: string;
-  state?: string;
-  status?: string;
-  tags?: ZBXTag[];
-  templateid?: string;
-  triggerid?: string;
-  /** Whether the trigger can generate multiple problem events. */
-  type?: string;
-  url?: string;
-  value?: string;
-}
-
-export interface ZBXGroup {
-  groupid: string;
-  name: string;
-}
-
-export interface ZBXHost {
-  hostid: string;
-  name: string;
-}
-
-export interface ZBXItem {
-  itemid: string;
-  name: string;
-  key_: string;
-  lastvalue?: string;
-}
-
-export interface ZBXEvent {
-  eventid: string;
-  clock: string;
-  ns?: string;
-  value?: string;
-  source?: string;
-  object?: string;
-  objectid?: string;
-  acknowledged?: string;
-  severity?: string;
-  hosts?: ZBXHost[];
-  acknowledges?: ZBXAcknowledge[];
-}
-
-export interface ZBXTag {
-  tag: string;
-  value?: string;
-}
-
-export interface ZBXAcknowledge {
-  acknowledgeid: string;
-  eventid: string;
-  userid: string;
-  action: string;
-  clock: string;
-  time: string;
-  message?: string;
-  user: string;
-  alias: string;
-  name: string;
-  surname: string;
-}
-
-export interface ZBXAlert {
-  eventid: string;
-  clock: string;
-  message: string;
-  error: string;
-}
-
-export interface GFTimeRange {
-  timeFrom: number;
-  timeTo: number;
-}
-
 export interface RTRow<T> {
   /** the materialized row of data */
   row: any;