Added: Add agent

dash-app · May 2, 2021 · 5e717d8 · 5e717d8
1 parent 441f580
commit 5e717d8
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 55 deletions.
diff --git a/frontend/dash-home/src/components/agent/AgentEditor.tsx b/frontend/dash-home/src/components/agent/AgentEditor.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Button, Modal, Form } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { Redirect } from 'react-router-dom';
-import { Agent, AgentResult, updateAgent } from '../../remote-go/Agents';
+import { Agent, AgentResult, updateAgent, addAgent } from '../../remote-go/Agents';
 import { FAILED, PENDING, SUCCESS } from '../../remote-go/Status';
 import { P } from '../atoms/Core';
 import { NotifyError } from '../atoms/Notify';
@@ -38,9 +38,10 @@ export const AgentEditor: React.FC<Props> = props => {
   const [postResult, setPostResult] = React.useState<AgentResult | undefined>(undefined);
 
   const handleSubmit = (event: any) => {
-    console.log(`:: Execute submit...`)
     if (props.agent) {
       updateAgent(props.agent?.id, agent, setPostResult)
+    } else if (props.action === 'ADD') {
+      addAgent(agent, setPostResult)
     }
     event.preventDefault();
     event.stopPropagation();
@@ -50,7 +51,10 @@ export const AgentEditor: React.FC<Props> = props => {
     <Modal show={props.show} onHide={props.handleClose && props.handleClose}>
       <Form onSubmit={handleSubmit}>
         <Modal.Header closeButton>
-          <Modal.Title>{t("agent.edit.title")}</Modal.Title>
+          <Modal.Title>
+            {props.action === 'ADD' && t("agent.add.title")}
+            {props.action === 'EDIT' && t("agent.edit.title")}
+          </Modal.Title>
         </Modal.Header>
         <Modal.Body>
           {/* Address */}
@@ -109,7 +113,8 @@ export const AgentEditor: React.FC<Props> = props => {
         <Modal.Footer>
           {postResult && postResult.status === PENDING && <Spinner animation="border" aria-hidden="true" />}
           {postResult && postResult.status === SUCCESS && <Redirect to="/agent" />}
-          <Button type="submit" disabled={postResult && postResult.status === PENDING}>{t("button.edit")}</Button>
+          {props.action === 'ADD' && <Button type="submit" disabled={postResult && postResult.status === PENDING}>{t("button.add")}</Button>}
+          {props.action === 'EDIT' && <Button type="submit" disabled={postResult && postResult.status === PENDING}>{t("button.edit")}</Button>}
           <Button variant="secondary" onClick={props.handleClose && props.handleClose}>{t("button.back")}</Button>
         </Modal.Footer>
       </Form>

diff --git a/frontend/dash-home/src/components/agent/AgentMenu.tsx b/frontend/dash-home/src/components/agent/AgentMenu.tsx
@@ -1,11 +1,11 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as React from 'react';
-import { Button, Spinner, Table } from 'react-bootstrap';
+import { Button, Nav, Spinner, Table } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
+import { LinkContainer } from 'react-router-bootstrap';
 import styled from 'styled-components';
 import { Agent, AgentsResult, fetchAgents } from '../../remote-go/Agents';
 import { H1, Span } from '../atoms/Core';
-import { Icon } from '../atoms/Themed';
 import { AgentEditor } from './AgentEditor';
 
 interface Props {
@@ -23,6 +23,7 @@ const AgentMenu: React.FC<Props> = props => {
     fetch()
   }, [])
 
+  const [create, setCreate] = React.useState<boolean>(false);
   const [edit, setEdit] = React.useState<Agent | null>(null);
 
   if (agentsResult === undefined || !agentsResult.agents) {
@@ -37,6 +38,30 @@ const AgentMenu: React.FC<Props> = props => {
   return (
     <div>
       <H1>{t("agent.agent")}</H1>
+      <Nav style={{ marginBottom: "1rem" }}>
+        <Nav.Item>
+          <LinkContainer exact to="/">
+            <Button>
+              <FontAwesomeIcon icon={["fas", "arrow-left"]} style={{ marginRight: "0.5rem" }} />
+              <span>{t("button.back")}</span>
+            </Button>
+          </LinkContainer>
+        </Nav.Item>
+        <Nav.Item>
+          <Button onClick={() => setCreate(true)}>
+            <FontAwesomeIcon icon={["fas", "plus"]} style={{ marginRight: "0.5rem" }} />
+            <span>{t("button.add")}</span>
+          </Button>
+          <AgentEditor
+            show={create}
+            action={'ADD'}
+            handleClose={() => {
+              fetch();
+              setCreate(false);
+            }}
+          />
+        </Nav.Item>
+      </Nav>
       <Table variant="dark">
         <thead>
           <tr>
@@ -49,40 +74,38 @@ const AgentMenu: React.FC<Props> = props => {
         <tbody>
           {Object.values(agentsResult?.agents!).map((agent: Agent) => {
             return (
-              <>
-                <tr key={agent.id}>
-                  <td>{agent.address}</td>
-                  <td>{agent.label}</td>
-                  <td>
-                    {
-                      agent.online ?
-                        <span>
-                          <Icon icon={["fas", "check"]} style={{ marginRight: "0.2rem" }} />
-                          {t("status.online")}
-                        </span> :
-                        <span>
-                          <Icon icon={["fas", "times"]} style={{ marginRight: "0.2rem" }} />
-                          {t("status.offline")}
-                        </span>
-                    }
-                  </td>
-                  <td>
-                    <Button onClick={() => { setEdit(agent) }}>
-                      <FontAwesomeIcon icon={["fas", "edit"]} />
-                      <span style={{ paddingLeft: "0.5rem" }}>{t("button.edit")}</span>
-                    </Button>
-                    <AgentEditor
-                      key={agent.id}
-                      agent={agent}
-                      show={edit?.id === agent.id}
-                      action={'EDIT'}
-                      handleClose={() => {
-                        fetch();
-                        setEdit(null);
-                      }} />
-                  </td>
-                </tr>
-              </>
+              <tr key={agent.id}>
+                <td>{agent.address}</td>
+                <td>{agent.label}</td>
+                <td>
+                  {
+                    agent.online ?
+                      <span>
+                        <FontAwesomeIcon icon={["fas", "check"]} style={{ marginRight: "0.2rem" }} />
+                        {t("status.online")}
+                      </span> :
+                      <span>
+                        <FontAwesomeIcon icon={["fas", "times"]} style={{ marginRight: "0.2rem" }} />
+                        {t("status.offline")}
+                      </span>
+                  }
+                </td>
+                <td>
+                  <Button onClick={() => { setEdit(agent) }}>
+                    <FontAwesomeIcon icon={["fas", "edit"]} />
+                    <span style={{ paddingLeft: "0.5rem" }}>{t("button.edit")}</span>
+                  </Button>
+                  <AgentEditor
+                    key={agent.id}
+                    agent={agent}
+                    show={edit?.id === agent.id}
+                    action={'EDIT'}
+                    handleClose={() => {
+                      fetch();
+                      setEdit(null);
+                    }} />
+                </td>
+              </tr>
             )
           })}
         </tbody>

diff --git a/frontend/dash-home/src/locales/en/translation.json b/frontend/dash-home/src/locales/en/translation.json
@@ -63,6 +63,9 @@
     "address": "Address",
     "status": "Status",
     "default": "Default",
+    "add": {
+      "title": "Add Agent"
+    },
     "edit": {
       "title": "Edit Agent"
     },

diff --git a/frontend/dash-home/src/locales/ja/translation.json b/frontend/dash-home/src/locales/ja/translation.json
@@ -63,6 +63,9 @@
     "address": "アドレス",
     "status": "状態",
     "default": "デフォルト",
+    "add": {
+      "title": "エージェントを追加"
+    },
     "edit": {
       "title": "エージェントを編集"
     },

diff --git a/frontend/dash-home/src/pages/Agent.tsx b/frontend/dash-home/src/pages/Agent.tsx
@@ -1,29 +1,15 @@
 import * as React from 'react';
-import { Button, Container, Navbar } from 'react-bootstrap';
+import { Container } from 'react-bootstrap';
 import Basement from '../components/basements/Basement';
-import { useTranslation } from 'react-i18next';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { LinkContainer } from 'react-router-bootstrap';
 import AgentMenu from '../components/agent/AgentMenu';
 
 interface Props {
 }
 
 const Agent: React.FC<Props> = props => {
-  const { t } = useTranslation();
-
   return (
     <Basement>
       <Container fluid="lg">
-        <Navbar>
-          <LinkContainer exact to="/">
-            <Button>
-              <FontAwesomeIcon icon={["fas", "arrow-left"]} />
-              <span style={{ paddingLeft: "0.5rem" }}>{t("button.back")}</span>
-            </Button>
-          </LinkContainer>
-        </Navbar>
-
         <div>
           <AgentMenu />
         </div>

diff --git a/frontend/dash-home/src/remote-go/Agents.tsx b/frontend/dash-home/src/remote-go/Agents.tsx
@@ -44,6 +44,26 @@ export function fetchAgents(setResult: React.Dispatch<React.SetStateAction<Agent
     });
 }
 
+export function addAgent(payload: Agent, setResult: React.Dispatch<React.SetStateAction<AgentResult | undefined>>) {
+  setResult({
+    status: PENDING,
+  })
+
+  axios.post<Agent>(`${API_ADDRESS}/api/v1/agents`, payload)
+    .then(response => setResult({
+      status: SUCCESS,
+      agent: response.data,
+    }))
+    .catch((error: AxiosError<ErrorResponse>) => {
+      console.error(`*** Agents > Add error:`);
+      console.error(error);
+      setResult({
+        status: FAILED,
+        error: error,
+      });
+    });
+}
+
 export function updateAgent(id: string, payload: Agent, setResult: React.Dispatch<React.SetStateAction<AgentResult | undefined>>) {
   setResult({
     status: PENDING,