diff --git a/CHANGELOG.md b/CHANGELOG.md index bf713ddc..dc49a747 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ All notable changes to this project will be documented in this file. ### Fixed - Ui cleanups in cluster lister, import and config screens from [niravparikh05](https://github.com/niravparikh05) - Fixed login failing right after logout from [meain](https://github.com/meain) +- Cluster tabular list view set to default and added user recovery link copy icon [niravparikh05](https://github.com/niravparikh05) ## [0.1.1] - 2022-08-09 ### Changed diff --git a/src/actions/Edges.js b/src/actions/Edges.js index d545bb91..2dcf5f55 100644 --- a/src/actions/Edges.js +++ b/src/actions/Edges.js @@ -5,12 +5,16 @@ export function getEdges( rows = 1000, offset = 0, searchText = "", - status = "" + status = "", + orderBy = "", + order = "" ) { return function (dispatch) { + let filterQuery = ""; + if (orderBy) filterQuery += `&orderBy=${orderBy}&order=${order}`; http("infra") .get( - `project/${project}/cluster?limit=${rows}&offset=${offset}&q=${searchText}${status}` + `project/${project}/cluster?limit=${rows}&offset=${offset}&q=${searchText}${status}${filterQuery}` ) .then((response) => { dispatch({ type: "get_edges_success", payload: response }); diff --git a/src/app/routes/edges/routes/PrivateEdgeList/index.js b/src/app/routes/edges/routes/PrivateEdgeList/index.js index 3e82a31f..a544dd36 100644 --- a/src/app/routes/edges/routes/PrivateEdgeList/index.js +++ b/src/app/routes/edges/routes/PrivateEdgeList/index.js @@ -40,16 +40,18 @@ import { setDefaultClusterStatus, } from "actions/index"; import { ValidatorForm } from "react-material-ui-form-validator"; -import Select from "react-select"; -import { ClusterActionsContext } from "../../../../../views/ClusterView/ClusterViewContexts"; import { capitalizeFirstLetter } from "../../../../../utils"; import AppNoData from "components/AppNoData"; import Spinner from "components/Spinner"; import AppSnackbar from "components/AppSnackbar"; -import ClusterActions from "components/ClusterActions/index"; import CreateClusterV2 from "./components/CreateClusterV2"; import SlatList from "./components/SlatList"; import DataTableToolbar from "./components/DataTableToolbar"; +import DateFormat from "components/DateFormat"; +import SettingsIcon from "@material-ui/icons/Settings"; +import DeleteIconComponent from "components/DeleteIconComponent"; +import KubectlSettings from "components/ClusterActions/KubectlSettings"; +import ClusterActionDialog from "components/ClusterActions/ClusterActionDialog"; const styles = (theme) => ({ clusterHeading: { @@ -149,7 +151,12 @@ const styles = (theme) => ({ let columnData = [ { id: "name", numeric: false, disablePadding: false, label: "Name" }, - { id: "loc", numeric: false, disablePadding: false, label: "Location" }, + { + id: "created_at", + numeric: false, + disablePadding: false, + label: "Created At", + }, { id: "actions", numeric: true, disablePadding: false, label: "Actions" }, ]; const defaultColumnData = columnData; @@ -273,9 +280,8 @@ class PrivateEdgeList extends React.Component { this.state.offset, this.state.searchText, this.state.searchStatus, - this.state.selectedPartner, - this.state.selectedOrg, - labelQueryParams + this.state.orderBy, + this.state.order ) ); }; @@ -303,9 +309,8 @@ class PrivateEdgeList extends React.Component { offset, this.state.searchText, this.state.searchStatus, - this.state.selectedPartner, - this.state.selectedOrg, - this.state.labelQueryParams + this.state.orderBy, + this.state.order ) ); }; @@ -318,12 +323,7 @@ class PrivateEdgeList extends React.Component { order = "asc"; } - const data = - order === "desc" - ? this.state.data.sort((a, b) => (b[orderBy] < a[orderBy] ? -1 : 1)) - : this.state.data.sort((a, b) => (a[orderBy] < b[orderBy] ? -1 : 1)); - - this.setState({ data, order, orderBy }); + this.setState({ order, orderBy }, this.callGetEdges); }; handleSelectAllClick = (event, checked) => { if (checked) { @@ -437,6 +437,10 @@ class PrivateEdgeList extends React.Component { }); }; + handleKubectlSettingsClose = () => { + this.setState({ kubectlSettingsOpen: false }); + }; + handleEdgeChange = (name) => (event) => { if (name === "metro") { if (event) { @@ -503,13 +507,43 @@ class PrivateEdgeList extends React.Component { this.handleAddEdge(); }; - handleRemoveEdge = (event, edge, forceDelete) => { + handleRemoveEdge = (edge, forceDelete) => { this.state.removeEdgeObj = edge; this.props.removeCluster( edge.metadata.name, this.props.currentProject.metadata.name, forceDelete ); + this.state.isResponseSuccess = true; + this.setState({ ...this.state }); + }; + + handleKubectlSettings = (event, edge) => { + this.state.kubectlSettingsOpen = true; + this.state.cancelAction = { + isHidden: true, + }; + this.state.action = { + isHidden: true, + }; + this.state.header = ( +
+
Kubectl Settings
+
+
Cluster: {edge.metadata.name}
+
+
+ ); + + this.state.content = ( + + ); + + this.setState({ ...this.state }); }; handleValidator = () => { @@ -522,16 +556,13 @@ class PrivateEdgeList extends React.Component { }; handleResponseErrorClose = () => { - this.setState( - { - ...this.state, - isResponseError: false, - isResponseSuccess: false, - errorMessage: "", - // removeEdgeObj: {} - }, - () => this.props.edgeErrorReset() - ); + this.setState({ + ...this.state, + isResponseError: false, + isResponseSuccess: false, + errorMessage: "", + // removeEdgeObj: {} + }); }; getErrorMessage = () => { @@ -558,11 +589,7 @@ class PrivateEdgeList extends React.Component { }; getSuccessMessage = () => { - if ( - this.props.edges.isDeleteEdgeSuccess && - this.state.removeEdgeObj && - this.state.removeEdgeObj.clusterType === "aws-eks" - ) { + if (this.state.removeEdgeObj) { return ( Delete cluster request submitted successfully. @@ -615,7 +642,7 @@ class PrivateEdgeList extends React.Component { clusterType: "on-prem", clusterCreateStep: 0, downloadClusterYAMLClick: false, - renderInTable: false, + renderInTable: true, removeEdgeObj: {}, versionType: "control plane and nodegroups", selected_nodegroups: [], @@ -623,6 +650,11 @@ class PrivateEdgeList extends React.Component { openDrawer: false, selectedEdgeForGpu: null, custom: false, + kubectlSettingsOpen: false, + cancelAction: null, + action: null, + header: null, + content: null, }; this.reader = null; @@ -765,9 +797,8 @@ class PrivateEdgeList extends React.Component { offset, this.state.searchText, this.state.searchStatus, - this.state.selectedPartner, - this.state.selectedOrg, - this.state.labelQueryParams + this.state.orderBy, + this.state.order ); } @@ -807,9 +838,8 @@ class PrivateEdgeList extends React.Component { offset, this.state.searchText, this.state.searchStatus, - this.state.selectedPartner, - this.state.selectedOrg, - this.state.labelQueryParams + this.state.orderBy, + this.state.order ); } @@ -820,9 +850,8 @@ class PrivateEdgeList extends React.Component { offset, this.state.searchText, this.state.searchStatus, - this.state.selectedPartner, - this.state.selectedOrg, - this.state.labelQueryParams + this.state.orderBy, + this.state.order ); } } @@ -842,9 +871,8 @@ class PrivateEdgeList extends React.Component { offset, this.state.searchText, this.state.searchStatus, - this.state.selectedPartner, - this.state.selectedOrg, - this.state.labelQueryParams + this.state.orderBy, + this.state.order ), 500 ); @@ -906,9 +934,8 @@ class PrivateEdgeList extends React.Component { this.state.offset, this.state.searchText, this.state.searchStatus, - this.state.selectedPartner, - this.state.selectedOrg, - this.state.labelQueryParams + this.state.orderBy, + this.state.order ); if (this.timeInterval) { clearInterval(this.timeInterval); @@ -921,12 +948,13 @@ class PrivateEdgeList extends React.Component { this.state.offset, this.state.searchText, this.state.searchStatus, - this.state.selectedPartner, - this.state.selectedOrg, - this.state.labelQueryParams + this.state.orderBy, + this.state.order ), 30000 ); + this.state.isResponseSuccess = false; + this.setState({ ...this.state }); }; pauseAutoRefresh = () => { @@ -948,9 +976,8 @@ class PrivateEdgeList extends React.Component { this.state.offset, this.state.searchText, this.state.searchStatus, - this.state.selectedPartner, - this.state.selectedOrg, - this.state.labelQueryParams + this.state.orderBy, + this.state.order ), 30000 ); @@ -1178,7 +1205,6 @@ class PrivateEdgeList extends React.Component { if (this.state.edges) { data = this.state.edges; } - if ( data == null || this.state.partners == null || @@ -1283,29 +1309,41 @@ class PrivateEdgeList extends React.Component {
- {n.spec.metro?.name} +
{this.state.userRole !== "READ_ONLY_OPS" && ( - + { + this.handleKubectlSettings(null, n); + }} + > + + + + )} + {this.state.userRole !== "READ_ONLY_OPS" && ( + + Are you sure you want to delete + {n.metadata.name} ? +
+ ), + handleClick: () => { + this.handleRemoveEdge(n, true); + }, }} - > - - + /> )} @@ -1379,6 +1417,15 @@ class PrivateEdgeList extends React.Component { handleCloseCluster={this.handleAddClusterClose} /> )} + {this.state.kubectlSettingsOpen && ( + + )} {this.state.openAddEdgeImages && ( } + heading={} >
@@ -154,7 +154,7 @@ class ToolsDetail extends React.Component { style={{ color: "rgb(117, 117, 117)" }} > Manage {this.props.userAndRoleDetail.metadata.name} - 's API keys and Registry Authorization keys. + 's API keys.
)}
diff --git a/src/appMain/routes/group/routes/List/components/ResourceListTable.js b/src/appMain/routes/group/routes/List/components/ResourceListTable.js index a295717c..5c64799c 100644 --- a/src/appMain/routes/group/routes/List/components/ResourceListTable.js +++ b/src/appMain/routes/group/routes/List/components/ResourceListTable.js @@ -197,6 +197,11 @@ class ResourceListTable extends React.Component { isExpandable: true, value: projectDetails, }, + { + type: "regular", + isExpandable: false, + value: , + }, { type: "regular", isExpandable: false, diff --git a/src/appMain/routes/users/routes/UsersList/UserList.js b/src/appMain/routes/users/routes/UsersList/UserList.js index 102cdd69..af372a1a 100644 --- a/src/appMain/routes/users/routes/UsersList/UserList.js +++ b/src/appMain/routes/users/routes/UsersList/UserList.js @@ -40,6 +40,7 @@ import StatusIndicator from "components/StatusIndicator"; import DataTableToolbar from "./components/DataTableToolbar"; import CreateUserDialog from "./components/CreateUserDialog"; import UserListCellMenu from "./components/UserListCellMenu"; +import { FileCopyOutlined, ArrowBack } from "@material-ui/icons"; const style = { helpText: { @@ -90,6 +91,20 @@ const style = { textAlign: "center", margin: "0 2rem", }, + urlCopy: { + position: "relative", + borderRadius: "3px", + backgroundColor: "whitesmoke", + borderStyle: "solid", + borderWidth: "1px", + borderColor: "grey", + color: "black", + paddingLeft: "15px", + paddingRight: "15px", + minHeight: "40px", + display: "flex", + alignItems: "center", + }, }; class UserList extends React.Component { @@ -725,9 +740,26 @@ class UserList extends React.Component { has been added successfully. Use the following link to set the password:
- - {this.props.newUser?.recoveryUrl} - +
+ + {this.props.newUser?.recoveryUrl} + + + { + navigator.clipboard.writeText( + `${this.props.newUser?.recoveryUrl}` + ); + }} + aria-label="copy" + > + + + +