diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..07ab119 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,53 @@ +module.exports = { + env: { + browser: true, + es2021: true, + node: true, + es6: true, + jest: true, + }, + extends: ['standard', 'next/core-web-vitals', 'prettier', 'plugin:prettier/recommended'], + parser: '@babel/eslint-parser', + parserOptions: { + ecmaFeatures: { + jsx: true, + }, + sourceType: 'module', + }, + settings: { + 'import/core-modules': ['dayjs', 'dayjs/plugin/timezone', 'dayjs/plugin/utc'], + }, + rules: { + 'prettier/prettier': 'error', + 'import/first': 'error', + 'import/newline-after-import': 'error', + 'import/no-extraneous-dependencies': ['error', { devDependencies: true }], + 'import/no-duplicates': 'error', + 'react/jsx-no-useless-fragment': 'off', + 'react-hooks/exhaustive-deps': 'off', + 'no-unused-vars': [ + 'error', + { + argsIgnorePattern: '^_', + varsIgnorePattern: '^_', + ignoreRestSiblings: true, + }, + ], + 'no-restricted-syntax': [ + 'error', + { + selector: "CallExpression[callee.object.name='console'][callee.property.name!=/^(error)$/]", + message: 'Unexpected property on console object was called', + }, + ], + }, + plugins: ['prettier', 'react', 'promise'], + overrides: [ + { + files: ['**/__test__/**/*.js'], + rules: { + 'import/no-extraneous-dependencies': ['error', { devDependencies: true }], + }, + }, + ], +}; diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 0000000..009cd6b --- /dev/null +++ b/.github/pull_request_template.md @@ -0,0 +1,13 @@ +Closes Issue: # + +### Addition + +- put new additions here + +### Changes + +- put changes here + +### Fixes + +- put fixes here diff --git a/.github/workflows/publish-image.yml b/.github/workflows/publish-image.yml new file mode 100644 index 0000000..844436d --- /dev/null +++ b/.github/workflows/publish-image.yml @@ -0,0 +1,73 @@ +name: Publish zop-ui image + +on: + push: + tags: + - 'v*' + pull_request: + branches: + - main + +jobs: + prettier-and-lint: + name: 🧪 Prettier and Lint + runs-on: ubuntu-latest + + permissions: + contents: read + packages: write + + steps: + - name: Checkout Code + uses: actions/checkout@v3 + + - name: Set up Node + uses: actions/setup-node@v3 + with: + node-version: '18.x' + + - name: Install dependencies + run: | + npm install + + - name: run linter + run: | + CI=false npm run lint + + - name: run prettier + run: | + CI=false npm run prettier:check + + - name: Build + run: npm run build + + publich-image: + if: ${{ startsWith(github.ref, 'refs/tags/v')}} + name: 🔨 Build and 🐳 Dockerize + needs: prettier-and-lint + runs-on: ubuntu-latest + + permissions: + contents: read + packages: write + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Extract Release Tag + run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV + + - name: Log in to Docker Hub + uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a + with: + username: 'v4vikash' + password: ${{ secrets.DOCKER_HUB_PAT }} + + - name: Build and push Docker image + uses: docker/build-push-action@v4 + with: + push: true + context: . + file: Dockerfile + tags: zopdev/zop-api:${{ env.RELEASE_VERSION }} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d32cc78 --- /dev/null +++ b/.gitignore @@ -0,0 +1,40 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.* +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/versions + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# env files (can opt-in for committing if needed) +.env* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..6e962f8 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,30 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build +.next + +# script +*.sh + +#vscode +.vscode + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..3f2956b --- /dev/null +++ b/.prettierrc @@ -0,0 +1,10 @@ +{ + "printWidth": 100, + "tabWidth": 2, + "useTabs": false, + "semi": true, + "singleQuote": true, + "bracketSpacing": true, + "bracketSameLine": false, + "proseWrap": "always" +} diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..c425dec --- /dev/null +++ b/Dockerfile @@ -0,0 +1,20 @@ +# Stage 1: Build the application +FROM node:18-alpine + +# Create and set the working directory for the app inside the container +WORKDIR /app + +# Copy the app's source code into the container +COPY . . + +# Install dependencies +RUN npm install + +# Build the Next.js application +RUN npm run build + +# Expose the port the app will run on +EXPOSE 3000 + +# Set the default command to run when the container starts (but don't run the app yet) +CMD ["npm", "run", "dev"] \ No newline at end of file diff --git a/Queries/CloudAccount/index.js b/Queries/CloudAccount/index.js new file mode 100644 index 0000000..3fa0740 --- /dev/null +++ b/Queries/CloudAccount/index.js @@ -0,0 +1,22 @@ +import apiClient from '../../utlis/apiClient'; +import { CLOUD_ACCOUNT_ENDPOINT } from '../../utlis/apiEndpoints'; + +const url = CLOUD_ACCOUNT_ENDPOINT; + +export const getCloudAccounts = async () => { + try { + const data = await apiClient.get(url); + return data; + } catch (error) { + throw new Error(error.response?.data?.error?.message || 'Failed to fetch cloud accounts'); + } +}; + +export const addCloudAccount = async (values) => { + try { + const response = await apiClient.post(url, values); + return response; + } catch (error) { + throw new Error(error.response?.data?.error?.message || 'Failed to add cloud account'); + } +}; diff --git a/README.md b/README.md index 247eb41..b34c254 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,50 @@ -# Zop CLI UI +# ZopDev -Welcome to the Zop CLI UI project! This project provides a user interface for the Zop command-line tool. +Zop is a comprehensive tool for managing cloud infrastructure. It consists of three main components: + +1. **zop-ui**: User interface for managing and monitoring cloud resources. +2. **zop-api**: Backend API service. +3. **zop-cli**: Command-line interface for developers and admins. + +--- + +## Installation + +### Prerequisites + +- Docker installed on your system. +- Node.js version "^18.18.0 || ^19.8.0 || >= 20.0.0" is required. + +--- + +### Running Locally + +#### zop-api + +Run the following command to pull and start the Docker image for the zop-api: + +```bash + docker run -d -p 8000:8000 --name zop-api zop.dev/zop-api:v0.0.1 +``` + +#### zop-ui + +Run the following command to pull and start the Docker image for the zop-ui: + +```bash + docker run -d -p 3000:3000 -e NEXT_PUBLIC_API_BASE_URL='http://localhost:8000' --name zop-ui zop.dev/zop-ui:v0.0.1 +``` + +> **Note:** The environment variable `NEXT_PUBLIC_API_BASE_URL` is used by zop-ui to connect to the +> zop-api. Ensure that the value matches the API's running base URL. + +#### zop-cli + +Run the following command install zop-cli: + +```bash + go install zop.dev/clizop@latest +``` + +> **Note:** Set the environment variable `ZOP_API_URL`, used by zop-cli to connect to the zop-api. +> Ensure that the value matches the API's running base URL. diff --git a/components/Button/index.js b/components/Button/index.js new file mode 100644 index 0000000..d1e2a1f --- /dev/null +++ b/components/Button/index.js @@ -0,0 +1,25 @@ +const Button = ({ variant, children, className: customClasses, ...props }) => { + const variantClasses = { + primary: + 'inline-flex items-center gap-x-1.5 rounded-md bg-primary-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 ', + secondary: + 'inline-flex items-center gap-x-1.5 rounded-md bg-black/5 px-3 py-2 text-sm font-semibold text-gray-500 shadow-sm hover:bg-black/10 ', + danger: + 'inline-flex items-center gap-x-1.5 rounded-md bg-red-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-400 ', + }; + + const className = `${variantClasses[variant] || variantClasses.primary} ${ + props?.disabled && 'opacity-40 hover:bg-primary-700 pointer-events-none' + }`; + return ( + + ); +}; + +export default Button; diff --git a/components/Cards/cloudAccountCard.js b/components/Cards/cloudAccountCard.js new file mode 100644 index 0000000..535fade --- /dev/null +++ b/components/Cards/cloudAccountCard.js @@ -0,0 +1,129 @@ +import React from 'react'; +import { formatTime } from '../../utlis/helperFunc'; +import { + PROVIDER_ICON_MAPPER, + // REFRESH_STATUS, + // colourCode, +} from '../../constant'; +// import DotWithProgress from "../Loader/DotWithProgression"; +// import { LogSvg } from "../../svg/sidebar/logs"; +// import IconButton from "../FormComponent/IconButton"; +// import RefreshIcon from "../../svg/refresh"; +// import Tooltip from "../FormComponent/toolTip"; +// import { useRouter } from "next/router"; + +const CloudAccountCard = ({ + item, + view, + // handleLogsOpen, + // handleRetryStatus, + // putToProvider, +}) => { + // const router = useRouter(); + + // useEffect(() => { + // if (item?.id) { + // router.prefetch(`/cloud-accounts/${item.id}/infrastructure`); + // } + // }, [item?.id, router]); + + // const handleRetry = (e, id) => { + // e.stopPropagation(); + // handleRetryStatus(id); + // }; + + // const latestLog = (e, data) => { + // e.stopPropagation(); + // handleLogsOpen(data); + // }; + + // const handleRedirect = () => { + // router.push(`/cloud-accounts/${item?.id}/infrastructure`); + // }; + + return ( +
+
+ {PROVIDER_ICON_MAPPER?.[item?.provider]} + {item?.name} + {/* {view === "cloudAccount" && ( + +
+ {REFRESH_STATUS?.includes(item?.status) ? ( + + ) : ( + <> + + + )} +
+ + )} */} + {/* {item?.retry && ( + +
+ handleRetry(e, item?.id)} + > + + +
+ + )} */} + {/* {view === "cloudAccount" && + REFRESH_STATUS?.includes(item?.status) && + item?.clusterId?.defaultId && ( +
+ + latestLog(e, item)}> + + + +
+ )} */} +
+ +
+ {item?.providerId} + {/* + + {item?.svcGroup === 1 + ? `1 App` + : item?.svcGroup > 1 + ? `${item?.svcGroup} Apps` + : ""} + + */} +
+ +
+ Updated At{' '} + {/* + {item?.updatedByIdentifier || item?.createdByIdentifier} + */} + {formatTime(item?.updatedAt)} +
+ + {/*
+ {formatTime(item?.updatedAt)} +
*/} +
+ ); +}; + +export default CloudAccountCard; diff --git a/components/EmptyPageComponent/index.js b/components/EmptyPageComponent/index.js new file mode 100644 index 0000000..ee8103a --- /dev/null +++ b/components/EmptyPageComponent/index.js @@ -0,0 +1,29 @@ +import React from 'react'; +import Link from 'next/link'; +import { PlusCircleIcon } from '@heroicons/react/20/solid'; + +const EmptyComponent = ({ imageComponent, redirectLink, buttonTitle, title, buttonIcon }) => { + return ( +
+
+
+ {imageComponent} +

{title}

+
+ {redirectLink && ( + + + + )} +
+
+ ); +}; + +export default EmptyComponent; diff --git a/components/ErrorCatcher/ErrorCatcher.js b/components/ErrorCatcher/ErrorCatcher.js new file mode 100644 index 0000000..648e173 --- /dev/null +++ b/components/ErrorCatcher/ErrorCatcher.js @@ -0,0 +1,28 @@ +'use client'; + +import React from 'react'; + +class ErrorBoundary extends React.Component { + constructor(props) { + super(props); + this.state = { hasError: false }; + } + + static getDerivedStateFromError() { + return { hasError: true }; + } + + componentDidCatch(error, info) { + console.error('Error caught in ErrorBoundary:', error, info); + } + + render() { + if (this.state.hasError) { + return this.props.fallback ||
Something went wrong.
; + } + + return this.props.children; + } +} + +export default ErrorBoundary; diff --git a/components/ErrorComponent/index.js b/components/ErrorComponent/index.js new file mode 100644 index 0000000..ce1fae0 --- /dev/null +++ b/components/ErrorComponent/index.js @@ -0,0 +1,18 @@ +import { ExclamationCircleIcon } from '@heroicons/react/20/solid'; + +export default function ErrorComponent({ errorText, className }) { + return ( +
+
+
+
+
+

+ {errorText} +

+
+
+
+ ); +} diff --git a/components/HeaderComponents/index.js b/components/HeaderComponents/index.js new file mode 100644 index 0000000..ced5356 --- /dev/null +++ b/components/HeaderComponents/index.js @@ -0,0 +1,23 @@ +import React from 'react'; + +const HeadingComponent = ({ title, subTitle, titleAction, actions, subTitleAction }) => { + return ( +
+
+
+

{title}

+ {titleAction && titleAction} +
+ {subTitle && ( +
+ Add User with Email and Specific Role +
+ )} + {subTitleAction && <>{subTitleAction}} +
+ {actions &&
{actions}
} +
+ ); +}; + +export default HeadingComponent; diff --git a/components/Input/index.js b/components/Input/index.js new file mode 100644 index 0000000..832f2f0 --- /dev/null +++ b/components/Input/index.js @@ -0,0 +1,63 @@ +import { useEffect, useState } from 'react'; + +const Input = ({ + error, + helperText, + helperTextClass, + errorTextClass, + className, + type, + value, + name, + required, + inputProps, + endAdornment, + testExp, + errorText, + ...props +}) => { + const [internalError, setInternalError] = useState(error); + useEffect(() => { + setInternalError(error); + }, [error]); + + return ( + <> +
+ { + if (testExp && !new RegExp(testExp).test(e.target.value)) { + setInternalError(true); + } else { + setInternalError(error); + } + if (props.onChange) props.onChange(e); + }} + /> + {endAdornment &&
{endAdornment}
} +
+ {helperText != null && ( +

{helperText}  

+ )} + {internalError && errorText && ( +

{errorText}  

+ )} + + ); +}; + +export default Input; diff --git a/components/Label/index.js b/components/Label/index.js new file mode 100644 index 0000000..c1481ee --- /dev/null +++ b/components/Label/index.js @@ -0,0 +1,9 @@ +function Label({ children, className, ...props }) { + return ( + + ); +} + +export default Label; diff --git a/components/Loaders/CompletePageLoader/index.js b/components/Loaders/CompletePageLoader/index.js new file mode 100644 index 0000000..b2ddb0e --- /dev/null +++ b/components/Loaders/CompletePageLoader/index.js @@ -0,0 +1,14 @@ +import React from 'react'; +import SimpleLoader from '../SimpleLoader'; + +/** + * this function is to display loader when query is fetching + * @returns loader + */ +export default function CompleteLoader() { + return ( +
+ +
+ ); +} diff --git a/components/Loaders/SimpleLoader/index.js b/components/Loaders/SimpleLoader/index.js new file mode 100644 index 0000000..e91a36a --- /dev/null +++ b/components/Loaders/SimpleLoader/index.js @@ -0,0 +1,39 @@ +import React from 'react'; + +export default function SimpleLoader({ + size = 34, + thickness = 2, + color, + secondaryCol, + secondaryColStr = 'text-gray-200', + colorStr = 'text-primary-500', +}) { + return ( +
+
+ +
+
+ ); +} diff --git a/components/TextArea/index.js b/components/TextArea/index.js new file mode 100644 index 0000000..5dd6851 --- /dev/null +++ b/components/TextArea/index.js @@ -0,0 +1,20 @@ +function Textarea({ error, helperText, className, ...props }) { + return ( + <> +