SONAR-9876 Improve facet badges

server/sonar-web/src/main/js/apps/component-measures/sidebar/DomainFacet.js

@@ -63,6 +63,15 @@ export default class DomainFacet extends React.PureComponent {
     return measureSelected || overviewSelected;
   };
 
+  getValues = () => {
+    const { domain, selected } = this.props;
+    const measureSelected = domain.measures.find(measure => measure.metric.key === selected);
+    const overviewSelected = domain.name === selected && hasBubbleChart(domain.name);
+    return measureSelected
+      ? [getLocalizedMetricName(measureSelected.metric)]
+      : overviewSelected ? [translate('component_measures.domain_overview')] : [];
+  };
+
   renderItemFacetStat = (item /*: MeasureEnhanced */) =>
     hasFacetStat(item.metric.key) ? <FacetMeasureValue measure={item} /> : null;
 
@@ -121,7 +130,7 @@ export default class DomainFacet extends React.PureComponent {
   };
 
   render() {
-    const { domain, selected } = this.props;
+    const { domain } = this.props;
     const helper = `component_measures.domain_facets.${domain.name}.help`;
     const translatedHelper = translate(helper);
     return (
@@ -131,7 +140,7 @@ export default class DomainFacet extends React.PureComponent {
           name={getLocalizedMetricDomain(domain.name)}
           onClick={this.handleHeaderClick}
           open={this.props.open}
-          values={this.hasFacetSelected(domain, domain.measures, selected) ? 1 : 0}
+          values={this.getValues()}
         />
 
         {this.props.open && (

server/sonar-web/src/main/js/apps/component-measures/sidebar/__tests__/__snapshots__/DomainFacet-test.js.snap

@@ -6,7 +6,7 @@ exports[`should display facet item list 1`] = `
     name="Reliability"
     onClick={[Function]}
     open={true}
-    values={0}
+    values={Array []}
   />
   <FacetItemsList>
     <FacetItem
@@ -129,7 +129,11 @@ exports[`should display facet item list with bugs selected 1`] = `
     name="Reliability"
     onClick={[Function]}
     open={true}
-    values={1}
+    values={
+      Array [
+        "Bugs",
+      ]
+    }
   />
   <FacetItemsList>
     <FacetItem

server/sonar-web/src/main/js/apps/issues/sidebar/AssigneeFacet.js

@@ -121,6 +121,17 @@ export default class AssigneeFacet extends React.PureComponent {
     return stats ? stats[assignee] : null;
   }
 
+  getValues() {
+    const values = this.props.assignees.map(assignee => {
+      const user = this.props.referencedUsers[assignee];
+      return user ? user.name : assignee;
+    });
+    if (!this.props.assigned) {
+      values.push(translate('unassigned'));
+    }
+    return values;
+  }
+
   renderOption = (option /*: { avatar: string, label: string } */) => {
     return (
       <span>
@@ -190,7 +201,7 @@ export default class AssigneeFacet extends React.PureComponent {
           onClear={this.handleClear}
           onClick={this.handleHeaderClick}
           open={this.props.open}
-          values={this.props.assignees.length + (this.props.assigned ? 0 : 1)}
+          values={this.getValues()}
         />
 
         {this.props.open && this.renderList()}

server/sonar-web/src/main/js/apps/issues/sidebar/AuthorFacet.js

@@ -101,7 +101,7 @@ export default class AuthorFacet extends React.PureComponent {
           onClear={this.handleClear}
           onClick={this.handleHeaderClick}
           open={this.props.open}
-          values={this.props.authors.length}
+          values={this.props.authors}
         />
 
         {this.props.open && this.renderList()}

server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.js

@@ -119,6 +119,34 @@ export default class CreationDateFacet extends React.PureComponent {
 
   handleLeakPeriodClick = () => this.resetTo({ sinceLeakPeriod: true });
 
+  getValues() {
+    const { createdAfter, createdAt, createdBefore, createdInLast, sinceLeakPeriod } = this.props;
+    const { formatDate } = this.context.intl;
+    const values = [];
+    if (createdAfter) {
+      values.push(formatDate(createdAfter, longFormatterOption));
+    }
+    if (createdAt) {
+      values.push(formatDate(createdAt, longFormatterOption));
+    }
+    if (createdBefore) {
+      values.push(formatDate(createdBefore, longFormatterOption));
+    }
+    if (createdInLast === '1w') {
+      values.push(translate('issues.facet.createdAt.last_week'));
+    }
+    if (createdInLast === '1m') {
+      values.push(translate('issues.facet.createdAt.last_month'));
+    }
+    if (createdInLast === '1y') {
+      values.push(translate('issues.facet.createdAt.last_year'));
+    }
+    if (sinceLeakPeriod) {
+      values.push(translate('issues.leak_period'));
+    }
+    return values;
+  }
+
   renderBarChart() {
     const { createdBefore, stats } = this.props;
 
@@ -286,7 +314,7 @@ export default class CreationDateFacet extends React.PureComponent {
           onClear={this.handleClear}
           onClick={this.handleHeaderClick}
           open={this.props.open}
-          values={this.hasValue() ? 1 : 0}
+          values={this.getValues()}
         />
 
         {this.props.open && this.renderInner()}

server/sonar-web/src/main/js/apps/issues/sidebar/DirectoryFacet.js

@@ -26,6 +26,7 @@ import FacetItem from '../../../components/facet/FacetItem';
 import FacetItemsList from '../../../components/facet/FacetItemsList';
 import QualifierIcon from '../../../components/shared/QualifierIcon';
 import { translate } from '../../../helpers/l10n';
+import { collapsePath } from '../../../helpers/path';
 import { formatFacetStat } from '../utils';
 /*:: import type { ReferencedComponent } from '../utils'; */
 
@@ -74,17 +75,10 @@ export default class DirectoryFacet extends React.PureComponent {
   }
 
   renderName(directory /*: string */) /*: React.Element<*> | string */ {
-    // `referencedComponents` are indexed by uuid
-    // so we have to browse them all to find a matching one
-    const { referencedComponents } = this.props;
-    const uuid = Object.keys(referencedComponents).find(
-      uuid => referencedComponents[uuid].key === directory
-    );
-    const name = uuid ? referencedComponents[uuid].name : directory;
     return (
       <span>
         <QualifierIcon className="little-spacer-right" qualifier="DIR" />
-        {name}
+        {directory}
       </span>
     );
   }
@@ -115,6 +109,7 @@ export default class DirectoryFacet extends React.PureComponent {
   }
 
   render() {
+    const values = this.props.directories.map(dir => collapsePath(dir));
     return (
       <FacetBox>
         <FacetHeader
@@ -122,7 +117,7 @@ export default class DirectoryFacet extends React.PureComponent {
           onClear={this.handleClear}
           onClick={this.handleHeaderClick}
           open={this.props.open}
-          values={this.props.directories.length}
+          values={values}
         />
 
         {this.props.open && this.renderList()}

server/sonar-web/src/main/js/apps/issues/sidebar/FileFacet.js

@@ -72,11 +72,13 @@ export default class FileFacet extends React.PureComponent {
     return stats ? stats[file] : null;
   }
 
-  renderName(file /*: string */) /*: React.Element<*> | string */ {
+  getFileName(file /*: string */) {
     const { referencedComponents } = this.props;
-    const name = referencedComponents[file]
-      ? collapsePath(referencedComponents[file].path, 15)
-      : file;
+    return referencedComponents[file] ? collapsePath(referencedComponents[file].path, 15) : file;
+  }
+
+  renderName(file /*: string */) /*: React.Element<*> | string */ {
+    const name = this.getFileName(file);
     return (
       <span>
         <QualifierIcon className="little-spacer-right" qualifier="FIL" />
@@ -111,6 +113,7 @@ export default class FileFacet extends React.PureComponent {
   }
 
   render() {
+    const values = this.props.files.map(file => this.getFileName(file));
     return (
       <FacetBox>
         <FacetHeader
@@ -118,7 +121,7 @@ export default class FileFacet extends React.PureComponent {
           onClear={this.handleClear}
           onClick={this.handleHeaderClick}
           open={this.props.open}
-          values={this.props.files.length}
+          values={values}
         />
 
         {this.props.open && this.renderList()}

server/sonar-web/src/main/js/apps/issues/sidebar/LanguageFacet.js

@@ -115,6 +115,7 @@ export default class LanguageFacet extends React.PureComponent {
   }
 
   render() {
+    const values = this.props.languages.map(language => this.getLanguageName(language));
     return (
       <FacetBox>
         <FacetHeader
@@ -122,7 +123,7 @@ export default class LanguageFacet extends React.PureComponent {
           onClear={this.handleClear}
           onClick={this.handleHeaderClick}
           open={this.props.open}
-          values={this.props.languages.length}
+          values={values}
         />
 
         {this.props.open && this.renderList()}

server/sonar-web/src/main/js/apps/issues/sidebar/ModuleFacet.js

@@ -71,13 +71,16 @@ export default class ModuleFacet extends React.PureComponent {
     return stats ? stats[module] : null;
   }
 
-  renderName(module /*: string */) /*: React.Element<*> | string */ {
+  getModuleName(module /*: string */) {
     const { referencedComponents } = this.props;
-    const name = referencedComponents[module] ? referencedComponents[module].name : module;
+    return referencedComponents[module] ? referencedComponents[module].name : module;
+  }
+
+  renderName(module /*: string */) /*: React.Element<*> | string */ {
     return (
       <span>
         <QualifierIcon className="little-spacer-right" qualifier="BRC" />
-        {name}
+        {this.getModuleName(module)}
       </span>
     );
   }
@@ -108,6 +111,7 @@ export default class ModuleFacet extends React.PureComponent {
   }
 
   render() {
+    const values = this.props.modules.map(module => this.getModuleName(module));
     return (
       <FacetBox>
         <FacetHeader
@@ -115,7 +119,7 @@ export default class ModuleFacet extends React.PureComponent {
           onClear={this.handleClear}
           onClick={this.handleHeaderClick}
           open={this.props.open}
-          values={this.props.modules.length}
+          values={values}
         />
 
         {this.props.open && this.renderList()}

server/sonar-web/src/main/js/apps/issues/sidebar/ProjectFacet.js

@@ -106,6 +106,11 @@ export default class ProjectFacet extends React.PureComponent {
     return stats ? stats[project] : null;
   }
 
+  getProjectName(project /*: string */) {
+    const { referencedComponents } = this.props;
+    return referencedComponents[project] ? referencedComponents[project].name : project;
+  }
+
   renderName(project /*: string */) /*: React.Element<*> | string */ {
     const { organization, referencedComponents } = this.props;
     return referencedComponents[project] ? (
@@ -174,6 +179,7 @@ export default class ProjectFacet extends React.PureComponent {
   }
 
   render() {
+    const values = this.props.projects.map(project => this.getProjectName(project));
     return (
       <FacetBox>
         <FacetHeader
@@ -181,7 +187,7 @@ export default class ProjectFacet extends React.PureComponent {
           onClear={this.handleClear}
           onClick={this.handleHeaderClick}
           open={this.props.open}
-          values={this.props.projects.length}
+          values={values}
         />
 
         {this.props.open && this.renderList()}

server/sonar-web/src/main/js/apps/issues/sidebar/ResolutionFacet.js

@@ -105,6 +105,7 @@ export default class ResolutionFacet extends React.PureComponent {
 
   render() {
     const resolutions = ['', 'FIXED', 'FALSE-POSITIVE', 'WONTFIX', 'REMOVED'];
+    const values = this.props.resolutions.map(resolution => this.getFacetItemName(resolution));
 
     return (
       <FacetBox>
@@ -113,7 +114,7 @@ export default class ResolutionFacet extends React.PureComponent {
           onClear={this.handleClear}
           onClick={this.handleHeaderClick}
           open={this.props.open}
-          values={this.props.resolutions.length}
+          values={values}
         />
 
         {this.props.open && <FacetItemsList>{resolutions.map(this.renderItem)}</FacetItemsList>}

server/sonar-web/src/main/js/apps/issues/sidebar/RuleFacet.js

@@ -127,6 +127,7 @@ export default class RuleFacet extends React.PureComponent {
   }
 
   render() {
+    const values = this.props.rules.map(rule => this.getRuleName(rule));
     return (
       <FacetBox>
         <FacetHeader
@@ -134,7 +135,7 @@ export default class RuleFacet extends React.PureComponent {
           onClear={this.handleClear}
           onClick={this.handleHeaderClick}
           open={this.props.open}
-          values={this.props.rules.length}
+          values={values}
         />
 
         {this.props.open && this.renderList()}

server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.js

@@ -89,6 +89,7 @@ export default class SeverityFacet extends React.PureComponent {
 
   render() {
     const severities = ['BLOCKER', 'MINOR', 'CRITICAL', 'INFO', 'MAJOR'];
+    const values = this.props.severities.map(severity => translate('severity', severity));
 
     return (
       <FacetBox>
@@ -97,7 +98,7 @@ export default class SeverityFacet extends React.PureComponent {
           onClear={this.handleClear}
           onClick={this.handleHeaderClick}
           open={this.props.open}
-          values={this.props.severities.length}
+          values={values}
         />
 
         {this.props.open && <FacetItemsList>{severities.map(this.renderItem)}</FacetItemsList>}

server/sonar-web/src/main/js/apps/issues/sidebar/StatusFacet.js

@@ -96,6 +96,7 @@ export default class StatusFacet extends React.PureComponent {
 
   render() {
     const statuses = ['OPEN', 'RESOLVED', 'REOPENED', 'CLOSED', 'CONFIRMED'];
+    const values = this.props.statuses.map(status => translate('issue.status', status));
 
     return (
       <FacetBox>
@@ -104,7 +105,7 @@ export default class StatusFacet extends React.PureComponent {
           onClear={this.handleClear}
           onClick={this.handleHeaderClick}
           open={this.props.open}
-          values={this.props.statuses.length}
+          values={values}
         />
 
         {this.props.open && <FacetItemsList>{statuses.map(this.renderItem)}</FacetItemsList>}

server/sonar-web/src/main/js/apps/issues/sidebar/TagFacet.js

@@ -138,7 +138,7 @@ export default class TagFacet extends React.PureComponent {
           onClear={this.handleClear}
           onClick={this.handleHeaderClick}
           open={this.props.open}
-          values={this.props.tags.length}
+          values={this.props.tags}
         />
 
         {this.props.open && this.renderList()}

server/sonar-web/src/main/js/apps/issues/sidebar/TypeFacet.js

@@ -92,6 +92,7 @@ export default class TypeFacet extends React.PureComponent {
 
   render() {
     const types = ['BUG', 'VULNERABILITY', 'CODE_SMELL'];
+    const values = this.props.types.map(type => translate('issue.type', type));
 
     return (
       <FacetBox>
@@ -100,7 +101,7 @@ export default class TypeFacet extends React.PureComponent {
           onClear={this.handleClear}
           onClick={this.handleHeaderClick}
           open={this.props.open}
-          values={this.props.types.length}
+          values={values}
         />
 
         {this.props.open && <FacetItemsList>{types.map(this.renderItem)}</FacetItemsList>}

server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/AssigneeFacet-test.js.snap

@@ -7,7 +7,7 @@ exports[`should render 1`] = `
     onClear={[Function]}
     onClick={[Function]}
     open={true}
-    values={0}
+    values={Array []}
   />
   <FacetItemsList>
     <FacetItem
@@ -75,7 +75,7 @@ exports[`should render without stats 1`] = `
     onClear={[Function]}
     onClick={[Function]}
     open={true}
-    values={0}
+    values={Array []}
   />
 </FacetBox>
 `;
@@ -87,7 +87,11 @@ exports[`should select unassigned 1`] = `
     onClear={[Function]}
     onClick={[Function]}
     open={true}
-    values={1}
+    values={
+      Array [
+        "unassigned",
+      ]
+    }
   />
   <FacetItemsList>
     <FacetItem
@@ -143,7 +147,11 @@ exports[`should select user 1`] = `
     onClear={[Function]}
     onClick={[Function]}
     open={true}
-    values={1}
+    values={
+      Array [
+        "name-foo",
+      ]
+    }
   />
   <FacetItemsList>
     <FacetItem

server/sonar-web/src/main/js/components/facet/FacetHeader.js

@@ -18,12 +18,11 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 // @flow
-/* eslint-disable max-len */
 import React from 'react';
 import OpenCloseIcon from '../icons-components/OpenCloseIcon';
 import HelpIcon from '../icons-components/HelpIcon';
 import Tooltip from '../controls/Tooltip';
-import { translate } from '../../helpers/l10n';
+import { translate, translateWithParameters } from '../../helpers/l10n';
 
 /*::
 type Props = {|
@@ -32,7 +31,7 @@ type Props = {|
   onClear?: () => void,
   onClick?: () => void,
   open: boolean,
-  values?: number
+  values?: Array<string>
 |};
 */
 
@@ -73,27 +72,25 @@ export default class FacetHeader extends React.PureComponent {
   }
 
   renderValueIndicator() {
-    if (this.props.open || !this.props.values) {
+    const { values } = this.props;
+    if (this.props.open || !values || !values.length) {
       return null;
     }
+    const value =
+      values.length === 1 ? values[0] : translateWithParameters('x_selected', values.length);
     return (
-      <span className="spacer-left badge badge-secondary is-rounded">{this.props.values}</span>
+      <span className="badge badge-secondary is-rounded text-ellipsis" title={value}>
+        {value}
+      </span>
     );
   }
 
   render() {
-    const showClearButton /*: boolean */ = !!this.props.values && this.props.onClear != null;
+    const showClearButton =
+      this.props.values != null && this.props.values.length > 0 && this.props.onClear != null;
 
     return (
-      <div>
-        {showClearButton && (
-          <button
-            className="search-navigator-facet-header-button button-small button-red"
-            onClick={this.handleClearClick}>
-            {translate('clear')}
-          </button>
-        )}
-
+      <div className="search-navigator-facet-header-wrapper">
         {this.props.onClick ? (
           <span className="search-navigator-facet-header">
             <a href="#" onClick={this.handleClick}>
@@ -101,7 +98,6 @@ export default class FacetHeader extends React.PureComponent {
               {this.props.name}
             </a>
             {this.renderHelper()}
-            {this.renderValueIndicator()}
           </span>
         ) : (
           <span className="search-navigator-facet-header">
@@ -109,6 +105,18 @@ export default class FacetHeader extends React.PureComponent {
             {this.renderHelper()}
           </span>
         )}
+
+        <span className="search-navigator-facet-header-value spacer-left spacer-right ">
+          {this.renderValueIndicator()}
+        </span>
+
+        {showClearButton && (
+          <button
+            className="search-navigator-facet-header-button button-small button-red"
+            onClick={this.handleClearClick}>
+            {translate('clear')}
+          </button>
+        )}
       </div>
     );
   }

server/sonar-web/src/main/js/components/facet/__tests__/FacetHeader-test.js

@@ -25,7 +25,7 @@ import FacetHeader from '../FacetHeader';
 
 it('should render open facet with value', () => {
   expect(
-    shallow(<FacetHeader name="foo" onClick={jest.fn()} open={true} values={1} />)
+    shallow(<FacetHeader name="foo" onClick={jest.fn()} open={true} values={['foo']} />)
   ).toMatchSnapshot();
 });
 
@@ -35,7 +35,7 @@ it('should render open facet without value', () => {
 
 it('should render closed facet with value', () => {
   expect(
-    shallow(<FacetHeader name="foo" onClick={jest.fn()} open={false} values={1} />)
+    shallow(<FacetHeader name="foo" onClick={jest.fn()} open={false} values={['foo']} />)
   ).toMatchSnapshot();
 });
 
@@ -57,7 +57,13 @@ it('should call onClick', () => {
 it('should clear', () => {
   const onClear = jest.fn();
   const wrapper = shallow(
-    <FacetHeader name="foo" onClear={onClear} onClick={jest.fn()} open={false} values={3} />
+    <FacetHeader
+      name="foo"
+      onClear={onClear}
+      onClick={jest.fn()}
+      open={false}
+      values={['foo', 'bar', 'baz']}
+    />
   );
   expect(wrapper).toMatchSnapshot();
   click(wrapper.find('.button-red'));

server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.js.snap

@@ -1,13 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should clear 1`] = `
-<div>
-  <button
-    className="search-navigator-facet-header-button button-small button-red"
-    onClick={[Function]}
-  >
-    clear
-  </button>
+<div
+  className="search-navigator-facet-header-wrapper"
+>
   <span
     className="search-navigator-facet-header"
   >
@@ -21,17 +17,30 @@ exports[`should clear 1`] = `
       />
       foo
     </a>
+  </span>
+  <span
+    className="search-navigator-facet-header-value spacer-left spacer-right "
+  >
     <span
-      className="spacer-left badge badge-secondary is-rounded"
+      className="badge badge-secondary is-rounded text-ellipsis"
+      title="x_selected.3"
     >
-      3
+      x_selected.3
     </span>
   </span>
+  <button
+    className="search-navigator-facet-header-button button-small button-red"
+    onClick={[Function]}
+  >
+    clear
+  </button>
 </div>
 `;
 
 exports[`should render closed facet with value 1`] = `
-<div>
+<div
+  className="search-navigator-facet-header-wrapper"
+>
   <span
     className="search-navigator-facet-header"
   >
@@ -45,17 +54,24 @@ exports[`should render closed facet with value 1`] = `
       />
       foo
     </a>
+  </span>
+  <span
+    className="search-navigator-facet-header-value spacer-left spacer-right "
+  >
     <span
-      className="spacer-left badge badge-secondary is-rounded"
+      className="badge badge-secondary is-rounded text-ellipsis"
+      title="foo"
     >
-      1
+      foo
     </span>
   </span>
 </div>
 `;
 
 exports[`should render closed facet without value 1`] = `
-<div>
+<div
+  className="search-navigator-facet-header-wrapper"
+>
   <span
     className="search-navigator-facet-header"
   >
@@ -70,11 +86,16 @@ exports[`should render closed facet without value 1`] = `
       foo
     </a>
   </span>
+  <span
+    className="search-navigator-facet-header-value spacer-left spacer-right "
+  />
 </div>
 `;
 
 exports[`should render open facet with value 1`] = `
-<div>
+<div
+  className="search-navigator-facet-header-wrapper"
+>
   <span
     className="search-navigator-facet-header"
   >
@@ -89,11 +110,16 @@ exports[`should render open facet with value 1`] = `
       foo
     </a>
   </span>
+  <span
+    className="search-navigator-facet-header-value spacer-left spacer-right "
+  />
 </div>
 `;
 
 exports[`should render open facet without value 1`] = `
-<div>
+<div
+  className="search-navigator-facet-header-wrapper"
+>
   <span
     className="search-navigator-facet-header"
   >
@@ -108,15 +134,23 @@ exports[`should render open facet without value 1`] = `
       foo
     </a>
   </span>
+  <span
+    className="search-navigator-facet-header-value spacer-left spacer-right "
+  />
 </div>
 `;
 
 exports[`should render without link 1`] = `
-<div>
+<div
+  className="search-navigator-facet-header-wrapper"
+>
   <span
     className="search-navigator-facet-header"
   >
     foo
   </span>
+  <span
+    className="search-navigator-facet-header-value spacer-left spacer-right "
+  />
 </div>
 `;

server/sonar-web/src/main/less/components/search-navigator.less

@@ -360,9 +360,12 @@
 
 .search-navigator-facet-header {
   display: block;
+  flex-shrink: 0;
   padding: 8px 0;
   color: @baseFontColor;
   font-weight: 600;
+  overflow: hidden;
+  white-space: nowrap;
 
   & > a {
     border-bottom: none;
@@ -378,9 +381,24 @@
   }
 }
 
+.search-navigator-facet-header-value {
+  display: block;
+  padding: 8px 0;
+  overflow: hidden;
+}
+
+.search-navigator-facet-header-value > .badge {
+  display: block;
+}
+
 .search-navigator-facet-header-button {
-  float: right;
-  margin-top: 6px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.search-navigator-facet-header-wrapper {
+  display: flex;
+  align-items: center;
 }
 
 .search-navigator-facet-list {

sonar-core/src/main/resources/org/sonar/l10n/core.properties

@@ -142,6 +142,7 @@ set=Set
 severity=Severity
 shared=Shared
 x_show={0} shown
+x_selected={0} selected
 x_of_y_shown={0} of {1} shown
 size=Size
 status=Status