feat (manager) : components & pages added

components/chart/aggregate-chart.tsx

@@ -0,0 +1,35 @@
+import {
+  ChartDonut, Chart,
+  ChartAxis,
+  ChartGroup,
+  ChartLine,
+  ChartVoronoiContainer,
+} from "@patternfly/react-charts";
+import React from "react";
+import { AnyProps } from "../models/props";
+
+const AggregateChart = ({ type, props }: AnyProps) => {
+  if (type === "donut")
+    return (<><ChartDonut {...props} /></>);
+  else if (type === "month")
+    return (<> <Chart {...props.chartConfig} containerComponent={
+      <ChartVoronoiContainer
+        labels={({ datum }) => `${datum.name}: ${datum.y}`}
+        constrainToVisibleArea
+      />
+    } >
+      <ChartAxis tickValues={props.chartAxisTickValues} />
+      <ChartAxis dependentAxis showGrid tickValues={props.dependentAxisTickValues} />
+      <ChartGroup>
+        {props.chartData.map((data: AnyProps) => (
+          <ChartLine
+            key={1}
+            data={data}
+          />
+        ))}
+      </ChartGroup>
+    </Chart></>);
+  return (<></>);
+}
+
+export default AggregateChart;

components/chart/deployment-week.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import {
+  Chart,
+  ChartAxis,
+  ChartGroup,
+  ChartLine,
+  ChartVoronoiContainer,
+} from "@patternfly/react-charts";
+import {
+  Text, TextContent, TextVariants
+} from "@patternfly/react-core";
+import styled from 'styled-components';
+import { AnyProps, Properties } from "../models/props";
+import AggregateChart from "./aggregate-chart";
+
+const ChartBorder = styled.div({
+  height: "250px",
+  width: "600px",
+  background: "white",
+  border: "1px solid #D2D2D2;",
+  opacity: "1;",
+});
+
+const chartAxisTickValues = [50, 150, 250];
+const dependentAxisTickValues = [50, 150, 250];
+
+const DeploymentWeek = ({ webprop }: Properties) => {
+  const chartData = webprop.processedMonthlyDeployments;
+  const legendData = webprop.legendData;
+  const chartType = "month";
+  const padding = {
+    bottom: 50,
+    left: 50,
+    right: 200,
+    top: 50,
+  };
+  const areaConfig = {
+    ariaDesc: "Deployment/Week",
+    ariaTitle: "Deployment/Week",
+    legendOrientation: "vertical",
+    legendPosition: "right",
+    maxDomain: { y: 300 },
+    minDomain: { y: 0 },
+    height: 250,
+    width: 600
+  };
+  const chartConfig = {
+    ariaDesc: areaConfig.ariaDesc,
+    ariaTitle: areaConfig.ariaTitle,
+    legendData: legendData,
+    legendOrientation: areaConfig.legendOrientation,
+    legendPosition: areaConfig.legendPosition,
+    height: areaConfig.height,
+    maxDomain: areaConfig.maxDomain,
+    minDomain: areaConfig.minDomain,
+    padding: padding,
+    width: areaConfig.width,
+    chartData: chartData,
+    chartAxisTickValues: chartAxisTickValues,
+    dependentAxisTickValues: dependentAxisTickValues
+  };
+  return (
+    <>
+      <TextContent>
+        <Text component={TextVariants.h1}> Deployment/Week </Text>
+      </TextContent><br></br>
+      <ChartBorder>
+        <div>
+          <AggregateChart type={chartType} props={{
+            chartConfig: chartConfig, chartData: chartData,
+            chartAxisTickValues: chartAxisTickValues,
+            dependentAxisTickValues: dependentAxisTickValues
+          }}></AggregateChart>
+        </div>
+      </ChartBorder>
+    </>
+  );
+}
+
+export default DeploymentWeek;

components/chart/total-deployment.tsx

@@ -0,0 +1,62 @@
+import {
+  ChartThemeColor
+} from "@patternfly/react-charts";
+import {
+  Text, TextContent, TextVariants
+} from "@patternfly/react-core";
+import React from "react";
+import styled from 'styled-components';
+import { Properties } from "../models/props";
+import AggregateChart from "./aggregate-chart";
+
+const ChartBorder = styled.div({
+  left: "600px",
+  height: "250px",
+  width: "350px",
+  border: "1px solid #D2D2D2;",
+  opacity: "1;",
+});
+
+const TotalDeployment = ({ webprop }: Properties) => {
+  const chartType = "donut";
+  const padding = {
+    bottom: 20,
+    left: 20,
+    right: 140,
+    top: 20,
+  };
+  const areaConfig = {
+    ariaDesc: "Number of Deployment",
+    ariaTitle: "Number of Deployment",
+    legendOrientation: "vertical",
+    subTitle: "Deployments",
+    constrainToVisibleArea: true,
+    width: 350
+  };
+  const chartConfig = {
+    ariaDesc: areaConfig.ariaDesc,
+    ariaTitle: areaConfig.ariaTitle,
+    constrainToVisibleArea: areaConfig.constrainToVisibleArea,
+    labels: ({ datum }: any) => `${datum.x}: ${datum.y}%`,
+    data: webprop.chartData,
+    legendData: webprop.labelData,
+    legendOrientation: areaConfig.legendOrientation,
+    padding: padding,
+    subTitle: areaConfig.subTitle,
+    title: webprop.count,
+    themeColor: ChartThemeColor.multiOrdered,
+    width: areaConfig.width,
+  };
+  return (
+    <>
+      <TextContent>
+        <Text component={TextVariants.h1}> Total Deployment </Text>
+      </TextContent><br></br>
+      <ChartBorder>
+        <AggregateChart type={chartType} props={chartConfig}></AggregateChart>
+      </ChartBorder>
+    </>
+  );
+}
+
+export default TotalDeployment;

