From 195373953c3f7a81738f9d8de07a5dce092cb8ce Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Tue, 15 Jan 2019 17:31:05 +0300
Subject: [PATCH] problems: fix alert list styles

---
 .../components/AlertList/AlertCard.tsx        |  3 +-
 .../components/AlertList/AlertList.tsx        | 47 +++++++++--------
 src/panel-triggers/triggers_panel_ctrl.js     |  1 +
 src/sass/_panel-triggers.scss                 | 50 +++++++++++++++++--
 4 files changed, 71 insertions(+), 30 deletions(-)

diff --git a/src/panel-triggers/components/AlertList/AlertCard.tsx b/src/panel-triggers/components/AlertList/AlertCard.tsx
index 9c24554..a7345f8 100644
--- a/src/panel-triggers/components/AlertList/AlertCard.tsx
+++ b/src/panel-triggers/components/AlertList/AlertCard.tsx
@@ -53,6 +53,7 @@ export default class AlertCard extends PureComponent<AlertCardProps, AlertCardSt
   render() {
     const { problem, panelOptions } = this.props;
     const cardClass = classNames('alert-rule-item', 'zbx-trigger-card', { 'zbx-trigger-highlighted': panelOptions.highlightBackground });
+    const descriptionClass = classNames('alert-rule-item__text', { 'zbx-description--newline': panelOptions.descriptionAtNewLine });
     const severityDesc = _.find(panelOptions.triggerSeverity, s => s.priority === Number(problem.priority));
     const lastchange = formatLastChange(problem.lastchangeUnix, panelOptions.customLastChangeFormat && panelOptions.lastChangeFormat);
     const age = moment.unix(problem.lastchangeUnix).fromNow(true);
@@ -95,7 +96,7 @@ export default class AlertCard extends PureComponent<AlertCardProps, AlertCardSt
               )}
             </p>
 
-            <div className="alert-rule-item__text">
+            <div className={descriptionClass}>
               {panelOptions.statusField && <AlertStatus problem={problem} blink={blink} />}
               {panelOptions.severityField && (
                 <AlertSeverity severityDesc={severityDesc} blink={blink} highlightBackground={panelOptions.highlightBackground} />
diff --git a/src/panel-triggers/components/AlertList/AlertList.tsx b/src/panel-triggers/components/AlertList/AlertList.tsx
index ba4cf06..9f2a70b 100644
--- a/src/panel-triggers/components/AlertList/AlertList.tsx
+++ b/src/panel-triggers/components/AlertList/AlertList.tsx
@@ -59,33 +59,32 @@ export default class AlertList extends PureComponent<AlertListProps, AlertListSt
     const { problems, panelOptions } = this.props;
     const currentProblems = this.getCurrentProblems(this.state.page);
 
-    return [
+    return (
       <div className="triggers-panel-container" key="alertListContainer">
-        <div className="triggers-panel-scroll">
-          <section className="card-section card-list-layout-list">
-            <ol className="alert-rule-list">
-              {currentProblems.map(problem =>
-                <AlertCard
-                  key={problem.triggerid}
-                  problem={problem}
-                  panelOptions={panelOptions}
-                  onTagClick={this.handleTagClick}
-                  onProblemAck={this.handleProblemAck}
-                />
-              )}
-            </ol>
-          </section>
+        <section className="card-section card-list-layout-list">
+          <ol className="alert-rule-list">
+            {currentProblems.map(problem =>
+              <AlertCard
+                key={problem.triggerid}
+                problem={problem}
+                panelOptions={panelOptions}
+                onTagClick={this.handleTagClick}
+                onProblemAck={this.handleProblemAck}
+              />
+            )}
+          </ol>
+        </section>
+
+        <div className="triggers-panel-footer" key="alertListFooter">
+          <PaginationControl
+            itemsLength={problems.length}
+            pageSize={this.props.pageSize}
+            pageIndex={this.state.page}
+            onPageChange={this.handlePageChange}
+          />
         </div>
-      </div>,
-      <div className="triggers-panel-footer" key="alertListFooter">
-        <PaginationControl
-          itemsLength={problems.length}
-          pageSize={this.props.pageSize}
-          pageIndex={this.state.page}
-          onPageChange={this.handlePageChange}
-        />
       </div>
-    ];
+    );
   }
 }
 
diff --git a/src/panel-triggers/triggers_panel_ctrl.js b/src/panel-triggers/triggers_panel_ctrl.js
index 0a57945..c91bcfc 100644
--- a/src/panel-triggers/triggers_panel_ctrl.js
+++ b/src/panel-triggers/triggers_panel_ctrl.js
@@ -645,6 +645,7 @@ export class TriggerPanelCtrl extends PanelCtrl {
 }
 
 TriggerPanelCtrl.templateUrl = 'public/plugins/alexanderzobnin-zabbix-app/panel-triggers/partials/module.html';
+// TriggerPanelCtrl.scrollable = true;
 
 function filterTriggers(triggers, triggerFilter) {
   if (utils.isRegex(triggerFilter)) {
diff --git a/src/sass/_panel-triggers.scss b/src/sass/_panel-triggers.scss
index 4db4287..f06e6a4 100644
--- a/src/sass/_panel-triggers.scss
+++ b/src/sass/_panel-triggers.scss
@@ -4,6 +4,41 @@
 
 .triggers-panel-container {
   position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .card-section {
+    padding: 2px;
+    margin-bottom: 0.4rem;
+    overflow: auto;
+
+    .alert-rule-list {
+      .alert-rule-item {
+        .alert-rule-item__text {
+          display: flex;
+          max-height: 1.6em;
+          overflow: hidden;
+          padding-right: 1em;
+
+          &.zbx-description--newline {
+            max-height: unset;
+          }
+
+          .zbx-description {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          span {
+            padding-right: 0.4em;
+          }
+
+        }
+      }
+    }
+  }
 
   .zabbix-trigger-name {
     font-weight: bold;
@@ -11,14 +46,18 @@
 
   .zabbix-hostname {
     color: $gray-2;
-    margin-left: 1rem;
+    margin-left: 1em;
     font-weight: 500;
+
+    i {
+      padding-right: 0.2em;
+    }
   }
 
   .zbx-description {
     color: $gray-3;
     font-weight: normal;
-    margin-left: 0.6rem;
+    margin-left: 0.6em;
 
     &--newline {
       margin-left: 0rem;
@@ -51,8 +90,9 @@
     margin-right: 1.5rem;
     margin-left: 1rem;
     font-weight: 500;
-    .gicon-datasources {
-      opacity: 0.4;
+
+    i {
+      padding-right: 0.4em;
     }
   }
 
@@ -109,10 +149,10 @@
 }
 
 .triggers-panel-footer {
+  margin-top: auto;
   text-align: center;
   font-size: 90%;
   line-height: 2px;
-  padding-top: 4px;
 
   ul {
     position: relative;