From eb4269dc41df7be0849c856f6ce7d26815528631 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Iv=C3=A1n=20L=C3=B3pez=20Gonz=C3=A1lez?=
 <jlopez@suse.com>
Date: Tue, 7 Mar 2023 23:32:47 +0000
Subject: [PATCH] WIP

---
 web/src/components/storage/ISCSIPage.jsx      |  90 +-------
 .../storage/iscsi/TargetsSection.jsx          | 203 ++++++++++++++++++
 web/src/components/storage/iscsi/index.js     |   1 +
 3 files changed, 212 insertions(+), 82 deletions(-)
 create mode 100644 web/src/components/storage/iscsi/TargetsSection.jsx

diff --git a/web/src/components/storage/ISCSIPage.jsx b/web/src/components/storage/ISCSIPage.jsx
index 69a229f8fb..0915e01f4a 100644
--- a/web/src/components/storage/ISCSIPage.jsx
+++ b/web/src/components/storage/ISCSIPage.jsx
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2022] SUSE LLC
+ * Copyright (c) [2023] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -19,101 +19,27 @@
  * find current contact information at www.suse.com.
  */
 
-import React, { useState } from "react";
+import React from "react";
 import { useNavigate } from "react-router-dom";
-
-import {
-  Button,
-  Toolbar, ToolbarItem, ToolbarContent
-} from "@patternfly/react-core";
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Button } from "@patternfly/react-core";
 
 import { Title as PageTitle, MainActions } from "~/components/layout";
-import { Section, Popup } from "~/components/core";
-import { InitiatorSection } from "~/components/storage/iscsi";
+import { InitiatorSection, TargetsSection } from "~/components/storage/iscsi";
 
 export default function ISCSIPage() {
   const navigate = useNavigate();
-  const [discovering, setDiscovering] = useState(false);
-
-  const Content = () => {
-    return (
-      <>
-        <InitiatorSection />
-
-        <Section
-          title="Targets"
-          iconName="lan"
-        >
-          <Toolbar>
-            <ToolbarContent>
-              <ToolbarItem>
-                <Button onClick={() => setDiscovering(true)}>Discover</Button>
-              </ToolbarItem>
-            </ToolbarContent>
-          </Toolbar>
-          <TableComposable
-            gridBreakPoint=""
-            variant="compact"
-            borders={false}
-          >
-            <Thead>
-              <Tr>
-                <Th>Name</Th>
-                <Th>Portal</Th>
-                <Th>Interface</Th>
-                <Th>iBFT</Th>
-                <Th>Status</Th>
-                <Th />
-              </Tr>
-            </Thead>
-            <Tbody>
-              <Tr>
-                <Td>iqn.2022-12.com.example:3c2a23b093852f4fee0d</Td>
-                <Td>192.168.122.41:3260</Td>
-                <Td>default</Td>
-                <Td>false</Td>
-                <Td>Connected on boot</Td>
-                <Td>
-                  <Button variant="plain" isInline>Log out</Button> | <Button variant="plain" isInline>Change Start-up</Button>
-                </Td>
-              </Tr>
-              <Tr>
-                <Td>iqn.2022-12.com.example:3c2a23b093852f4fee0d</Td>
-                <Td>192.168.122.41:3260</Td>
-                <Td>default</Td>
-                <Td>false</Td>
-                <Td>Not connected</Td>
-                <Td>
-                  <Button variant="plain" isInline>Log in</Button> | <Button variant="plain" isInline>Delete</Button>
-                </Td>
-              </Tr>
-            </Tbody>
-          </TableComposable>
-        </Section>
-
-        <Popup isOpen={discovering}>
-          Cosas del discovering
-
-          <Popup.Actions>
-            <Popup.Confirm />
-            <Popup.Cancel onClick={() => setDiscovering(false)} />
-          </Popup.Actions>
-        </Popup>
-      </>
-    );
-  };
 
   return (
     <>
       <PageTitle>Storage iSCSI</PageTitle>
       <MainActions>
-        <Button isLarge variant="primary" form="storage-config" onClick={() => navigate("/")}>
-          Accept
+        <Button isLarge variant="primary" form="storage-config" onClick={() => navigate("/storage")}>
+          Back
         </Button>
       </MainActions>
 
-      <Content />
+      <InitiatorSection />
+      <TargetsSection />
     </>
   );
 }
