Impl [Details Overview] Add created by and created date to several reports

src/common/ProjectDetailsHeader/ProjectDetailsHeader.js

@@ -51,8 +51,8 @@ const ProjectDetailsHeader = ({ projectData, projectName }) => {
           <li>
             <span className="project-details__details-label">Status:</span>
             <div>
-              <i className={`state-${projectData.status.state}`} />
               <span>{projectData.status.state}</span>
+              <i className={`state-${projectData.status.state}`} />
             </div>
           </li>
           <li>

src/common/ProjectDetailsHeader/ProjectDetailsHeader.scss

@@ -53,7 +53,7 @@
     }
 
     i[class^='state-'] {
-      margin-right: 5px;
+      margin-left: 5px;
     }
   }
 }

src/components/Details/DetailsHeader/DetailsHeader.js

@@ -142,6 +142,8 @@ const DetailsHeader = ({
                   selectedItem?.startTime,
                   stateValue === 'aborted' ? 'N/A' : 'Not yet started'
                 )
+              : selectedItem?.created
+              ? formatDatetime(selectedItem?.created, 'N/A')
               : selectedItem?.updated
               ? formatDatetime(selectedItem?.updated, 'N/A')
               : selectedItem?.spec?.model.includes(':') // 'model-key:model-tag'

src/components/Details/details.scss

@@ -50,7 +50,9 @@
 
         &__status {
           display: flex;
+          flex-flow: row wrap;
           align-items: center;
+          line-height: 24px;
         }
 
         &__back-btn {
@@ -84,15 +86,12 @@
 
           .state {
             min-width: 18px;
+            margin-right: 20px;
 
             i {
               margin-left: 10px;
             }
           }
-
-          .error-container {
-            margin-left: 20px;
-          }
         }
 
         &__buttons {

src/components/Details/details.util.js

@@ -233,6 +233,12 @@ export const generateJobsContent = selectedItem => {
 }
 
 export const generateFunctionsContent = selectedItem => ({
+  created: {
+    value: formatDatetime(selectedItem.created, 'N/A')
+  },
+  created_by: {
+    value: selectedItem.created_by ?? 'N/A'
+  },
   name: {
     value: selectedItem.name
   },
@@ -263,6 +269,12 @@ export const generateFunctionsContent = selectedItem => ({
 })
 
 export const generateFeatureSetsOverviewContent = selectedItem => ({
+  created: {
+    value: formatDatetime(selectedItem.created, 'N/A')
+  },
+  created_by: {
+    value: selectedItem.created_by ?? 'N/A'
+  },
   description: {
     value: selectedItem.description ?? '',
     editModeEnabled: true,
@@ -318,6 +330,12 @@ export const generateFeatureSetsOverviewContent = selectedItem => ({
 })
 
 export const generateFeatureVectorsOverviewContent = selectedItem => ({
+  created: {
+    value: formatDatetime(selectedItem.created, 'N/A')
+  },
+  created_by: {
+    value: selectedItem.created_by
+  },
   description: {
     value: selectedItem.description ?? ''
   },

src/components/FeatureStore/FeatureSets/featureSets.util.js

@@ -57,6 +57,8 @@ export const generateFeatureSetsDetailsMenu = selectedItem => [
 ]
 
 export const featureSetsInfoHeaders = [
+  { label: 'Created at', id: 'created' },
+  { label: 'Created by', id: 'created_by' },
   { label: 'Description', id: 'description' },
   { label: 'Labels', id: 'labels' },
   { label: 'Version tag', id: 'tag' },

src/components/FeatureStore/FeatureVectors/featureVectors.util.js

@@ -62,6 +62,8 @@ export const generateFeatureVectorsDetailsMenu = selectedItem => [
 ]
 
 export const featureSetsInfoHeaders = [
+  { label: 'Created at', id: 'created' },
+  { label: 'Created by', id: 'created_by' },
   { label: 'Description', id: 'description' },
   { label: 'Labels', id: 'labels' },
   { label: 'Version tag', id: 'tag' },

src/components/FunctionsPage/functions.util.js

@@ -56,6 +56,8 @@ export const FUNCTIONS_EDITABLE_STATES = [
   ...FUNCTIONS_FAILED_STATES
 ]
 export const infoHeaders = [
+  { label: 'Created at', id: 'created' },
+  { label: 'Created by', id: 'created_by' },
   { label: 'Name', id: 'name' },
   { label: 'Kind', id: 'type' },
   { label: 'Hash', id: 'hash' },

src/elements/TableLinkCell/TableLinkCell.js

@@ -87,31 +87,37 @@ const TableLinkCell = ({
             )}
           </div>
           {(link.match(/jobs/) ||
-            ((link.match(/functions/) ||
-              link.match(/models/) ||
-              link.match(/files/) ||
-              link.match(/datasets/)) &&
-              Object.values(selectedItem).length !== 0)) && (
-            <div className="date-uid-row">
-              {(item.startTime || item.updated) && (
-                <span className="link-subtext">
-                  {data.type !== 'date' &&
-                    (link.match(/functions/) ||
-                    link.match(/models/) ||
-                    link.match(/files/) ||
-                    link.match(/datasets/)
-                      ? formatDatetime(item.updated, 'N/A')
-                      : formatDatetime(
-                          item.startTime,
-                          stateValue === 'aborted' ? 'N/A' : 'Not yet started'
-                        ))}
-                </span>
-              )}
-              {data.value !== item.uid && data.value !== item.hash && (
-                <span className="link-subtext">{truncateUid(item.uid || item.hash)}</span>
-              )}
-            </div>
-          )}
+            link.match(/feature-store/) ||
+            link.match(/functions/) ||
+            link.match(/models/) ||
+            link.match(/files/) ||
+            link.match(/datasets/)) &&
+            Object.values(selectedItem).length !== 0 && (
+              <div className="date-uid-row">
+                {(item.startTime || item.created || item.updated) && (
+                  <span className="link-subtext">
+                    {data.type !== 'date' &&
+                      (link.match(/feature-store/) ||
+                      link.match(/functions/) ||
+                      link.match(/models/) ||
+                      link.match(/files/) ||
+                      link.match(/datasets/)
+                        ? formatDatetime(item.created ?? item.updated, 'N/A')
+                        : formatDatetime(
+                            item.startTime,
+                            stateValue === 'aborted' ? 'N/A' : 'Not yet started'
+                          ))}
+                  </span>
+                )}
+                {data.value !== item.uid &&
+                  data.value !== item.hash &&
+                  data.value !== item.tree && (
+                    <span className="link-subtext">
+                      {truncateUid(item.uid || item.hash || item.tree)}
+                    </span>
+                  )}
+              </div>
+            )}
         </Link>
       )}
       {showExpandButton && (