Skip to content

feat(frontend): update metric chart logic #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mcollina merged 1 commit into from
Mar 24, 2025
Merged

feat(frontend): update metric chart logic #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,539 changes: 195 additions & 1,344 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion web/backend/test/plugins/metrics.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ test('metrics with runtime', async (t) => {
await startWatt(t)
const server = await getServer(t)

await wait(1200)
await wait(1500)
const metricsKeys = Object.keys(server.mappedMetrics)
const [pid] = metricsKeys
const servicePID = parseInt(pid)
Expand Down
4 changes: 0 additions & 4 deletions web/frontend/css.d.ts
View file
Open in desktop

This file was deleted.

5 changes: 5 additions & 0 deletions web/frontend/eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
'use strict'

module.exports = require('neostandard')({
ignores: ['dist', 'node_modules', 'public'], ts: true
})
120 changes: 63 additions & 57 deletions web/frontend/platformatic-ui.d.ts → web/frontend/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
// FIXME: add types directly on the plt module
declare module '*.module.css' {
const classes: { [key: string]: string }
export default classes
}

// FIXME: add following types directly on the `@platformatic/ui-components` package
declare module '@platformatic/ui-components' {
import { ReactElement, ComponentType } from 'react';
import { ComponentType } from 'react'

export interface VerticalSeparatorProps {
color?: string;
Expand All @@ -11,14 +16,14 @@ declare module '@platformatic/ui-components' {
marginLeft?: string;
marginRight?: string;
}
export const Checkbox: ComponentType<CheckboxProps>;
export const BorderedBox: ComponentType<BorderedBoxProps>;
export const Button: ComponentType<ButtonProps>;
export const HorizontalSeparator: ComponentType<HorizontalSeparatorProps>;
export const LoadingSpinnerV2: ComponentType<LoadingSpinnerV2Props>;
export const Tooltip: ComponentType<TooltipProps>;
export const VerticalSeparator: ComponentType<VerticalSeparatorProps>;
export const TooltipAbsolute: ComponentType<TooltipProps>;
export const Checkbox: ComponentType<CheckboxProps>
export const BorderedBox: ComponentType<BorderedBoxProps>
export const Button: ComponentType<ButtonProps>
export const HorizontalSeparator: ComponentType<HorizontalSeparatorProps>
export const LoadingSpinnerV2: ComponentType<LoadingSpinnerV2Props>
export const Tooltip: ComponentType<TooltipProps>
export const VerticalSeparator: ComponentType<VerticalSeparatorProps>
export const TooltipAbsolute: ComponentType<TooltipProps>

export interface PlatformaticIconProps {
iconName: string;
Expand All @@ -43,70 +48,71 @@ declare module '@platformatic/ui-components' {
export interface IconsType {
CircleStopIcon: ComponentType<IconProps>;
RunningIcon: ComponentType<IconProps>;
[key: string]: string;
}

export const PlatformaticIcon: ComponentType<PlatformaticIconProps>;
export const CopyAndPaste: ComponentType<CopyAndPasteProps>;
export const Icons: IconsType;
export const PlatformaticIcon: ComponentType<PlatformaticIconProps>
export const CopyAndPaste: ComponentType<CopyAndPasteProps>
export const Icons: IconsType
}

declare module '@platformatic/ui-components/src/components/icons' {
import { ComponentType } from 'react';
import { ComponentType } from 'react'

interface IconProps {
size?: string;
color?: string;
addImportantToColor?: boolean;
className?: string;
}

const AlertIcon: ComponentType<IconProps>;
const ArrowUpIcon: ComponentType<IconProps>;
const ArrowDownIcon: ComponentType<IconProps>;
const CircleCheckMarkIcon: ComponentType<IconProps>;
const CLIIcon: ComponentType<IconProps>;
const AlertIcon: ComponentType<IconProps>
const ArrowUpIcon: ComponentType<IconProps>
const ArrowDownIcon: ComponentType<IconProps>
const CircleCheckMarkIcon: ComponentType<IconProps>
const CLIIcon: ComponentType<IconProps>

const Icons: {
AlertIcon: ComponentType<IconProps>;
ArrowUpIcon: ComponentType<IconProps>;
ArrowDownIcon: ComponentType<IconProps>;
CircleCheckMarkIcon: ComponentType<IconProps>;
CLIIcon: ComponentType<IconProps>;
[key: string]: ComponentType<IconProps>;
};
export default Icons;
}

export default Icons
}

declare module '@platformatic/ui-components/src/components/constants' {
export const WHITE: string;
export const SMALL: string;
export const POSITION_END: string;
export const RICH_BLACK: string;
export const BLACK_RUSSIAN: string;
export const TRANSPARENT: string;
export const MARGIN_0: string;
export const OPACITY_15: string;
export const OPACITY_30: string;
export const OPACITY_100: string;
export const WARNING_YELLOW: string;
export const ANTI_FLASH_WHITE: string;
export const DULLS_BACKGROUND_COLOR: string;
export const ERROR_RED: string;
export const LARGE: string;
export const MEDIUM: string;
export const MAIN_GREEN: string;
export const BOX_SHADOW: string;
export const UNDERLINE: string;
export const MAIN_DARK_BLUE: string;
export const DIRECTION_RIGHT: string;
export const POSITION_CENTER: string;
export const TINY: string;
export const WHITE: string
export const SMALL: string
export const POSITION_END: string
export const RICH_BLACK: string
export const BLACK_RUSSIAN: string
export const TRANSPARENT: string
export const MARGIN_0: string
export const OPACITY_15: string
export const OPACITY_30: string
export const OPACITY_100: string
export const WARNING_YELLOW: string
export const ANTI_FLASH_WHITE: string
export const DULLS_BACKGROUND_COLOR: string
export const ERROR_RED: string
export const LARGE: string
export const MEDIUM: string
export const MAIN_GREEN: string
export const BOX_SHADOW: string
export const UNDERLINE: string
export const MAIN_DARK_BLUE: string
export const DIRECTION_RIGHT: string
export const POSITION_CENTER: string
export const TINY: string
}

declare module '@platformatic/ui-components/src/components/forms' {
import { ComponentType } from 'react';
import { ComponentType } from 'react'

interface ToggleSwitchProps {
label?: string;
labelClassName?: string;
Expand All @@ -115,7 +121,7 @@ declare module '@platformatic/ui-components/src/components/forms' {
checked: boolean;
size?: string;
}

interface InputProps {
label?: string;
placeholder?: string;
Expand All @@ -127,7 +133,7 @@ declare module '@platformatic/ui-components/src/components/forms' {
className?: string;
disabled?: boolean;
}

interface SelectProps {
label?: string;
options: Array<{ label: string; value: string }>;
Expand All @@ -139,15 +145,15 @@ declare module '@platformatic/ui-components/src/components/forms' {
className?: string;
disabled?: boolean;
}

interface CheckboxProps {
label: string;
checked: boolean;
onChange: () => void;
name: string;
disabled?: boolean;
}

interface RadioButtonProps {
label: string;
value: string;
Expand All @@ -156,14 +162,14 @@ declare module '@platformatic/ui-components/src/components/forms' {
name: string;
disabled?: boolean;
}

const Forms: {
ToggleSwitch: ComponentType<ToggleSwitchProps>;
Input: ComponentType<InputProps>;
Select: ComponentType<SelectProps>;
Checkbox: ComponentType<CheckboxProps>;
RadioButton: ComponentType<RadioButtonProps>;
};
export default Forms;
}

export default Forms
}
16 changes: 4 additions & 12 deletions web/frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,15 @@
"private": true,
"version": "0.0.0",
"scripts": {
"lint": "standard . | snazzy",
"fix": "standard --fix .",
"lint": "eslint",
"fix": "eslint --fix",
"dev": "vite",
"build": "tsc && vite build",
"clean": "rm -rf dist tsconfig.tsbuildinfo tsconfig.node.tsbuildinfo vite.config.js",
"preview": "vite preview",
"start": "platformatic start",
"test": "npm run lint && vitest run"
},
"type": "module",
"devDependencies": {
"@platformatic/ui-components": "^0.13.1",
"@types/d3": "^7.4.3",
Expand All @@ -24,10 +23,9 @@
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-router-dom": "^7.0.0",
"react-use-websocket": "^4.11.1",
"snazzy": "^9.0.0",
"source-map-support": "^0.5.21",
"standard": "^17.1.2",
"eslint": "^9.17.0",
"neostandard": "^0.12.0",
"tailwindcss": "^3.4.15",
"use-error-boundary": "^2.0.6",
"vite": "^5.4.11",
Expand All @@ -36,11 +34,5 @@
},
"dependencies": {
"@platformatic/vite": "^2.53.1"
},
"standard": {
"ignore": [
"dist",
"public/*.js"
]
}
}
4 changes: 0 additions & 4 deletions web/frontend/public/icons/entrypoint.svg
View file
Open in desktop

This file was deleted.

8 changes: 4 additions & 4 deletions web/frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ interface ErrorBoundaryResult {
didCatch: boolean;
}

export default function App(): React.ReactElement {
export default function App (): React.ReactElement {
const globalState = useAdminStore()
const { setCurrentWindowWidth } = globalState
const [innerLoading, setInnerLoading] = useState(false)
Expand All @@ -42,7 +42,7 @@ export default function App(): React.ReactElement {
})

useEffect(() => {
async function getUserLocal(): Promise<void> {
async function getUserLocal (): Promise<void> {
setInnerLoading(false)
}
getUserLocal()
Expand All @@ -62,7 +62,7 @@ export default function App(): React.ReactElement {
}
}, [])

function handleDismiss(): void {
function handleDismiss (): void {
setShowErrorComponent(false)
}

Expand Down Expand Up @@ -130,4 +130,4 @@ export default function App(): React.ReactElement {
</HashRouter>
</ErrorBoundary>
)
}
}
2 changes: 1 addition & 1 deletion web/frontend/src/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const getApiApplication = async () => {
return { id, url, name, pltVersion, lastStarted }
}

return {}
return { id: 0, lastStarted: '', name: '', url: '' }
}

// This is to avoid calling npm registry every time we run the method below
Expand Down
Loading
Loading