Skip to content

krateoplatformops/krateo-frontend

Repository files navigation

Krateo Frontend

Installation

Clone repository on your machine

Install dependencies

npm install

Start in local

Launch application

$ export "VITE_BFF_API_BASE_URL=http://4.209.37.15:8081" && export "VITE_AUTHN_API_BASE_URL=http://51.138.231.131:8080" && npm run dev

Deploying

Build application

$ export "VITE_BFF_API_BASE_URL=http://20.105.44.127:8080" && export "VITE_AUTHN_API_BASE_URL=http://51.138.231.131:8080" &&  npm run vite build

Copy content of /build folder in your web server

Widget List

Button

Button

Properties

{
  icon?: string,
  label?: string,
  badge?: boolean,
  type?: "default" | "text" | "link" | "primary" | "dashed",
  action?: "default" | "submit" | "reset",
  prefix?: string,
  actions?: {
    path: string,
    verb: "get" | "delete",
  }[],
  verb?: "get" | "delete",
}

Example

{
  icon: "fa-gear",
  label: "click here!",
  badge: false,
  type: "default",
  action: "default",
  prefix: "filtersCompositions",
  actions: [
	  {
	    path: "/lorem/ipsum/dolor",
	    verb: "get",
	  }
  ],
  verb: "get",
}

CardTemplate

CardTemplate

Properties

{
	id: string,
 	icon: string,
 	color: "blue" | "darkBlue" | "orange" | "gray" | "red" | "green",
 	title: string,
 	status: string,
 	date: string,
 	content: string,
 	tags: string,
 	actions: {
 		verb: "get" | "delete" | "put" | "post",
 		path: string,
 	}[],
 	panel: string
}

Example

{
	id: "e35ac33c-bd86-4301-83ee-c14236691a74",
 	icon: "fa-gear",
 	color: "blue",
 	title: "This is the card title",
 	status: "pending",
 	date: "06/05/2024",
 	content: "lorem ipsum",
 	tags: "lorem, ipsum, dolor",
 	actions: [
	  {
	    path: "/lorem/ipsum/dolor",
	    verb: "get",
	  }
  ],
 	panel: "true",
}

ChartBars

ChartBars

Properties

{
  data: {
	  label: string;
	  value: string;
	  percentage: number;
	  color: "success" | "normal" | "exception" | "active";
  }[];
}

Example

{
  data: [
	  {
		  label: "Downtime";
		  value: "15";
		  percentage: 12;
		  color: "exception";
	  }
	];
}

ChartFlow

ChartFlow

Properties

{
	uid: string,
	name: string,
	kind: string,
	icon: string,
	health: {
		status: "Available" | "Healty" | "Progressing" | "Degraded" | "Suspended" | "Missing" | "Unknown"
	}
	status: "OutOfSync" | "Synced"
	version: string,
	createdAt: string,
	namespace: string,
	parentRefs: {
		uid: string,
	}[]
}[]

#### Example

[
	{
		uid: "ad8a8b68-40e7-4eb0-aac0-58df5ccd4820",
		name: "fire-firefire-ingress",
		kind: "Ingress",
		icon: "fa-shuffle",
		health: {
	    "status": "Healty"
	 	},
		status: "OutOfSync",
		version:"v1",
		createdAt:"2024-05-02T07:15:03Z",
		namespace:"fire-firefire-ns",
		parentRefs: [
			{
				uid:"e35ac33c-bd86-4301-83ee-c14236691a74",
			}
		]
	}
]

ChartLine

ChartLine

Properties

{
	color: "blue" | "darkBlue" | "orange" | "gray" | "red" | "green",
	data: {
		xValue: string | number,
		yValue: string | number,
	}[]
}

Example

{
	color: "blue",
	data: {
		xValue: "2010-01",
		yValue: 1998,
	}[]
}

ChartMultipleBars

ChartMultipleBars

Properties

{
	data: {
		label: string,
		bars: {
			value: string,
			percentage: number,
			color: "success" | "normal" | "exception" | "active",
		}[]
	}[]
}

Example

{
	data: [
		{
	    label: "MySQL",
	    bars: [
	      {
	        value: "82",
	        percentage: 48,
	        color: "normal"
	      },
	      {
	        value: "63",
	        percentage: 23,
	        color: "exception"
	      },
	    ]
	  }
  ]
}

ChartPie

ChartPie

Properties

{
	title?: string;
  description?: string;
  series: {
    total: number,
    data: {
      color: "blue" | "darkBlue" | "orange" | "gray" | "red" | "green",
      value: number,
      label: string
    }[]
  }[]
}

Example

