Skip to content

Commit

Permalink
Make the app UI more responsive (#1113)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ab-smith
ab-smith authored Dec 8, 2024
2 parents 56dc417 + 891b6cc commit 72a4f9b
Show file tree
Hide file tree
Showing 5 changed files with 59 additions and 29 deletions.
3 changes: 2 additions & 1 deletion frontend/src/lib/components/DataViz/Card.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,12 @@
if (emphasis) {
cEmphasis = 'border border-y-0 border-r-0 border-l-2 border-l-violet-600';
}
export let customClass: string = '';
</script>

<a
{href}
class="flex flex-col shadow-lg text-purple-800 p-2 h-28 bg-white hover:bg-violet-50 {cEmphasis}"
class="flex flex-col shadow-lg text-purple-800 p-2 h-28 bg-white hover:bg-violet-50 {cEmphasis} {customClass}"
>
<div class="text-xs">
<span><i class={icon}></i></span>
Expand Down
67 changes: 48 additions & 19 deletions frontend/src/routes/(app)/(internal)/analytics/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,29 +148,33 @@
icon="fa-solid fa-shield-halved"
section={m.sumpageSectionControls()}
emphasis={true}
customClass="col-span-3 lg:col-span-1"
/>
<Card
count={metrics.controls.active}
label={m.sumpageActive()}
href="/applied-controls/?status=active"
icon="fa-solid fa-shield-halved"
section={m.sumpageSectionControls()}
customClass="col-span-3 lg:col-span-1"
/>
<Card
count={metrics.controls.deprecated}
label={m.sumpageDeprecated()}
href="/applied-controls/?status=deprecated"
icon="fa-solid fa-shield-halved"
section={m.sumpageSectionControls()}
customClass="col-span-3 lg:col-span-1"
/>
<Card
count={metrics.controls.to_do}
label={m.sumpageToDo()}
href="/applied-controls/?status=to_do"
icon="fa-solid fa-shield-halved"
section={m.sumpageSectionControls()}
customClass="col-span-3 lg:col-span-1"
/>
<div class="h-80 col-span-2 row-span-2 bg-white">
<div class="h-80 col-span-6 lg:col-span-2 row-span-2 bg-white">
<NightingaleChart name="nightingale" values={metrics.csf_functions} />
</div>
<Card
Expand All @@ -179,13 +183,15 @@
href="/applied-controls/?status=in_progress"
icon="fa-solid fa-shield-halved"
section={m.sumpageSectionControls()}
customClass="col-span-3 lg:col-span-1"
/>
<Card
count={metrics.controls.on_hold}
label={m.sumpageOnHold()}
href="/applied-controls/?status=on_hold"
icon="fa-solid fa-shield-halved"
section={m.sumpageSectionControls()}
customClass="col-span-3 lg:col-span-1"
/>
<Card
count={metrics.controls.p1}
Expand All @@ -194,6 +200,7 @@
icon="fa-solid fa-shield-halved"
section={m.sumpageSectionControls()}
emphasis={true}
customClass="col-span-3 lg:col-span-1"
/>
<Card
count={metrics.controls.eta_missed}
Expand All @@ -202,8 +209,9 @@
icon="fa-solid fa-shield-halved"
section={m.sumpageSectionControls()}
emphasis={true}
customClass="col-span-3 lg:col-span-1"
/>
<div class="col-span-4 row-span-4 bg-white h-96">
<div class="col-span-6 lg:col-span-4 row-span-4 bg-white h-96">
<StackedBarsNormalized
names={metrics.audits_stats.names}
data={metrics.audits_stats.data}
Expand All @@ -218,6 +226,7 @@
icon="fa-solid fa-list-check"
section={m.sumpageSectionCompliance()}
emphasis={true}
customClass="col-span-3 lg:col-span-1"
/>
<div></div>
<Card
Expand All @@ -227,6 +236,7 @@
icon="fa-solid fa-list-check"
section={m.sumpageSectionCompliance()}
emphasis={true}
customClass="col-span-3 lg:col-span-1"
/>

<Card
Expand All @@ -235,25 +245,28 @@
href="/compliance-assessments/"
icon="fa-solid fa-list-check"
section={m.sumpageSectionCompliance()}
customClass="col-span-3 lg:col-span-1"
/>
<Card
count={metrics.compliance.non_compliant_items}
label={m.sumpageNonCompliantItems()}
href="#"
icon="fa-solid fa-list-check"
section={m.sumpageSectionCompliance()}
customClass="col-span-3 lg:col-span-1"
/>
<Card
count={metrics.compliance.evidences}
label={m.sumpageEvidences()}
href="/evidences/"
icon="fa-solid fa-list-check"
section={m.sumpageSectionCompliance()}
customClass="col-span-3 lg:col-span-1"
/>
<div class=""></div>
<div class=""></div>
<!---->
<div class=" col-span-2 row-span-2 h-80 bg-white">
<div class="col-span-6 lg:col-span-2 row-span-2 h-80 bg-white">
<HalfDonutChart
name="current_h"
title={m.sumpageTitleCurrentRisks()}
Expand All @@ -268,15 +281,17 @@
emphasis={true}
icon="fa-solid fa-biohazard"
section={m.sumpageSectionRisk()}
customClass="col-span-3 lg:col-span-1"
/>
<Card
count={metrics.risk.scenarios}
label={m.sumpageScenarios()}
href="/risk-scenarios/"
icon="fa-solid fa-biohazard"
section={m.sumpageSectionRisk()}
customClass="col-span-3 lg:col-span-1"
/>
<div class=" col-span-2 row-span-2 bg-white">
<div class="col-span-6 lg:col-span-2 row-span-2 h-80 bg-white">
<HalfDonutChart
name="residual_h"
title={m.sumpageTitleResidualRisks()}
Expand All @@ -290,6 +305,7 @@
href="/analytics?tab=2"
icon="fa-solid fa-biohazard"
section={m.sumpageSectionRisk()}
customClass="col-span-3 lg:col-span-1"
/>
<!---->
<Card
Expand All @@ -298,13 +314,16 @@
href="/risk-acceptances"
icon="fa-solid fa-biohazard"
section={m.sumpageSectionRisk()}
customClass="col-span-3 lg:col-span-1"
/>
<div class=""></div>
</section>
{:else if tabSet === 1}
<section id="stats">
<span class="text-xl font-extrabold">{m.statistics()}</span>
<div class="flex justify-between space-x-4">
<div
class="flex justify-between flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-4"
>
<CounterCard
count={counters.domains}
label={m.domains()}
Expand Down Expand Up @@ -344,7 +363,9 @@
</div>
</section>
<section class="space-y-4">
<div class="flex flex-row space-x-4 h-48 text-sm whitespace-nowrap">
<div
class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-4 h-96 lg:h-48 text-sm whitespace-nowrap"
>
<BarChart
classesContainer="flex-1 card p-4 bg-white"
name="complianceAssessmentsPerStatus"
Expand All @@ -367,7 +388,9 @@
)}
/>
</div>
<div class="flex flex-row space-x-4 h-48 text-sm whitespace-nowrap">
<div
class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-4 h-96 lg:h-48 text-sm whitespace-nowrap"
>
<BarChart
classesContainer="flex-1 card p-4 bg-white"
name="riskAssessmentsPerStatus"
Expand Down Expand Up @@ -452,8 +475,8 @@
<p class="">{m.noThreatsMapped()}</p>
</div>
{/if}
<div class="flex">
<div class="h-96 flex-1">
<div class="flex flex-wrap lg:flex-nowrap">
<div class="h-96 flex-col grow lg:flex-1">
<span class="text-sm font-semibold">{m.currentRiskLevelPerScenario()}</span>

