Skip to content

Commit

Permalink
feat(ui): improve summary tab styling (canonical#1858)
Browse files Browse the repository at this point in the history
  • Loading branch information
Caleb Ellis authored Nov 11, 2020
1 parent acb8b8c commit ea96999
Show file tree
Hide file tree
Showing 13 changed files with 120 additions and 108 deletions.
30 changes: 20 additions & 10 deletions ui/.betterer.results
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ exports[`stricter compilation`] = {
[162, 4, 36, "Object is possibly \'null\'.", "1039669632"]
],
"src/app/App.tsx:2048624384": [
[21, 7, 25, "Could not find a declaration file for module \'@maas-ui/maas-ui-shared\'. \'/home/caleb/Projects/maas-ui/shared/dist/index.js\' implicitly has an \'any\' type.\\n Try \`npm install @types/maas-ui__maas-ui-shared\` if it exists or add a new declaration (.d.ts) file containing \`declare module \'@maas-ui/maas-ui-shared\';\`", "1778274862"],
[188, 17, 17, "Object is possibly \'null\'.", "2133029343"],
[193, 7, 7, "Variable \'content\' is used before being assigned.", "3716929964"]
],
Expand Down Expand Up @@ -41,6 +42,9 @@ exports[`stricter compilation`] = {
"src/app/base/components/FormikForm/FormikForm.tsx:1590075926": [
[77, 4, 5, "Argument of type \'boolean | undefined\' is not assignable to parameter of type \'boolean\'.\\n Type \'undefined\' is not assignable to type \'boolean\'.", "195688512"]
],
"src/app/base/components/LegacyLink/LegacyLink.tsx:2706551295": [
[4, 52, 25, "Could not find a declaration file for module \'@maas-ui/maas-ui-shared\'. \'/home/caleb/Projects/maas-ui/shared/dist/index.js\' implicitly has an \'any\' type.\\n Try \`npm install @types/maas-ui__maas-ui-shared\` if it exists or add a new declaration (.d.ts) file containing \`declare module \'@maas-ui/maas-ui-shared\';\`", "1778274862"]
],
"src/app/base/components/NotificationGroup/Notification/Notification.tsx:122297593": [
[26, 26, 12, "Argument of type \'Notification | null\' is not assignable to parameter of type \'Notification\'.\\n Type \'null\' is not assignable to type \'Notification\'.\\n Type \'null\' is not assignable to type \'Model\'.", "148512008"],
[31, 8, 12, "Object is possibly \'null\'.", "148512008"],
Expand Down Expand Up @@ -81,7 +85,7 @@ exports[`stricter compilation`] = {
[214, 7, 11, "Property \'placeholder\' is missing in type \'{ disabledTags: { id: number; name: string; }[]; initialSelected: { id: number; name: string; }[]; tags: { id: number; name: string; }[]; }\' but required in type \'Props\'.", "3766634306"]
],
"src/app/base/components/TagSelector/TagSelector.tsx:2755544058": [
[1, 18, 51, "Could not find a declaration file for module \'@canonical/react-components/dist/components/Field\'. \'/home/multipass/code/maas-ui/node_modules/@canonical/react-components/dist/components/Field/index.js\' implicitly has an \'any\' type.\\n Try \`npm install @types/canonical__react-components\` if it exists or add a new declaration (.d.ts) file containing \`declare module \'@canonical/react-components/dist/components/Field\';\`", "1535046059"],
[1, 18, 51, "Could not find a declaration file for module \'@canonical/react-components/dist/components/Field\'. \'/home/caleb/Projects/maas-ui/node_modules/@canonical/react-components/dist/components/Field/index.js\' implicitly has an \'any\' type.\\n Try \`npm install @types/canonical__react-components\` if it exists or add a new declaration (.d.ts) file containing \`declare module \'@canonical/react-components/dist/components/Field\';\`", "1535046059"],
[37, 2, 12, "Binding element \'allowNewTags\' implicitly has an \'any\' type.", "3979358209"],
[38, 2, 6, "Binding element \'filter\' implicitly has an \'any\' type.", "1355726373"],
[39, 2, 12, "Binding element \'selectedTags\' implicitly has an \'any\' type.", "2698915821"],
Expand Down Expand Up @@ -347,16 +351,19 @@ exports[`stricter compilation`] = {
"src/app/machines/views/MachineDetails/MachineSummary/NumaCard/NumaCard.test.tsx:2502469861": [
[33, 27, 10, "Property \'numa_nodes\' does not exist on type \'Machine\'.\\n Property \'numa_nodes\' does not exist on type \'BaseMachine\'.", "3857696382"]
],
"src/app/machines/views/MachineDetails/MachineSummary/TestResults/TestResults.tsx:247086798": [
"src/app/machines/views/MachineDetails/MachineSummary/OverviewCard/DetailsCard/DetailsCard.tsx:2883346391": [
[4, 33, 25, "Could not find a declaration file for module \'@maas-ui/maas-ui-shared\'. \'/home/caleb/Projects/maas-ui/shared/dist/index.js\' implicitly has an \'any\' type.\\n Try \`npm install @types/maas-ui__maas-ui-shared\` if it exists or add a new declaration (.d.ts) file containing \`declare module \'@maas-ui/maas-ui-shared\';\`", "1778274862"]
],
"src/app/machines/views/MachineDetails/MachineSummary/TestResults/TestResults.tsx:3588892375": [
[18, 18, 36, "Element implicitly has an \'any\' type because expression of type \'string\' can\'t be used to index type \'MachineDetails\'.\\n No index signature with a parameter of type \'string\' was found on type \'MachineDetails\'.", "830072625"],
[37, 9, 36, "Element implicitly has an \'any\' type because expression of type \'string\' can\'t be used to index type \'MachineDetails\'.\\n No index signature with a parameter of type \'string\' was found on type \'MachineDetails\'.", "830072625"],
[50, 15, 36, "Element implicitly has an \'any\' type because expression of type \'string\' can\'t be used to index type \'MachineDetails\'.\\n No index signature with a parameter of type \'string\' was found on type \'MachineDetails\'.", "830072625"],
[55, 9, 36, "Element implicitly has an \'any\' type because expression of type \'string\' can\'t be used to index type \'MachineDetails\'.\\n No index signature with a parameter of type \'string\' was found on type \'MachineDetails\'.", "830072625"],
[56, 10, 36, "Element implicitly has an \'any\' type because expression of type \'string\' can\'t be used to index type \'MachineDetails\'.\\n No index signature with a parameter of type \'string\' was found on type \'MachineDetails\'.", "830072625"],
[70, 15, 36, "Element implicitly has an \'any\' type because expression of type \'string\' can\'t be used to index type \'MachineDetails\'.\\n No index signature with a parameter of type \'string\' was found on type \'MachineDetails\'.", "830072625"],
[71, 16, 36, "Element implicitly has an \'any\' type because expression of type \'string\' can\'t be used to index type \'MachineDetails\'.\\n No index signature with a parameter of type \'string\' was found on type \'MachineDetails\'.", "830072625"],
[76, 9, 36, "Element implicitly has an \'any\' type because expression of type \'string\' can\'t be used to index type \'MachineDetails\'.\\n No index signature with a parameter of type \'string\' was found on type \'MachineDetails\'.", "830072625"],
[89, 15, 36, "Element implicitly has an \'any\' type because expression of type \'string\' can\'t be used to index type \'MachineDetails\'.\\n No index signature with a parameter of type \'string\' was found on type \'MachineDetails\'.", "830072625"]
[51, 17, 36, "Element implicitly has an \'any\' type because expression of type \'string\' can\'t be used to index type \'MachineDetails\'.\\n No index signature with a parameter of type \'string\' was found on type \'MachineDetails\'.", "830072625"],
[57, 9, 36, "Element implicitly has an \'any\' type because expression of type \'string\' can\'t be used to index type \'MachineDetails\'.\\n No index signature with a parameter of type \'string\' was found on type \'MachineDetails\'.", "830072625"],
[58, 10, 36, "Element implicitly has an \'any\' type because expression of type \'string\' can\'t be used to index type \'MachineDetails\'.\\n No index signature with a parameter of type \'string\' was found on type \'MachineDetails\'.", "830072625"],
[73, 17, 36, "Element implicitly has an \'any\' type because expression of type \'string\' can\'t be used to index type \'MachineDetails\'.\\n No index signature with a parameter of type \'string\' was found on type \'MachineDetails\'.", "830072625"],
[74, 18, 36, "Element implicitly has an \'any\' type because expression of type \'string\' can\'t be used to index type \'MachineDetails\'.\\n No index signature with a parameter of type \'string\' was found on type \'MachineDetails\'.", "830072625"],
[80, 9, 36, "Element implicitly has an \'any\' type because expression of type \'string\' can\'t be used to index type \'MachineDetails\'.\\n No index signature with a parameter of type \'string\' was found on type \'MachineDetails\'.", "830072625"],
[94, 17, 36, "Element implicitly has an \'any\' type because expression of type \'string\' can\'t be used to index type \'MachineDetails\'.\\n No index signature with a parameter of type \'string\' was found on type \'MachineDetails\'.", "830072625"]
],
"src/app/machines/views/MachineList/MachineListHeader/MachineListHeader.tsx:539216384": [
[104, 10, 17, "Type \'(action: MachineAction, deselect?: boolean | undefined) => void\' is not assignable to type \'SetSelectedAction\'.\\n Types of parameters \'action\' and \'action\' are incompatible.\\n Type \'SelectedAction | null\' is not assignable to type \'MachineAction\'.\\n Type \'null\' is not assignable to type \'MachineAction\'.", "167402512"],
Expand All @@ -383,6 +390,9 @@ exports[`stricter compilation`] = {
[87, 4, 39, "Cannot invoke an object which is possibly \'undefined\'.", "2019447570"],
[92, 6, 24, "Expected 1 arguments, but got 2.", "3437019925"]
],
"src/app/settings/views/Configuration/GeneralForm/GeneralForm.tsx:227377903": [
[5, 34, 25, "Could not find a declaration file for module \'@maas-ui/maas-ui-shared\'. \'/home/caleb/Projects/maas-ui/shared/dist/index.js\' implicitly has an \'any\' type.\\n Try \`npm install @types/maas-ui__maas-ui-shared\` if it exists or add a new declaration (.d.ts) file containing \`declare module \'@maas-ui/maas-ui-shared\';\`", "1778274862"]
],
"src/app/settings/views/LicenseKeys/LicenseKeyList/LicenseKeyList.test.tsx:3551628603": [
[25, 10, 4, "Type \'{ osystems: [string, string][]; releases: [string, string][]; }\' is missing the following properties from type \'OSInfo\': kernels, default_osystem, default_release", "2087377941"]
],
Expand Down Expand Up @@ -509,7 +519,7 @@ exports[`stricter compilation`] = {
[233, 2, 4, "Type \'null\' is not assignable to type \'OSInfo | ArrayFactory<never> | AttributeFunction<OSInfo> | Factory<OSInfo> | DerivedFunction<OSInfoState, OSInfo>\'.", "2087377941"],
[312, 2, 6, "Type \'null\' is not assignable to type \'string | ArrayFactory<never> | AttributeFunction<string> | Factory<string> | DerivedFunction<Location<PoorMansUnknown>, string>\'.", "2158674347"],
[314, 2, 4, "Type \'null\' is not assignable to type \'string | ArrayFactory<never> | AttributeFunction<string> | Factory<string> | DerivedFunction<Location<PoorMansUnknown>, string>\'.", "2087809207"],
[319, 2, 6, "Type \'null\' is not assignable to type \'\\"PUSH\\" | \\"POP\\" | \\"REPLACE\\" | ArrayFactory<never> | AttributeFunction<Action> | Factory<Action> | DerivedFunction<RouterState<PoorMansUnknown>, Action>\'.", "1314712411"]
[319, 2, 6, "Type \'null\' is not assignable to type \'ArrayFactory<never> | \\"PUSH\\" | \\"POP\\" | \\"REPLACE\\" | AttributeFunction<Action> | Factory<Action> | DerivedFunction<RouterState<PoorMansUnknown>, Action>\'.", "1314712411"]
]
}`
};
Expand Down
5 changes: 2 additions & 3 deletions ui/src/app/machines/views/MachineDetails/MachineSummary/NetworkCard/NetworkCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,11 +144,10 @@ const NetworkCard = ({ id, setSelectedAction }: Props): JSX.Element => {
<NetworkCardTable interfaces={group.interfaces} />
</Fragment>
))}
<span>
<p>
Information about tagged traffic can be seen in the{" "}
<Link to={`/machine/${id}/network`}>Network tab</Link>.
</span>

</p>
<TestResults
machine={machine}
hardwareType={HardwareType.Network}
Expand Down
50 changes: 24 additions & 26 deletions ui/src/app/machines/views/MachineDetails/MachineSummary/NumaCard/NumaCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ const NumaCard = ({ id }: Props): JSX.Element => {
const machine = useSelector((state: RootState) =>
machineSelectors.getById(state, id)
);
let content: JSX.Element;
let numaNodeString = "NUMA node";
let content: JSX.Element | null;

// Confirm that the full machine details have been fetched. This also allows
// TypeScript know we're using the right union type (otherwise it will
Expand All @@ -25,35 +26,32 @@ const NumaCard = ({ id }: Props): JSX.Element => {
content = <Spinner />;
} else {
const numaNodes = machine.numa_nodes;
content = (
<>
<strong className="p-muted-heading u-sv1">
{pluralize("NUMA node", numaNodes.length, true)}
</strong>
<hr />
{numaNodes.length ? (
<List
className="u-no-margin--bottom"
items={numaNodes.map((numaNode, i) => ({
className: "numa-card",
content: (
<NumaCardDetails
isLast={i === numaNodes.length - 1}
machineId={id}
numaNode={numaNode}
showExpanded={numaNodes.length <= 2}
/>
),
}))}
/>
) : null}
</>
);
numaNodeString = pluralize("NUMA node", numaNodes.length, true);
content = numaNodes.length ? (
<List
className="u-no-margin--bottom"
items={numaNodes.map((numaNode, i) => ({
className: "numa-card",
content: (
<NumaCardDetails
isLast={i === numaNodes.length - 1}
machineId={id}
numaNode={numaNode}
showExpanded={numaNodes.length <= 2}
/>
),
}))}
/>
) : null;
}

return (
<div className="machine-summary__numa-card">
<Card>{content}</Card>
<Card>
<strong className="p-muted-heading u-sv1">{numaNodeString}</strong>
<hr />
{content}
</Card>
</div>
);
};
Expand Down
6 changes: 5 additions & 1 deletion ui/src/app/machines/views/MachineDetails/MachineSummary/OverviewCard/OverviewCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,11 @@ const OverviewCard = ({ id, setSelectedAction }: Props): JSX.Element => {
// TypeScript know we're using the right union type (otherwise it will
// complain that metadata doesn't exist on the base machine type).
if (!machine || !("metadata" in machine)) {
content = <Spinner />;
content = (
<div className="overview-card__placeholder">
<Spinner />
</div>
);
} else {
content = (
<div className="overview-card">
Expand Down
46 changes: 25 additions & 21 deletions ...c/app/machines/views/MachineDetails/MachineSummary/OverviewCard/StatusCard/StatusCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,36 +32,40 @@ const showFailedTestsWarning = (machine: MachineDetails) => {

const StatusCard = ({ machine }: Props): JSX.Element => {
return (
<div className="overview-card__status">
<strong className="p-muted-heading">
{isVM(machine) ? "Virtual Machine Status" : "Machine Status"}
</strong>
<>
<div className="overview-card__status">
<strong className="p-muted-heading">
{isVM(machine) ? "Virtual Machine Status" : "Machine Status"}
</strong>

<h4 className="u-no-margin--bottom" data-test="locked">
{machine.locked ? (
<i className="p-icon--locked" ng-if="node.locked">
Locked:{" "}
</i>
) : null}
{machine.status}
</h4>

{machine.show_os_info ? (
<p className="p-text--muted" data-test="os-info">
{`${machine.osystem}/${machine.distro_series}`}
</p>
) : null}
<h4 className="u-no-margin--bottom" data-test="locked">
{machine.locked ? (
<i className="p-icon--locked" ng-if="node.locked">
Locked:{" "}
</i>
) : null}
{machine.status}
</h4>

{machine.show_os_info ? (
<p className="p-text--muted" data-test="os-info">
{`${machine.osystem}/${machine.distro_series}`}
</p>
) : null}
</div>
{showFailedTestsWarning(machine) ? (
<div
className="overview-card__test-warning u-flex-bottom"
data-test="failed-test-warning"
>
<i className="p-icon--warning">Warning:</i> Some tests failed, use
with caution.
<i className="p-icon--warning">Warning:</i>
<span className="u-nudge-right--x-small">
{" "}
Some tests failed, use with caution.
</span>
</div>
) : null}
</div>
</>
);
};

Expand Down
6 changes: 3 additions & 3 deletions ...app/machines/views/MachineDetails/MachineSummary/OverviewCard/StorageCard/StorageCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ const StorageCard = ({ machine, setSelectedAction }: Props): JSX.Element => (
<div className="overview-card__storage">
<strong className="p-muted-heading">Storage</strong>
<h4>
<span>{machine.storage ? `${machine.storage}GB` : "Unknown"}</span>
<span>{machine.storage ? `${machine.storage} GB` : "Unknown"}</span>
{machine.storage && machine.physical_disk_count ? (
<span className="p-muted-text">
<small className="u-text--muted">
&nbsp;over {pluralize("disk", machine.physical_disk_count, true)}
</span>
</small>
) : null}
</h4>
</div>
Expand Down
40 changes: 7 additions & 33 deletions ui/src/app/machines/views/MachineDetails/MachineSummary/OverviewCard/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,39 +114,6 @@
}
}

@media only screen and (max-width: $breakpoint-x-large) {
grid:
[row1-start] "cpu cpu cpu memory memory memory storage storage storage" min-content [row1-end]
[row2-start] "cpu-tests cpu-tests cpu-tests memory-tests memory-tests memory-tests storage-tests storage-tests storage-tests" min-content [row2-end]
[row3-start] "status status details details details details details details details" min-content [row3-end]
[row4-start] "status test-warning test-warning test-warning test-warning test-warning test-warning test-warning" min-content [row4-end]
/ 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

.overview-card__cpu {
padding: $spv-inner--large 0 $spv-inner--large $sph-inner;
}

.overview-card__cpu-tests {
padding: $spv-inner--large 0 $spv-inner--large $sph-inner;
&::after {
content: none;
}
}

.overview-card__overview {
@include pseudo-border(top);
padding: $spv-inner--large 0 $spv-inner--large $sph-inner;
&::before {
right: -#{map-get($grid-gutter-widths, large)};
}
}

.overview-card__test-warning {
@include pseudo-border(top);
padding: $spv-inner--large $sph-inner $spv-inner--large 0;
}
}

@media only screen and (max-width: $breakpoint-large) {
grid:
[row1-start] "status cpu" min-content [row1-end]
Expand Down Expand Up @@ -253,4 +220,11 @@
}
}
}

.overview-card__placeholder {
align-items: center;
display: flex;
height: 10rem;
justify-content: center;
}
}
2 changes: 2 additions & 0 deletions ...es/views/MachineDetails/MachineSummary/SummaryNotifications/SummaryNotifications.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ describe("SummaryNotifications", () => {
general: generalStateFactory({
architectures: architecturesStateFactory({
data: ["amd64"],
loaded: true,
}),
powerTypes: powerTypesStateFactory({
data: [powerTypeFactory()],
Expand Down Expand Up @@ -142,6 +143,7 @@ describe("SummaryNotifications", () => {
it("can display a boot images error", () => {
state.general.architectures = architecturesStateFactory({
data: [],
loaded: true,
});
const store = mockStore(state);
const wrapper = mount(
Expand Down
Loading

0 comments on commit ea96999

Please sign in to comment.