                   [Failures {:data failures}])]])
             (:data props)))]))})
 
-(defn- render-workflow-detail [workflow raw-data workflow-name submission-id use-call-cache workflow-cost workspace-id gcs-path-prefix]
+(react/defc- WorkflowCost
+  {:render
+   (fn [{:keys [state props]}]
+     (let [cost-response (:cost-response @state)
+           workflow-cost (:response cost-response)
+           rendered-cost (if cost-response
+                           (moncommon/render-cost workflow-cost)
+                           (spinner {:style {:fontSize "1rem" :margin 0}} "Loading..."))]
+         (create-field "Total Run Cost" rendered-cost)))
+   :component-did-mount
+   (fn [{:keys [props state]}]
+     (endpoints/call-ajax-orch
+      {:endpoint
+       (endpoints/get-workflow-cost
+        (:workspace-id props) (:submission-id props) (:workflow-id props))
+       :on-done (fn [{:keys [success? get-parsed-response status-text]}]
+                  (swap! state assoc :cost-response
+                         {:success? success?
+                          :response (if success? (:cost (get-parsed-response)) (str "Error: " (or (:message (get-parsed-response)) status-text)))}))}))})
+
+(defn- render-workflow-detail [workflow raw-data workflow-name submission-id use-call-cache workspace-id gcs-path-prefix]
   (let [inputs (ffirst (workflow "calls"))
         input-names (string/split inputs ".")
         workflow-name-for-path (first input-names)

     (create-field "Workflow ID" (links/create-external {:href (render-gcs-path workflow-path-components)} (workflow "id")))
     (let [status (workflow "status")]
       (create-field "Status" (moncommon/icon-for-wf-status status) status))
     (create-field "Total Run Cost" (moncommon/render-cost workflow-cost))
     (when-let [submission (workflow "submission")]
       (create-field "Submitted" (moncommon/render-date submission)))
     (when-let [start (workflow "start")]

                  (swap! state assoc :metadata-response
                         {:success? success?
                          :response (if success? (get-parsed-response false) status-text)
                          :raw-response raw-response}))}))})


(defn render [props]
