diff --git a/apps/harness/.gitignore b/apps/harness/.gitignore
new file mode 100644
index 000000000..a547bf36d
--- /dev/null
+++ b/apps/harness/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/apps/harness/README.md b/apps/harness/README.md
new file mode 100644
index 000000000..74872fd4a
--- /dev/null
+++ b/apps/harness/README.md
@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+ languageOptions: {
+ // other options...
+ parserOptions: {
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
+ tsconfigRootDir: import.meta.dirname,
+ },
+ },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+ // Set the react version
+ settings: { react: { version: '18.3' } },
+ plugins: {
+ // Add the react plugin
+ react,
+ },
+ rules: {
+ // other rules...
+ // Enable its recommended rules
+ ...react.configs.recommended.rules,
+ ...react.configs['jsx-runtime'].rules,
+ },
+})
+```
diff --git a/apps/harness/eslint.config.js b/apps/harness/eslint.config.js
new file mode 100644
index 000000000..092408a9f
--- /dev/null
+++ b/apps/harness/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+ { ignores: ['dist'] },
+ {
+ extends: [js.configs.recommended, ...tseslint.configs.recommended],
+ files: ['**/*.{ts,tsx}'],
+ languageOptions: {
+ ecmaVersion: 2020,
+ globals: globals.browser,
+ },
+ plugins: {
+ 'react-hooks': reactHooks,
+ 'react-refresh': reactRefresh,
+ },
+ rules: {
+ ...reactHooks.configs.recommended.rules,
+ 'react-refresh/only-export-components': [
+ 'warn',
+ { allowConstantExport: true },
+ ],
+ },
+ },
+)
diff --git a/apps/harness/index.html b/apps/harness/index.html
new file mode 100644
index 000000000..05040e5ac
--- /dev/null
+++ b/apps/harness/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ Vite + React + TS
+
+
+
+
+
+
diff --git a/apps/harness/package.json b/apps/harness/package.json
new file mode 100644
index 000000000..3e4025db4
--- /dev/null
+++ b/apps/harness/package.json
@@ -0,0 +1,31 @@
+{
+ "name": "harness",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc -b && vite build",
+ "lint": "eslint .",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
+ "react-router-dom": "^6.26.0",
+ "@harnessio/ui": "workspace:*"
+ },
+ "devDependencies": {
+ "@eslint/js": "^9.15.0",
+ "@types/react": "^18.3.12",
+ "@types/react-dom": "^18.3.1",
+ "@vitejs/plugin-react": "^4.3.4",
+ "eslint": "^9.15.0",
+ "eslint-plugin-react-hooks": "^5.0.0",
+ "eslint-plugin-react-refresh": "^0.4.14",
+ "globals": "^15.12.0",
+ "typescript": "~5.6.2",
+ "typescript-eslint": "^8.15.0",
+ "vite": "^6.0.1"
+ }
+}
diff --git a/apps/harness/public/vite.svg b/apps/harness/public/vite.svg
new file mode 100644
index 000000000..e7b8dfb1b
--- /dev/null
+++ b/apps/harness/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/harness/src/App.css b/apps/harness/src/App.css
new file mode 100644
index 000000000..b9d355df2
--- /dev/null
+++ b/apps/harness/src/App.css
@@ -0,0 +1,42 @@
+#root {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+}
+
+.logo {
+ height: 6em;
+ padding: 1.5em;
+ will-change: filter;
+ transition: filter 300ms;
+}
+.logo:hover {
+ filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+ filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ a:nth-of-type(2) .logo {
+ animation: logo-spin infinite 20s linear;
+ }
+}
+
+.card {
+ padding: 2em;
+}
+
+.read-the-docs {
+ color: #888;
+}
diff --git a/apps/harness/src/App.tsx b/apps/harness/src/App.tsx
new file mode 100644
index 000000000..3d7ded3ff
--- /dev/null
+++ b/apps/harness/src/App.tsx
@@ -0,0 +1,35 @@
+import { useState } from 'react'
+import reactLogo from './assets/react.svg'
+import viteLogo from '/vite.svg'
+import './App.css'
+
+function App() {
+ const [count, setCount] = useState(0)
+
+ return (
+ <>
+
+ Vite + React
+
+
+
+ Edit src/App.tsx and save to test HMR
+
+
+ Click on the Vite and React logos to learn more
+
+
+ )
+}
+
+export default App
diff --git a/apps/harness/src/account.tsx b/apps/harness/src/account.tsx
new file mode 100644
index 000000000..b2b711328
--- /dev/null
+++ b/apps/harness/src/account.tsx
@@ -0,0 +1,170 @@
+import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import {
+ Breadcrumb,
+ BreadcrumbItem,
+ BreadcrumbList,
+ BreadcrumbPage,
+ BreadcrumbSeparator,
+ Icon,
+ NoData,
+ Select,
+ SelectContent,
+ SelectItem,
+ SkeletonList,
+ Spacer
+} from '@harnessio/ui/components'
+import { ExecutionState, MeterState, PipelineList, SandboxLayout, type IPipeline } from '@harnessio/ui/views'
+
+function mapExecutionStatusToMeterState(status: string): MeterState {
+ switch (status) {
+ case 'Success':
+ return MeterState.Success
+ case 'Failed':
+ return MeterState.Error
+ case 'Running':
+ return MeterState.Warning
+ default:
+ return MeterState.Empty
+ }
+}
+
+function mapExecutionStatusToExecutionState(status: string): ExecutionState {
+ switch (status) {
+ case 'Success':
+ return ExecutionState.SUCCESS
+ case 'Failed':
+ return ExecutionState.FAILURE
+ case 'Running':
+ return ExecutionState.RUNNING
+ default:
+ return ExecutionState.UNKNOWN
+ }
+}
+
+export default function Account() {
+ const [accountId] = useState(localStorage.getItem('accountId'))
+ const orgIdentifier = 'default'
+
+ const [pipelines, setPipelines] = useState([])
+ const [projects, setProjects] = useState([])
+ const [selectedProject, setSelectedProject] = useState('abhinavtest3')
+ const [loading, setLoading] = useState(true)
+ const navigate = useNavigate()
+
+ useEffect(() => {
+ if (!accountId) {
+ navigate('/signin')
+ }
+
+ setLoading(true)
+ fetch(
+ `/pipeline/api/pipelines/list?routingId=${accountId}&accountIdentifier=${accountId}&projectIdentifier=${selectedProject}&orgIdentifier=${orgIdentifier}`,
+ {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${localStorage.getItem('token')}`
+ },
+ body: JSON.stringify({
+ filterType: 'PipelineSetup'
+ })
+ }
+ )
+ .then(res => res.json())
+ .then(res => {
+ setPipelines(
+ res.data.content.map(pipeline => {
+ const lastExecution = pipeline.recentExecutionsInfo?.[0]
+ return {
+ id: pipeline.identifier,
+ name: pipeline.name,
+ status: lastExecution ? mapExecutionStatusToExecutionState(lastExecution.status) : undefined,
+ timestamp: pipeline.lastUpdatedAt,
+ description: lastExecution
+ ? `${lastExecution.executorInfo.triggerType} by ${lastExecution.executorInfo.username}`
+ : undefined,
+ meter: pipeline.recentExecutionsInfo?.map(execution => {
+ return {
+ id: execution.identifier,
+ state: mapExecutionStatusToMeterState(execution.status)
+ }
+ })
+ } satisfies IPipeline
+ })
+ )
+ setLoading(false)
+ })
+
+ fetch(
+ `/ng/api/aggregate/projects?routingId=${accountId}&accountIdentifier=${accountId}&orgIdentifier=${orgIdentifier}&pageIndex=0&pageSize=20&sortOrders=name,ASC&onlyFavorites=false`,
+ {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${localStorage.getItem('token')}`
+ }
+ }
+ )
+ .then(res => res.json())
+ .then(res => {
+ setProjects(res.data.content)
+ })
+ }, [selectedProject])
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ /
+
+
+
+ /
+
+ Pipelines
+
+
+
+
+
+
+ {loading ? : null}
+ {!loading && pipelines.length == 0 ? (
+
+ ) : null}
+ {!loading && pipelines.length > 0 ? : null}
+
+
+ )
+}
diff --git a/apps/harness/src/assets/react.svg b/apps/harness/src/assets/react.svg
new file mode 100644
index 000000000..6c87de9bb
--- /dev/null
+++ b/apps/harness/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/harness/src/index.css b/apps/harness/src/index.css
new file mode 100644
index 000000000..ec2ba24b3
--- /dev/null
+++ b/apps/harness/src/index.css
@@ -0,0 +1 @@
+@import '@harnessio/ui/styles.css';
diff --git a/apps/harness/src/main.tsx b/apps/harness/src/main.tsx
new file mode 100644
index 000000000..4f15a53b3
--- /dev/null
+++ b/apps/harness/src/main.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+
+import './index.css'
+
+import Account from './account'
+import SignIn from './signin'
+
+const router = createBrowserRouter([
+ {
+ path: '/',
+ element: Hello world!
+ },
+ {
+ path: 'signin',
+ element:
+ },
+ {
+ path: 'dashboard',
+ element:
+ }
+])
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+
+)
diff --git a/apps/harness/src/signin.tsx b/apps/harness/src/signin.tsx
new file mode 100644
index 000000000..582133bc0
--- /dev/null
+++ b/apps/harness/src/signin.tsx
@@ -0,0 +1,54 @@
+import { useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { SignInPage, type SignInData } from '@harnessio/ui/views'
+
+// Source: https://stackoverflow.com/a/30106551
+// Encoding UTF-8 -> base64
+function b64EncodeUnicode(str: string): string {
+ return btoa(
+ encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
+ return String.fromCharCode(parseInt(p1, 16))
+ })
+ )
+}
+
+// Decoding base64 -> UTF-8
+function b64DecodeUnicode(str: string): string {
+ return decodeURIComponent(
+ Array.prototype.map
+ .call(atob(str), function (c) {
+ return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
+ })
+ .join('')
+ )
+}
+
+function createAuthToken(email: string, password: string): string {
+ const encodedToken = b64EncodeUnicode(email + ':' + password)
+ return `Basic ${encodedToken}`
+}
+
+export default function SignIn() {
+ const navigate = useNavigate()
+ const handleSignIn = useCallback(({ email, password }: SignInData) => {
+ if (!email || !password) return
+
+ const authToken = createAuthToken(email, password)
+ fetch('/api/users/login', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({ authorization: authToken })
+ })
+ .then(res => res.json())
+ .then(res => {
+ localStorage.setItem('token', res.resource.token)
+ localStorage.setItem('accountId', res.resource.defaultAccountId)
+ navigate(`/dashboard`)
+ })
+ }, [])
+
+ return
+}
diff --git a/apps/harness/src/vite-env.d.ts b/apps/harness/src/vite-env.d.ts
new file mode 100644
index 000000000..11f02fe2a
--- /dev/null
+++ b/apps/harness/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/apps/harness/tsconfig.app.json b/apps/harness/tsconfig.app.json
new file mode 100644
index 000000000..358ca9ba9
--- /dev/null
+++ b/apps/harness/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["src"]
+}
diff --git a/apps/harness/tsconfig.json b/apps/harness/tsconfig.json
new file mode 100644
index 000000000..1ffef600d
--- /dev/null
+++ b/apps/harness/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/apps/harness/tsconfig.node.json b/apps/harness/tsconfig.node.json
new file mode 100644
index 000000000..db0becc8b
--- /dev/null
+++ b/apps/harness/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "ES2022",
+ "lib": ["ES2023"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/apps/harness/vite.config.ts b/apps/harness/vite.config.ts
new file mode 100644
index 000000000..76ba9207b
--- /dev/null
+++ b/apps/harness/vite.config.ts
@@ -0,0 +1,19 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [react()],
+ server: {
+ proxy: {
+ '/api': {
+ target: 'https://qa.harness.io/gateway/',
+ changeOrigin: true
+ },
+ '/pipeline': {
+ target: 'https://qa.harness.io/gateway',
+ changeOrigin: true
+ }
+ }
+ }
+})
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 816e49eed..8c1656923 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -15,14 +15,13 @@
},
"scripts": {
"dev": "vite",
- "build": "vite build && pnpm build:css && pnpm extract",
+ "build": "vite build && pnpm build:css",
"build:analyse": "vite build --config ./vite-analyse.config.ts",
"build:css": "npx tailwindcss -i ./src/styles.css -o ./dist/styles.css",
"build:watch": "vite build --watch --emptyOutDir=false",
"lint": "eslint ./src",
"pretty": "prettier --check ./src",
"shadcn:update": "npx shadcn-ui@latest add -a -o -y",
- "prepublishOnly": "pnpm build",
"pre-commit": "lint-staged",
"test": "vitest --run",
"test:coverage": "vitest --run --coverage",
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 0807c14fa..0a22f9011 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -55,6 +55,7 @@ export * from './carousel'
export * from './markdown-viewer'
export * from './image-carousel'
export * from './topbar'
+export * from './meter'
export * as NodeGroup from './node-group'
export * as ShaBadge from './sha-badge'
diff --git a/packages/ui/src/components/meter.tsx b/packages/ui/src/components/meter.tsx
new file mode 100644
index 000000000..536719ece
--- /dev/null
+++ b/packages/ui/src/components/meter.tsx
@@ -0,0 +1,37 @@
+import { cn } from '@utils/cn'
+
+export enum MeterState {
+ Empty = 0,
+ Error = 1,
+ Warning = 2,
+ Success = 3
+}
+
+interface MeterRootProps {
+ data?: {
+ id?: string
+ state: MeterState
+ }[]
+ className?: string
+}
+
+const stateToBgColor: { [key in MeterState]: string } = {
+ [MeterState.Empty]: 'bg-tertiary-background/20',
+ [MeterState.Error]: 'bg-error',
+ [MeterState.Warning]: 'bg-warning',
+ [MeterState.Success]: 'bg-success'
+}
+
+export function Meter({ data = [], className }: MeterRootProps) {
+ const emptyBarsCount = 11 - data.length
+ const bars = [...Array(emptyBarsCount).fill({ state: MeterState.Empty }), ...data]
+
+ return (
+
+ {bars.map((col, col_idx) => {
+ const bgColor = stateToBgColor[col.state as MeterState]
+ return
+ })}
+
+
+
+ Pending
+
+ {duration &&
{duration}}
+
+
+
+ Running
+
+ {duration &&
{duration}}
+
+
+
+ Failed
+
+ {duration &&
{duration}}
+
+
+
+ Success
+
+ {duration &&
{duration}}
+
+ {status && }
+ {title}
+
+ )
+}
+
+const Description = ({ sha, description, version }: { sha: string; description: string; version: string }) => {
+ return (
+
+ {sha && (
+
+
+ {sha?.slice(0, 7)}
+
+ )}
+ {description && (
+
+
+ {description || ''}
+
+
+ )}
+ {version && (
+
+
+ {version}
+
+ )}
+