apunkt/dograh
1
0
Fork 0
mirror of https://github.com/dograh-hq/dograh.git synced 2026-07-01 08:59:46 +02:00
Code Issues Projects Releases Packages Wiki Activity

chore: fix ui and add "Get Help" button (#27)

Browse source 
* chore: fix ui and add "Get Help" button

* fix: fix instrumentation client
This commit is contained in:
Abhishek 2025-10-07 17:40:01 +05:30 • committed by GitHub
parent e9c0afd517
commit 795f0be80e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 92 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

3
ui/sentry.edge.config.ts
View file

@ -6,8 +6,7 @@
import * as Sentry from "@sentry/nextjs"; import * as Sentry from "@sentry/nextjs";
// Only initialize Sentry if explicitly enabled and DSN is provided // Only initialize Sentry if explicitly enabled and DSN is provided
const enableSentry = process.env.NEXT_PUBLIC_ENABLE_SENTRY === 'true' && const enableSentry = process.env.NEXT_PUBLIC_SENTRY_DSN;
process.env.NEXT_PUBLIC_SENTRY_DSN;
if (enableSentry) { if (enableSentry) {
Sentry.init({ Sentry.init({

3
ui/sentry.server.config.ts
View file

@ -5,8 +5,7 @@
import * as Sentry from "@sentry/nextjs"; import * as Sentry from "@sentry/nextjs";
// Only initialize Sentry if explicitly enabled and DSN is provided // Only initialize Sentry if explicitly enabled and DSN is provided
const enableSentry = process.env.NEXT_PUBLIC_ENABLE_SENTRY === 'true' && const enableSentry = process.env.NEXT_PUBLIC_SENTRY_DSN;
process.env.NEXT_PUBLIC_SENTRY_DSN;
if (enableSentry) { if (enableSentry) {
Sentry.init({ Sentry.init({

14
ui/src/app/automation/page.tsx
View file

@ -4,14 +4,13 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
export default function AutomationPage() { export default function AutomationPage() {
return ( return (
<div className="min-h-[calc(100vh-73px)] bg-gray-50 p-6"> <div className="container mx-auto p-6 space-y-6">
<div className="max-w-7xl mx-auto"> <div>
<div className="mb-6"> <h1 className="text-3xl font-bold text-gray-900 mb-2">Automation</h1>
<h1 className="text-3xl font-bold text-gray-900 mb-2">Automation</h1> <p className="text-gray-600">Automate your workflows and processes</p>
<p className="text-gray-600">Automate your workflows and processes</p> </div>
</div>
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Coming Soon</CardTitle> <CardTitle>Coming Soon</CardTitle>
<CardDescription> <CardDescription>
@ -29,7 +28,6 @@ export default function AutomationPage() {
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
</div>
</div> </div>
); );
} }

44
ui/src/app/campaigns/[campaignId]/page.tsx
View file

@ -284,12 +284,10 @@ export default function CampaignDetailPage() {
if (isLoadingCampaign) { if (isLoadingCampaign) {
return ( return (
<div className="min-h-[calc(100vh-73px)] bg-gray-50 p-6"> <div className="container mx-auto p-6 space-y-6">
<div className="max-w-7xl mx-auto"> <div className="animate-pulse">
<div className="animate-pulse"> <div className="h-8 bg-gray-200 rounded w-1/4 mb-4"></div>
<div className="h-8 bg-gray-200 rounded w-1/4 mb-4"></div> <div className="h-64 bg-gray-200 rounded"></div>
<div className="h-64 bg-gray-200 rounded"></div>
</div>
</div> </div>
</div> </div>
); );
@ -297,29 +295,26 @@ export default function CampaignDetailPage() {
if (!campaign) { if (!campaign) {
return ( return (
<div className="min-h-[calc(100vh-73px)] bg-gray-50 p-6"> <div className="container mx-auto p-6 space-y-6">
<div className="max-w-7xl mx-auto"> <p className="text-center text-gray-500">Campaign not found</p>
<p className="text-center text-gray-500">Campaign not found</p>
</div>
</div> </div>
); );
} }
return ( return (
<div className="min-h-[calc(100vh-73px)] bg-gray-50 p-6"> <div className="container mx-auto p-6 space-y-6">
<div className="max-w-7xl mx-auto"> <div>
<div className="mb-6"> <Button
<Button variant="ghost"
variant="ghost" onClick={handleBack}
onClick={handleBack} className="mb-4"
className="mb-4" >
> <ArrowLeft className="h-4 w-4 mr-2" />
<ArrowLeft className="h-4 w-4 mr-2" /> Back to Campaigns
Back to Campaigns </Button>
</Button> <div className="flex justify-between items-start">
<div className="flex justify-between items-start"> <div>
<div> <h1 className="text-3xl font-bold text-gray-900 mb-2">{campaign.name}</h1>
<h1 className="text-3xl font-bold text-gray-900 mb-2">{campaign.name}</h1>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<Badge variant={getStateBadgeVariant(campaign.state)}> <Badge variant={getStateBadgeVariant(campaign.state)}>
{campaign.state} {campaign.state}
@ -457,7 +452,6 @@ export default function CampaignDetailPage() {
)} )}
</CardContent> </CardContent>
</Card> </Card>
</div>
</div> </div>
); );
} }

30
ui/src/app/campaigns/new/page.tsx
View file

@ -121,22 +121,21 @@ export default function NewCampaignPage() {
}; };
return ( return (
<div className="min-h-[calc(100vh-73px)] bg-gray-50 p-6"> <div className="container mx-auto p-6 space-y-6 max-w-2xl">
<div className="max-w-2xl mx-auto"> <div>
<div className="mb-6"> <Button
<Button variant="ghost"
variant="ghost" onClick={handleBack}
onClick={handleBack} className="mb-4"
className="mb-4" >
> <ArrowLeft className="h-4 w-4 mr-2" />
<ArrowLeft className="h-4 w-4 mr-2" /> Back to Campaigns
Back to Campaigns </Button>
</Button> <h1 className="text-3xl font-bold text-gray-900 mb-2">Create New Campaign</h1>
<h1 className="text-3xl font-bold text-gray-900 mb-2">Create New Campaign</h1> <p className="text-gray-600">Set up a new campaign to execute workflows at scale</p>
<p className="text-gray-600">Set up a new campaign to execute workflows at scale</p> </div>
</div>
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Campaign Details</CardTitle> <CardTitle>Campaign Details</CardTitle>
<CardDescription> <CardDescription>
@ -221,7 +220,6 @@ export default function NewCampaignPage() {
</form> </form>
</CardContent> </CardContent>
</Card> </Card>
</div>
</div> </div>
); );
} }

14
ui/src/app/campaigns/page.tsx
View file

@ -97,13 +97,12 @@ export default function CampaignsPage() {
}; };
return ( return (
<div className="min-h-[calc(100vh-73px)] bg-gray-50 p-6"> <div className="container mx-auto p-6 space-y-6">
<div className="max-w-7xl mx-auto"> <div className="flex justify-between items-center">
<div className="mb-6 flex justify-between items-center"> <div>
<div> <h1 className="text-3xl font-bold text-gray-900 mb-2">Campaigns</h1>
<h1 className="text-3xl font-bold text-gray-900 mb-2">Campaigns</h1> <p className="text-gray-600">Manage your bulk workflow execution campaigns</p>
<p className="text-gray-600">Manage your bulk workflow execution campaigns</p> </div>
</div>
<Button onClick={handleCreateCampaign}> <Button onClick={handleCreateCampaign}>
<Plus className="h-4 w-4 mr-2" /> <Plus className="h-4 w-4 mr-2" />
Create Campaign Create Campaign
@ -180,7 +179,6 @@ export default function CampaignsPage() {
)} )}
</CardContent> </CardContent>
</Card> </Card>
</div>
</div> </div>
); );
} }

14
ui/src/app/superadmin/page.tsx
View file

@ -49,14 +49,13 @@ export default function SuperadminPage() {
return ( return (
<> <>
<main className="min-h-[calc(100vh-73px)] bg-gray-50 px-4 sm:px-6 lg:px-8 py-8"> <main className="container mx-auto p-6 space-y-6 max-w-4xl">
<div className="max-w-4xl mx-auto"> <div className="text-center">
<div className="text-center mb-8"> <h1 className="text-3xl font-bold text-gray-900 mb-2">Superadmin Dashboard</h1>
<h1 className="text-3xl font-bold text-gray-900 mb-2">Superadmin Dashboard</h1> <p className="text-sm text-gray-600">Manage users and view system-wide data</p>
<p className="text-sm text-gray-600">Manage users and view system-wide data</p> </div>
</div>
<div className="grid gap-6 md:grid-cols-2"> <div className="grid gap-6 md:grid-cols-2">
{/* User Impersonation Card */} {/* User Impersonation Card */}
<Card> <Card>
<CardHeader> <CardHeader>
@ -126,7 +125,6 @@ export default function SuperadminPage() {
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
</div>
</div> </div>
</main> </main>
</> </>

16
ui/src/app/superadmin/runs/page.tsx
View file

@ -316,7 +316,7 @@ export default function RunsPage() {
if (isLoading && runs.length === 0) { if (isLoading && runs.length === 0) {
return ( return (
<div className="min-h-[calc(100vh-73px)] bg-gray-50 flex items-center justify-center"> <div className="container mx-auto p-6 flex items-center justify-center min-h-[400px]">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Loader2 className="h-6 w-6 animate-spin" /> <Loader2 className="h-6 w-6 animate-spin" />
<span>Loading workflow runs...</span> <span>Loading workflow runs...</span>
@ -326,14 +326,13 @@ export default function RunsPage() {
} }
return ( return (
<div className="min-h-[calc(100vh-73px)] bg-gray-50 p-6"> <div className="container mx-auto p-6 space-y-6 max-w-full">
<div className="max-w-full mx-auto"> <div>
<div className="mb-6"> <h1 className="text-3xl font-bold text-gray-900 mb-2">Workflow Runs</h1>
<h1 className="text-3xl font-bold text-gray-900 mb-2">Workflow Runs</h1> <p className="text-gray-600">View and manage all workflow runs across organizations</p>
<p className="text-gray-600">View and manage all workflow runs across organizations</p> </div>
</div>
{error && ( {error && (
<div className="mb-6 bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-lg"> <div className="mb-6 bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-lg">
{error} {error}
</div> </div>
@ -671,7 +670,6 @@ export default function RunsPage() {
{/* Media Preview Dialog */} {/* Media Preview Dialog */}
{mediaPreview.dialog} {mediaPreview.dialog}
</div>
</div> </div>
); );
} }

16
ui/src/app/usage/page.tsx
View file

@ -309,14 +309,13 @@ export default function UsagePage() {
}; };
return ( return (
<div className="min-h-[calc(100vh-73px)] bg-gray-50 p-6"> <div className="container mx-auto p-6 space-y-6">
<div className="max-w-7xl mx-auto"> <div>
<div className="mb-6"> <div className="flex justify-between items-start">
<div className="flex justify-between items-start"> <div>
<div> <h1 className="text-3xl font-bold text-gray-900 mb-2">Usage Dashboard</h1>
<h1 className="text-3xl font-bold text-gray-900 mb-2">Usage Dashboard</h1> <p className="text-gray-600">Monitor your Dograh Token usage and quota</p>
<p className="text-gray-600">Monitor your Dograh Token usage and quota</p> </div>
</div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Globe className="h-4 w-4 text-gray-500" /> <Globe className="h-4 w-4 text-gray-500" />
<div className="w-[300px]"> <div className="w-[300px]">
@ -569,7 +568,6 @@ export default function UsagePage() {
{/* Media Preview Dialog */} {/* Media Preview Dialog */}
{mediaPreview.dialog} {mediaPreview.dialog}
</div>
</div> </div>
); );
} }

31
ui/src/components/header/BaseHeader.tsx
View file

@ -1,6 +1,6 @@
"use client"; "use client";
import { CircleDollarSign, Star } from 'lucide-react'; import { CircleDollarSign, HelpCircle,Star } from 'lucide-react';
import Link from 'next/link'; import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation'; import { usePathname, useRouter } from 'next/navigation';
import React from 'react'; import React from 'react';
@ -133,15 +133,26 @@ export default function BaseHeader({ headerActions, backButton, showFeaturesNav
/> />
</React.Suspense> </React.Suspense>
) : ( ) : (
<a <>
href="https://github.com/dograh-hq/dograh" <a
target="_blank" href="https://github.com/dograh-hq/dograh/issues/new/choose"
rel="noopener noreferrer" target="_blank"
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors" rel="noopener noreferrer"
> className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
<Star className="w-4 h-4 fill-yellow-400 text-yellow-400" /> >
Star us on GitHub <HelpCircle className="w-4 h-4" />
</a> Get Help
</a>
<a
href="https://github.com/dograh-hq/dograh"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
>
<Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
Star us on GitHub
</a>
</>
)} )}
</div> </div>
</nav> </nav>

16
ui/src/instrumentation-client.ts
View file

@ -7,18 +7,14 @@ import posthog from "posthog-js";
// Initialize Sentry - prioritize NEXT_PUBLIC env vars, fallback to API // Initialize Sentry - prioritize NEXT_PUBLIC env vars, fallback to API
const initSentry = () => { const initSentry = () => {
const hasPublicConfig = process.env.NEXT_PUBLIC_ENABLE_SENTRY === 'true' && const hasPublicConfig = process.env.NEXT_PUBLIC_SENTRY_DSN;
process.env.NEXT_PUBLIC_SENTRY_DSN;
if (hasPublicConfig) { if (hasPublicConfig) {
// Use client-side environment variables // Use client-side environment variables
Sentry.init({ Sentry.init({
dsn: process.env.NEXT_PUBLIC_SENTRY_DSN, dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
integrations: [Sentry.replayIntegration()],
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
debug: false, debug: false,
enabled: process.env.NEXT_PUBLIC_NODE_ENV === 'production'
}); });
console.log('Sentry initialized from NEXT_PUBLIC config'); console.log('Sentry initialized from NEXT_PUBLIC config');
} else { } else {
@ -29,11 +25,7 @@ const initSentry = () => {
if (config.enabled && config.dsn) { if (config.enabled && config.dsn) {
Sentry.init({ Sentry.init({
dsn: config.dsn, dsn: config.dsn,
integrations: [Sentry.replayIntegration()],
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
debug: false, debug: false,
enabled: config.environment === 'production'
}); });
console.log('Sentry initialized from API config'); console.log('Sentry initialized from API config');
} else { } else {
@ -50,8 +42,8 @@ initSentry();
// Initialize PostHog - prioritize NEXT_PUBLIC env vars, fallback to API // Initialize PostHog - prioritize NEXT_PUBLIC env vars, fallback to API
const initPostHog = () => { const initPostHog = () => {
const hasPublicConfig = process.env.NEXT_PUBLIC_ENABLE_POSTHOG === 'true' && const hasPublicConfig = process.env.NEXT_PUBLIC_POSTHOG_KEY;
process.env.NEXT_PUBLIC_POSTHOG_KEY;
if (hasPublicConfig) { if (hasPublicConfig) {
// Use client-side environment variables // Use client-side environment variables