Added WBCommonFields.

frontend/src/js/component/wb-common-fields.js

@@ -0,0 +1,92 @@
+import { h, Component } from 'preact';
+import WBTable from 'wb-table';
+import makeArvadosRequest from 'make-arvados-request';
+import arvadosTypeName from 'arvados-type-name';
+import arvadosObjectName from 'arvados-object-name';
+import urlForObject from 'url-for-object';
+import wbFormatDate from 'wb-format-date';
+
+class WBCommonFields extends Component {
+  componentDidMount() {
+    this.prepareRows();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    // this.setState({ 'rows': null });
+    this.prepareRows();
+  }
+
+  prepareRows() {
+    let { uuid, app } = this.props;
+    let { arvHost, arvToken } = app.state;
+
+    let item;
+    let owner;
+    let modifiedByUser;
+
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/' + arvadosTypeName(uuid) +
+      's/' + uuid);
+
+    prom = prom.then(xhr => (item = xhr.response));
+
+    prom = prom.then(() => makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/' + arvadosTypeName(item.owner_uuid) +
+      's/' + item.owner_uuid));
+
+    prom = prom.then(xhr => (owner = xhr.response));
+
+    prom = prom.then(() => makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/users/' + item.modified_by_user_uuid));
+
+    prom = prom.then(xhr => (modifiedByUser = xhr.response));
+
+    prom = prom.then(() => {
+      let rows = [
+        [ 'UUID', item.uuid ],
+        [ 'Kind', item.kind ],
+        [ 'Owner', (
+          <div>
+            <div>
+              <a href={ urlForObject(owner) }>{ arvadosObjectName(owner) }</a>
+            </div>
+            <div>
+              { item.owner_uuid }
+            </div>
+          </div>
+        ) ],
+        [ 'Created at', wbFormatDate(item.created_at) ],
+        [ 'Modified at', wbFormatDate(item.modified_at) ],
+        [ 'Modified by User', (
+          <div>
+            <div>
+              <a href={ urlForObject(modifiedByUser) }>{ arvadosObjectName(modifiedByUser) }</a>
+            </div>
+            <div>
+              { item.modified_by_user_uuid }
+            </div>
+          </div>
+        ) ],
+        [ 'Modified by Client', item.modified_by_client_uuid ],
+        [ 'API Url', 'https://' + app.state.arvHost + '/arvados/v1' + item.href ],
+        [ 'ETag', item.etag ]
+      ];
+      this.setState({ 'rows': rows });
+    });
+  }
+
+  render({}, { rows }) {
+    return (
+      <div>
+        <h1>Common Fields</h1>
+        { rows ? (
+          <WBTable columns={ [ "Name", "Value" ] }
+            rows={ rows } />
+        ) : <div>Loading...</div> }
+      </div>
+    );
+  }
+}
+
+export default WBCommonFields;

frontend/src/js/misc/arvados-object-name.js

@@ -0,0 +1,11 @@
+import arvadosTypeName from 'arvados-type-name';
+
+function arvadosObjectName(item) {
+  let typeName = arvadosTypeName(item['uuid']);
+  if (typeName === 'user')
+    return (item.first_name + ' ' + item.last_name);
+  else
+    return item.name;
+}
+
+export default arvadosObjectName;

frontend/src/js/misc/arvados-type-name.js

@@ -9,7 +9,10 @@ const typeIdToName = {
 };
 
 function arvadosTypeName(id) {
-  return typeIdToName[id];
+  if (id.length === 5)
+    return typeIdToName[id];
+  else
+    return typeIdToName[id.split('-')[1]];
 }
 
 export default arvadosTypeName;

frontend/src/js/misc/wb-format-date.js

@@ -0,0 +1,6 @@
+function wbFormatDate(dateStr) {
+  let date = new Date(dateStr);
+  return date.toLocaleString();
+}
+
+export default wbFormatDate;

frontend/src/js/page/wb-process-view.js

@@ -6,6 +6,7 @@ import detectUuids from 'detect-uuids';
 import arvadosTypeName from 'arvados-type-name';
 import urlForObject from 'url-for-object';
 import detectHashes from 'detect-hashes';
+import WBCommonFields from 'wb-common-fields';
 
 class WBProcessView extends Component {
   constructor(...args) {
@@ -86,6 +87,9 @@ class WBProcessView extends Component {
         <div class="my-2">
           This is the process view for { uuid }
         </div>
+
+        <WBCommonFields app={ app } uuid={ uuid } />
+
         <div>
           <a href="/browse">Click here</a>
         </div>