<DonutChart
Expand All @@ -463,7 +486,7 @@
colors={data.risks_count_per_level.current.map((object) => object.color)}
/>
</div>
<div class="h-96 flex-1">
<div class="h-96 flex-col grow lg:flex-1">
<span class="text-sm font-semibold">{m.residualRiskLevelPerScenario()}</span>

<DonutChart
Expand All @@ -489,12 +512,16 @@
{#each data.projects as project}
<div class="flex flex-col items-center">
{#if project.compliance_assessments && project.compliance_assessments.length > 0}
<div class="flex flex-row space-x-2 w-1/2 justify-between items-center">
<div
class="flex flex-col lg:flex-row lg:space-x-2 w-full mb-2 lg:mb-0 lg:w-1/2 justify-between items-center"
>
<a
class="text-xl font-bold mb-1 hover:underline text-primary-600"
href="/projects/{project.id}">{project.folder.str}/{project.name}</a
>
<div class="flex flex-1 bg-gray-200 rounded-full overflow-hidden h-4 shrink">
<div
class="flex w-full flex-row lg:flex-1 bg-gray-200 rounded-full overflow-hidden h-4 grow lg:shrink"
>
{#each project.overallCompliance.values.sort((a, b) => REQUIREMENT_ASSESSMENT_STATUS.indexOf(a.name) - REQUIREMENT_ASSESSMENT_STATUS.indexOf(b.name)) as sp}
<div
class="flex flex-col justify-center overflow-hidden text-black text-xs text-center"
Expand All @@ -508,8 +535,10 @@
{/if}

{#each project.compliance_assessments as compliance_assessment}
<div class="card w-full bg-white flex flex-row mx-8 p-4 relative">
<div class="w-1/5 flex flex-col space-y-2">
<div
class="card w-full bg-white flex flex-row mx-8 p-4 relative flex-wrap lg:flex-nowrap"
>
<div class="w-full lg:w-1/5 flex flex-col space-y-2">
<div>
<p class="text-sm font-semibold">{m.name()}</p>
<a class="anchor" href="compliance-assessments/{compliance_assessment.id}"
Expand Down Expand Up @@ -538,23 +567,23 @@
>
</div>
{/if}
<div class="w-3/5 h-32">
<div class="w-full lg:w-3/5 h-40 lg:h-32">
<DonutChart
s_label={m.complianceAssessments()}
name={compliance_assessment.name + '_donut'}
values={compliance_assessment.donut.result.values}
/>
</div>
<div class="absolute top-2 right-4 mt-2 space-x-1">
<div class="flex flex-col space-y-1">
<div class="lg:absolute lg:top-2 lg:right-4 mt-2 space-x-1">
<div class="flex flex-row lg:flex-col space-x-1 lg:space-x-0 lg:space-y-1">
<a
href="/compliance-assessments/{compliance_assessment.id}/edit?next=/analytics?tab=3"
class="btn variant-filled-primary"
class="btn variant-filled-primary w-1/2 lg:w-full"
><i class="fa-solid fa-edit mr-2" /> {m.edit()}
</a>
<a
href="/compliance-assessments/{compliance_assessment.id}/export"
class="btn variant-filled-primary"
class="btn variant-filled-primary w-1/2 lg:w-full"
><i class="fa-solid fa-download mr-2" /> {m.exportButton()}
</a>
</div>
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/routes/(app)/(internal)/backup-restore/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@
</script>

{#if canBackup}
<div class="grid grid-cols-2 space-x-4">
<div class="card bg-white shadow py-4 px-6 space-y-2">
<div class="grid grid-cols-2 space-y-2 lg:space-y-0 lg:space-x-4">
<div class="card col-span-full lg:col-span-1 bg-white shadow py-4 px-6 space-y-2">
<h4 class="h4 font-semibold">{m.exportBackup()} <i class="fa-solid fa-download" /></h4>
<div class=" py-4">
{m.exportBackupDescription()}
Expand All @@ -39,7 +39,7 @@
</form>
</div>

<div class="card bg-white shadow py-4 px-6 space-y-2">
<div class="card col-span-full lg:col-span-1 bg-white shadow py-4 px-6 space-y-2">
<h4 class="h4 font-semibold">{m.importBackup()} <i class="fa-solid fa-upload" /></h4>
<div class=" py-4">
{m.importBackupDescription()}
Expand All @@ -54,7 +54,7 @@
bind:value={file}
/>
<button
class="btn variant-filled {uploadButtonStyles}"
class="btn variant-filled mt-2 lg:mt-0 {uploadButtonStyles}"
type="button"
on:click={modalConfirmUpload}>{m.upload()}</button
>
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/routes/(app)/(internal)/my-assignments/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
>
{m.controls()}
</div>
<div class="text-left col-span-8">
<div class="text-left col-span-full lg:col-span-8">
<div class="relative overflow-x-auto shadow-lg rounded-lg">
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead
Expand Down Expand Up @@ -61,7 +61,7 @@
</div>
</div>

<div class=" border-red-50 col-span-4 flex justify-center items-center">
<div class=" border-red-50 col-span-full lg:col-span-4 flex justify-center items-center">
<ActivityTracker metrics={data.data.metrics} />
</div>

Expand All @@ -77,7 +77,7 @@
{/each}
</div>

<div class="text-left col-span-6">
<div class="text-left col-span-full lg:col-span-6">
<div class="text-lg font-black underline underline-offset-4 decoration-4 decoration-orange-300">
{m.riskAssessments()}
</div>
Expand Down Expand Up @@ -112,7 +112,7 @@
</div>
</div>

<div class="text-left col-span-6">
<div class="text-left col-span-full lg:col-span-6">
<div class="text-lg font-black underline underline-offset-4 decoration-4 decoration-purple-300">
{m.assignedRisks()}
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/routes/(app)/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
let sidebarOpen = true;
$: classesSidebarOpen = (open: boolean) => (open ? 'ml-64' : 'ml-7');
$: classesSidebarOpen = (open: boolean) => (open ? 'ml-7 lg:ml-64' : 'ml-7');
$: if (browser) {
const fromLogin = getCookie('from_login');
Expand Down

0 comments on commit 72a4f9b

Please sign in to comment.