src/components/ObjectComponent.js


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

import React from "react";

import Card from "@mui/material/Card";

class ObjectComponent extends React.Component {
    render() {
        let {
            _id,
            _rev,
            document_version,
            user_presentation,
            ip,
            port,
            whois_description,
            asn,
            asn_country_code,
            ...rest
        } = this.props;
        return (
            <Card className="object" variant="outlined">
                <div className="id">
                    <a href={`/${_id}`}>#{_id}</a>
                </div>
                <table>
                    <tbody>
                        <tr>
                            <td>Address</td>
                            <td>{`${ip}:${port}`}</td>
                        </tr>
                        <tr>
                            <td>Owner</td>
                            <td>{whois_description}</td>
                        </tr>
                        <tr>
                            <td>ASN</td>
                            <td>{`${asn} (${asn_country_code})`}</td>
                        </tr>
                        {/* TODO: Fill out with more info */}
                    </tbody>
                </table>

                {/* TODO */}
                {/* <GenericTable data={rest} /> */}

                <UserPresentation
                    description={user_presentation.description}
                    data={user_presentation.data}
                />
            </Card>
        );
    }
}

function GenericTable(props) {
    return (
        <table>
            <tbody>
                {Object.entries(props.data).map(([key, value]) => {
                    return (
                        <tr key={key}>
                            <td>{key}</td>
                            <td>{value}</td>
                        </tr>
                    );
                })}
            </tbody>
        </table>
    );
}

function UserPresentation(props) {
    return (
        <div className="user-presentation">
            <hr />
            {props.description && (
                <div className="description">{props.description}</div>
            )}
            <table>
                <tbody>
                    {Object.entries(props.data).map(
                        ([key, { data, display_name, description }]) => {
                            return (
                                <React.Fragment key={key}>
                                    <tr>
                                        <td>{display_name}</td>
                                        <td>{data.toString()}</td>
                                    </tr>
                                    {description && (
                                        <tr className="description">
                                            <td colSpan="2">{description}</td>
                                        </tr>
                                    )}
                                    <tr className="spacer"></tr>
                                </React.Fragment>
                            );
                        }
                    )}
                </tbody>
            </table>
        </div>
    );
}

export default ObjectComponent;