<commit_before>import React, { PureComponent } from 'react';
import * as utils from '../../datasource-zabbix/utils';
import { Trigger, ZBXItem, ZBXAcknowledge, ZBXHost, ZBXGroup, ZBXEvent, GFTimeRange, RTRow, ZBXTag } from '../types';
import { Modal, AckProblemData } from './Modal';
import EventTag from './EventTag';
import Tooltip from './Tooltip/Tooltip';
import ProblemTimeline from './ProblemTimeline';
import FAIcon from './FAIcon';

interface ProblemDetailsProps extends RTRow<Trigger> {
  rootWidth: number;
  timeRange: GFTimeRange;
  getProblemEvents: (problem: Trigger) => Promise<ZBXEvent[]>;
  onProblemAck?: (problem: Trigger, data: AckProblemData) => Promise<any> | any;
  onTagClick?: (tag: ZBXTag, datasource: string) => void;
}

interface ProblemDetailsState {
  events: ZBXEvent[];
  show: boolean;
  showAckDialog: boolean;
}

export default class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDetailsState> {
  constructor(props) {
    super(props);
    this.state = {
      events: [],
      show: false,
      showAckDialog: false,
    };
  }

  componentDidMount() {
    this.fetchProblemEvents();
    requestAnimationFrame(() => {
      this.setState({ show: true });
    });
  }

  handleTagClick = (tag: ZBXTag) => {
    if (this.props.onTagClick) {
      this.props.onTagClick(tag, this.props.original.datasource);
    }
  }

  fetchProblemEvents() {
    const problem = this.props.original;
    this.props.getProblemEvents(problem)
    .then(events => {
      console.log(events, this.props.timeRange);
      this.setState({ events });
    });
  }

  ackProblem = (data: AckProblemData) => {
    const problem = this.props.original as Trigger;
    console.log('acknowledge: ', problem.lastEvent && problem.lastEvent.eventid, data);
    return this.props.onProblemAck(problem, data).then(result => {
      this.closeAckDialog();
    }).catch(err => {
      console.log(err);
      this.closeAckDialog();
    });
  }

  showAckDialog = () => {
    this.setState({ showAckDialog: true });
  }

  closeAckDialog = () => {
    this.setState({ showAckDialog: false });
  }

  render() {
    const problem = this.props.original as Trigger;
    const rootWidth = this.props.rootWidth;
    const displayClass = this.state.show ? 'show' : '';
    const wideLayout = rootWidth > 1200;
    const compactStatusBar = rootWidth < 800 || problem.acknowledges && wideLayout && rootWidth < 1400;

    return (
      <div className={`problem-details-container ${displayClass}`}>
        <div className="problem-details">
          <div className="problem-details-row">
            <div className="problem-value-container">
              <div className="problem-age">
                <FAIcon icon="clock-o" />
                <span>{problem.age}</span>
              </div>
              {problem.items && <ProblemItems items={problem.items} />}
            </div>
            <ProblemStatusBar problem={problem} className={compactStatusBar && 'compact'} />
            <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">
              <span className="description-label">Description:&nbsp;</span>
              <span>{problem.comments}</span>
            </div>
          }<commit_msg>problems: fix age in problem details<commit_after>import React, { PureComponent } from 'react';
import moment from 'moment';
import * as utils from '../../datasource-zabbix/utils';
import { Trigger, ZBXItem, ZBXAcknowledge, ZBXHost, ZBXGroup, ZBXEvent, GFTimeRange, RTRow, ZBXTag } from '../types';
import { Modal, AckProblemData } from './Modal';
import EventTag from './EventTag';
import Tooltip from './Tooltip/Tooltip';
import ProblemTimeline from './ProblemTimeline';
import FAIcon from './FAIcon';

interface ProblemDetailsProps extends RTRow<Trigger> {
  rootWidth: number;
  timeRange: GFTimeRange;
  getProblemEvents: (problem: Trigger) => Promise<ZBXEvent[]>;
  onProblemAck?: (problem: Trigger, data: AckProblemData) => Promise<any> | any;
  onTagClick?: (tag: ZBXTag, datasource: string) => void;
}

interface ProblemDetailsState {
  events: ZBXEvent[];
  show: boolean;
  showAckDialog: boolean;
}

export default class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDetailsState> {
  constructor(props) {
    super(props);
    this.state = {
      events: [],
      show: false,
      showAckDialog: false,
    };
  }

  componentDidMount() {
    this.fetchProblemEvents();
    requestAnimationFrame(() => {
      this.setState({ show: true });
    });
  }

  handleTagClick = (tag: ZBXTag) => {
    if (this.props.onTagClick) {
      this.props.onTagClick(tag, this.props.original.datasource);
    }
  }

  fetchProblemEvents() {
    const problem = this.props.original;
    this.props.getProblemEvents(problem)
    .then(events => {
      console.log(events, this.props.timeRange);
      this.setState({ events });
    });
  }

  ackProblem = (data: AckProblemData) => {
    const problem = this.props.original as Trigger;
    console.log('acknowledge: ', problem.lastEvent && problem.lastEvent.eventid, data);
    return this.props.onProblemAck(problem, data).then(result => {
      this.closeAckDialog();
    }).catch(err => {
      console.log(err);
      this.closeAckDialog();
    });
  }

  showAckDialog = () => {
    this.setState({ showAckDialog: true });
  }

  closeAckDialog = () => {
    this.setState({ showAckDialog: false });
  }

  render() {
    const problem = this.props.original as Trigger;
    const rootWidth = this.props.rootWidth;
    const displayClass = this.state.show ? 'show' : '';
    const wideLayout = rootWidth > 1200;
    const compactStatusBar = rootWidth < 800 || problem.acknowledges && wideLayout && rootWidth < 1400;
    const age = moment.unix(problem.lastchangeUnix).fromNow(true);

    return (
      <div className={`problem-details-container ${displayClass}`}>
        <div className="problem-details">
          <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>
            <ProblemStatusBar problem={problem} className={compactStatusBar && 'compact'} />
            <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">
              <span className="description-label">Description:&nbsp;</span>
              <span>{problem.comments}</span>
            </div>
          }
{'fraction_non_alphanumeric': 0.13988552282563171, 'fraction_numerical': 0.003071338824514868, 'mean_word_length': 2.8808234019501624, 'pattern_counts': {'":': 0, '<': 59, '<?xml version=': 0, '>': 79, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '522512', 'n_tokens_mistral': 2196, 'n_tokens_neox': 2073, 'n_words': 428}