refator ci tables
-import React from "react";
import { Box, Button, createStyles, Theme, Typography, WithStyles, withStyles } from "@material-ui/core";
-import { connect } from "react-redux";
-import { RootState } from "reducers";
-import { BasePage } from "pages/BasePage";
-import { CIIcon, KalmDetailsIcon } from "widgets/Icon";
import { indigo } from "@material-ui/core/colors";
-import { CustomizedButton } from "widgets/Button";
-import { Link } from "react-router-dom";
+import { deleteDeployKeyAction } from "actions/deployKey";
+import { blinkTopProgressAction } from "actions/settings";
import { withDeployKeys, WithDeployKeysProps } from "hoc/withDeployKeys";
-import { KTable } from "widgets/Table";
+import { BasePage } from "pages/BasePage";
+import React from "react";
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+import { RootState } from "reducers";
import { DeployKey, DeployKeyScopeCluster, DeployKeyScopeComponent, DeployKeyScopeNamespace } from "types/deployKey";
-import { Loading } from "widgets/Loading";
-import { deleteDeployKeyAction } from "actions/deployKey";
-import { InfoBox } from "widgets/InfoBox";
+import sc from "utils/stringConstants";
import { BlankTargetLink } from "widgets/BlankTargetLink";
+import { CustomizedButton } from "widgets/Button";
import { EmptyInfoBox } from "widgets/EmptyInfoBox";
-import sc from "utils/stringConstants";
-import { DeleteButtonWithConfirmPopover } from "widgets/IconWithPopover";
+import { CIIcon, KalmDetailsIcon } from "widgets/Icon";
import { IconLinkWithToolTip } from "widgets/IconButtonWithTooltip";
-import { blinkTopProgressAction } from "actions/settings";
+import { DeleteButtonWithConfirmPopover } from "widgets/IconWithPopover";
+import { InfoBox } from "widgets/InfoBox";
+import { KRTable } from "widgets/KRTable";
+import { Loading } from "widgets/Loading";
+import { KTable } from "widgets/Table";
const styles = (theme: Theme) =>
createStyles({
@@ -181,6 +182,50 @@ class CIPageRaw extends React.PureComponent<Props, State> {
);
};
+ private getKRTableColumns() {
+ return [
+ {
+ Header: "Name",
+ accessor: "name",
+ },
+ {
+ Header: "Scope",
+ accessor: "scope",
+ },
+ {
+ Header: "Resources",
+ accessor: "resources",
+ },
+
+ {
+ Header: "Action",
+ accessor: "action",
+ },
+ ];
+ }
+
+ private getKRTableData() {
+ const { deployKeys } = this.props;
+ const data: any[] = [];
+
+ deployKeys &&
+ deployKeys.forEach((deployKey, index) => {
+ const rowData = deployKey;
+ data.push({
+ name: this.renderName(rowData),
+ scope: this.renderScope(rowData),
+ resources: this.renderResources(rowData),
+ actions: this.renderActions(rowData),
+ });
+ });
+
+ return data;
+ }
+
+ private renderKRTable() {
+ return <KRTable columns={this.getKRTableColumns()} data={this.getKRTableData()} />;
+ }
+
private renderContent = () => {
const { deployKeys, isLoading, loaded } = this.props;
@@ -192,7 +237,7 @@ class CIPageRaw extends React.PureComponent<Props, State> {
);
}
- return <Box p={2}>{deployKeys.size === 0 ? this.renderEmpty() : this.renderDataTable()}</Box>;
+ return <Box p={2}>{deployKeys.size === 0 ? this.renderEmpty() : this.renderKRTable()}</Box>;
};
public render() {
