HPCC-31258 Initial File structure and page layout creation

This is to create the initial design of Sasha in Cloud.
Feature availability to come as it is created.

Signed-off-by: Kunal Aswani <Kunal.Aswani@lexisnexisrisk.com>

esp/src/src-react/components/Menu.tsx

@@ -162,6 +162,7 @@ const subMenuItems: SubMenuItems = {
         { headerText: nlsHPCC.Security + " (L)", itemKey: "/topology/security" },
         { headerText: nlsHPCC.DESDL + " (L)", itemKey: "/topology/desdl" },
         { headerText: nlsHPCC.DaliAdmin, itemKey: "/topology/daliadmin" },
+        { headerText: nlsHPCC.Sasha, itemKey: "/topology/sasha" },
     ],
     "operations": [
         { headerText: nlsHPCC.Topology + " (L)", itemKey: "/operations" },

esp/src/src-react/components/Sasha.tsx

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { Dropdown, TextField, PrimaryButton } from "@fluentui/react";
+import nlsHPCC from "src/nlsHPCC";
+
+interface SashaProps {}
+
+export const Sasha: React.FunctionComponent<SashaProps> = ({ }) => {
+  const [selectedOption, setSelectedOption] = React.useState("");
+  const [wuid, setWuid] = React.useState("");
+  const [result, setResult] = React.useState("");
+
+  const handleOptionChange = (event: React.FormEvent<HTMLDivElement>, option: any) => {
+    setSelectedOption(option.key);
+  };
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    // Perform action based on selected option
+    switch (selectedOption) {
+      case "getVersion": 
+        // Implement getVersion function call
+        break;
+      case "getLastServerMessage":
+        // Implement getLastServerMessage function call
+        break;
+      case "restoreECLWorkUnit":
+        // Implement restoreECLWorkUnit function call
+        break;
+      case "restoreDFUWorkUnit":
+        // Implement restoreDFUWorkUnit function call
+        break;
+      case "archiveECLWorkUnit":
+        // Implement archiveECLWorkUnit function call
+        break;
+      case "archiveDFUWorkUnit":
+        // Implement archiveDFUWorkUnit function call
+        break;
+      case "backupECLWorkUnit":
+        // Implement backupECLWorkUnit function call
+        break;
+      case "backupDFUWorkUnit":
+        // Implement backupDFUWorkUnit function call
+        break;
+      default:
+        console.log("Invalid option selected");
+    }
+    // Reset form
+    setSelectedOption("");
+    setWuid("");
+    setResult("");
+  };
+
+  // Conditional rendering for default value
+  const defaultValue = result ? null : <div>No data available</div>;
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>
+        <Dropdown
+          placeholder="Select an option"
+          selectedKey={selectedOption}
+          onChange={handleOptionChange}
+          options={[
+            { key: "", text: nlsHPCC.SelectAnOption },
+            { key: "getVersion", text: nlsHPCC.GetVersion },
+            { key: "getLastServerMessage", text: nlsHPCC.GetLastServerMessage },
+            { key: "restoreECLWorkUnit", text: nlsHPCC.RestoreECLWorkunit },
+            { key: "restoreDFUWorkUnit", text: nlsHPCC.RestoreDFUWorkunit },
+            { key: "archiveECLWorkUnit", text: nlsHPCC.ArchiveECLWorkunit },
+            { key: "archiveDFUWorkUnit", text: nlsHPCC.ArchiveDFUWorkunit },
+            { key: "backupECLWorkUnit", text: nlsHPCC.BackupECLWorkunit },
+            { key: "backupDFUWorkUnit", text: nlsHPCC.BackupDFUWorkunit }
+          ]}
+          styles={{ dropdown: { width: 400 } }}
+        />
+        {["restoreECLWorkUnit", "restoreDFUWorkUnit", "archiveECLWorkUnit", "archiveDFUWorkUnit", "backupECLWorkUnit", "backupDFUWorkUnit"].includes(selectedOption) && (
+          <div>
+            <TextField
+              label="Work Unit ID:"
+              value={wuid}
+              onChange={(event: React.FormEvent<HTMLInputElement>, newValue?: string) => setWuid(newValue || "")}
+              styles={{ fieldGroup: { width: 400 } }}
+            />
+          </div>
+        )}
+        <PrimaryButton type="submit" >{nlsHPCC.Submit}</PrimaryButton>
+        {/* Render defaultValue when result is empty */}
+        {defaultValue}
+        {/* Render result when available */}
+        {result && <div>{nlsHPCC.Results}: {result}</div>}
+      </form>
+    </div>
+  );
+};
+
+export default Sasha;

