Skip to content

Commit

Permalink
refactor:clean up the code added types for mock workflow
Browse files Browse the repository at this point in the history
  • Loading branch information
@rajesh-jonnalagadda
rajesh-jonnalagadda committed Jul 17, 2024
1 parent ad0396c commit e19069a
Show file tree
Hide file tree
Showing 7 changed files with 99 additions and 58 deletions.
21 changes: 16 additions & 5 deletions keep-ui/app/workflows/mockworkflows.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState } from "react";
import { Workflow } from './models';
import { MockWorkflow, Workflow } from './models';
import { getApiURL } from "../../utils/apiUrl";
import Loading from "../loading";
import { Button } from "@tremor/react";
Expand All @@ -11,8 +11,7 @@ import { TiArrowRight } from "react-icons/ti";



export function WorkflowSteps({ workflow }: { workflow: any }) {
console.log("workflow===========>", workflow);
export function WorkflowSteps({ workflow }: { workflow: MockWorkflow}) {
const isActionPresent = !!workflow?.actions?.length;
return (
<div className="flex gap-2 items-center mb-4 flex-wrap">
Expand Down Expand Up @@ -54,7 +53,11 @@ export function WorkflowSteps({ workflow }: { workflow: any }) {
);
}

export default function MockWorkflowCardSection({ mockWorkflows, mockError, mockLoading }) {
export default function MockWorkflowCardSection({ mockWorkflows, mockError, mockLoading }:{
mockWorkflows: MockWorkflow[],
mockError: any,
mockLoading: boolean | null,
}) {
const router = useRouter();

const getNameFromId = (id: string) => {
Expand All @@ -67,6 +70,11 @@ export default function MockWorkflowCardSection({ mockWorkflows, mockError, mock

console.log("mockWorkflows====>", mockWorkflows);

// if mockError is not null, handle the error case
if (mockError) {
return <p>Error: {mockError.message}</p>;
}

return (
<section className="pt-10 mt-10">
<h2 className="text-xl sm:text-2xl font-semibold mb-6">Discover existing workflow templates</h2>
Expand All @@ -88,9 +96,12 @@ export default function MockWorkflowCardSection({ mockWorkflows, mockError, mock
</div>
</div>

{mockError && <p className="text-center text-red-100 m-auto">Error: {mockError.message || "Something went wrong!"}</p>}
{!mockLoading && !mockError && mockWorkflows.length === 0 && <p className="text-center m-auto">No workflows found</p>}

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{mockError && <p className="text-center text-red-100">Error: {mockError.message || "Something went wrong!"}</p>}
{mockLoading && <Loading />}
{!mockLoading && mockWorkflows.length === 0 && <p>No workflows found</p>}
{!mockLoading && mockWorkflows.length > 0 && mockWorkflows.map((template: any, index: number) => {
const workflow = template.workflow;
console.log("insise th emao workflwo", workflow);
Expand Down
54 changes: 54 additions & 0 deletions keep-ui/app/workflows/models.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,14 @@ export type Trigger = {
};


export type WorkflowExecution = {
id: string;
status: string;
started: string;
execution_time: number;
workflow: Workflow;
};

export type Workflow = {
id: string;
name: string;
Expand All @@ -31,4 +39,50 @@ export type Workflow = {
last_updated: string;
workflow_raw: string;
workflow_raw_id: string;
last_execution_started?: string;
last_executions?: Pick<WorkflowExecution, 'execution_time' | 'status' | 'started'>[]
}

export type MockProvider = {
type: string;
config: string;
with?: {
command?: string;
timeout?: number;
_from?: string;
to?: string;
subject?: string;
html?: string;
};
};

export type MockCondition = {
assert: string;
name: string;
type: string;
};

export type WorkflowAction = {
condition: MockCondition[];
name: string;
provider: MockProvider;
};

export type MockStep = {
name: string;
provider: MockProvider;
};

export type MockTrigger = {
type: string;
};

export type MockWorkflow = {
id: string;
description: string;
triggers: MockTrigger[];
owners: any[]; // Adjust the type if you have more specific information about the owners
services: any[]; // Adjust the type if you have more specific information about the services
steps: MockStep[];
actions: WorkflowAction[];
};
62 changes: 13 additions & 49 deletions keep-ui/app/workflows/workflow-tile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,13 @@ import { Provider as FullProvider } from "app/providers/providers";
import "./workflow-tile.css";
import { CheckCircleIcon, XCircleIcon } from "@heroicons/react/24/outline";
import AlertTriggerModal from "./workflow-run-with-alert-modal";
import { parseISO, set } from "date-fns";
import { parseISO, set, differenceInSeconds } from "date-fns";
import { Chart, CategoryScale, LinearScale, BarElement, Title as ChartTitle, Tooltip, Legend } from 'chart.js';
import { Bar } from 'react-chartjs-2';
import 'chart.js/auto';
import TimeAgo from 'react-timeago';
import { WorkflowExecution } from "./builder/types";



Chart.register(CategoryScale, LinearScale, BarElement, ChartTitle, Tooltip, Legend);
Expand Down Expand Up @@ -390,41 +392,6 @@ function WorkflowTile({ workflow }: { workflow: Workflow }) {
<Loading />
</div>
)}
{/* <div className="relative flex flex-col bg-white rounded overflow-hidden shadow w-full lg:max-w-md">
<div className="absolute top-0 right-0 mt-2 mr-2 mb-2">
{WorkflowMenuSection({
onDelete: handleDeleteClick,
onRun: handleRunClick,
onDownload: handleDownloadClick,
onView: handleViewClick,
onBuilder: handleBuilderClick,
workflow,
})}
</div>
<div className="m-4">
<WorkflowGraph workflow={workflow} />
<div className="flex flex-col mt-2 gap-2">
<h2 className="truncate leading-6 font-bold text-base md:text-lg lg:text-xl">{workflow?.name || 'Unknown'}{'testing the flow with large text'}</h2>
<div className="flex flex-col md:flex-row md:items-center justify-between w-full gap-2">
<div className="flex flex-wrap justify-start items-center gap-2">
<button className="border border-gray-200 text-black py-1 px-4 text-sm rounded-full hover:bg-gray-100 font-bold">
Interval
</button>
<button className="bg-white border border-gray-200 text-black py-1 px-4 text-sm rounded-full hover:bg-gray-100 font-bold">
Trigger
</button>
</div>
{workflow?.last_execution_started ? (
<TimeAgo date={parseISO(workflow?.last_execution_started)} className="text-sm text-gray-500" />
) : null
// (
// <div className="text-gray-500 text-sm"></div>
// )
}
</div>
</div>
</div>
</div> */}
<div className="relative flex flex-col bg-white rounded overflow-hidden shadow w-full lg:max-w-md">
<div className="absolute top-0 right-0 mt-2 mr-2 mb-2">
{WorkflowMenuSection({
Expand All @@ -450,7 +417,7 @@ function WorkflowTile({ workflow }: { workflow: Workflow }) {
</button>
</div>
{workflow?.last_execution_started ? (
<TimeAgo date={parseISO(workflow?.last_execution_started)} className="text-sm text-gray-500" />
<TimeAgo date={parseISO(workflow?.last_execution_started?.toLocaleString())} className="text-sm text-gray-500" />
) : null
}
</div>
Expand Down Expand Up @@ -510,7 +477,7 @@ const demoColors = [
'rgba(75, 192, 192, 1)', // Green
'rgba(255, 99, 132, 1)', // Red
]
const getLabels = (lastExecutions: { status: string, execution_time: number, started: string }[]) => {
const getLabels = (lastExecutions: Pick<WorkflowExecution, 'execution_time' | 'status' | 'started'>[]) => {
if (!lastExecutions || (lastExecutions && lastExecutions.length === 0)) {
return show_real_data ? [] : demoLabels;
}
Expand All @@ -520,17 +487,17 @@ const getLabels = (lastExecutions: { status: string, execution_time: number, sta
}


const getDataValues = (lastExecutions: { status: string, execution_time: number, started: string }[]) => {
const getDataValues = (lastExecutions: Pick<WorkflowExecution, 'execution_time' | 'status' | 'started'>[]) => {
if (!lastExecutions || (lastExecutions && lastExecutions.length === 0)) {
return show_real_data ? [] : demoData;
}
return lastExecutions?.map((workflowExecution) => {
return workflowExecution?.execution_time
return workflowExecution?.execution_time || differenceInSeconds(Date.now(), new Date(workflowExecution?.started));
})
}


const getBackgroundColors = (lastExecutions: { status: string, execution_time: number, started: string }[]) => {
const getBackgroundColors = (lastExecutions: Pick<WorkflowExecution, 'execution_time' | 'status' | 'started'>[]) => {
if (!lastExecutions || (lastExecutions && lastExecutions.length === 0)) {
return show_real_data ? [] : demoBgColors;
}
Expand All @@ -547,7 +514,7 @@ const getBackgroundColors = (lastExecutions: { status: string, execution_time: n
})
}

const getBorderColors = (lastExecutions: { status: string, execution_time: number, started: string }[]) => {
const getBorderColors = (lastExecutions: Pick<WorkflowExecution, 'execution_time' | 'status' | 'started'>[]) => {
if (!lastExecutions || (lastExecutions && lastExecutions.length === 0)) {
return show_real_data ? [] : demoColors;
}
Expand All @@ -565,7 +532,7 @@ const getBorderColors = (lastExecutions: { status: string, execution_time: numbe
})
}

const WorkflowGraph = ({ workflow }) => {
const WorkflowGraph = ({ workflow }:{workflow: Workflow}) => {
const lastExecutions = useMemo(() => {
const reversedExecutions = workflow?.last_executions?.slice(0, 15) || [];
return reversedExecutions.reverse();
Expand All @@ -587,8 +554,8 @@ const WorkflowGraph = ({ workflow }) => {
bottom: 0,
left: 0,
},
barPercentage: 0.6, // Adjust this value to control bar width
// categoryPercentage: 0.8, // Adjust this value to control space between bars
barPercentage: 1, // Adjust this value to control bar width
categoryPercentage: 0.5, // Adjust this value to control space between bars
},
],
};
Expand Down Expand Up @@ -627,8 +594,6 @@ const WorkflowGraph = ({ workflow }) => {
},
responsive: true,
maintainAspectRatio: false,
barPercentage: 0.7, // Adjust this value to control bar width
categoryPercentage: 0.8, // Adjust this value to control space between bars
};

const status = workflow?.last_execution_status?.toLowerCase() || null;
Expand Down Expand Up @@ -664,7 +629,7 @@ const WorkflowGraph = ({ workflow }) => {
No data available
</div>
) : (
<div className="h-full w-full custom-scrollbar overflow-hidden">
<div className="h-full w-full overflow-hidden">
<Bar data={chartData} options={chartOptions} />
</div>
)}
Expand All @@ -674,5 +639,4 @@ const WorkflowGraph = ({ workflow }) => {
};



export default WorkflowTile;
6 changes: 3 additions & 3 deletions keep-ui/app/workflows/workflows.client.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
} from "@heroicons/react/24/outline";
import { useSession } from "next-auth/react";
import { fetcher } from "../../utils/fetcher";
import { Workflow } from "./models";
import { Workflow, MockWorkflow } from "./models";
import { getApiURL } from "../../utils/apiUrl";
import Loading from "../loading";
import React from "react";
Expand All @@ -36,7 +36,7 @@ export default function WorkflowsPage() {
(url: string) => fetcher(url, session?.accessToken!)
);

const { data: mockWorkflows, error:mockError, isLoading: mockLoading } = useSWR<Partial<Workflow>[]>(
const { data: mockWorkflows, error:mockError, isLoading: mockLoading } = useSWR<MockWorkflow[]>(
status === "authenticated" ? `${apiUrl}/workflows/random-templates` : null,
(url: string) => fetcher(url, session?.accessToken!)
);
Expand Down Expand Up @@ -262,7 +262,7 @@ export default function WorkflowsPage() {
</div>
)}
<MockWorkflowCardSection
mockWorkflows={mockWorkflows}
mockWorkflows={mockWorkflows || []}
mockError={mockError}
mockLoading={mockLoading}
/>
Expand Down
10 changes: 10 additions & 0 deletions keep-ui/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions keep-ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -384,6 +384,7 @@
"@types/react-datepicker": "^6.0.2",
"@types/react-grid-layout": "^1.3.5",
"@types/react-modal": "^3.16.0",
"@types/react-timeago": "^4.1.7",
"@types/uuid": "^9.0.1"
},
"author": "",
Expand Down
3 changes: 2 additions & 1 deletion keep/workflowmanager/workflowstore.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,8 @@ def get_random_workflow_templates(self, tenant_id: str, workflows_dir: str, limi
if "workflow" in workflow_yaml:
workflow_yaml['name'] = workflow_yaml['workflow']['id']
workflow_yaml['workflow_raw'] = yaml.dump(workflow_yaml)
workflows.append(workflow_yaml)
workflow_yaml['workflow_raw_id'] = yaml.dump(workflow_yaml)
workflows.append(workflow_yaml) = workflow_yaml['workflow']['id']
count += 1

self.logger.info(f"Workflow from {file} fetched successfully {workflow_yaml}")
Expand Down

0 comments on commit e19069a

Please sign in to comment.