data-rentgen-ui/src/components/operation/OperationRaShow.tsx at 675b14387e48d44528ab87600a84db656824c7dd · MTSWebServices/data-rentgen-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import { Stack } from "@mui/material";
import { ReactElement } from "react";
import {
    DateField,
    FunctionField,
    Labeled,
    ReferenceField,
    Show,
    SimpleShowLayout,
    TabbedShowLayout,
    TextField,
} from "react-admin";
import {
    DurationRaField,
    IOStatisticsField,
    StatusRaField,
} from "@/components/base";
import { Box } from "@mui/material";
import OperationRaLineage from "./OperationRaLineage";
import { OperationDetailedResponseV1 } from "@/dataProvider/types";

const OperationRaShow = (): ReactElement => {
    return (
        <Show>
            <SimpleShowLayout>
                <TextField source="id" label="resources.operations.fields.id" />
                <TextField
                    source="data.name"
                    label="resources.operations.fields.name"
                />

                <Labeled label="resources.operations.sections.external">
                    <Stack direction="row" spacing={3}>
                        <Labeled label="resources.operations.sections.position">
                            <TextField source="data.position" />
                        </Labeled>
                        <Labeled label="resources.operations.sections.group">
                            <TextField source="data.group" />
                        </Labeled>
                        <Labeled label="resources.operations.sections.description">
                            <TextField source="data.description" />
                        </Labeled>
                    </Stack>
                </Labeled>

                <Labeled label="resources.operations.sections.created">
                    <Stack direction="row" spacing={3}>
                        <Labeled label="resources.operations.sections.when">
                            <DateField
                                source="data.created_at"
                                showTime={true}
                            />
                        </Labeled>
                        <Labeled label="resources.operations.sections.by_run">
                            <ReferenceField
                                source="data.run_id"
                                reference="runs"
                            />
                        </Labeled>
                    </Stack>
                </Labeled>

                <DateField
                    source="data.started_at"
                    label="resources.operations.fields.started_at"
                    showTime={true}
                />

                <StatusRaField source="status" />
                <Labeled label="resources.operations.sections.ended">
                    <Stack direction="row" spacing={3}>
                        <Labeled label="resources.operations.sections.when">
                            <DateField source="data.ended_at" showTime={true} />
                        </Labeled>
                        <Labeled label="resources.operations.sections.duration">
                            <DurationRaField source="duration" />
                        </Labeled>
                    </Stack>
                </Labeled>

                <Labeled label="resources.operations.sections.statistics.name">
                    <Stack direction="row" spacing={3}>
                        <Labeled label="resources.operations.sections.statistics.inputs">
                            <IOStatisticsField source="statistics.inputs" />
                        </Labeled>
                        <Labeled label="resources.operations.sections.statistics.outputs">
                            <IOStatisticsField source="statistics.outputs" />
                        </Labeled>
                    </Stack>
                </Labeled>

                <Labeled label="resources.operations.sections.sql_query">
                    <Stack
                        direction="row"
                        spacing={3}
                        height="10rem"
                        overflow-y="auto"
                    >
                        <TextField source="data.sql_query" component="pre" />
                    </Stack>
                </Labeled>
                <FunctionField
                    render={(record: OperationDetailedResponseV1) => {
                        return record.statistics.inputs.total_datasets +
                            record.statistics.outputs.total_datasets >
                            0 ? (
                            <TabbedShowLayout>
                                <TabbedShowLayout.Tab label="resources.operations.tabs.lineage">
                                    <OperationRaLineage />
                                </TabbedShowLayout.Tab>
                            </TabbedShowLayout>
                        ) : null;
                    }}
                />
            </SimpleShowLayout>
        </Show>
    );
};

export default OperationRaShow;