components/models/chart.ts

@@ -0,0 +1,11 @@
+import { AnyProps } from "./props";
+
+
+export interface DataPoint {
+    count?: AnyProps;
+    spaName: AnyProps;
+    envs: AnyProps;
+    contextPath: AnyProps;
+    propertyName: AnyProps;
+    createdAt: AnyProps;
+}

components/models/props.ts

@@ -0,0 +1,39 @@
+export interface Properties {
+    webprop: AnyProps;
+}
+
+export interface ContextProps {
+    contex: AnyProps;
+}
+
+export interface WebProps {
+    id: string;
+    webPropertyName: string;
+    count: string;
+}
+
+export interface SPAProps {
+    id: string;
+    count: string;
+    spaName: string;
+    propertyName: string;
+    contextPath: string;
+}
+
+export interface ActivityProps {
+    id: string;
+    spaName: string;
+    code: string;
+    envs: string;
+    branch: string;
+    createdAt: string;
+    propertyName: string;
+}
+
+export interface SPAIndexProps {
+    activites: Properties,
+    totalDeployments: Properties,
+    monthlyDeployments: Properties,
+}
+
+export type AnyProps<PropsType = any> = PropsType

components/settings/apiKey.tsx

@@ -0,0 +1,146 @@
+import {
+  Button, ClipboardCopy, Form,
+  FormGroup, Modal,
+  ModalVariant, Popover,
+  TextInput
+} from "@patternfly/react-core";
+import {
+  Caption, TableComposable, Tbody,
+  Td, Tr
+} from "@patternfly/react-table";
+import React, { useEffect, useRef, useState } from "react";
+import styled from "styled-components";
+import { post } from "../../utils/api.utils";
+import { getHost } from "../../utils/config.utils";
+import { AnyProps } from "../models/props";
+
+const ApiKeyBox = styled.div({
+  top: "40px",
+  width: "1041px;",
+  height: "55px;",
+  border: "1px solid #D2D2D2;",
+  borderRadius: "8px;",
+  opacity: "1;",
+});
+
+const ClipboardBox = styled.div({
+  width: "500px",
+  height: "40px",
+});
+
+const ApiKey = () => {
+  const [isModalOpen, setModalOpen] = useState(false);
+  const [env, setEnv] = useState("");
+  const [apiKey, setApiKey] = useState("");
+  const nameInputRef = useRef();
+
+  async function handleModalToggle() {
+    setModalOpen(!isModalOpen);
+  }
+
+  async function onClickMethod() {
+    setModalOpen(!isModalOpen);
+
+    if (isModalOpen == true) {
+      try {
+        const host = getHost();
+        const url = `${host}/applications/validate`;
+        const payload = {};
+        const response = await post<AnyProps>(url, payload);
+        setApiKey(response.token);
+      } catch (e) { }
+    }
+  }
+
+  const handleNameInputChange = (value: string) => {
+    setEnv(value);
+  };
+
+  useEffect(() => {
+  }, [isModalOpen]);
+
+  return (
+    <>
+      <TableComposable
+        variant={"compact"}
+        borders={false}
+      >
+        <Caption>
+          <b>Do you want to create an API Key !</b>
+        </Caption>
+        <Tbody>
+          <ApiKeyBox>
+            <Tr>
+              <Td>
+                <Button style={{
+                  background: "#000000 0% 0% no-repeat padding-box;",
+                  opacity: 1,
+                  borderRadius: "3px;"
+                }} onClick={handleModalToggle}>
+                  Create API Key
+                </Button>
+                <Modal
+                  variant={ModalVariant.small}
+                  title="Name API Key"
+                  isOpen={isModalOpen}
+                  onClose={handleModalToggle}
+                  actions={[
+                    <Button
+                      key="create"
+                      style={{
+                        background: "#000000",
+                        opacity: 1,
+                        borderRadius: "3px;"
+                      }}
+                      onClick={onClickMethod}
+                    >
+                      Generate API Key
+                    </Button>,
+                  ]}
+                >
+                  <Form id="modal-with-form-form">
+                    <FormGroup
+                      label="Enter environment name"
+                      labelIcon={
+                        <Popover bodyContent={null}>
+                          <button
+                            type="button"
+                            aria-label="More info for name field"
+                            onClick={(e) => e.preventDefault()}
+                            aria-describedby="modal-with-form-form-name"
+                            className="pf-c-form__group-label-help"
+                          >
+                          </button>
+                        </Popover>
+                      }
+                      isRequired
+                      fieldId="modal-with-form-form-name"
+                    >
+                      <TextInput
+                        isRequired
+                        type="email"
+                        id="modal-with-form-form-name"
+                        name="modal-with-form-form-name"
+                        value={env}
+                        onChange={handleNameInputChange}
+                      />
+                    </FormGroup>
+                  </Form>
+                </Modal>
+              </Td>
+              <Td>
+                <ClipboardBox>
+                  <ClipboardCopy hoverTip="Copy" clickTip="Copied">
+                    {apiKey}
+                  </ClipboardCopy>
+                </ClipboardBox>
+              </Td>
+            </Tr>
+          </ApiKeyBox>
+        </Tbody>
+      </TableComposable>
+    </>
+  );
+};
+
+export default ApiKey;