templates store ui

Author: petar-cvit

cyclops-ui/src/components/layouts/Sidebar.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Button, Menu, MenuProps } from "antd";
-import { AppstoreAddOutlined, HddOutlined, BugFilled } from "@ant-design/icons";
+import {AppstoreAddOutlined, HddOutlined, BugFilled, SnippetsOutlined} from "@ant-design/icons";
 import { useLocation } from "react-router";
 import PathConstants from "../../routes/PathConstants";
 import { Link } from "react-router-dom";
@@ -19,6 +19,11 @@ const SideNav = () => {
       icon: <HddOutlined />,
       key: "nodes",
     },
+    {
+      label: <Link to={PathConstants.TEMPLATES}> Templates</Link>,
+      icon: <SnippetsOutlined />,
+      key: "templates",
+    },
   ];
 
   return (

cyclops-ui/src/components/pages/TemplateStore.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from "react";
+import {Col, Table, Typography, Alert, Row} from "antd";
+import axios from "axios";
+import Title from "antd/es/typography/Title";
+
+const TemplateStore = () => {
+  const [templates, setTemplates] = useState([]);
+  const [error, setError] = useState({
+    message: "",
+    description: "",
+  });
+
+  useEffect(() => {
+    axios
+      .get(`/api/templates/store`)
+      .then((res) => {
+        setTemplates(res.data);
+      })
+      .catch((error) => {
+        if (error?.response?.data) {
+          setError({
+            message: error.response.data.message || String(error),
+            description: error.response.data.description || "Check if Cyclops backend is available on: " + window.__RUNTIME_CONFIG__.REACT_APP_CYCLOPS_CTRL_HOST,
+          });
+        } else {
+          setError({
+            message: String(error),
+            description:
+              "Check if Cyclops backend is available on: " + window.__RUNTIME_CONFIG__.REACT_APP_CYCLOPS_CTRL_HOST,
+          });
+        }
+      });
+  }, []);
+
+  return (
+    <div>
+      {error.message.length !== 0 && (
+        <Alert
+          message={error.message}
+          description={error.description}
+          type="error"
+          closable
+          afterClose={() => {
+            setError({
+              message: "",
+              description: "",
+            });
+          }}
+          style={{ marginBottom: "20px" }}
+        />
+      )}
+      <Row gutter={[40, 0]}>
+        <Col span={18}>
+          <Title level={2}>Templates: {templates.length}</Title>
+        </Col>
+      </Row>
+      <Col span={24} style={{ overflowX: "auto" }}>
+        <Table dataSource={templates}>
+          <Table.Column title="Name" dataIndex="name" width={"30%"} />
+          <Table.Column title="Repo" dataIndex={["ref", "repo"]} width={"30%"} />
+          <Table.Column
+              title="Path"
+              dataIndex={["ref", "path"]}
+              width={"20%"}
+              render={function (value: any, record: any, index: number) {
+                if (!value.startsWith('/')) {
+                  return '/' + value;
+                }
+                return value;
+              }}
+          />
+          <Table.Column title="Version" dataIndex={["ref", "version"]} width={"10%"} />
+        </Table>
+      </Col>
+    </div>
+  );
+};
+
+export default TemplateStore;

cyclops-ui/src/routes/PathConstants.tsx

@@ -7,6 +7,7 @@ const PathConstants = {
   MODULE_ROLLBACK: "/modules/:moduleName/rollback",
   NODES: "/nodes",
   NODE_GET: "/nodes/:nodeName",
+  TEMPLATES: "/templates",
 };
 
 export default PathConstants;

cyclops-ui/src/routes/index.tsx

@@ -13,6 +13,7 @@ const Nodes = React.lazy(() => import("../components/pages/nodes"));
 const NodeDetails = React.lazy(
   () => import("../components/pages/node_details")
 );
+const Templates = React.lazy(() => import("../components/pages/TemplateStore"));
 
 const routes = [
   { path: PathConstants.HOME, element: <Home /> },
@@ -23,6 +24,7 @@ const routes = [
   { path: PathConstants.MODULE_ROLLBACK, element: <ModuleHistory /> },
   { path: PathConstants.NODES, element: <Nodes /> },
   { path: PathConstants.NODE_GET, element: <NodeDetails /> },
+  { path: PathConstants.TEMPLATES, element: <Templates /> },
 ];
 
 export default routes;