sort by time

Signed-off-by: Hailong Cui <[email protected]>

src/plugins/workspace/public/components/service_card/workspace_list_card.tsx

@@ -35,7 +35,7 @@ const WORKSPACE_LIST_CARD_DESCRIPTIOIN = i18n.translate('workspace.list.card.des
     'Workspaces are dedicated environments for organizing and collaborating on your data, dashboards, and analytics workflows. Each Workspace acts as a self-contained space with its own set of saved objects and access controls.',
 });
 
-const MAX_ITEM_IN_LIST = 6;
+const MAX_ITEM_IN_LIST = 5;
 
 export interface WorkspaceListCardProps {
   core: CoreStart;
@@ -94,9 +94,7 @@ export class WorkspaceListCard extends Component<WorkspaceListCardProps, Workspa
   private loadWorkspaceListItems() {
     if (this.state.filter === 'viewed') {
       this.setState({
-        workspaceList: this.state.recentWorkspaces
-          .sort()
-          .reverse()
+        workspaceList: _.sortBy(this.state.recentWorkspaces, ['visitTime'])
           .filter((ws) => this.state.availiableWorkspaces.some((a) => a.name === ws.workspaceName))
           .slice(0, MAX_ITEM_IN_LIST)
           .map((ws) => ({
@@ -107,7 +105,7 @@ export class WorkspaceListCard extends Component<WorkspaceListCardProps, Workspa
       });
     } else if (this.state.filter === 'updated') {
       this.setState({
-        workspaceList: this.state.availiableWorkspaces
+        workspaceList: _.sortBy(this.state.availiableWorkspaces, ['lastUpdatedTime'])
           .sort()
           .reverse()
           .slice(0, MAX_ITEM_IN_LIST)
@@ -205,18 +203,20 @@ export class WorkspaceListCard extends Component<WorkspaceListCardProps, Workspa
           ) : (
             <EuiDescriptionList
               type="column"
+              titleProps={{ style: { width: '70%' } }}
+              descriptionProps={{ style: { width: '30%' } }}
               listItems={workspaceList.map((workspace) => ({
                 title: (
                   <EuiLink
                     onClick={() => {
                       this.handleSwitchWorkspace(workspace.id);
                     }}
                   >
-                    {workspace.name}
+                    <EuiText size="s">{workspace.name}</EuiText>
                   </EuiLink>
                 ),
                 description: (
-                  <EuiText color="subdued" className="eui-textRight">
+                  <EuiText size="s" color="subdued" className="eui-textRight">
                     {moment(workspace.time).fromNow()}
                   </EuiText>
                 ),