From 697db407ff777fa509d792d79fa00376ed0b61b9 Mon Sep 17 00:00:00 2001
From: Stephen Salinas <ssalinas@hubspot.com>
Date: Thu, 9 Aug 2018 13:10:47 -0400
Subject: [PATCH 1/2] Nix the old dashboard and default to requests page

---
 .../app/components/common/Navigation.jsx      |   3 -
 .../components/dashboard/DashboardPage.jsx    | 228 ------------------
 .../dashboard/RequestSummaryBox.jsx           | 182 --------------
 .../components/requests/RequestFilters.jsx    |   6 +
 SingularityUI/app/router.jsx                  |   5 +-
 5 files changed, 8 insertions(+), 416 deletions(-)
 delete mode 100644 SingularityUI/app/components/dashboard/DashboardPage.jsx
 delete mode 100644 SingularityUI/app/components/dashboard/RequestSummaryBox.jsx

diff --git a/SingularityUI/app/components/common/Navigation.jsx b/SingularityUI/app/components/common/Navigation.jsx
index 8680ff0972..a16a93fdf8 100644
--- a/SingularityUI/app/components/common/Navigation.jsx
+++ b/SingularityUI/app/components/common/Navigation.jsx
@@ -84,9 +84,6 @@ const Navigation = (props) => {
         </div>
         <div className="collapse navbar-collapse" id="navbar-collapse">
           <ul className="nav navbar-nav">
-            <li className={classnames({active: isActive('/', fragment)})}>
-              <Link to="/">Dashboard {isActive('/', fragment) && <span className="sr-only">(current)</span>}</Link>
-            </li>
             <li className={classnames({active: isActive('status', fragment)})}>
               <Link to="/status">Status {isActive('status', fragment) && <span className="sr-only">(current)</span>}</Link>
             </li>
diff --git a/SingularityUI/app/components/dashboard/DashboardPage.jsx b/SingularityUI/app/components/dashboard/DashboardPage.jsx
deleted file mode 100644
index 52a4c74f8b..0000000000
--- a/SingularityUI/app/components/dashboard/DashboardPage.jsx
+++ /dev/null
@@ -1,228 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-import { Row, Col } from 'react-bootstrap';
-import { connect } from 'react-redux';
-import rootComponent from '../../rootComponent';
-import { Link } from 'react-router';
-
-import Utils from '../../utils';
-import Loader from '../common/Loader';
-
-import { refresh } from '../../actions/ui/dashboard';
-import { FetchUserRelevantRequests } from '../../actions/api/requests';
-import UITable from '../common/table/UITable';
-import Column from '../common/table/Column';
-import Section from '../common/Section';
-import RequestTypeIcon from '../common/icons/RequestTypeIcon'
-import * as Cols from '../requests/Columns';
-import RequestSummaryBox from './RequestSummaryBox';
-import RequestFilters from '../requests/RequestFilters';
-
-class DashboardPage extends Component {
-  static propTypes = {
-    requests: PropTypes.arrayOf(PropTypes.object).isRequired,
-    fetchRequests: PropTypes.func.isRequired
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      requestTypeFilters: RequestFilters.REQUEST_TYPES,
-      loading: false
-    };
-  }
-
-  getCurrentEventAndTime(request) {
-    let lastEvent;
-    let lastEventTime = 0;
-    if (request.requestDeployState && request.requestDeployState.pendingDeploy) {
-      const pendingDeploy = request.requestDeployState.pendingDeploy;
-      lastEvent = (
-        <Link to={`request/${pendingDeploy.requestId}/deploy/${pendingDeploy.deployId}`}>
-          <strong>Deploy</strong> - {pendingDeploy.deployId}{pendingDeploy.user && ` by ${pendingDeploy.user}`} is pending
-        </Link>
-      );
-      lastEventTime = request.requestDeployState.pendingDeploy.timestamp
-    }
-    if (request.requestDeployState && request.requestDeployState.activeDeploy && request.requestDeployState.activeDeploy.timestamp > lastEventTime) {
-      const activeDeploy = request.requestDeployState.activeDeploy;
-      lastEvent = (
-        <p>
-          <strong>Deployed</strong> {Utils.timestampFromNow(activeDeploy.timestamp)}{activeDeploy.user && ` by ${activeDeploy.user}`}
-        </p>
-      );
-      lastEventTime = request.requestDeployState.activeDeploy.timestamp
-    }
-    if (request.expiringBounce && request.expiringBounce.startMillis > lastEventTime) {
-      lastEvent = (
-        <p><strong>Bouncing</strong> -{request.expiringBounce.user && ` started by ${request.expiringBounce.user}`} {Utils.timestampFromNow(request.expiringBounce.startMillis)}</p>
-      );
-      lastEventTime = request.expiringBounce.startMillis;
-    }
-    if (request.expiringPause && request.expiringPause.startMillis > lastEventTime) {
-      lastEvent = (
-        <p><strong>Paused</strong>{request.expiringPause.user && ` by ${request.expiringPause.user}`} {Utils.timestampFromNow(request.expiringPause.startMillis)} will unpause in {Utils.duration(request.expiringPause.expiringAPIRequestObject.durationMillis)}</p>
-      );
-      lastEventTime = request.expiringPause.startMilli;
-    }
-    if (request.expiringScale && request.expiringScale.startMillis > lastEventTime) {
-      lastEvent = (
-        <p><strong>Scaled</strong>{request.expiringScale.user && ` by ${request.expiringScale.user}`} to "{request.request.instances}" {Utils.timestampFromNow(request.expiringScale.startMillis)}, will revert to "{request.expiringScale.revertToInstances}" in {Utils.duration(request.expiringScale.expiringAPIRequestObject.durationMillis)}</p>
-      );
-      lastEventTime = request.expiringScale.startMillis;
-    }
-    if (request.expiringSkipHealthchecks && request.expiringSkipHealthchecks.startMillis > lastEventTime) {
-      lastEvent = (
-        <p><strong>Healthchecks disabled</strong>{request.expiringSkipHealthchecks.user && ` by ${request.expiringSkipHealthchecks.user}`} {Utils.timestampFromNow(request.expiringSkipHealthchecks.startMillis)}, will enable in {Utils.duration(request.expiringSkipHealthchecks.expiringAPIRequestObject.durationMillis)}</p>
-      );
-      lastEventTime = request.expiringSkipHealthchecks.startMillis;
-    }
-    if (request.lastHistory && request.lastHistory.createdAt > lastEventTime) {
-      lastEvent = (
-        <p><strong>{Utils.humanizeText(request.lastHistory.eventType)}</strong> {Utils.timestampFromNow(request.lastHistory.createdAt)} {request.lastHistory.user && `by ${request.lastHistory.user}`} </p>
-      );
-      lastEventTime = request.lastHistory.createdAt;
-    }
-    if (request.request.requestType != 'SERVICE' && request.request.requestType != 'WORKER' && request.mostRecentTask && request.mostRecentTask.updatedAt > lastEventTime) {
-      lastEvent = (
-        <p>
-          <Link to={`task/${request.mostRecentTask.taskId.id}`}>
-            <strong>{Utils.humanizeText(request.mostRecentTask.lastTaskState)}</strong>
-          </Link>
-          {` ${Utils.timestampFromNow(request.mostRecentTask.updatedAt)}`}
-        </p>
-      );
-      lastEventTime = request.mostRecentTask.updatedAt;
-    }
-    if (!lastEvent) {
-      lastEvent = (<p>No Recent Activity</p>);
-    }
-    return {
-      lastEvent: lastEvent,
-      lastEventTime: lastEventTime
-    }
-  }
-
-  toggleRequestType(requestType) {
-    let selected = this.state.requestTypeFilters;
-    if (selected.length === RequestFilters.REQUEST_TYPES.length) {
-      selected = [requestType];
-    } else if (_.isEmpty(_.without(selected, requestType))) {
-      selected = RequestFilters.REQUEST_TYPES;
-    } else if (_.contains(selected, requestType)) {
-      selected = _.without(selected, requestType);
-    } else {
-      selected.push(requestType);
-    }
-    this.setState({
-      requestTypeFilters: selected,
-      loading: true
-    })
-    this.props.fetchRequests(selected).then(() => {
-      this.setState({
-        loading: false
-      })
-    })
-
-  }
-
-  render() {
-    const summaryColumn = (
-      <Column
-        label="Recent Activity"
-        id="summary"
-        key="summary"
-        sortable={true}
-        cellData={(rowData) => this.getCurrentEventAndTime(rowData).lastEventTime}
-        cellRender={
-          (cellData, rowData) => {
-            return (
-              <RequestSummaryBox 
-                request={rowData}
-                currentEvent={this.getCurrentEventAndTime(rowData).lastEvent}
-              />
-            );
-          }
-        }
-      />
-    );
-
-    const filterItems = RequestFilters.REQUEST_TYPES.map((requestType, index) => {
-      const isActive = _.contains(this.state.requestTypeFilters, requestType);
-      return (
-        <li key={index} className={isActive ? 'active' : ''}>
-          <a onClick={() => this.toggleRequestType(requestType)}>
-            {isActive ? <RequestTypeIcon requestType={requestType} /> : <RequestTypeIcon requestType={requestType} translucent={true} />} {Utils.humanizeText(requestType)} 
-          </a>
-        </li>
-      );
-    });
-
-    let table;
-
-    if (this.state.loading) {
-      table = <Loader />;
-    } else {
-      table = (
-        <UITable
-          data={this.props.requests}
-          keyGetter={(requestParent) => requestParent.request.id}
-          paginated={false}
-          defaultSortBy="summary"
-          defaultSortDirection={UITable.SortDirection.ASC}
-          renderAllRows={true}
-        >
-          {[
-            Cols.Starred,
-            Cols.Type,
-            Cols.State,
-            Cols.RequestId,
-            summaryColumn,
-            Cols.Actions
-          ]}
-        </UITable>
-      );
-    }
-
-    return (
-      <div>
-        <header className="detail-header">
-          <Row>
-            <Col md={3}>
-              <h2>My Requests</h2>
-            </Col>
-            <Col md={9}>
-              <div className="requests-filter-container pull-right">
-                <ul className="nav nav-pills nav-pills-multi-select">
-                  {filterItems}
-                </ul>
-              </div>
-            </Col>
-          </Row>
-        </header>
-        {table}
-      </div>
-    );
-  }
-}
-
-function mapStateToProps(state) {
-  const modifiedRequests = state.api.userRelevantRequests.data.map((request) => {
-    const hasActiveDeploy = !!(request.activeDeploy || (request.requestDeployState && request.requestDeployState.activeDeploy));
-    return {
-      ...request,
-      hasActiveDeploy,
-      canBeRunNow: request.state === 'ACTIVE' && _.contains(['SCHEDULED', 'ON_DEMAND'], request.request.requestType) && hasActiveDeploy,
-      canBeScaled: _.contains(['ACTIVE', 'SYSTEM_COOLDOWN'], request.state) && hasActiveDeploy && _.contains(['WORKER', 'SERVICE'], request.request.requestType),
-      id: request.request ? request.request.id : request.requestId
-    };
-  });
-  return {requests: modifiedRequests}
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    fetchRequests: (requestTypes) => dispatch(FetchUserRelevantRequests.trigger(requestTypes))
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(rootComponent(DashboardPage, refresh));
diff --git a/SingularityUI/app/components/dashboard/RequestSummaryBox.jsx b/SingularityUI/app/components/dashboard/RequestSummaryBox.jsx
deleted file mode 100644
index c199697589..0000000000
--- a/SingularityUI/app/components/dashboard/RequestSummaryBox.jsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-import { Glyphicon, PanelGroup, Panel, Well, Button, Col, Row } from 'react-bootstrap'
-import { Link } from 'react-router';
-
-import Utils from '../../utils';
-
-import UITable from '../common/table/UITable';
-import {
-  Health,
-  InstanceNumberWithHostname,
-  DeployId,
-  UpdatedAt,
-  StartedAt,
-  LogLinkAndActions,
-  NextRun,
-  PendingType,
-  PendingDeployId
-} from '../tasks/Columns';
-
-export default class RequestSummaryBox extends Component {
-  static propTypes = {
-    request: PropTypes.object.isRequired,
-    currentEvent: PropTypes.object.isRequired
-  };
-
-  constructor() {
-    super();
-    this.state = {
-      showTasks: false
-    };
-  }
-
-  getActivityPanelStyle(request) {
-    if (request.state === "ACTIVE") {
-      if (request.hasActiveDeploy) {
-        return "info";
-      } else {
-        return "default";
-      }
-    } else if (request.state === "PAUSED") {
-      return "warning";
-    } else {
-      return "info";
-    }
-  }
-
-  getTasksPanelStyle(request) {
-    let healthyTasks = 0;
-    healthyTasks += this.props.request.taskIds && this.props.request.taskIds.healthy.length || 0
-    healthyTasks += this.props.request.taskIds && this.props.request.taskIds.cleaning.length || 0
-    if (request.instances > healthyTasks) {
-      return "warning"
-    } else if (!(this.props.request.requestDeployState && this.props.request.requestDeployState.activeDeploy)) {
-      return "default"
-    } else {
-      return "info"
-    }
-  }
-
-  getTasksHeader(taskIds) {
-    const cleaning = this.props.request.taskIds && this.props.request.taskIds.cleaning.length || 0
-    const healthy = this.props.request.taskIds && this.props.request.taskIds.healthy.length || 0
-    const notYetHealthy = this.props.request.taskIds && this.props.request.taskIds.notYetHealthy.length || 0
-    const pending = this.props.request.taskIds && this.props.request.taskIds.pending.length || 0
-
-    if (cleaning == 0 && healthy == 0 && notYetHealthy == 0 && pending == 0) {
-      return "No Tasks"
-    } else {
-      let header = "Tasks -";
-      if (healthy > 0) {
-        header = header + ` ${healthy} Healthy `
-      }
-      if (notYetHealthy > 0) {
-        header = header + ` ${notYetHealthy} Not Yet Healthy `
-      }
-      if (cleaning > 0) {
-        header = header + ` ${cleaning} Cleaning `
-      }
-      if (pending > 0) {
-        header = header + ` ${pending} Pending`
-      }
-      return header
-    }
-  }
-
-  render() {
-    const tasks = [];
-    const pendingTasks = [];
-    _.each(this.props.request.taskIds, (taskIds, status) => {
-      if (status === "pending") {
-        taskIds.forEach((taskId) => {
-          pendingTasks.push({
-            pendingTask: {
-              pendingTaskId: taskId
-            }
-          });
-        })
-      } else {
-        taskIds.forEach((taskId) => {
-          tasks.push({
-            taskId: taskId,
-            instanceNo: taskId.instanceNo,
-            health: status
-          });
-        })
-      }
-    });
-    
-    let activeDeploy;
-    if (this.props.request.requestDeployState && this.props.request.requestDeployState.activeDeploy) {
-      activeDeploy = (
-        <span>Active Deploy (
-          <Link to={`request/${this.props.request.id}/deploy/${this.props.request.requestDeployState.activeDeploy.deployId}`}>
-            {this.props.request.requestDeployState.activeDeploy.deployId}
-          </Link>
-          )
-        </span>
-      )
-    } else {
-      activeDeploy = "No Active Deploy"
-    }
-
-    const pendingTasksTable = (
-      <UITable
-        data={pendingTasks}
-        keyGetter={(task) => task.pendingTask.pendingTaskId.id}
-        emptyTableMessage='No tasks'
-        defaultSortBy="instanceNo"
-      >
-        {NextRun}
-        {PendingType}
-        {PendingDeployId}
-      </UITable>
-    );
-
-    const tasksTable = (
-      <UITable
-        data={tasks}
-        keyGetter={(task) => task.taskId.id}
-        emptyTableMessage='No tasks'
-        defaultSortBy="instanceNo"
-      >
-        {Health}
-        {InstanceNumberWithHostname}
-        {DeployId}
-        {StartedAt}
-        {UpdatedAt}
-        {LogLinkAndActions(config.runningTaskLogPath, this.props.request.requestType)}
-      </UITable>
-    );
-
-    return (
-      <div className="request-summary">
-        <Row>
-          <Col md={3}>
-            {activeDeploy}
-          </Col>
-          <Col md={9}>
-            {this.props.currentEvent}
-          </Col>
-        </Row>
-        {(tasks.length > 0 || pendingTasks.length > 0) &&
-          <Row>
-            <Col md={12}>
-              <Button className="tasks-button btn-block" onClick={() => this.setState({ showTasks: !this.state.showTasks })}>
-                <Glyphicon glyph={this.state.showTasks ? "collapse-up" : "collapse-down"}/> {`${this.getTasksHeader(this.props.request.taskIds)}`}
-              </Button>
-              <Panel
-                bsStyle={this.getTasksPanelStyle(this.props.request)}
-                expanded={this.state.showTasks}
-                collapsible
-              >
-                {tasks.length > 0 && tasksTable}
-                {pendingTasks.length > 0 && pendingTasksTable}
-              </Panel>
-            </Col>
-          </Row>
-        }
-      </div>
-    );
-  }
-}
diff --git a/SingularityUI/app/components/requests/RequestFilters.jsx b/SingularityUI/app/components/requests/RequestFilters.jsx
index 311eb7532e..d8529e685d 100644
--- a/SingularityUI/app/components/requests/RequestFilters.jsx
+++ b/SingularityUI/app/components/requests/RequestFilters.jsx
@@ -149,7 +149,13 @@ export default class RequestFilters extends React.Component {
           placeholder="Filter requests"
           value={this.props.filter.searchFilter}
           onChange={(...args) => this.handleSearchChange(...args)}
+          autoFocus="true"
           maxLength="128"
+          onFocus={function(e) {
+            var val = e.target.value;
+            e.target.value = '';
+            e.target.value = val;
+          }}
         />
         <div className="remove-button" onClick={() => this.clearSearch()}></div>
       </div>
diff --git a/SingularityUI/app/router.jsx b/SingularityUI/app/router.jsx
index 74c6aa738c..0edc29da33 100644
--- a/SingularityUI/app/router.jsx
+++ b/SingularityUI/app/router.jsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import { Router, Route, IndexRoute } from 'react-router';
+import { Router, Route, IndexRedirect, IndexRoute } from 'react-router';
 import { syncHistoryWithStore } from 'react-router-redux';
 
 import Application from './components/common/Application';
 import NotFound from './components/common/NotFound';
-import DashboardPage from './components/dashboard/DashboardPage';
 import StatusPage from './components/status/StatusPage';
 import RequestsPage from './components/requests/RequestsPage';
 import TasksPage from './components/tasks/TasksPage';
@@ -32,7 +31,7 @@ const getFilenameFromSplat = (splat) => _.last(splat.split('/'));
 
 const routes = (
   <Route path="/" component={Application}>
-    <IndexRoute component={DashboardPage} title="Dashboard" />
+    <IndexRedirect to="requests" />
     <Route path="status" component={StatusPage} title="Status" />
     <Route path="requests/new" component={RequestForm} title="New Request" />
     <Route path="requests/edit/:requestId" component={RequestForm} title="New or Edit Request" />

From e22c613c05cfc023e064b38a1e222d474e80b450 Mon Sep 17 00:00:00 2001
From: Stephen Salinas <ssalinas@hubspot.com>
Date: Thu, 9 Aug 2018 13:21:21 -0400
Subject: [PATCH 2/2] move requests in the nav

---
 SingularityUI/app/components/common/Navigation.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/SingularityUI/app/components/common/Navigation.jsx b/SingularityUI/app/components/common/Navigation.jsx
index a16a93fdf8..c85742e010 100644
--- a/SingularityUI/app/components/common/Navigation.jsx
+++ b/SingularityUI/app/components/common/Navigation.jsx
@@ -84,12 +84,12 @@ const Navigation = (props) => {
         </div>
         <div className="collapse navbar-collapse" id="navbar-collapse">
           <ul className="nav navbar-nav">
-            <li className={classnames({active: isActive('status', fragment)})}>
-              <Link to="/status">Status {isActive('status', fragment) && <span className="sr-only">(current)</span>}</Link>
-            </li>
             <li className={classnames({active: isActive('requests', fragment)})}>
               <Link to="/requests">Requests {isActive('requests', fragment) && <span className="sr-only">(current)</span>}</Link>
             </li>
+            <li className={classnames({active: isActive('status', fragment)})}>
+              <Link to="/status">Status {isActive('status', fragment) && <span className="sr-only">(current)</span>}</Link>
+            </li>
             <li className={classnames({active: isActive('tasks', fragment)})}>
               <Link to="/tasks">Tasks {isActive('tasks', fragment) && <span className="sr-only">(current)</span>}</Link>
             </li>