feat (manager) : components & pages added

Dockerfile

@@ -0,0 +1,30 @@
+
+FROM ubuntu:20.04
+
+RUN apt-get update
+RUN apt-get --force-yes upgrade  -y
+RUN apt-get dist-upgrade
+RUN apt-get  install -y build-essential
+RUN apt-get install sudo
+
+RUN apt-get install --yes curl
+RUN apt update
+RUN curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
+RUN apt-get  --force-yes install -y nodejs
+RUN apt-get install --yes build-essential
+RUN apt-get install --only-upgrade bash
+RUN node -v
+
+RUN mkdir app
+RUN chown -Rh $user:$user /app
+USER $user
+
+ADD  . /app
+WORKDIR /app
+
+RUN find . -name "node_modules" -exec rm -rf '{}' +
+RUN sudo chmod -R 777 /app
+RUN ls && npm install
+EXPOSE 3000
+
+CMD [ "npm", "run", "dev"]

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