WIP: storage things

web/src/components/storage/IscsiPage.jsx

@@ -0,0 +1,126 @@
+/*
+ * Copyright (c) [2022] 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, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import {
+  Button,
+  Toolbar, ToolbarItem, ToolbarContent,
+  Label
+} from "@patternfly/react-core";
+import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+
+import { Title as PageTitle, MainActions } from "~/components/layout";
+import { Section, Popup } from "~/components/core";
+
+export default function IscsiPage() {
+  const navigate = useNavigate();
+  const [discovering, setDiscovering] = useState(false);
+
+  const Content = () => {
+    return (
+      <>
+        <Section
+          title="Initiator"
+          iconName="settings"
+        >
+          <div className="split">
+            <Label isCompact>a-name-given-by-YaST-or-iBFT</Label> <Button variant="plain" isInline>Link to change or to iBFT table</Button>
+          </div>
+        </Section>
+
+        <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>
+      </MainActions>
+
+      <Content />
+    </>
+  );
+}

web/src/components/storage/ProposalTargetSection.jsx

@@ -20,8 +20,15 @@
  */
 
 import React, { useState } from "react";
-
+import {
+  Button,
+  Title,
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateBody,
+} from "@patternfly/react-core";
 import { Section, Popup } from "~/components/core";
+import { Icon } from "~/components/layout";
 import { ProposalTargetForm, ProposalSummary } from "~/components/storage";
 
 export default function ProposalTargetSection({ proposal, calculateProposal }) {
@@ -35,6 +42,14 @@ export default function ProposalTargetSection({ proposal, calculateProposal }) {
   return (
     <Section title="Device" onActionClick={() => setIsOpen(true)} hasSeparator>
       <ProposalSummary proposal={proposal} />
+      <EmptyState>
+        <EmptyStateIcon icon={({ ...props }) => <Icon name="info" { ...props } />} />
+        <Title headingLevel="h2" size="4xl">iSCSI initiator not configured yet</Title>
+        <EmptyStateBody>
+          Lorem impsum talking with a brief description about the iSCSI and next step to configure it
+        </EmptyStateBody>
+        <Button variant="primary">Configure it!</Button>
+      </EmptyState>
       <Popup aria-label="Device selection" isOpen={isOpen}>
         <ProposalTargetForm id="target-form" proposal={proposal} onSubmit={onTargetChange} />
         <Popup.Actions>

web/src/components/storage/index.js

@@ -28,3 +28,4 @@ export { default as ProposalSettingsForm } from "./ProposalSettingsForm";
 export { default as DeviceSelector } from "./DeviceSelector";
 export { default as ProposalActions } from "./ProposalActions";
 export { default as ProposalSummary } from "./ProposalSummary";
+export { default as IscsiPage } from "./IscsiPage";

web/src/index.js

@@ -36,7 +36,7 @@ import App from "~/App";
 import Main from "~/Main";
 import { Overview } from "~/components/overview";
 import { ProductSelectionPage } from "~/components/software";
-import { ProposalPage as StoragePage } from "~/components/storage";
+import { ProposalPage as StoragePage, IscsiPage } from "~/components/storage";
 
 ReactDOM.render(
   <StrictMode>
@@ -49,6 +49,7 @@ ReactDOM.render(
                 <Route index element={<Overview />} />
                 <Route path="/overview" element={<Overview />} />
                 <Route path="/storage" element={<StoragePage />} />
+                <Route path="/iscsi" element={<IscsiPage />} />
               </Route>
               <Route path="products" element={<ProductSelectionPage />} />
             </Route>