UI improv (#463)

* minor ui changes * primary medina color * add filter for resource id
clouditor · Aug 1, 2023 · a5b03fc · a5b03fc
1 parent d778330
commit a5b03fc
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 12 deletions.
diff --git a/src/app.scss b/src/app.scss
@@ -6,4 +6,9 @@ $min-contrast-ratio: 4;
 
 html {
     font-size: 0.9rem;
+}
+
+.btn-primary {
+    color: white;
+    background-color: #0099a0;
 }
diff --git a/src/lib/CertificateCard.svelte b/src/lib/CertificateCard.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { Card, CardBody, CardHeader, CardText, ListGroup, ListGroupItem, Table, Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'sveltestrap';
+import { Card, CardBody, CardHeader, CardText, Table, Button, Modal, ModalBody, ModalHeader } from 'sveltestrap';
 import type { Certificate } from '$lib/orchestrator';
 
 export let certificate: Certificate;

diff --git a/src/lib/EmptyCloudService.svelte b/src/lib/EmptyCloudService.svelte
@@ -32,8 +32,7 @@ function discard() {
 			<CardText>
 				<div class="sign">
 					<Button on:click={() => editing.set(true)} class="mt-2" color="primary">
-						<div>Add service</div></Button
-					>
+						<div>Add service</div></Button>
 				</div>
 			</CardText>
 		</CardBody>

diff --git a/src/lib/Navigation.svelte b/src/lib/Navigation.svelte
@@ -93,15 +93,6 @@ let loggedIn = localStorage.token ? true : false;
 					<Fa icon={faQuestion} /> Help
 				</NavLink>
 			</NavItem>
-			<!-- removed for medina: <Dropdown nav inNavbar>
-				<DropdownToggle nav caret>Account</DropdownToggle>
-				<DropdownMenu end>
-					<DropdownItem>Option 1</DropdownItem>
-					<DropdownItem>Option 2</DropdownItem>
-					<DropdownItem divider />
-					<DropdownItem>Reset</DropdownItem>
-				</DropdownMenu>
-			</Dropdown> -->
 		</Nav>
 	</Collapse>
 </Navbar>

diff --git a/src/routes/assessment/+page.svelte b/src/routes/assessment/+page.svelte
@@ -24,6 +24,7 @@ let filterCompliant;
 let filterMetricCategory;
 let filterMetric;
 let filterResourceType;
+let filterResourceID;
 
 $: filteredResults = results.filter((r) => {
 	return (
@@ -36,6 +37,9 @@ $: filteredResults = results.filter((r) => {
 			: true) &&
 		(filterMetric != ''
 			? $metrics.get(r.metricId)?.name?.toLowerCase()?.includes(filterMetric?.toLowerCase())
+			: true) &&
+		(filterResourceID != ''
+			? r.resourceId.toLocaleLowerCase().includes(filterResourceID?.toLocaleLowerCase())
 			: true)
 	);
 });
@@ -88,6 +92,12 @@ The following list contains all assessment results, sorted by timestamp.
 							<Input type="text" name="resourceType" id="resourceType" bind:value={filterResourceType} />
 						</FormGroup>
 					</Col>
+					<Col>
+						<FormGroup>
+							<Label for="resourceType">Resource ID</Label>
+							<Input type="text" name="resourceID" id="resourceID" bind:value={filterResourceID} />
+						</FormGroup>
+					</Col>
 					<Col />
 				</Row>
 			</Container>

diff --git a/src/routes/cloud/[...id]/assessment/+page.svelte b/src/routes/cloud/[...id]/assessment/+page.svelte
@@ -28,6 +28,8 @@ let filterStartTimestamp: string | number | Date;
 // let dateFilterStartTimestamp = new Date(filterStartTimestamp);
 let filterEndTimestamp: string | number | Date;
 // let dateFilterEndTimestamp = new Date(filterEndTimestamp);
+let filterResourceID: string;
+
 
 $: filteredResults = results.filter((r) => {
 	let dateFilterStartTimestamp = new Date(filterStartTimestamp);
@@ -52,6 +54,9 @@ $: filteredResults = results.filter((r) => {
 			: true) &&
 		(filterEndTimestamp != ''
 		 	? new Date(r.timestamp) < dateFilterEndTimestamp
+			: true) &&
+		(filterResourceID != ''
+			? r.resourceId.toLocaleLowerCase().includes(filterResourceID?.toLocaleLowerCase())
 			: true)
 	);
 });
@@ -170,6 +175,12 @@ const resourceList = getListOfResources()
 							<Input type="text" name="endTimestamp" id="endTimestamp" placeholder="2024-02-01T10:01" bind:value={filterEndTimestamp} />
 						</FormGroup>
 					</Col>
+					<Col>
+						<FormGroup>
+							<Label for="resourceType">Resource ID</Label>
+							<Input type="text" name="resourceID" id="resourceID" bind:value={filterResourceID} />
+						</FormGroup>
+					</Col>
 					<Col />
 				</Row>
 			</Container>