Merge pull request #18053 from jeclrsg/hpcc-30568-logviewer-pod-column

HPCC-30568 ECL Watch v9 add pod name column to Logs view
hpcc-systems · Nov 23, 2023 · 3c870a7 · 3c870a7
2 parents fa49bc6 + 1e7ed27
commit 3c870a7
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 4 deletions.
diff --git a/esp/src/src-react/components/Logs.tsx b/esp/src/src-react/components/Logs.tsx
@@ -20,6 +20,7 @@ const defaultStartDate = new Date(new Date().getTime() - startTimeOffset);
 
 const FilterFields: Fields = {
     components: { type: "cloud-containername", label: nlsHPCC.ContainerName },
+    instance: { type: "cloud-podname", label: nlsHPCC.PodName },
     audience: {
         type: "dropdown", label: nlsHPCC.Audience, options: [
             { key: TargetAudience.Operator, text: "Operator" },
@@ -130,6 +131,7 @@ export const Logs: React.FunctionComponent<LogsProps> = ({
             timestamp: { label: nlsHPCC.TimeStamp, width: 140, sortable: false, },
             message: { label: nlsHPCC.Message, sortable: false, },
             components: { label: nlsHPCC.ContainerName, width: 150, sortable: false },
+            instance: { label: nlsHPCC.PodName, width: 150, sortable: false },
             audience: { label: nlsHPCC.Audience, width: 60, sortable: false, },
             class: {
                 label: nlsHPCC.Class, width: 40, sortable: false,

diff --git a/esp/src/src-react/components/forms/Fields.tsx b/esp/src/src-react/components/forms/Fields.tsx
@@ -10,7 +10,7 @@ import { FileList, States as DFUStates } from "src/FileSpray";
 import { joinPath } from "src/Utility";
 import nlsHPCC from "src/nlsHPCC";
 import { useBuildInfo, useLogicalClusters } from "../../hooks/platform";
-import { useContainerNames } from "../../hooks/cloud";
+import { useContainerNames, usePodNames } from "../../hooks/cloud";
 
 const logger = scopedLogger("src-react/components/forms/Fields.tsx");
 
@@ -200,7 +200,7 @@ export type FieldType = "string" | "password" | "number" | "checkbox" | "choiceg
     "target-dfuqueue" | "user-groups" | "group-members" | "permission-type" |
     "logicalfile-type" | "dfuworkunit-state" |
     "esdl-esp-processes" | "esdl-definitions" |
-    "cloud-containername";
+    "cloud-containername" | "cloud-podname";
 
 export type Values = { [name: string]: string | number | boolean | (string | number | boolean)[] };
 
@@ -369,6 +369,11 @@ interface CloudContainerNameField extends BaseField {
     value?: string;
 }
 
+interface CloudPodNameField extends BaseField {
+    type: "cloud-podname";
+    value?: string;
+}
+
 export type Field = StringField | NumericField | CheckboxField | ChoiceGroupField | DateTimeField | DropdownField | DropdownMultiField |
     LinkField | LinksField | ProgressField |
     WorkunitStateField |
@@ -378,7 +383,7 @@ export type Field = StringField | NumericField | CheckboxField | ChoiceGroupFiel
     TargetDfuSprayQueueField | UserGroupsField | GroupMembersField | PermissionTypeField |
     LogicalFileType | DFUWorkunitStateField |
     EsdlEspProcessesField | EsdlDefinitionsField |
-    CloudContainerNameField;
+    CloudContainerNameField | CloudPodNameField;
 
 export type Fields = { [id: string]: Field };
 
@@ -766,6 +771,28 @@ export const CloudContainerNameField: React.FunctionComponent<CloudContainerName
     return <ComboBox {...props} allowFreeform={true} autoComplete={"on"} options={options} />;
 };
 
+export interface CloudPodNameFieldProps extends Omit<IComboBoxProps, "options"> {
+    name?: string;
+}
+
+export const CloudPodNameField: React.FunctionComponent<CloudPodNameFieldProps> = (props) => {
+
+    const [cloudPodNames] = usePodNames();
+    const [options, setOptions] = React.useState<IComboBoxOption[]>();
+
+    React.useEffect(() => {
+        const options = cloudPodNames?.map(row => {
+            return {
+                key: row,
+                text: row
+            };
+        }) || [];
+        setOptions(options);
+    }, [cloudPodNames]);
+
+    return <ComboBox {...props} allowFreeform={true} autoComplete={"on"} options={options} />;
+};
+
 const states = Object.keys(States).map(s => States[s]);
 const dfustates = Object.keys(DFUStates).map(s => DFUStates[s]);
 
@@ -1260,7 +1287,21 @@ export function createInputs(fields: Fields, onChange?: (id: string, newValue: a
                     />
                 });
                 break;
-
+            case "cloud-podname":
+                field.value = field.value !== undefined ? field.value : "";
+                retVal.push({
+                    id: fieldID,
+                    label: field.label,
+                    field: <CloudPodNameField
+                        key={fieldID}
+                        onChange={(ev, row) => {
+                            onChange(fieldID, row.key);
+                            setDropzone(row.key as string);
+                        }}
+                        placeholder={field.placeholder}
+                    />
+                });
+                break;
         }
     }
     return retVal;

diff --git a/esp/src/src-react/hooks/cloud.ts b/esp/src/src-react/hooks/cloud.ts
@@ -84,4 +84,14 @@ export function useContainerNames(): [string[], () => void] {
     }, [pods]);
 
     return [containers, refreshData];
+}
+
+export function usePodNames(): [string[], () => void] {
+
+    const [pods, refreshData] = usePods();
+    const podNames = React.useMemo(() => {
+        return pods.map(pod => pod.name);
+    }, [pods]);
+
+    return [podNames, refreshData];
 }
diff --git a/esp/src/src/nls/hpcc.ts b/esp/src/src/nls/hpcc.ts
@@ -686,6 +686,7 @@ export = {
         Plugins: "Plugins",
         PleaseEnterANumber: "Please enter a number 1 - ",
         PleaseLogin: "Please log in using your username and password",
+        PodName: "Pod Name",
         Pods: "Pods",
         PodsAccessError: "Cannot retrieve list of pods",
         Port: "Port",