Add cluster render

Feature #14348

Arvados-DCO-1.1-Signed-off-by: Daniel Kos <daniel.kos@contractors.roche.com>

diff --git a/src/views-components/data-explorer/renderers.tsx b/src/views-components/data-explorer/renderers.tsx
index 2f102a997c8396f3bcace6462fdaeb30f186defe..f90dac6b22c46c276afcb03db0b38fb6564d9b5e 100644 (file)
--- a/src/views-components/data-explorer/renderers.tsx
+++ b/src/views-components/data-explorer/renderers.tsx
@@ -203,6 +203,28 @@ const renderNodeInfo = (data: string) => {
     return <Typography>{JSON.stringify(data, null, 4)}</Typography>;
 };
 
+const clusterColors = [
+    ['#f44336', '#fff'],
+    ['#2196f3', '#fff'],
+    ['#009688', '#fff'],
+    ['#cddc39', '#fff'],
+    ['#ff9800', '#fff']
+];
+
+export const ResourceCluster = (props: { uuid: string }) => {
+    const p = props.uuid.indexOf('-');
+    const clusterId = p >= 5 ? props.uuid.substr(0, p) : '';
+    const ci = p >= 5 ? (props.uuid.charCodeAt(0) + props.uuid.charCodeAt(1)) % clusterColors.length : 0;
+    return <Typography>
+        <div style={{
+            backgroundColor: clusterColors[ci][0],
+            color: clusterColors[ci][1],
+            padding: "2px 7px",
+            borderRadius: 3
+        }}>{clusterId}</div>
+    </Typography>;
+};
+
 export const ComputeNodeInfo = withResourceData('info', renderNodeInfo);
 
 export const ComputeNodeUuid = withResourceData('uuid', renderNodeData);

diff --git a/src/views/search-results-panel/search-results-panel-view.tsx b/src/views/search-results-panel/search-results-panel-view.tsx
index 7bfc2bfef6caa70aa952f654a8d15423dd234d8a..6827a00288c4327c7b30f05c94b5ffea38362521 100644 (file)
--- a/src/views/search-results-panel/search-results-panel-view.tsx
+++ b/src/views/search-results-panel/search-results-panel-view.tsx
@@ -12,7 +12,7 @@ import { SearchBarAdvanceFormData } from '~/models/search-bar';
 import { SEARCH_RESULTS_PANEL_ID } from '~/store/search-results-panel/search-results-panel-actions';
 import { DataExplorer } from '~/views-components/data-explorer/data-explorer';
 import {
-    ProcessStatus,
+    ProcessStatus, ResourceCluster,
     ResourceFileSize,
     ResourceLastModifiedDate,
     ResourceName,
@@ -23,6 +23,7 @@ import { createTree } from '~/models/tree';
 import { getInitialResourceTypeFilters } from '~/store/resource-type-filters/resource-type-filters';
 
 export enum SearchResultsPanelColumnNames {
+    CLUSTER = "Cluster",
     NAME = "Name",
     PROJECT = "Project",
     STATUS = "Status",
@@ -50,6 +51,13 @@ export interface WorkflowPanelFilter extends DataTableFilterItem {
 }
 
 export const searchResultsPanelColumns: DataColumns<string> = [
+    {
+        name: SearchResultsPanelColumnNames.CLUSTER,
+        selected: true,
+        configurable: true,
+        filters: createTree(),
+        render: (uuid: string) => <ResourceCluster uuid={uuid} />
+    },
     {
         name: SearchResultsPanelColumnNames.NAME,
         selected: true,
@@ -110,4 +118,4 @@ export const SearchResultsPanelView = (props: SearchResultsPanelProps) => {
         onRowDoubleClick={props.onItemDoubleClick}
         onContextMenu={props.onContextMenu}
         contextMenuColumn={true} />;
-};
\ No newline at end of file
+};