show-simple.tsx 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. import React from 'react';
  2. import { Show } from "@refinedev/antd";
  3. import { useShow, useOne } from "@refinedev/core";
  4. import { Card, Descriptions, Tag, Typography } from 'antd';
  5. import { RefreshButton, DateField } from '@refinedev/antd';
  6. const { Title } = Typography;
  7. export const DeploymentShow = () => {
  8. const { queryResult } = useShow();
  9. const { data, isLoading } = queryResult;
  10. const record = data?.data;
  11. const { data: clientData, isLoading: clientIsLoading } = useOne({
  12. resource: "clients",
  13. id: record?.clientId || "",
  14. queryOptions: {
  15. enabled: !!record?.clientId,
  16. },
  17. });
  18. const { data: appData, isLoading: appIsLoading } = useOne({
  19. resource: "apps",
  20. id: record?.appId || "",
  21. queryOptions: {
  22. enabled: !!record?.appId,
  23. },
  24. });
  25. const getEnvironmentColor = (environment: string) => {
  26. const colorMap: Record<string, string> = {
  27. dev: 'green',
  28. preprod: 'orange',
  29. prod: 'red',
  30. };
  31. return colorMap[environment] || 'default';
  32. };
  33. return (
  34. <Show
  35. isLoading={isLoading}
  36. headerButtons={[<RefreshButton />]}
  37. >
  38. <Title level={4}>Deployment Details</Title>
  39. <Card>
  40. <Descriptions column={2} bordered>
  41. <Descriptions.Item label="App" span={2}>
  42. {appIsLoading ? (
  43. "Loading..."
  44. ) : (
  45. <a href={`/apps/show/${record?.appId}`}>
  46. {appData?.data?.name || `App ${record?.appId}`}
  47. </a>
  48. )}
  49. </Descriptions.Item>
  50. <Descriptions.Item label="Environment">
  51. <Tag color={getEnvironmentColor(record?.environment)}>
  52. {record?.environment?.toUpperCase()}
  53. </Tag>
  54. </Descriptions.Item>
  55. <Descriptions.Item label="Version">
  56. <Tag color="blue">{record?.version}</Tag>
  57. </Descriptions.Item>
  58. <Descriptions.Item label="Client" span={2}>
  59. {clientIsLoading ? (
  60. "Loading..."
  61. ) : (
  62. <a href={`/clients/show/${record?.clientId}`}>
  63. {clientData?.data?.name || `Client ${record?.clientId}`}
  64. </a>
  65. )}
  66. </Descriptions.Item>
  67. <Descriptions.Item label="Created">
  68. <DateField value={record?.createdAt} />
  69. </Descriptions.Item>
  70. <Descriptions.Item label="Updated">
  71. <DateField value={record?.updatedAt} />
  72. </Descriptions.Item>
  73. </Descriptions>
  74. </Card>
  75. </Show>
  76. );
  77. };