/tests/__mocks__/setupTests.js"
68 | ],
69 | "transform": {
70 | "^.+\\.(js|jsx)$": "babel-jest"
71 | }
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/src/routes/configuration/optionHelper.js:
--------------------------------------------------------------------------------
1 | const timeWindowOption = [
2 | { key: "1H", value: "1 Hour",},
3 | { key: "2H", value: "2 Hours",},
4 | { key: "3H", value: "3 Hours",},
5 | { key: "6H", value: "6 Hours",},
6 | { key: "12H", value: "12 Hours",},
7 | { key: "24H", value: "24 Hours",},
8 | ]
9 |
10 | const timezoneOption = [
11 | { key: -12, value: "Coordinated Universal Time-12 (UTC-12)",},
12 | { key: -11, value: "Niue, Samoa Standard Time (UTC-11)",},
13 | { key: -10, value: "Hawaii-Aleutian Standard Time (UTC-10)",},
14 | { key: -9, value: "Alaska Standard Time (UTC-9)",},
15 | { key: -8, value:"Pacific Standard Time (UTC-8)",},
16 | { key: -7, value: "Mountain Standard Time (UTC-7)",},
17 | { key: -6, value: "Central Standard Time (UTC-6)",},
18 | { key: -5, value: "Eastern Standard Time (UTC-5)",},
19 | { key: -4, value: "Atlantic Standard Time (UTC-4)",},
20 | { key: -3, value: "Brasilia, Argentine Time (UTC-3)",},
21 | { key: -2, value: "Fernando de Noronha, South Georgia Standard Time (UTC-2)",},
22 | { key: -1, value: "Azores, Cape Verde, Eastern Greenland Time (UTC-1)",},
23 | { key: 0, value: "Western European, Greenwich Mean Time (UTC-0)",},
24 | { key: 1, value: "Central European, Western African Time (UTC+1)",},
25 | { key: 2, value: "Central African, Eastern European Time (UTC+2)",},
26 | { key: 3, value: "Eastern African, Arabia Standard Time (UTC+3)",},
27 | { key: 4, value: "Azerbaijan, Georgia, Moscow Standard Time (UTC+4)",},
28 | { key: 5, value: "Turkmenistan, Pakistan, Uzbekistan Time (UTC+5)",},
29 | { key: 6, value: "Bangladesh, Vostok, Bhutan Time (UTC+6)",},
30 | { key: 7, value: "Indochina, West Indonesia, Christmas Island Time (UTC+7)",},
31 | { key: 8, value: "Hong Kong, Central Indonesia, Malaysia Time (UTC+8)",},
32 | { key: 9, value: "Korea-Japan Standard, East Indonesia Time (UTC+9)",},
33 | { key: 10, value: "Queensland, Victoria, Papua New Guinea Time (UTC+10)",},
34 | { key: 11, value: "Vladivostok, Pohnpei, Solomon Is. Time (UTC+11)",},
35 | { key: 12, value: "Nauru, New Zealand Standard Time (UTC+12)",},
36 | { key: 13, value: "West Samoa, Tonga, Phoenix Is. Time (UTC+12)",},
37 | { key: 14, value: "Line Is. Time (UTC+12)",},
38 | ]
39 |
40 | export { timeWindowOption, timezoneOption }
--------------------------------------------------------------------------------
/src/style/index.css:
--------------------------------------------------------------------------------
1 | /* Import Open Sans Font */
2 | @font-face {
3 | font-family: 'Open Sans';
4 | font-style: normal;
5 | font-weight: 300;
6 | src: url(../assets/fonts/Open_Sans/static/OpenSans/OpenSans-Light.ttf) format('truetype');
7 | }
8 |
9 | @font-face {
10 | font-family: 'Open Sans';
11 | font-style: normal;
12 | font-weight: 400;
13 | src: url(../assets/fonts/Open_Sans/static/OpenSans/OpenSans-Regular.ttf) format('truetype');
14 | }
15 |
16 | @font-face {
17 | font-family: 'Open Sans';
18 | font-style: normal;
19 | font-weight: 500;
20 | src: url(../assets/fonts/Open_Sans/static/OpenSans/OpenSans-Medium.ttf) format('truetype');
21 | }
22 |
23 | @font-face {
24 | font-family: 'Open Sans';
25 | font-style: normal;
26 | font-weight: 600;
27 | src: url(../assets/fonts/Open_Sans/static/OpenSans/OpenSans-SemiBold.ttf) format('truetype');
28 | }
29 |
30 | @font-face {
31 | font-family: 'Open Sans';
32 | font-style: normal;
33 | font-weight: 700;
34 | src: url(../assets/fonts/Open_Sans/static/OpenSans/OpenSans-Bold.ttf) format('truetype');
35 | }
36 |
37 | html, body {
38 | min-height: 100%;
39 | height: max-content;
40 | width: 100%;
41 | padding: 0;
42 | margin: 0;
43 | background: #FAFAFA;
44 | color: #444;
45 | -webkit-font-smoothing: antialiased;
46 | -moz-osx-font-smoothing: grayscale;
47 | }
48 |
49 | * {
50 | box-sizing: border-box;
51 | }
52 |
53 | #app {
54 | min-height: 100%;
55 | height: max-content;
56 | }
57 |
58 | #app .pro-sidebar-inner {
59 | background: #ffff;
60 | }
61 |
62 | #app .pro-sidebar {
63 | color: black;
64 | }
65 |
66 | #app #navArrow-header {
67 | color: black;
68 | position: absolute;
69 | right: 0;
70 | z-index: 9999;
71 | line-height: 20px;
72 | border-radius: 50%;
73 | font-weight: bold;
74 | font-size: 22px;
75 | top:auto;
76 | cursor: pointer;
77 | }
78 |
79 | #app .pro-sidebar-header {
80 | display: flex;
81 | justify-content: center;
82 | align-items: center;
83 | }
84 |
85 | #app .pro-sidebar .pro-menu a:hover {
86 | color: #226666;
87 | }
88 |
89 | #app .pro-sidebar .pro-menu .pro-menu-item.active {
90 | color: #226666;
91 | }
92 |
93 | #app .pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item:hover {
94 | color: #226666;
95 | font-weight: bold;
96 | }
97 |
98 | #app .pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item:focus {
99 | color: #226666;
100 | }
--------------------------------------------------------------------------------
/src/routes/verifyUser/index.js:
--------------------------------------------------------------------------------
1 | import { h } from 'preact';
2 | import { useState } from 'preact/hooks';
3 | import { useEffect } from "react";
4 | import BASE_URL from '../../config/api/constant.js';
5 | import axios from "axios";
6 | import style from './style.css';
7 |
8 | import SuccessPage from '../../components/successPage/index.js';
9 | import InvalidPage from '../../components/invalidPage/index.js';
10 | import LoadingPage from '../../components/loadingPage/index.js';
11 | import { Button } from '@chakra-ui/react';
12 | import { Link } from 'preact-router';
13 |
14 | const VerifyUser = () => {
15 | const paramVerifyToken = new URLSearchParams(window.location.search).get('key')
16 | const [verifyToken, setVerifyToken] = useState(null)
17 | const [response, setResponse] = useState({})
18 | const [isLoading, setIsLoading] = useState(true)
19 |
20 | useEffect(() => {
21 | if (verifyToken != null) {
22 | const data = {
23 | key: verifyToken,
24 | }
25 | axios.post(`${BASE_URL}/register/verify`, data)
26 | .then(() => {
27 | setResponse({
28 | success: true
29 | })
30 | setIsLoading(false)
31 | })
32 | .catch(() => {
33 | setResponse({
34 | success: false
35 | })
36 | setIsLoading(false)
37 | })
38 | }
39 |
40 | }, [verifyToken])
41 |
42 | if (paramVerifyToken){
43 | setVerifyToken(paramVerifyToken);
44 | }
45 |
46 | return (
47 | {!paramVerifyToken ?
48 |
64 | Back to login page
65 |
66 |
67 | }
68 |
)
69 | }
70 |
71 | export default VerifyUser;
--------------------------------------------------------------------------------
/src/components/teamMemberComponent/index.js:
--------------------------------------------------------------------------------
1 | import { h, Fragment } from 'preact';
2 | import { Flex, Spacer, Box, CloseButton, Text, Heading, Spinner } from '@chakra-ui/react';
3 | import { getUserToken } from '../../config/api/auth.js';
4 | import axios from "axios";
5 | import BASE_URL from '../../config/api/constant.js';
6 | import { useState } from 'preact/hooks';
7 |
8 | function TeamMemberComponent({email=null, verified=null, cancelUserId=null, header=false, refreshTeamData=()=>{}}){
9 | /*
10 | email= user name
11 | verified = Split into 2 case:
12 | true --> give green color and "member"
13 | false --> give grey color and "pending"
14 | cancelUserId = user_id that is not yet verified, only used when verified=false
15 | */
16 |
17 | const [isLoadingDelete, setIsLoadingDelete] = useState(false);
18 | if (header){
19 | return(
20 |
21 |
22 | Members
23 |
24 |
26 | Status
27 |
28 |
30 | )
31 | }
32 |
33 |
34 | const removeUser = () => {
35 | setIsLoadingDelete(true);
36 | const data = {
37 | user_id: cancelUserId
38 | }
39 |
40 | axios.post(`${BASE_URL}/invite-member/cancel/`, data, {
41 | headers: {
42 | Authorization: `Token ${getUserToken()}`
43 | }
44 | }).then(() => {
45 | refreshTeamData();
46 | })
47 | }
48 |
49 | return(
50 |
51 |
52 | {email}
53 |
54 |
58 | member
59 |
60 |
65 | pending
66 |
67 |
68 | {isLoadingDelete ?
69 |
74 |
75 | }
76 |
77 | )
78 | }
79 |
80 | export default TeamMemberComponent;
--------------------------------------------------------------------------------
/src/routes/acceptInvite/index.js:
--------------------------------------------------------------------------------
1 | import { h } from "preact";
2 | import { useState } from 'preact/hooks';
3 | import { useEffect } from "react";
4 | import BASE_URL from '../../config/api/constant.js';
5 | import axios from "axios";
6 | import style from './style.css';
7 |
8 | import SuccessPage from '../../components/successPage/index.js';
9 | import InvalidPage from '../../components/invalidPage/index.js';
10 | import LoadingPage from '../../components/loadingPage/index.js';
11 | import { Link } from "preact-router";
12 | import { Button } from "@chakra-ui/react";
13 |
14 | const AcceptInvite = () => {
15 | const paramInviteToken = new URLSearchParams(window.location.search).get('key')
16 | const [inviteToken, setInviteToken] = useState(null)
17 | const [response, setResponse] = useState({})
18 | const [isLoading, setIsLoading] = useState(true)
19 |
20 | if (paramInviteToken){
21 | setInviteToken(paramInviteToken);
22 | }
23 |
24 | useEffect(() => {
25 | if (inviteToken != null) {
26 | const data = {
27 | key: inviteToken,
28 | }
29 | axios.post(`${BASE_URL}/invite-member/accept/`, data)
30 | .then(() => {
31 | setResponse({
32 | success: true
33 | })
34 | setIsLoading(false)
35 | })
36 | .catch(() => {
37 | setResponse({
38 | success: false
39 | })
40 | setIsLoading(false)
41 | })
42 | }
43 |
44 | }, [inviteToken])
45 |
46 | return (
47 | {!paramInviteToken ?
48 |
65 | Back to login page
66 |
67 |
68 | }
69 |
)
70 | }
71 |
72 | export default AcceptInvite;
--------------------------------------------------------------------------------
/tests/routes/verifyUser/verifyUser.test.js:
--------------------------------------------------------------------------------
1 | import { h } from 'preact';
2 | import { screen, waitFor, render } from '@testing-library/preact';
3 | import * as axios from 'axios';
4 | import { getCurrentUrl, route } from 'preact-router';
5 | import App from '../../../src/components/app.js';
6 |
7 | jest.mock("axios");
8 |
9 | describe("Test Verify User", () => {
10 |
11 | test('when processing data then show loader', async() => {
12 | axios.post.mockImplementation(() =>
13 | new Promise((resolve) => {
14 | setTimeout(()=> resolve({
15 | status: 200,
16 | response: {
17 | data: {
18 | success: true
19 | }
20 | }
21 | }), 3000)
22 | })
23 | )
24 |
25 | render(
33 |
34 | {hasLabel &&
35 | {title} }
37 |
38 |
40 | Selected:
41 |
42 |
43 |
44 |
46 |
47 |
69 | {description}
70 |
71 |
72 |
73 | {errors[id] && errors[id].message}
74 |
75 |
76 | );
77 |
78 | }
79 |
80 | export default FileInput;
--------------------------------------------------------------------------------
/src/components/chart/response_time_chart/index.js:
--------------------------------------------------------------------------------
1 | import { createRef, h } from 'preact';
2 | import { useEffect, useState } from 'preact/hooks';
3 | import Chart from 'chart.js/auto';
4 | import "chartjs-adapter-date-fns";
5 | import ChartConfig from '../ChartConfig';
6 |
7 | const ResponseTimeChart = ({response_time, stepSizeInSecond}) => {
8 | const [chart, setChart] = useState(null);
9 |
10 | if (response_time == undefined) {
11 | return (
)
12 | }
13 |
14 | const parseISODateToChart = (isoDate) => {
15 | const date = new Date(isoDate);
16 | const year = date.getFullYear();
17 | const month = date.getMonth() + 1;
18 | const dt = date.getDate();
19 | const hour = date.getHours();
20 | const minute =date.getMinutes();
21 |
22 | return `${year}-${month.toString().padStart(2,'0')}-${dt.toString().padStart(2, '0')} ${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
23 | }
24 |
25 |
26 | function responseTimeList(response_time) {
27 | const listOfNumber = []
28 | response_time.forEach(dict => {
29 | if (dict.avg === 0) {
30 | listOfNumber.push({
31 | x: parseISODateToChart(dict.start_time),
32 | y: -1,
33 | })
34 | } else {
35 | listOfNumber.push({
36 | x: parseISODateToChart(dict.start_time),
37 | y: dict.avg,
38 | })
39 | }
40 | });
41 | return listOfNumber
42 | }
43 |
44 | const chartRef = createRef();
45 |
46 | useEffect(() => {
47 | const ctx = chartRef.current.getContext("2d");
48 |
49 | if (chart != null) { chart.destroy() }
50 |
51 | const data = responseTimeList(response_time)
52 | const labels = data.slice()
53 |
54 | const colors=[];
55 | for (let i=0; i < data.length; i++) {
56 | labels[i] = '';
57 | if (data[i].y === -1) {
58 | colors[i] = "grey";
59 | data[i].y += 1;
60 | labels[i] = "No Data";
61 | } else {
62 | colors[i] = "#36CB72";
63 | }
64 | }
65 |
66 | const y_scale_config = {
67 | beginAtZero: true,
68 | ticks: {
69 | callback(value) {
70 | return `${value} ms`;
71 | }
72 | }
73 | }
74 |
75 | const xScaleConfig = {
76 | min: parseISODateToChart(response_time[0].start_time),
77 | max: parseISODateToChart(response_time[response_time.length - 1].start_time),
78 | type: 'time',
79 | time: {
80 | unit: 'second',
81 | stepSize: stepSizeInSecond,
82 | displayFormats: {
83 | minute: 'HH:mm aaa',
84 | second: 'HH:mm aaa',
85 | hour: 'HH:mm aaa'
86 | }
87 | }
88 | }
89 |
90 | const tooltipConfig = {
91 | callbacks: {
92 | title: (context) => {
93 | return labels[context[0].dataIndex];
94 | }
95 | }
96 | }
97 |
98 | const responseTimeChart = new Chart(ctx, ChartConfig("Response Time", labels, data, colors, xScaleConfig, y_scale_config, tooltipConfig))
99 |
100 | setChart(responseTimeChart);
101 | }, [response_time])
102 |
103 | return (
104 |
2 |
6 |
--------------------------------------------------------------------------------
/src/components/chart/success_rate_percentage_chart/index.js:
--------------------------------------------------------------------------------
1 | import { createRef, h } from 'preact';
2 | import { useEffect, useState } from 'preact/hooks';
3 | import Chart from 'chart.js/auto';
4 | import "chartjs-adapter-date-fns";
5 | import ChartConfig from '../ChartConfig'
6 |
7 | const SuccessRatePercentageChart = ({success_rate, stepSizeInSecond}) => {
8 | const [chart, setChart] = useState(null);
9 |
10 | if (success_rate == undefined) {
11 | return (
)
12 | }
13 |
14 | function successRateDictToPercentageNumber(dict) {
15 | if (dict.success+dict.failed === 0) {
16 | return -1;
17 | }
18 | return dict.success/(dict.success+dict.failed)
19 | }
20 |
21 | const parseISODateToChart = (isoDate) => {
22 | const date = new Date(isoDate);
23 | const year = date.getFullYear();
24 | const month = date.getMonth() + 1;
25 | const dt = date.getDate();
26 | const hour = date.getHours();
27 | const minute = date.getMinutes();
28 |
29 | return `${year}-${month.toString().padStart(2,'0')}-${dt.toString().padStart(2, '0')} ${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
30 | }
31 |
32 | function successRateList(success_rate) {
33 | const listOfNumber = []
34 | success_rate.forEach(dict => {
35 | listOfNumber.push({
36 | x: parseISODateToChart(dict.start_time),
37 | y: successRateDictToPercentageNumber(dict)
38 | });
39 | });
40 | return listOfNumber
41 | }
42 |
43 | const chartRef = createRef()
44 |
45 | useEffect(() => {
46 | const ctx = chartRef.current.getContext("2d");
47 |
48 | if (chart != null) { chart.destroy() }
49 |
50 | const data = successRateList(success_rate)
51 | const labels = data.slice()
52 |
53 | const colors=[];
54 | for (let i=0; i < data.length; i++) {
55 | labels[i] = '';
56 |
57 | if (data[i].y == 1) {
58 | colors[i] = "#36CB72";
59 | } else if (data[i].y === -1) {
60 | colors[i] = "grey";
61 | data[i].y += 1;
62 | labels[i] = "No Data"
63 | } else if (data[i].y == 0) {
64 | colors[i] = "#CB5136";
65 | } else {
66 | colors[i] = "yellow";
67 | }
68 | }
69 |
70 | const y_scale_config = {
71 | beginAtZero: true,
72 | max: 1,
73 | ticks: {
74 | format: {
75 | style: 'percent'
76 | }
77 | }
78 | }
79 |
80 | const tooltipConfig = {
81 | callbacks: {
82 | title: (context) => {
83 | return labels[context[0].dataIndex];
84 | }
85 | }
86 | }
87 |
88 | const xScaleConfig = {
89 | min: parseISODateToChart(success_rate[0].start_time),
90 | max: parseISODateToChart(success_rate[success_rate.length - 1].start_time),
91 | type: 'time',
92 | time: {
93 | unit: 'second',
94 | stepSize: stepSizeInSecond,
95 | displayFormats: {
96 | minute: 'HH:mm aaa',
97 | hour: 'HH:mm aaa',
98 | second: 'HH:mm aaa',
99 | }
100 | }
101 | }
102 | const successRateChart = new Chart(ctx, ChartConfig( "Success Rate", labels, data, colors, xScaleConfig, y_scale_config, tooltipConfig))
103 |
104 | setChart(successRateChart);
105 | }, [success_rate])
106 |
107 | return (
108 |
50 | {googleAnalyticsTag !== "" &&
51 |
52 |
59 |
}
60 |
61 |
62 |
63 |
64 |
73 |
74 |
75 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
56 |
58 |
61 |
62 |
63 | Forget Password
64 |
65 |
66 |
79 |
Error:
80 |
81 | {errl.map((e,i) => (
82 | {e}
83 | ))}
84 |
85 |
89 | {isLoading ?
91 |
92 |
93 |
94 |
95 |
96 |
97 | Get Better Insight About Your API Performance in Seconds
98 |
99 |
100 |
101 |
102 | );
103 | }
104 |
105 |
106 | export default ForgetPasswordToken;
--------------------------------------------------------------------------------
/src/routes/editTeam/index.js:
--------------------------------------------------------------------------------
1 | import { h } from 'preact';
2 | import { Button, Spinner, Text, Box, Flex, Grid, GridItem, FormLabel } from '@chakra-ui/react';
3 | import { useForm } from 'react-hook-form';
4 | import { useState, useEffect } from 'preact/hooks';
5 | import axios from 'axios';
6 | import { route } from 'preact-router';
7 | import BASE_URL from '../../config/api/constant.js';
8 | import ROUTE from '../../config/api/route.js';
9 | import { getUserToken } from '../../config/api/auth.js';
10 | import TeamEditor from '../../components/teamEditor/index.js';
11 |
12 | const EditTeam = ({id}) => {
13 | const [isLoadingEdit, setLoadingEdit] = useState(false);
14 | const {
15 | handleSubmit,
16 | register,
17 | control,
18 | formState: { errors },
19 | } = useForm({
20 | defaultValues: {
21 | logo: null,
22 | }
23 | });
24 |
25 | const [currentTeam, setCurrentTeam] = useState()
26 |
27 | useEffect(()=>{
28 | axios.get(`${BASE_URL}/team-management/current/`, {
29 | headers: {
30 | Authorization:`Token ${getUserToken()}`
31 | }
32 | }).then((response)=>{
33 | setCurrentTeam(response.data)
34 | })
35 | },[])
36 |
37 |
38 | const onSubmit = (data) => {
39 | setLoadingEdit(true);
40 | let formData = new FormData()
41 | formData.append('description', data.description)
42 |
43 | if (data.logo) {
44 | formData.append('logo', data.logo)
45 | }
46 |
47 | axios.put(`${BASE_URL}/team-management/${id}/`, formData, {
48 | headers: {
49 | 'Content-Type': 'multipart/form-data',
50 | 'Authorization':`Token ${getUserToken()}`
51 | }
52 | }).then(()=>{
53 | route(ROUTE.TEAM_MANAGEMENT + '/current');
54 | setLoadingEdit(false)
55 | })
56 |
57 | };
58 |
59 | return (
60 |
61 |
67 | {currentTeam != undefined &&
68 |
69 |
70 |
71 | Edit New Team
72 |
73 |
74 |
75 |
76 | Team Name
77 |
78 | {currentTeam?.name}
79 |
80 |
92 |
93 |
97 |
98 | {isLoadingEdit ?
100 |
101 |
102 |
103 | }
104 |
105 |
106 | );
107 |
108 | }
109 |
110 |
111 | export default EditTeam;
--------------------------------------------------------------------------------
/src/routes/createTeam/index.js:
--------------------------------------------------------------------------------
1 | import { h } from 'preact';
2 | import { Button, Spinner, Text, Box, Flex, Grid, GridItem } from '@chakra-ui/react';
3 | import { useForm } from 'react-hook-form';
4 | import { useState } from 'preact/hooks';
5 | import axios from 'axios';
6 | import { route } from 'preact-router';
7 |
8 | import TextInput from '../../components/forms/textinput/index.js';
9 | import TeamEditor from '../../components/teamEditor/index.js';
10 | import BASE_URL from '../../config/api/constant.js';
11 | import ROUTE from '../../config/api/route.js';
12 | import { getUserToken } from '../../config/api/auth.js';
13 |
14 | const CreateTeam = () => {
15 | const [isLoadingCreate, setLoadingCreate] = useState(false);
16 |
17 | const {
18 | handleSubmit,
19 | register,
20 | control,
21 | formState: { errors },
22 | } = useForm({
23 | defaultValues: {
24 | name: "",
25 | description: "",
26 | logo: null,
27 | }
28 | });
29 |
30 | const onSubmit = (data) => {
31 | setLoadingCreate(true);
32 | let formData = new FormData()
33 | formData.append('name', data.name)
34 | formData.append('description', data.description)
35 | if (data.logo) {
36 | formData.append('logo', data.logo)
37 | }
38 |
39 | axios.post(`${BASE_URL}/team-management/`, formData, {
40 | headers: {
41 | 'Content-Type': 'multipart/form-data',
42 | 'Authorization':`Token ${getUserToken()}`
43 | }
44 | }).then(()=>{
45 | route(`${ROUTE.TEAM_MANAGEMENT}/current`);
46 | setLoadingCreate(false);
47 | window.location.reload();
48 | })
49 | };
50 |
51 | return (
52 |
53 |
59 |
60 |
61 |
62 |
63 | Create New Team
64 |
65 |
66 |
67 |
79 |
89 |
90 |
92 |
93 | {isLoadingCreate ?
95 |
96 |
97 |
98 |
99 |
100 |
101 | );
102 |
103 | }
104 |
105 |
106 | export default CreateTeam;
--------------------------------------------------------------------------------
/tests/routes/createTeam/createTeam.test.js:
--------------------------------------------------------------------------------
1 | import { h } from 'preact';
2 | import { render, waitFor, screen } from '@testing-library/preact';
3 | import CreateTeam from '../../../src/routes/createTeam/index.js';
4 | import userEvent from '@testing-library/user-event'
5 | import * as axios from 'axios';
6 |
7 | jest.mock('axios')
8 |
9 | describe('Test input', () => {
10 | test('When user doesnt fill the team name, then error raises', async () => {
11 | render(
40 |
41 | Status Page
42 |
43 | {isLoading ?
44 |
45 | :
46 | (monitor.length != 0) ?
47 |
48 | Bar chart is calculated based on the last 24 hours where each bar block represents 1 hour
49 |
50 |
51 |
52 | : 100% Success rate
53 |
54 |
55 |
56 | : 1-99% Success rate
57 |
58 |
59 |
60 | : 0% Success rate
61 |
62 |
63 |
64 | : No data
65 |
66 |
67 |
70 | All API endpoint(s) are healthy!
71 |
72 | :
73 |
74 | Some API endpoint(s) are not healthy
75 | Your experience may be affected
76 |
77 | }
78 |
79 | {monitor.map((val, idx) => (
80 |
81 |
{val.name}
82 |
83 | {val.success_rate_category.map((hour, idx)=>(
84 |
: No data }
87 |
88 |
89 |
24 hours ago
90 |
91 | ))
92 | }
93 |
95 | :
96 | No data
97 | }
98 |
99 | { errorMessage === "" ?
: {errorMessage} }
100 |
101 |
102 | Powered by
103 |
107 |
108 | )
109 | }
110 |
111 | export default StatusPageDashboard;
--------------------------------------------------------------------------------
/src/assets/fonts/Open_Sans/OFL.txt:
--------------------------------------------------------------------------------
1 | Copyright 2020 The Open Sans Project Authors (https://github.com/googlefonts/opensans)
2 |
3 | This Font Software is licensed under the SIL Open Font License, Version 1.1.
4 | This license is copied below, and is also available with a FAQ at:
5 | http://scripts.sil.org/OFL
6 |
7 |
8 | -----------------------------------------------------------
9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
10 | -----------------------------------------------------------
11 |
12 | PREAMBLE
13 | The goals of the Open Font License (OFL) are to stimulate worldwide
14 | development of collaborative font projects, to support the font creation
15 | efforts of academic and linguistic communities, and to provide a free and
16 | open framework in which fonts may be shared and improved in partnership
17 | with others.
18 |
19 | The OFL allows the licensed fonts to be used, studied, modified and
20 | redistributed freely as long as they are not sold by themselves. The
21 | fonts, including any derivative works, can be bundled, embedded,
22 | redistributed and/or sold with any software provided that any reserved
23 | names are not used by derivative works. The fonts and derivatives,
24 | however, cannot be released under any other type of license. The
25 | requirement for fonts to remain under this license does not apply
26 | to any document created using the fonts or their derivatives.
27 |
28 | DEFINITIONS
29 | "Font Software" refers to the set of files released by the Copyright
30 | Holder(s) under this license and clearly marked as such. This may
31 | include source files, build scripts and documentation.
32 |
33 | "Reserved Font Name" refers to any names specified as such after the
34 | copyright statement(s).
35 |
36 | "Original Version" refers to the collection of Font Software components as
37 | distributed by the Copyright Holder(s).
38 |
39 | "Modified Version" refers to any derivative made by adding to, deleting,
40 | or substituting -- in part or in whole -- any of the components of the
41 | Original Version, by changing formats or by porting the Font Software to a
42 | new environment.
43 |
44 | "Author" refers to any designer, engineer, programmer, technical
45 | writer or other person who contributed to the Font Software.
46 |
47 | PERMISSION & CONDITIONS
48 | Permission is hereby granted, free of charge, to any person obtaining
49 | a copy of the Font Software, to use, study, copy, merge, embed, modify,
50 | redistribute, and sell modified and unmodified copies of the Font
51 | Software, subject to the following conditions:
52 |
53 | 1) Neither the Font Software nor any of its individual components,
54 | in Original or Modified Versions, may be sold by itself.
55 |
56 | 2) Original or Modified Versions of the Font Software may be bundled,
57 | redistributed and/or sold with any software, provided that each copy
58 | contains the above copyright notice and this license. These can be
59 | included either as stand-alone text files, human-readable headers or
60 | in the appropriate machine-readable metadata fields within text or
61 | binary files as long as those fields can be easily viewed by the user.
62 |
63 | 3) No Modified Version of the Font Software may use the Reserved Font
64 | Name(s) unless explicit written permission is granted by the corresponding
65 | Copyright Holder. This restriction only applies to the primary font name as
66 | presented to the users.
67 |
68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
69 | Software shall not be used to promote, endorse or advertise any
70 | Modified Version, except to acknowledge the contribution(s) of the
71 | Copyright Holder(s) and the Author(s) or with their explicit written
72 | permission.
73 |
74 | 5) The Font Software, modified or unmodified, in part or in whole,
75 | must be distributed entirely under this license, and must not be
76 | distributed under any other license. The requirement for fonts to
77 | remain under this license does not apply to any document created
78 | using the Font Software.
79 |
80 | TERMINATION
81 | This license becomes null and void if any of the above conditions are
82 | not met.
83 |
84 | DISCLAIMER
85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
93 | OTHER DEALINGS IN THE FONT SOFTWARE.
94 |
--------------------------------------------------------------------------------
/src/routes/forgetPassword/index.js:
--------------------------------------------------------------------------------
1 | import { h } from 'preact';
2 | import TextInput from '../../components/forms/textinput/index.js';
3 | import { Button, Spinner, Text,Box, Flex, Grid, GridItem } from '@chakra-ui/react';
4 | import { useForm } from 'react-hook-form';
5 | import axios from 'axios';
6 | import BASE_URL from '../../config/api/constant.js';
7 | import { useState } from 'preact/hooks';
8 | import { route } from 'preact-router';
9 | import ROUTE from '../../config/api/route.js';
10 |
11 | const ForgetPassword = ()=>{
12 | const [isLoading, setIsLoading] = useState(false)
13 |
14 | const {
15 | handleSubmit,
16 | register,
17 | formState: { errors },
18 | } = useForm();
19 |
20 | const [responseMessage, setResponseMessage] = useState('')
21 | const [errorMessage, setErrorMessage] = useState('')
22 |
23 | const onSubmit = async (data) => {
24 | setIsLoading(true);
25 | setErrorMessage('');
26 | setResponseMessage('');
27 | try {
28 | await axios.post(`${BASE_URL}/forget-password/token/`, data)
29 | .then(() => {
30 | setResponseMessage('Please check your email and follow instruction on the email')
31 | setIsLoading(false)
32 | })
33 | } catch(error) {
34 | if (error.response.data.error) {
35 | setErrorMessage(error['response']['data']['error'])
36 | } else if (error.response.data.email) {
37 | setErrorMessage(error['response']['data']['email'][0])
38 | } else {
39 | setErrorMessage('We have encountered an error. Please contact our team and try again')
40 | }
41 | setIsLoading(false)
42 | }
43 | };
44 | return (
45 |
51 |
53 |
56 |
57 |
58 | Forget Password
59 |
60 |
61 | {responseMessage} }
74 |
75 | {errorMessage.length != 0 && (
76 | Error: {errorMessage}
78 |
79 | )}
80 |
83 | {isLoading ?
85 |
87 | route(ROUTE.LOGIN)} color='#4B8F8C' style={{cursor:'pointer', textDecoration: 'underline'}}>Login with your account
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 | Get Better Insight About Your API Performance in Seconds
97 |
98 |
99 |
100 |
101 | );
102 |
103 |
104 |
105 | }
106 |
107 |
108 | export default ForgetPassword;
--------------------------------------------------------------------------------
/tests/routes/forgetPasswordToken/forgetPasswordToken.test.js:
--------------------------------------------------------------------------------
1 | import { h } from 'preact';
2 | import { screen, waitFor, render } from '@testing-library/preact';
3 | import * as axios from 'axios';
4 | import { getCurrentUrl, route } from 'preact-router';
5 | import App from '../../../src/components/app.js';
6 | import userEvent from '@testing-library/user-event'
7 | import { deleteUserToken } from '../../../src/config/api/auth.js';
8 |
9 | jest.mock("axios");
10 |
11 | describe('Test Change Password', () => {
12 | test('try to change password', async () => {
13 | deleteUserToken()
14 | let response = {
15 | success: true
16 | }
17 | axios.post.mockImplementation(() => Promise.resolve({ data: response}));
18 |
19 | render(
84 |
85 |
86 | {detail.name}
87 |
88 |
90 | route(`/${id}/edit/`)}>Edit
91 | {setDeletePopup(true)}}>
92 |
: 'Yes'}
99 | popupOpen={deletePopup}
100 | setPopupOpen={setDeletePopup}
101 | onSubmit={onDelete}
102 | buttonRightColor='red' />
103 |
105 |
106 |
107 |
108 |
109 |
Request URL
110 |
{detail.url}
111 |
112 |
113 |
Schedule
114 |
{detail.schedule}
115 |
116 |
117 |
118 |
119 |
120 | {options.map(({ label, value }) => (
121 |
122 | {label}
123 |
124 | ))}
125 |
126 |
127 | {isLoading ?
128 |
129 | :
130 |
131 |
132 |
136 |
137 |
141 |
142 | }
143 |
144 |
52 |
53 | {isLoadingStats ?
54 |
55 | :
56 |
57 |
58 |
62 |
63 |
67 |
68 | }
69 |
70 |
71 |
72 |
API Monitors
73 |
75 | Create New
76 |
77 |
78 |
79 |
80 | {(monitor.length != 0)?
81 |
82 |
83 |
84 |
100% Success rate
85 |
86 |
87 |
88 |
1-99% Success rate
89 |
90 |
91 |
92 |
0% Success rate
93 |
94 |
98 |
99 | :
100 |
101 | }
102 |
103 | {isLoadingMonitor ?
104 |
105 | :
106 |
107 | {(monitor.length != 0 && !isLoadingMonitor) ?
108 |
109 | API Name
110 | Path URL
111 | Success Rate
112 | Response Time (Avg)
113 | Success Rate History (24h)
114 |
115 |
116 | :
117 | There is no monitor. You can click green button "Create New" in the middle right side
118 | }
119 |
120 | {monitor.map((val)=>(
121 |
122 | {val.name}
123 | {val.url}
124 | {val.success_rate}%
125 | {val.avg_response_time} ms
126 |
127 |
128 | {val.success_rate_history.map((history, idx)=>(
129 |
132 | Last checked: {val.last_result ? moment(val.last_result.execution_time).fromNow() : "-"}
133 |
134 |
135 |
139 |
140 | ))}
141 |
142 | }
143 |
73 |
75 |
78 |
79 |
80 | Register
81 |
82 |
83 |
121 |
Error:
122 |
123 | {errl.map((e,i) => (
124 | {e}
125 | ))}
126 |
127 |
131 | {isLoading ?
133 |
134 |
135 | Already have an account?
137 |
138 | route(ROUTE.LOGIN)} color='#4B8F8C'>Sign in
139 |
140 |
141 |
142 |
143 |
144 |
145 | Get Better Insight About Your API Performance in Seconds
146 |
147 |
148 |
149 |
150 | );
151 | }
152 |
153 | export default Register;
--------------------------------------------------------------------------------