How to use the reactstrap.Col function in reactstrap

SystemMetrics.prototype.render = function () {
        var _a = this.props, systemMetrics = _a.systemMetrics, wholeNumberFormat = _a.wholeNumberFormat, timestampFormat = _a.timestampFormat;
        return (React.createElement("div", null,
            React.createElement("h4", null, "System"),
            React.createElement(reactstrap_1.Row, null,
                React.createElement(reactstrap_1.Col, { md: "4" }, "Uptime"),
                React.createElement(reactstrap_1.Col, { md: "8", className: "text-right" }, SystemMetrics.convertMillisecondsToDuration(systemMetrics['process.uptime']))),
            React.createElement(reactstrap_1.Row, null,
                React.createElement(reactstrap_1.Col, { md: "4" }, "Start time"),
                React.createElement(reactstrap_1.Col, { md: "8", className: "text-right" },
                    React.createElement(formatter_1.TextFormat, { value: systemMetrics['process.start.time'], type: "date", format: timestampFormat }))),
            React.createElement(reactstrap_1.Row, null,
                React.createElement(reactstrap_1.Col, { md: "9" }, "Process CPU usage"),
                React.createElement(reactstrap_1.Col, { md: "3", className: "text-right" },
                    React.createElement(formatter_1.TextFormat, { value: 100 * systemMetrics['process.cpu.usage'], type: "number", format: wholeNumberFormat }),
                    " %")),
            React.createElement(reactstrap_1.Progress, { animated: true, value: 100 * systemMetrics['process.cpu.usage'], color: "success" },
                React.createElement("span", null,
                    React.createElement(formatter_1.TextFormat, { value: 100 * systemMetrics['process.cpu.usage'], type: "number", format: wholeNumberFormat }),
                    " %")),
            React.createElement(reactstrap_1.Row, null,
                React.createElement(reactstrap_1.Col, { md: "9" }, "System CPU usage"),

get: function () {
    return reactstrap.Col;
  }
});

React.createElement(formatter_1.TextFormat, { value: 100 * garbageCollectorMetrics['jvm.gc.live.data.size'] / garbageCollectorMetrics['jvm.gc.max.data.size'], type: 'number', format: wholeNumberFormat }),
                        "%")),
                React.createElement(reactstrap_1.Col, { md: "4" },
                    React.createElement("span", null,
                        "GC Memory Promoted/GC Memory Allocated (",
                        React.createElement(formatter_1.TextFormat, { value: garbageCollectorMetrics['jvm.gc.memory.promoted'] / 1048576, type: 'number', format: wholeNumberFormat }),
                        "M /",
                        ' ',
                        React.createElement(formatter_1.TextFormat, { value: garbageCollectorMetrics['jvm.gc.memory.allocated'] / 1048576, type: 'number', format: wholeNumberFormat }),
                        "M)"),
                    React.createElement(reactstrap_1.Progress, { animated: true, color: "success", value: 100 * garbageCollectorMetrics['jvm.gc.memory.promoted'] / garbageCollectorMetrics['jvm.gc.memory.allocated'] },
                        React.createElement(formatter_1.TextFormat, { value: 100 * garbageCollectorMetrics['jvm.gc.memory.promoted'] / garbageCollectorMetrics['jvm.gc.memory.allocated'], type: 'number', format: wholeNumberFormat }),
                        "%")),
                React.createElement(reactstrap_1.Col, { md: "4" },
                    React.createElement(reactstrap_1.Row, null,
                        React.createElement(reactstrap_1.Col, { md: "9" }, "Classes loaded"),
                        React.createElement(reactstrap_1.Col, { md: "3" }, garbageCollectorMetrics.classesLoaded)),
                    React.createElement(reactstrap_1.Row, null,
                        React.createElement(reactstrap_1.Col, { md: "9" }, "Classes unloaded"),
                        React.createElement(reactstrap_1.Col, { md: "3" }, garbageCollectorMetrics.classesUnloaded)))),
            React.createElement(reactstrap_1.Table, null,
                React.createElement("thead", null,
                    React.createElement("tr", null,
                        React.createElement("th", null),
                        React.createElement("th", { className: "text-right" }, "Count"),
                        React.createElement("th", { className: "text-right" }, "Mean"),
                        React.createElement("th", { className: "text-right" }, "Min"),
                        React.createElement("th", { className: "text-right" }, "p50"),
                        React.createElement("th", { className: "text-right" }, "p75"),
                        React.createElement("th", { className: "text-right" }, "p95"),
                        React.createElement("th", { className: "text-right" }, "p99"),
                        React.createElement("th", { className: "text-right" }, "Max"))),

GarbageCollectorMetrics.prototype.render = function () {
        var _a = this.props, garbageCollectorMetrics = _a.garbageCollectorMetrics, wholeNumberFormat = _a.wholeNumberFormat;
        return (React.createElement("div", null,
            React.createElement("h3", null, "Garbage Collection"),
            React.createElement(reactstrap_1.Row, null,
                React.createElement(reactstrap_1.Col, { md: "4" },
                    React.createElement("span", null,
                        "GC Live Data Size/GC Max Data Size (",
                        React.createElement(formatter_1.TextFormat, { value: garbageCollectorMetrics['jvm.gc.live.data.size'] / 1048576, type: 'number', format: wholeNumberFormat }),
                        "M /",
                        ' ',
                        React.createElement(formatter_1.TextFormat, { value: garbageCollectorMetrics['jvm.gc.max.data.size'] / 1048576, type: 'number', format: wholeNumberFormat }),
                        "M)"),
                    React.createElement(reactstrap_1.Progress, { animated: true, color: "success", value: 100 * garbageCollectorMetrics['jvm.gc.live.data.size'] / garbageCollectorMetrics['jvm.gc.max.data.size'] },
                        React.createElement(formatter_1.TextFormat, { value: 100 * garbageCollectorMetrics['jvm.gc.live.data.size'] / garbageCollectorMetrics['jvm.gc.max.data.size'], type: 'number', format: wholeNumberFormat }),
                        "%")),
                React.createElement(reactstrap_1.Col, { md: "4" },
                    React.createElement("span", null,
                        "GC Memory Promoted/GC Memory Allocated (",
                        React.createElement(formatter_1.TextFormat, { value: garbageCollectorMetrics['jvm.gc.memory.promoted'] / 1048576, type: 'number', format: wholeNumberFormat }),
                        "M /",
                        ' ',

" %")),
            React.createElement(reactstrap_1.Row, null,
                React.createElement(reactstrap_1.Col, { md: "9" }, "System CPU usage"),
                React.createElement(reactstrap_1.Col, { md: "3", className: "text-right" },
                    React.createElement(formatter_1.TextFormat, { value: 100 * systemMetrics['system.cpu.usage'], type: "number", format: wholeNumberFormat }),
                    " %")),
            React.createElement(reactstrap_1.Progress, { animated: true, value: 100 * systemMetrics['system.cpu.usage'], color: "success" },
                React.createElement("span", null,
                    React.createElement(formatter_1.TextFormat, { value: 100 * systemMetrics['system.cpu.usage'], type: "number", format: wholeNumberFormat }),
                    " %")),
            React.createElement(reactstrap_1.Row, null,
                React.createElement(reactstrap_1.Col, { md: "9" }, "System CPU count"),
                React.createElement(reactstrap_1.Col, { md: "3", className: "text-right" }, systemMetrics['system.cpu.count'])),
            React.createElement(reactstrap_1.Row, null,
                React.createElement(reactstrap_1.Col, { md: "9" }, "System 1m Load average"),
                React.createElement(reactstrap_1.Col, { md: "3", className: "text-right" },
                    React.createElement(formatter_1.TextFormat, { value: systemMetrics['system.load.average.1m'], type: "number", format: wholeNumberFormat }))),
            React.createElement(reactstrap_1.Row, null,
                React.createElement(reactstrap_1.Col, { md: "7" }, "Process files max"),
                React.createElement(reactstrap_1.Col, { md: "5", className: "text-right" },
                    React.createElement(formatter_1.TextFormat, { value: systemMetrics['process.files.max'], type: "number", format: wholeNumberFormat }))),
            React.createElement(reactstrap_1.Row, null,
                React.createElement(reactstrap_1.Col, { md: "4" }, "Process files open"),
                React.createElement(reactstrap_1.Col, { md: "8", className: "text-right" },
                    React.createElement(formatter_1.TextFormat, { value: systemMetrics['process.files.open'], type: "number", format: wholeNumberFormat })))));
    };
    return SystemMetrics;