esp/src/src-react/routes.tsx

@@ -390,7 +390,17 @@ export const routes: RoutesEx = [
                     },
                 ]
             },
-        ]
+            {
+                path: "/sasha",
+                        children: [
+                            {
+                                path: "", action: (ctx, params) => import("./components/Sasha").then(_ => {
+                                    return <_.Sasha />;
+                                })
+                            },
+                        ]
+                    },
+                ]
     },
     {
         mainNav: ["operations"],

esp/src/src/nls/hpcc.ts

@@ -58,6 +58,8 @@ export = {
         AppendCluster: "Append Cluster",
         Apply: "Apply",
         AreYouSureYouWantToResetTheme: "Are you sure you want to reset to the default theme?",
+        ArchiveECLWorkunit: "Archive ECL Workunit",
+        ArchiveDFUWorkunit: "Archive DFU Workunit",
         ArchivedOnly: "Archived Only",
         ArchivedWarning: "Warning: please specify a small date range. If not, it may take some time to retrieve the workunits and the browser may be timed out.",
         Attach: "Attach",
@@ -72,6 +74,8 @@ export = {
         AutoRefreshIncrement: "Auto Refresh Increment",
         AutoRefreshEvery: "Auto refresh every x minutes",
         Back: "Back",
+        BackupECLWorkunit: "Backup ECL Workunit",
+        BackupDFUWorkunit: "Backup DFU Workunit",
         BannerColor: "Banner Color",
         BannerColorTooltip: "Change the background color of the top navigation",
         BannerMessage: "Banner Message",
@@ -372,10 +376,12 @@ export = {
         GetDFSCSV: "DFS CSV",
         GetDFSMap: "DFS Map",
         GetDFSParents: "DFS Parents",
+        GetLastServerMessage: "Get Last Server Message",
         GetLogicalFile: "Logical File",
         GetLogicalFilePart: "Logical File Part",
         GetProtectedList: "Protected List",
         GetValue: "Value",
+        GetVersion: "Get Version",
         GetPart: "Get Part",
         GetSoftwareInformation: "Get Software Information",
         Graph: "Graph",
@@ -801,6 +807,8 @@ export = {
         Restarted: "Restarted",
         Restarts: "Restarts",
         Restore: "Restore",
+        RestoreECLWorkunit: "Restore ECL Workunit",
+        RestoreDFUWorkunit: "Restore DFU Workunit",
         Resubmit: "Resubmit",
         ResubmitTooltip: "Resubmit existing workunit",
         Resubmitted: "Resubmitted",
@@ -820,6 +828,7 @@ export = {
         Sample: "Sample",
         SampleRequest: "Sample Request",
         SampleResponse: "Sample Response",
+        Sasha: "Sasha",
         Save: "Save",
         Scope: "Scope",
         SearchResults: "Search Results",
@@ -829,6 +838,7 @@ export = {
         SecurityMessageHTML: "Only view HTML from trusted users.  This workunit was created by \"{__placeholder__}\".  \nRender HTML?",
         SeeConfigurationManager: "See Configuration Manager",
         SelectA: "Select a",
+        SelectAnOption: "Select an option",
         Selected: "Selected",
         SelectValue: "Select a value",
         SelectEllipsis: "Select...",