diff --git a/web/src/components/storage/iscsi/TargetsSection.jsx b/web/src/components/storage/iscsi/TargetsSection.jsx
new file mode 100644
index 0000000000..e358cea0af
--- /dev/null
+++ b/web/src/components/storage/iscsi/TargetsSection.jsx
@@ -0,0 +1,203 @@
+/*
+ * Copyright (c) [2023] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React, { useEffect, useState } from "react";
+import { DropdownToggle, Form, FormGroup, TextInput, Skeleton } from "@patternfly/react-core";
+import { TableComposable, Thead, Tr, Th, Tbody, Td, ActionsColumn } from '@patternfly/react-table';
+
+import { Icon } from '~/components/layout';
+import { Section, Popup } from "~/components/core";
+
+import { useInstallerClient } from "~/context/installer";
+import { useCancellablePromise } from "~/utils";
+
+const RowActions = ({ actions, id, ...props }) => {
+  const actionsToggle = (props) => (
+    <DropdownToggle
+      id={id}
+      aria-label="Actions"
+      toggleIndicator={null}
+      isDisabled={props.isDisabled}
+      onToggle={props.onToggle}
+    >
+      <Icon name="more_vert" size="24" />
+    </DropdownToggle>
+  );
+
+  return (
+    <ActionsColumn
+      items={actions}
+      actionsToggle={actionsToggle}
+      {...props}
+    />
+  );
+};
+
+const NodesPresenter = ({ nodes, isLoading }) => {
+  const NodeRow = ({ node }) => {
+    const actions = (node) => {
+      return [
+        {
+          title: "Edit",
+          onClick: null
+        }
+      ];
+    };
+
+    return (
+      <Tr>
+        <Td>{node.target}</Td>
+        <Td>{node.address + ":" + node.port}</Td>
+        <Td>{node.interface}</Td>
+        <Td>{node.ibft ? "Yes" : "No"}</Td>
+        <Td>{node.connected ? "Connected" : "Disconnected"}</Td>
+        <Td isActionCell>
+          <RowActions actions={actions(node)} id={`actions-for-node${node.id}`} />
+        </Td>
+      </Tr>
+    );
+  };
+
+  const Content = () => {
+    if (isLoading) {
+      return (
+        <Tr>
+          <Td colSpan={6}>
+            <Skeleton />
+          </Td>
+        </Tr>
+      );
+    }
+
+    return nodes.map(n => <NodeRow node={n} key={`node${n.id}`} />);
+  };
+
+  return (
+    <TableComposable gridBreakPoint="grid-sm" variant="compact" className="users">
+      <Thead>
+        <Tr>
+          <Th>Name</Th>
+          <Th>Portal</Th>
+          <Th>Interface</Th>
+          <Th>iBFT</Th>
+          <Th>Status</Th>
+          <Th />
+        </Tr>
+      </Thead>
+      <Tbody>
+        <Content />
+      </Tbody>
+    </TableComposable>
+  );
+};
+
+// const InitiatorForm = ({ initiator, onSubmit, onCancel }) => {
+//   const [data, setData] = useState({ ...initiator });
+
+//   const onNameChange = (name) => {
+//     setData({ ...data, name });
+//   };
+
+//   const onSubmitWrapper = (event) => {
+//     event.preventDefault();
+//     onSubmit(data);
+//   };
+
+//   const id = "editIscsiInitiator";
+//   const isSubmitDisabled = data.name === "";
+
+//   return (
+//     <Popup isOpen height="medium" title="Edit iSCSI Initiator">
+//       <Form id={id} onSubmit={onSubmitWrapper}>
+//         <FormGroup fieldId="initiatorName" label="Name">
+//           <TextInput
+//             id="initiatorName"
+//             name="name"
+//             aria-label="Initiator name"
+//             value={data.name || ""}
+//             label="Name"
+//             isRequired
+//             onChange={onNameChange}
+//           />
+//         </FormGroup>
+//       </Form>
+//       <Popup.Actions>
+//         <Popup.Confirm
+//           form={id}
+//           type="submit"
+//           isDisabled={isSubmitDisabled}
+//         />
+//         <Popup.Cancel onClick={onCancel} />
+//       </Popup.Actions>
+//     </Popup>
+//   );
+// };
+
+export default function TargetsSection() {
+  const { storage: client } = useInstallerClient();
+  const { cancellablePromise } = useCancellablePromise();
+  const [nodes, setNodes] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  // const [isFormOpen, setIsFormOpen] = useState(false);
+
+  useEffect(() => {
+    const loadNodes = async () => {
+      setIsLoading(true);
+      const nodes = await cancellablePromise(client.iscsi.getNodes());
+      setNodes(nodes);
+      setIsLoading(false);
+    };
+
+    loadNodes().catch(console.error);
+
+    // return client.iscsi.onInitiatorChange(loadInitiator);
+  }, [cancellablePromise, client.iscsi]);
+
+  // const openForm = () => {
+  //   setIsFormOpen(true);
+  // };
+
+  // const closeForm = () => {
+  //   setIsFormOpen(false);
+  // };
+
+  // const acceptForm = async (data) => {
+  //   setIsLoading(true);
+  //   closeForm();
+  //   await client.iscsi.setInitiatorName(data.name);
+  // };
+
+  return (
+    <Section title="Targets" iconName="lan">
+      <NodesPresenter
+        nodes={nodes}
+        isLoading={isLoading}
+        // handlers={ { edit: openForm } }
+      />
+      {/* { isFormOpen &&
+        <InitiatorForm
+          initiator={initiator}
+          onSubmit={acceptForm}
+          onCancel={closeForm}
+        /> } */}
+    </Section>
+  );
+}
diff --git a/web/src/components/storage/iscsi/index.js b/web/src/components/storage/iscsi/index.js
index 8bf58fc421..c2d3467b8c 100644
--- a/web/src/components/storage/iscsi/index.js
+++ b/web/src/components/storage/iscsi/index.js
@@ -20,3 +20,4 @@
  */
 
 export { default as InitiatorSection } from "./InitiatorSection";
+export { default as TargetsSection } from "./TargetsSection";