From 3c353d2594ae1a9b79dd857059ded44d612469a1 Mon Sep 17 00:00:00 2001 From: Piyush Kumar Date: Mon, 5 Feb 2024 16:05:47 +0530 Subject: [PATCH 01/34] remove namesapce from env creation --- web/src/apps/console/page-components/new-scope.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/web/src/apps/console/page-components/new-scope.tsx b/web/src/apps/console/page-components/new-scope.tsx index a7acf6147..6f49f79f9 100644 --- a/web/src/apps/console/page-components/new-scope.tsx +++ b/web/src/apps/console/page-components/new-scope.tsx @@ -57,7 +57,6 @@ const HandleScope = ({ show, setShow }: IDialog & {}) => { env: { metadata: { name: val.name, - namespace: parseTargetNs(project), }, displayName: val.displayName, spec: { From c0eacd8612ecffeda09417d58231a87d84e82857 Mon Sep 17 00:00:00 2001 From: Abdhesh Nayak Date: Tue, 6 Feb 2024 12:05:45 +0530 Subject: [PATCH 02/34] :art: Added apex chart for the observability --- web/package.json | 3 +- web/pnpm-lock.yaml | 73 +++++++++++ .../components/charts/charts-client.tsx | 47 ++++++++ .../apps/console/components/charts/charts.tsx | 54 +++++++++ .../app+/$app+/overview/route.tsx | 114 +++++++++++++++++- 5 files changed, 288 insertions(+), 3 deletions(-) create mode 100644 web/src/apps/console/components/charts/charts-client.tsx create mode 100644 web/src/apps/console/components/charts/charts.tsx diff --git a/web/package.json b/web/package.json index 9e44a406a..2d6476fbc 100644 --- a/web/package.json +++ b/web/package.json @@ -1,5 +1,5 @@ { - "name": "kloudlite.github.io", + "name": "kloudlite.github.io", "private": true, "version": "0.0.0", "homepage": "https://kloudlite.github.io", @@ -64,6 +64,7 @@ "@remix-run/react": "^1.19.3", "@uiw/react-codemirror": "^4.21.21", "anser": "^2.1.1", + "apexcharts": "^3.45.2", "aria-hidden": "^1.2.3", "axios": "^1.6.3", "classnames": "^2.5.1", diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index a6d305692..325135fa9 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -131,6 +131,9 @@ dependencies: anser: specifier: ^2.1.1 version: 2.1.1 + apexcharts: + specifier: ^3.45.2 + version: 3.45.2 aria-hidden: specifier: ^1.2.3 version: 1.2.3 @@ -4505,6 +4508,10 @@ packages: /@web3-storage/multipart-parser@1.0.0: resolution: {integrity: sha512-BEO6al7BYqcnfX15W2cnGR+Q566ACXAT9UQykORCWW80lmkpWsnEob6zJS1ZVBKsSJC8+7vJkHwlp+lXG1UCdw==} + /@yr/monotone-cubic-spline@1.0.3: + resolution: {integrity: sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==} + dev: false + /@zxing/text-encoding@0.9.0: resolution: {integrity: sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==} requiresBuild: true @@ -4624,6 +4631,18 @@ packages: picomatch: 2.3.1 dev: true + /apexcharts@3.45.2: + resolution: {integrity: sha512-PpuM4sJWy70sUh5U1IFn1m1p45MdHSChLUNnqEoUUUHSU2IHZugFrsVNhov1S8Q0cvfdrCRCvdBtHGSs6PSAWQ==} + dependencies: + '@yr/monotone-cubic-spline': 1.0.3 + svg.draggable.js: 2.2.2 + svg.easing.js: 2.0.0 + svg.filter.js: 2.0.2 + svg.pathmorphing.js: 0.1.3 + svg.resize.js: 1.4.3 + svg.select.js: 3.0.1 + dev: false + /arg@4.1.3: resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==} dev: true @@ -10062,6 +10081,60 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + /svg.draggable.js@2.2.2: + resolution: {integrity: sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==} + engines: {node: '>= 0.8.0'} + dependencies: + svg.js: 2.7.1 + dev: false + + /svg.easing.js@2.0.0: + resolution: {integrity: sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==} + engines: {node: '>= 0.8.0'} + dependencies: + svg.js: 2.7.1 + dev: false + + /svg.filter.js@2.0.2: + resolution: {integrity: sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==} + engines: {node: '>= 0.8.0'} + dependencies: + svg.js: 2.7.1 + dev: false + + /svg.js@2.7.1: + resolution: {integrity: sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==} + dev: false + + /svg.pathmorphing.js@0.1.3: + resolution: {integrity: sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==} + engines: {node: '>= 0.8.0'} + dependencies: + svg.js: 2.7.1 + dev: false + + /svg.resize.js@1.4.3: + resolution: {integrity: sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==} + engines: {node: '>= 0.8.0'} + dependencies: + svg.js: 2.7.1 + svg.select.js: 2.1.2 + dev: false + + /svg.select.js@2.1.2: + resolution: {integrity: sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==} + engines: {node: '>= 0.8.0'} + dependencies: + svg.js: 2.7.1 + dev: false + + /svg.select.js@3.0.1: + resolution: {integrity: sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==} + engines: {node: '>= 0.8.0'} + dependencies: + svg.js: 2.7.1 + dev: false + /swr@2.2.4(react@18.2.0): resolution: {integrity: sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==} peerDependencies: diff --git a/web/src/apps/console/components/charts/charts-client.tsx b/web/src/apps/console/components/charts/charts-client.tsx new file mode 100644 index 000000000..d5176231e --- /dev/null +++ b/web/src/apps/console/components/charts/charts-client.tsx @@ -0,0 +1,47 @@ +import React, { Suspense } from 'react'; +import { cn } from '~/components/utils'; +import { ChartProps } from './charts'; +import { LoadingPlaceHolder } from '../loading'; + +// @ts-ignore +const ChartsMain = React.lazy(() => import('./charts')); + +const Chart = ( + props: ChartProps & { + height?: string; + width?: string; + className?: string; + } +) => { + const { height, width, className } = props; + return ( + + + + } + > +
+ +
+ + ); +}; + +export default Chart; diff --git a/web/src/apps/console/components/charts/charts.tsx b/web/src/apps/console/components/charts/charts.tsx new file mode 100644 index 000000000..83a343cbc --- /dev/null +++ b/web/src/apps/console/components/charts/charts.tsx @@ -0,0 +1,54 @@ +/* eslint-disable react/no-unused-prop-types */ +import ApexCharts from 'apexcharts'; +import { useEffect, useRef } from 'react'; + +export interface ChartProps { + height?: string; + width?: string; + options: { + chart: { + height: number; + type: string; + }; + series: { + name: string; + data: number[]; + }[]; + dataLabels: { + enabled: boolean; + }; + stroke: { + curve: string; + }; + tooltip: { + x: { + format: string; + }; + }; + xaxis: { + type: 'category' | 'numeric' | 'logarithmic' | 'datetime'; + categories: (number | string)[]; + }; + }; +} + +const ChartServer = ({ options }: ChartProps) => { + const ref = useRef(null); + + useEffect(() => { + if (!ref.current) { + return () => {}; + } + + const chart = new ApexCharts(ref.current, options); + chart.render(); + + return () => { + chart.destroy(); + }; + }, [ref.current, options]); + + return
; +}; + +export default ChartServer; diff --git a/web/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/overview/route.tsx b/web/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/overview/route.tsx index a25b7aaa0..d8f4ec0ba 100644 --- a/web/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/overview/route.tsx +++ b/web/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/overview/route.tsx @@ -1,7 +1,117 @@ -import Wip from '~/console/components/wip'; +import { useOutletContext } from '@remix-run/react'; +import axios from 'axios'; +import { useEffect } from 'react'; +import Chart from '~/console/components/charts/charts-client'; +import { IAppContext } from '../route'; const Overview = () => { - return ; + const { app, project } = useOutletContext(); + useEffect(() => { + (async () => { + try { + const resp = await axios({ + url: `https://observe.dev.kloudlite.io/observability/metrics/memory?cluster_name=${project.clusterName}&tracking_id=${app.id}`, + method: 'GET', + withCredentials: true, + }); + + console.log(resp); + } catch (err) { + console.error(err); + } + })(); + }, []); + + return ( +
+
+ +
+
+ +
+
+ ); }; export default Overview; From 2e50d481ab0f66bcb0aef6d88c92b548fa946ee4 Mon Sep 17 00:00:00 2001 From: Abdhesh Nayak Date: Wed, 7 Feb 2024 19:27:37 +0530 Subject: [PATCH 03/34] :sparkles: Implemented overview of app, and improved logs of app. --- web/lib/app-setup/root.tsx | 10 +- .../components/charts/charts-client.tsx | 27 ++- .../apps/console/components/charts/charts.tsx | 33 +--- .../components/common-console-components.tsx | 13 +- web/src/apps/console/components/logger.tsx | 130 ++++++------ .../app+/$app+/overview/route.tsx | 185 +++++++++++------- 6 files changed, 224 insertions(+), 174 deletions(-) diff --git a/web/lib/app-setup/root.tsx b/web/lib/app-setup/root.tsx index 21abc78d5..29776665e 100644 --- a/web/lib/app-setup/root.tsx +++ b/web/lib/app-setup/root.tsx @@ -29,6 +29,7 @@ import { TopBar } from '~/components/organisms/top-bar'; import styleZenerSelect from '@oshq/react-select/index.css'; import stylesUrl from '~/design-system/index.css'; import rcss from 'react-highlightjs-logs/dist/index.css'; +import tailwindBase from '~/design-system/tailwind-base.js'; import { isDev } from '../client/helpers/log'; import { getClientEnv, getServerEnv } from '../configs/base-url.cjs'; @@ -171,15 +172,20 @@ const Root = ({
+ > + Loading... +
{/* */}