Problems panel: hide acknowledge button for read-only users, fix #722

src/panel-triggers/components/AlertList/AlertAcknowledges.tsx

@@ -36,11 +36,13 @@ export default class AlertAcknowledges extends PureComponent<AlertAcknowledgesPr
             {ackRows}
           </tbody>
         </table>
-        <div className="ack-add-button">
-          <button id="add-acknowledge-btn" className="btn btn-mini btn-inverse gf-form-button" onClick={this.handleClick}>
-            <i className="fa fa-plus"></i>
-          </button>
-        </div>
+        {problem.showAckButton &&
+          <div className="ack-add-button">
+            <button id="add-acknowledge-btn" className="btn btn-mini btn-inverse gf-form-button" onClick={this.handleClick}>
+              <i className="fa fa-plus"></i>
+            </button>
+          </div>
+        }
       </div>
     );
   }

src/panel-triggers/components/AlertList/AlertCard.tsx

@@ -44,7 +44,10 @@ export default class AlertCard extends PureComponent<AlertCardProps, AlertCardSt
   }
 
   showAckDialog = () => {
-    this.setState({ showAckDialog: true });
+    const problem = this.props.problem;
+    if (problem.showAckButton) {
+      this.setState({ showAckDialog: true });
+    }
   }
 
   closeAckDialog = () => {
@@ -258,14 +261,20 @@ class AlertAcknowledgesButton extends PureComponent<AlertAcknowledgesButtonProps
 
   render() {
     const { problem } = this.props;
-    return (
-      problem.acknowledges && problem.acknowledges.length ?
+    let content = null;
+    if (problem.acknowledges && problem.acknowledges.length) {
+      content = (
         <Tooltip placement="bottom" popperClassName="ack-tooltip" content={this.renderTooltipContent}>
           <span><i className="fa fa-comments"></i></span>
-        </Tooltip> :
+        </Tooltip>
+      );
+    } else if (problem.showAckButton) {
+      content = (
         <Tooltip placement="bottom" content="Acknowledge problem">
           <span role="button" onClick={this.handleClick}><i className="fa fa-comments-o"></i></span>
         </Tooltip>
-    );
+      );
+    }
+    return content;
   }
 }

src/panel-triggers/components/Problems/ProblemDetails.tsx

@@ -110,12 +110,14 @@ export default class ProblemDetails extends PureComponent<ProblemDetailsProps, P
               {problem.items && <ProblemItems items={problem.items} />}
             </div>
             <ProblemStatusBar problem={problem} alerts={alerts} className={compactStatusBar && 'compact'} />
-            <div className="problem-actions">
-              <ProblemActionButton className="navbar-button navbar-button--settings"
-                icon="reply-all"
-                tooltip="Acknowledge problem"
-                onClick={this.showAckDialog} />
-            </div>
+            {problem.showAckButton &&
+              <div className="problem-actions">
+                <ProblemActionButton className="navbar-button navbar-button--settings"
+                  icon="reply-all"
+                  tooltip="Acknowledge problem"
+                  onClick={this.showAckDialog} />
+              </div>
+            }
           </div>
           {problem.comments &&
             <div className="problem-description">

src/panel-triggers/triggers_panel_ctrl.js

@@ -234,9 +234,11 @@ export class TriggerPanelCtrl extends PanelCtrl {
   getTriggers() {
     const timeFrom = Math.ceil(dateMath.parse(this.range.from) / 1000);
     const timeTo = Math.ceil(dateMath.parse(this.range.to) / 1000);
+    const userIsEditor = this.contextSrv.isEditor || this.contextSrv.isGrafanaAdmin;
 
     let promises = _.map(this.panel.datasources, (ds) => {
       let proxies;
+      let showAckButton = true;
       return this.datasourceSrv.get(ds)
       .then(datasource => {
         const zabbix = datasource.zabbix;
@@ -244,6 +246,7 @@ export class TriggerPanelCtrl extends PanelCtrl {
         const triggerFilter = this.panel.targets[ds];
         const showProxy = this.panel.hostProxy;
         const getProxiesPromise = showProxy ? zabbix.getProxies() : () => [];
+        showAckButton = !datasource.disableReadOnlyUsersAck || userIsEditor;
 
         // Replace template variables
         const groupFilter = datasource.replaceTemplateVars(triggerFilter.group.filter);
@@ -280,6 +283,7 @@ export class TriggerPanelCtrl extends PanelCtrl {
         return triggers;
       })
       .then(triggers => this.setMaintenanceStatus(triggers))
+      .then(triggers => this.setAckButtonStatus(triggers, showAckButton))
       .then(triggers => this.filterTriggersPre(triggers, ds))
       .then(triggers => this.addTriggerDataSource(triggers, ds))
       .then(triggers => this.addTriggerHostProxy(triggers, proxies));
@@ -395,6 +399,13 @@ export class TriggerPanelCtrl extends PanelCtrl {
     return triggers;
   }
 
+  setAckButtonStatus(triggers, showAckButton) {
+    _.each(triggers, (trigger) => {
+      trigger.showAckButton = showAckButton;
+    });
+    return triggers;
+  }
+
   addTriggerDataSource(triggers, ds) {
     _.each(triggers, (trigger) => {
       trigger.datasource = ds;

src/panel-triggers/types.ts

@@ -75,6 +75,7 @@ export type TriggerColor = string;
 
 export interface ZBXTrigger {
   acknowledges?: ZBXAcknowledge[];
+  showAckButton?: boolean;
   alerts?: ZBXAlert[];
   age?: string;
   color?: TriggerColor;