Add costs plugin and fix overwhelming err message size

Author: ssalinas

SingularityService/src/main/java/com/hubspot/singularity/config/UIConfiguration.java

@@ -117,6 +117,9 @@ public static RootUrlMode parse(String value) {
   @JsonProperty
   private Optional<String> showRequestButtonsForGroup = Optional.empty();
 
+  @JsonProperty
+  private Optional<String> costsApiUrlFormat = Optional.empty();
+
   public boolean isHideNewDeployButton() {
     return hideNewDeployButton;
   }
@@ -340,4 +343,12 @@ public Optional<String> getShowRequestButtonsForGroup() {
   public void setShowRequestButtonsForGroup(Optional<String> showRequestButtonsForGroup) {
     this.showRequestButtonsForGroup = showRequestButtonsForGroup;
   }
+
+  public Optional<String> getCostsApiUrlFormat() {
+    return costsApiUrlFormat;
+  }
+
+  public void setCostsApiUrlFormat(Optional<String> costsApiUrlFormat) {
+    this.costsApiUrlFormat = costsApiUrlFormat;
+  }
 }

SingularityService/src/main/java/com/hubspot/singularity/views/IndexView.java

@@ -73,6 +73,7 @@ public class IndexView extends View {
   private final String appJsPath;
   private final String appCssPath;
   private final String vendorJsPath;
+  private final String costsApiUrlFormat;
 
   public IndexView(
     String singularityUriBase,
@@ -190,6 +191,7 @@ public IndexView(
     } catch (IOException ioe) {
       throw new RuntimeException(ioe);
     }
+    this.costsApiUrlFormat = uiConfiguration.getCostsApiUrlFormat().orElse("");
   }
 
   public String getAppRoot() {
@@ -356,6 +358,10 @@ public String getShowRequestButtonsForGroup() {
     return showRequestButtonsForGroup;
   }
 
+  public String getCostsApiUrlFormat() {
+    return costsApiUrlFormat;
+  }
+
   @Override
   public String toString() {
     return (
@@ -463,6 +469,9 @@ public String toString() {
       ", vendorJsPath='" +
       vendorJsPath +
       '\'' +
+      ", costsApiUrlFormat='" +
+      costsApiUrlFormat +
+      '\'' +
       "} " +
       super.toString()
     );

SingularityUI/app/actions/api/base.es6

@@ -40,7 +40,7 @@ export function buildApiAction(actionName, opts = {}, keyFunc = undefined) {
       window.location.href = config.redirectOnUnauthorizedUrl.replace('{URL}', encodeURIComponent(window.location.href));
     } else { // Something else happened, display the error
       Messenger().post({
-        message: `<p>An error occurred while accessing <code>${options.url}</code></p><pre>${err}</pre>`,
+        message: `<p>An error occurred while accessing <code>${options.url}</code></p><div class='err-message-content'><pre>${err}</pre></div>`,
         type: 'error'
       });
     }
@@ -82,13 +82,16 @@ export function buildApiAction(actionName, opts = {}, keyFunc = undefined) {
         options.headers.Authorization = Utils.getAuthTokenHeader();
       }
 
-      return fetch(config.apiRoot + options.url + userParam, _.extend({credentials: 'include'}, _.omit(options, 'url')))
+      const baseUrl = options.url.startsWith('https://') ? options.url : config.apiRoot + options.url;
+
+      return fetch(baseUrl + userParam, _.extend({credentials: 'include'}, _.omit(options, 'url')))
         .then(response => {
           apiResponse = response;
           if (response.status === 204) {
             return Promise.resolve();
           }
-          if (response.headers.get('Content-Type') === 'application/json') {
+          const contentType = response.headers.get('Content-Type');
+          if (contentType === 'application/json' || contentType === 'application/json;charset=utf-8') {
             // void response cannot be parsed as JSON
             if (response.headers.get('Content-Length') === '0') {
               return Promise.resolve();

SingularityUI/app/actions/api/costs.es6

@@ -0,0 +1,13 @@
+import { buildApiAction } from './base';
+
+export const FetchCostData = buildApiAction(
+  'FETCH_COSTS',
+  (requestId, costsUrlFormat) => {
+    const url = costsUrlFormat.replace('{REQUEST_ID}', requestId);
+    return ({
+      url: url,
+      catchStatusCodes: [404]
+    })
+  },
+  (requestId) => requestId
+);

SingularityUI/app/assets/index.mustache

@@ -55,7 +55,9 @@
             quickLinks: {{{quickLinks}}},
             navTitleLinks: {{{navTitleLinks}}},
             lessTerminalPath: "{{{lessTerminalPath}}}",
-            showRequestButtonsForGroup: "{{{showRequestButtonsForGroup}}}"
+            showRequestButtonsForGroup: "{{{showRequestButtonsForGroup}}}",
+            costsApiUrlFormat: "{{{costsApiUrlFormat}}}"
+
         };
     </script>
     <script src="{{{staticRoot}}}/{{{vendorJsPath}}}"></script>

SingularityUI/app/components/common/table/UITable.jsx

@@ -187,7 +187,7 @@ class UITable extends Component {
       );
     });
 
-    if (sortDirection === UITable.SortDirection.ASC) {
+    if (sortDirection === UITable.SortDirection.DESC) {
       sorted.reverse();
     }
 

SingularityUI/app/components/requestDetail/CostsView.jsx

@@ -0,0 +1,66 @@
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+
+import { Col } from 'react-bootstrap';
+
+import CollapsableSection from '../common/CollapsableSection';
+import UITable from '../common/table/UITable';
+import Column from '../common/table/Column';
+import Utils from '../../utils';
+
+const CostsView = ({requestId, costsAPI}) => {
+  const costs = costsAPI ? costsAPI.data : [];
+  const title = costs.length ? 'Average Daily Costs ($' + costs.map((c) => c.cost).reduce((p, c) => p + c).toFixed(4) + ')' : 'Average Daily Costs';
+  return  (
+    <CollapsableSection id="costs" title={title} defaultExpanded={true}>
+      <UITable
+        data={costs}
+        keyGetter={(c) => c.activityType + c.cost + c.costKey+ c.costType}
+        defaultSortBy={'cost'}
+        defaultSortDirection={'DESC'}
+        showPageLoaderWhenFetching={true}
+        isFetching={!costs.length}
+      >
+        <Column
+          label="Activity Type"
+          id="activityType"
+          key="activityType"
+          cellData={(c) => Utils.humanizeText(c.activityType)}
+        />
+        <Column
+          label="Cost Primary Key"
+          id="costKey"
+          key="costKey"
+          cellData={(c) => c.primaryKey}
+        />
+        <Column
+          label="Cost Type"
+          id="costType"
+          key="costType"
+          cellData={(c) => Utils.humanizeText(c.costType)}
+        />
+        <Column
+          label="Cost"
+          id="cost"
+          key="cost"
+          forceSortHeader={true}
+          cellData={(c) => c.cost}
+          cellRender={(c) => '$' + c}
+        />
+      </UITable>
+    </CollapsableSection>
+  );
+}
+
+CostsView.propTypes = {
+  requestId: PropTypes.string.isRequired,
+  costsAPI: PropTypes.object
+};
+
+const mapStateToProps = (state, ownProps) => ({
+  costsAPI: Utils.maybe(state.api.costs, [ownProps.requestId])
+});
+
+export default connect(
+  mapStateToProps
+)(CostsView);

SingularityUI/app/components/requestDetail/RequestDetailPage.jsx

@@ -4,6 +4,7 @@ import { withRouter } from 'react-router';
 
 import rootComponent from '../../rootComponent';
 import * as RefreshActions from '../../actions/ui/refresh';
+import { FetchCostData } from '../../actions/api/costs';
 import { FetchRequest } from '../../actions/api/requests';
 import {
   FetchActiveTasksForRequest,
@@ -16,6 +17,7 @@ import {
   FetchTaskCleanups
 } from '../../actions/api/tasks';
 
+import CostsView from './CostsView';
 import RequestHeader from './RequestHeader';
 import RequestExpiringActions from './RequestExpiringActions';
 import ActiveTasksTable from './ActiveTasksTable';
@@ -32,6 +34,10 @@ import { refresh, initialize } from '../../actions/ui/requestDetail';
 class RequestDetailPage extends Component {
   componentDidMount() {
     this.props.refresh();
+    if (config.costsApiUrlFormat) {
+      const { requestId } = this.props.params;
+      this.props.fetchCostsData(requestId);
+    }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -63,6 +69,7 @@ class RequestDetailPage extends Component {
             initialPageNumber={Number(taskHistoryPage) || 1}
           />
         )}
+        {deleted || <CostsView requestId={requestId}/>}
         {deleted || <RequestUtilization requestId={requestId} />}
         {deleted || <DeployHistoryTable requestId={requestId} />}
         <RequestHistoryTable requestId={requestId} />
@@ -108,6 +115,7 @@ const mapDispatchToProps = (dispatch, ownProps) => {
     cancelRefresh: () => dispatch(
       RefreshActions.CancelAutoRefresh(`RequestDetailPage-${ownProps.index}`)
     ),
+    fetchCostsData: (requestId) => dispatch(FetchCostData.trigger(requestId, config.costsApiUrlFormat)),
     fetchRequest: (requestId) => dispatch(FetchRequest.trigger(requestId, true)),
     fetchTaskCleanups: () => dispatch(FetchTaskCleanups.trigger()),
     fetchTaskHistoryForRequest: (requestId, count, page) => dispatch(FetchTaskHistoryForRequest.trigger(requestId, count, page)),

SingularityUI/app/components/requestDetail/header/RequestActionButtons.jsx

@@ -241,7 +241,6 @@ RequestActionButtons.propTypes = {
   fetchRequest: PropTypes.func.isRequired,
   fetchActiveTasks: PropTypes.func.isRequired,
   router: PropTypes.shape({ push: PropTypes.func.isRequired }).isRequired,
-  admin: PropTypes.bool.isRequired,
 };
 
 const mapStateToProps = (state, ownProps) => ({

SingularityUI/app/reducers/api/index.es6

@@ -38,6 +38,10 @@ import {
   ReactivateRack
 } from '../../actions/api/racks';
 
+import {
+  FetchCostData
+  } from '../../actions/api/costs';
+
 import {
   FetchRequests,
   FetchRequestIds,
@@ -116,6 +120,7 @@ const freezeRack = buildApiActionReducer(FreezeRack, []);
 const decommissionRack = buildApiActionReducer(DecommissionRack, []);
 const removeRack = buildApiActionReducer(RemoveRack, []);
 const reactivateRack = buildApiActionReducer(ReactivateRack, []);
+const costs = buildKeyedApiActionReducer(FetchCostData, []);
 const request = buildKeyedApiActionReducer(FetchRequest);
 const requestIds = buildApiActionReducer(FetchRequestIds, [])
 const saveRequest = buildApiActionReducer(SaveRequest);
@@ -175,6 +180,7 @@ export default combineReducers({
   decommissionRack,
   removeRack,
   reactivateRack,
+  costs,
   request,
   saveRequest,
   removeRequest,