Fix: Refresh schedule phrase overlaps title (#3250)

client/app/components/queries/ScheduleDialog.css

@@ -24,3 +24,11 @@
 .schedule-component datepicker {
   display: block;
 }
+
+.schedule-phrase {
+  display: inline-block;
+}
+
+a.schedule-phrase {
+  cursor: pointer;
+}

client/app/components/queries/ScheduleDialog.jsx

@@ -8,7 +8,7 @@ import Select from 'antd/lib/select';
 import Radio from 'antd/lib/radio';
 import { range, clone, isEqual } from 'lodash';
 import moment from 'moment';
-import { secondsToInterval, intervalToSeconds, IntervalEnum } from '@/filters';
+import { secondsToInterval, intervalToSeconds, IntervalEnum, localizeTime } from '@/filters';
 
 import './ScheduleDialog.css';
 
@@ -26,16 +26,6 @@ const DATE_FORMAT = 'YYYY-MM-DD';
 const HOUR_FORMAT = 'HH:mm';
 const Option = Select.Option;
 
-function localizeTime(time) {
-  const [hrs, mins] = time.split(':');
-  return moment
-    .utc()
-    .hour(hrs)
-    .minute(mins)
-    .local()
-    .format(HOUR_FORMAT);
-}
-
 class ScheduleDialog extends React.Component {
   static propTypes = {
     show: PropTypes.bool.isRequired,

client/app/components/queries/SchedulePhrase.jsx

@@ -0,0 +1,59 @@
+import { react2angular } from 'react2angular';
+import React from 'react';
+import PropTypes from 'prop-types';
+import Tooltip from 'antd/lib/tooltip';
+import { localizeTime, secondsToInterval } from '@/filters';
+
+import './ScheduleDialog.css';
+
+class SchedulePhrase extends React.Component {
+  static propTypes = {
+    // eslint-disable-next-line react/forbid-prop-types
+    schedule: PropTypes.object.isRequired,
+    isNew: PropTypes.bool.isRequired,
+    isLink: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    isLink: false,
+  };
+
+  get content() {
+    const { interval: seconds } = this.props.schedule;
+    if (!seconds) {
+      return ['Never'];
+    }
+    const { count, interval } = secondsToInterval(seconds);
+    const short = `Every ${count} ${interval}`;
+    let full = `Refreshes every ${count} ${interval}`;
+
+    const { time, day_of_week: dayOfWeek } = this.props.schedule;
+    if (time) {
+      full += ` at ${localizeTime(time)}`;
+    }
+    if (dayOfWeek) {
+      full += ` on ${dayOfWeek}`;
+    }
+
+    return [short, full];
+  }
+
+  render() {
+    if (this.props.isNew) {
+      return 'Never';
+    }
+
+    const [short, full] = this.content;
+    const content = full ? <Tooltip title={full}>{short}</Tooltip> : short;
+
+    return this.props.isLink
+      ? <a className="schedule-phrase">{content}</a>
+      : content;
+  }
+}
+
+export default function init(ngModule) {
+  ngModule.component('schedulePhrase', react2angular(SchedulePhrase));
+}
+
+init.init = true;

client/app/filters/index.js

@@ -9,6 +9,16 @@ export const IntervalEnum = {
   WEEKS: 'week(s)',
 };
 
+export function localizeTime(time) {
+  const [hrs, mins] = time.split(':');
+  return moment
+    .utc()
+    .hour(hrs)
+    .minute(mins)
+    .local()
+    .format('HH:mm');
+}
+
 export function secondsToInterval(seconds) {
   let interval = IntervalEnum.MINUTES;
   let count = seconds / 60;
@@ -73,29 +83,6 @@ export function durationHumanize(duration) {
   return humanized;
 }
 
-export function scheduleHumanize(schedule) {
-  if (!schedule.interval) {
-    return 'Never';
-  }
-  const { count, interval } = secondsToInterval(schedule.interval);
-  let scheduleString = `Every ${count} ${interval} `;
-
-  if (schedule.time) {
-    const parts = schedule.time.split(':');
-    const localTime = moment.utc()
-      .hour(parts[0])
-      .minute(parts[1])
-      .local()
-      .format('HH:mm');
-    scheduleString += `at ${localTime} `;
-  }
-
-  if (schedule.day_of_week) {
-    scheduleString += `on ${schedule.day_of_week}`;
-  }
-  return scheduleString;
-}
-
 export function toHuman(text) {
   return text.replace(/_/g, ' ').replace(/(?:^|\s)\S/g, a => a.toUpperCase());
 }

client/app/pages/admin/outdated-queries/outdated-queries.html

@@ -34,7 +34,7 @@
           <td>{{row.runtime | durationHumanize}}</td>
           <td>{{row.retrieved_at | dateTime}}</td>
           <td>{{row.created_at | dateTime }}</td>
-          <td>{{row.schedule | scheduleHumanize}}</td>
+          <td><schedule-phrase schedule="row.schedule" is-new="row.isNew()" /></td>
         </tr>
         </tbody>
       </table>

client/app/pages/queries-list/queries-list.html

@@ -103,7 +103,7 @@
               <td>{{query.created_at | dateTime}}</td>
               <td>{{query.runtime | durationHumanize}}</td>
               <td>{{query.retrieved_at | dateTime}}</td>
-              <td>{{query.schedule | scheduleHumanize}}</td>
+              <td><schedule-phrase schedule="query.schedule" is-new="query.isNew()" /></td>
             </tr>
           </tbody>
         </table>

client/app/pages/queries/query.html

@@ -136,8 +136,7 @@ <h3>
             </td>
             <td class="p-t-15 text-right">
               <schedule-dialog show="showScheduleForm" query="query" refresh-options="refreshOptions" update-query="updateQueryMetadata" on-close="closeScheduleForm"></schedule-dialog>
-              <a ng-click="openScheduleForm()" ng-if="!query.isNew()">{{query.schedule | scheduleHumanize}}</a>
-              <span ng-if="query.isNew()">Never</span>
+              <schedule-phrase ng-click="openScheduleForm()" is-link="true" schedule="query.schedule" is-new="query.isNew()" />
             </td>
           </tr>
         </table>
@@ -185,8 +184,7 @@ <h3>
 
             <div>
               <span class="query-metadata__property">Refresh schedule:</span>
-              <a ng-click="openScheduleForm()" ng-if="!query.isNew()">{{query.schedule | scheduleHumanize}}</a>
-              <span ng-if="query.isNew()">Never</span>
+              <schedule-phrase ng-click="openScheduleForm()" is-link="true" schedule="query.schedule" is-new="query.isNew()" />
             </div>
           </div>