{
	title="5896",
  description="Licenses",
	series={[
		{
			total: 5000,
			data: [
				{
					color: "blue",
					value: 1890,
					label: "label #1"
				},
				{
					color: "darkBlue",
					value: 1415,
					label: "label #2"
				},
			]
		},
		{
			total: 2000,
			data: [
				{
					color: "red",
					value: 495,
					label: "label #3"
				}
			]
		}
	]}
}

DataList

Properties

{
	prefix: string,
	data: {
		kind: string,
		spec: {
			app: {
			 props: {
			 	// widget (es: RichRow)
			 }
			}
		}
	}[],
	asGrid: boolean
}

Example

{
	prefix: "compositionsFiltered",
	data: {
		kind: "card",
		spec: {
			app: {
			 props: {
			 	// widget (es: Card Template)
			 }
			}
		}
	}[],
	asGrid: boolean
}

DynamicContent

Properties

{ prefix: string, content: { kind: string, spec: { // widget (es: RichRow) } }[] }

Example

{ prefix: "documentList", content: { kind: "Paragraph", spec: { // widget (es: RichRow) } }[] }

EditableContent

/* WIP: miss update and check markdown editor */ { text: string, editEndpoint: string }

EditableList

/* WIP: miss update, add, remove, fields sort */ { description?: string, data?: { id: string, label: string }[], prefix: string, endpoint: string, }

EventsList

EventsList

Properties

{
  sseEndpoint?: string,
  sseTopic?: string,
  events: {
  	metadata: {
  		uid: string,
  		creationTimestamp: string,
  	},
  	reason: string,
  	icon: string,
  	type: string,
  	message: string,
  	involvedObject: {
  		name: string,
  		namespace: string,
  		kind: string,
  		apiVersion: string
  	}
  }[],
}

Example

{
  sseEndpoint: "/lorem/ipsum",
  sseTopic: "test",
  events: {
  	metadata: {
  		uid: "e35ac33c-bd86-4301-83ee-c14236691a74",
  		creationTimestamp: "01/05/2024 15:28:45",
  	},
  	reason: "lorem ipsum dolor sit amet",
  	icon: "fa-gear",
  	type: "Normal",
  	message: "lorem ipsum dolor sit amet",
  	involvedObject: {
  		name: "lorem ipsum dolor sit amet",
  		namespace: "lorem ipsum dolor sit amet",
  		kind: "lorem ipsum dolor sit amet",
  		apiVersion: "lorem ipsum dolor sit amet"
  	}
  }[],
}

FormGenerator

FormGenerator

Properties

{
	title?: string,
	description?: string,
	fieldsEndpoint?: string,
	descriptionTooltip: boolean,
	prefix?: string,
}

Example

{
	title: "lorem ipsum dolor sit amet",
	description: "lorem ipsum dolor sit amet",
	fieldsEndpoint: "/lorem/ipsum",
	descriptionTooltip: true,
	prefix: "filtersCompositions",
}

Panel

Panel

Properties

{
	title: string,
	tooltip: string,
	content: {
		// other widget
	}
}

Example

{
	title: "lorem ipsum dolor sit amet",
	tooltip: "lorem ipsum dolor sit amet",
	content: // other widget
}

Paragraph

Paragraph

Properties

{
	text: string
}

Example

{
	text: "lorem ipsum dolor sit amet"
}

RichElement

RichElement

Properties

{
	icon: string,
	color: "blue" | "darkBlue" | "orange" | "gray" | "red", title: string,
	description: string
}

Example

{
	icon: "fa-gear",
	color: "blue",
	description: "lorem ipsum dolor sit amet"
}

RichRow

RichRow

Properties

{
	color: "blue" | "darkBlue" | "orange" | "gray" | "red",
	icon: string,
	subPrimaryText: string,
	primaryText: string,
	subSecondaryText: string,
	secondaryText: string
}

Example

{
	color: "blue",
	icon: "fa-gear",
	subPrimaryText: "lorem ipsum dolor sit amet",
	primaryText: "lorem ipsum dolor sit amet",
	subSecondaryText: "lorem ipsum dolor sit amet",
	secondaryText: "lorem ipsum dolor sit amet"
}

TerminalPanel

TerminalPanel

Properties

{
  nodeId: string,
  commands: string,
}

Example

{
  nodeId: "e35ac33c-bd86-4301-83ee-c14236691a74",
  commands: "[{command: "xyz", label: "lorem ipsum"}]",
}

TableData

TableData

Properties

{
  pageSize?: number
  columns: {
    key: string
    title: string,
  }[],
  data: {
    rowKey: string
    dataRow: {
      columnKey: string,
      value: string
    }[]
  }[]
}

YamlViewer

YamlViewer

Properties

{
  yaml: string
}