web/satellite: add search and sorting to Applications page

Added the same search/sort component from Object browser card view. Implemented search and sort functionality on Apps page. Issue: #6808 Change-Id: If422ce16978e97af0fd53ae489c415939b1f5d4c
storj · Mar 13, 2024 · ce6ddad · ce6ddad
1 parent 9a87a1c
commit ce6ddad
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 49 deletions.
diff --git a/web/satellite/src/components/ApplicationItem.vue b/web/satellite/src/components/ApplicationItem.vue
@@ -5,15 +5,15 @@
     <v-col cols="12" md="6" lg="6" xl="3">
         <v-card class="px-2 py-4 h-100 align-content-space-between">
             <v-card-item class="pb-0">
-                <img :src="app.src" :alt="app.title" width="42" class="rounded">
+                <img :src="app.src" :alt="app.name" width="42" class="rounded">
             </v-card-item>
 
             <v-card-item>
                 <v-chip size="small" variant="tonal" color="default" class="mb-2" rounded>
                     {{ app.category }}
                 </v-chip>
                 <h3 class="mb-1">
-                    {{ app.title }}
+                    {{ app.name }}
                 </h3>
                 <p class="mt-1 text-high-emphasis">
                     {{ app.description }}
@@ -36,7 +36,7 @@
             </v-card-item>
         </v-card>
     </v-col>
-    <CreateAccessDialog ref="accessDialog" v-model="dialog" :default-name="app.title" />
+    <CreateAccessDialog ref="accessDialog" v-model="dialog" :default-name="app.name" />
 </template>
 
 <script setup lang="ts">
@@ -50,7 +50,7 @@ import { useTrialCheck } from '@/composables/useTrialCheck';
 
 import CreateAccessDialog from '@/components/dialogs/CreateAccessDialog.vue';
 
-const props = defineProps<{
+defineProps<{
     app: Application
 }>();
 

diff --git a/web/satellite/src/types/applications.ts b/web/satellite/src/types/applications.ts
@@ -48,7 +48,7 @@ export enum AppCategory {
 }
 
 export type Application = {
-    title: string
+    name: string
     description: string
     category: AppCategory
     src: string
@@ -57,252 +57,252 @@ export type Application = {
 
 export const applications: Application[] = [
     {
-        title: 'TrueNAS - iX Systems',
+        name: 'TrueNAS - iX Systems',
         description: 'TrueNAS is a network attached storage (NAS) solution that allows for an off-site backup to your Storj account.',
         category: AppCategory.BackupRecovery,
         src: TrueNASIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/ix-systems-truenas',
     },
     {
-        title: 'Hammerspace',
+        name: 'Hammerspace',
         description: 'Create a global data environment between Storj and all connected data as a single, easily accessible dataset.',
         category: AppCategory.FileManagement,
         src: HammerspaceIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/hammerspace',
     },
     {
-        title: 'OwnCloud',
+        name: 'OwnCloud',
         description: 'ownCloud Infinite Scale is a real-time content collaboration allowing you to use Storj as the primary storage location.',
         category: AppCategory.FileManagement,
         src: OwnCloudIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/ocis',
     },
     {
-        title: 'Livepeer',
+        name: 'Livepeer',
         description: 'Add live and on-demand video experiences by transcoding videos with Livepeer, and storing your media with Storj.',
         category: AppCategory.ContentDelivery,
         src: LivepeerIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/livepeer',
     },
     {
-        title: 'Acronis',
+        name: 'Acronis',
         description: 'Reliable backup and disaster recovery solutions for data archiving and organization, seamlessly integrating with Storj.',
         category: AppCategory.BackupRecovery,
         src: AcronisIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/acronis',
     },
     {
-        title: 'Iconik',
+        name: 'Iconik',
         description: 'A cloud-native solution for media collaboration that integrates with Storj, to allow secure storage of your media assets.',
         category: AppCategory.FileManagement,
         src: IconikIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/iconik',
     },
     {
-        title: 'Photos+',
+        name: 'Photos+',
         description: 'A beautfully designed app for iOS, Android, and Mac to store and manage your photos and videos in your Storj account.',
         category: AppCategory.FileManagement,
         src: PhotosPlusIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/photos-plus',
     },
     {
-        title: 'Veeam',
+        name: 'Veeam',
         description: 'All-in-one backup, recovery, and data security solution integrating Storj for secure, scalable backup and archiving.',
         category: AppCategory.BackupRecovery,
         src: VeeamIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/veeam',
     },
     {
-        title: 'Splunk',
+        name: 'Splunk',
         description: 'Collect, index, and search all types of data generated by your business, and archive it to Storj.',
         category: AppCategory.BackupRecovery,
         src: SplunkIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/splunk',
     },
     {
-        title: 'Arq Backup',
+        name: 'Arq Backup',
         description: 'Arq backs up your filesystem with perfect, point-in-time back ups of your files to Storj.',
         category: AppCategory.BackupRecovery,
         src: ArqIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/arq',
     },
     {
-        title: 'Rclone',
+        name: 'Rclone',
         description: 'Open source command-line interface for sync, backup, restore, mirror, mount, and analyzing your Storj cloud storage.',
         category: AppCategory.BackupRecovery,
         src: RcloneIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/rclone',
     },
     {
-        title: 'Zerto',
+        name: 'Zerto',
         description: 'Simple, scalable disaster recovery and data protection, integrating with Storj for cloud data management.',
         category: AppCategory.BackupRecovery,
         src: ZertoIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/zerto',
     },
     {
-        title: 'Unitrends',
+        name: 'Unitrends',
         description: 'Backup and recovery platform allowing you to easily manage backups between Storj, SaaS, data centers and endpoints.',
         category: AppCategory.BackupRecovery,
         src: UnitrendsIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/unitrends',
     },
     {
-        title: 'S3FS',
+        name: 'S3FS',
         description: 's3fs allows Linux, macOS, and FreeBSD to mount your Storj buckets and work like on a local file system.',
         category: AppCategory.FileManagement,
         src: S3FSIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/s3fs',
     },
     {
-        title: 'Rucio',
+        name: 'Rucio',
         description: 'Organize, manage, and access your Storj data at scale with Rucio, an open-source framework for scientific collaboration.',
         category: AppCategory.Scientific,
         src: RucioIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/rucio',
     },
     {
-        title: 'MSP360',
+        name: 'MSP360',
         description: 'Cross-platform storage, backup, and disaster recovery solution integrating Storj cloud storage for managed service providers.',
         category: AppCategory.BackupRecovery,
         src: MSP360Icon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/msp360',
     },
     {
-        title: 'LucidLink',
+        name: 'LucidLink',
         description: 'LucidLink integrates with Storj for fast and secure file-streaming, enabling real-time collaboration on creative projects.',
         category: AppCategory.FileManagement,
         src: LucidLinkIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/lucidlink',
     },
     {
-        title: 'Elements',
+        name: 'Elements',
         description: 'Store, manage and collaborate on your Storj media content using a secure and scalable asset management platform.',
         category: AppCategory.FileManagement,
         src: ElementsIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/elements',
     },
     {
-        title: 'Docker',
+        name: 'Docker',
         description: 'Storj supports custom Content-Type for any key, so it can be used as a container registry to distribute container images.',
         category: AppCategory.ContentDelivery,
         src: DockerIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/docker',
     },
     {
-        title: 'Pixelfed',
+        name: 'Pixelfed',
         description: 'Learn how to set up Pixelfed decentralized social media platform to Storj.',
         category: AppCategory.ContentDelivery,
         src: PixelfedIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/pixelfed',
     },
     {
-        title: 'Mastodon',
+        name: 'Mastodon',
         description: 'Learn how to set up Mastodon decentralized social media platform to Storj.',
         category: AppCategory.ContentDelivery,
         src: MastodonIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/mastodon',
     },
     {
-        title: 'Dataverse',
+        name: 'Dataverse',
         description: 'Dataverse integrates with Storj to provide researchers secure archiving, controlling, and sharing large research data sets.',
         category: AppCategory.Scientific,
         src: DataverseIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/dataverse',
     },
     {
-        title: 'CyberDuck',
+        name: 'CyberDuck',
         description: 'Open-source cloud storage browser app for macOS, Windows, and Linux, that supports Storj.',
         category: AppCategory.FileManagement,
         src: CyberDuckIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/cyberduck',
     },
     {
-        title: 'Atempo (Miria)',
+        name: 'Atempo (Miria)',
         description: 'Atempo provides high-performance backup, replication, synchronization, and archiving of large data sets to Storj.',
         category: AppCategory.BackupRecovery,
         src: AtempoIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/atempo-miria',
     },
     {
-        title: 'Mountain Duck',
+        name: 'Mountain Duck',
         description: 'Mount Storj as a virtual drive on your computer. Open your Storj files with any application, and work like on a local disk.',
         category: AppCategory.FileManagement,
         src: MountainDuckIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/mountainduck',
     },
     {
-        title: 'Bunny CDN',
+        name: 'Bunny CDN',
         description: 'Set up a static website hosting with Storj, using Bunny CDN as a content delivery network providing a caching layer.',
         category: AppCategory.ContentDelivery,
         src: BunnyCDNIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/bunny',
     },
     {
-        title: 'Fastly',
+        name: 'Fastly',
         description: 'Distribute your content among the Fastly edge cloud service, using your Storj buckets as a source of content.',
         category: AppCategory.ContentDelivery,
         src: FastlyIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/fastly',
     },
     {
-        title: 'Comet',
+        name: 'Comet',
         description: 'Flexible backup platform, integrating with Storj, as a backup and storage destination, to protect and restore data.',
         category: AppCategory.BackupRecovery,
         src: CometIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/comet-backup',
     },
     {
-        title: 'Globus',
+        name: 'Globus',
         description: 'Open-source platform for collaboration and management, for transferring, sharing, and discovering your data on Storj.',
         category: AppCategory.Scientific,
         src: GlobusIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/globus',
     },
     {
-        title: 'HuggingFace',
+        name: 'HuggingFace',
         description: 'Train and deploy open-source AI models, while saving and loading datasets to and from Storj.',
         category: AppCategory.AI,
         src: HuggingFaceIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/hugging-face',
     },
     {
-        title: 'FileZilla',
+        name: 'FileZilla',
         description: 'Learn how to set up FileZilla to transfer your files over Storj, or integrate with FileZilla Pro.',
         category: AppCategory.FileManagement,
         src: FileZillaIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/filezilla',
     },
     {
-        title: 'Kerberos.io',
+        name: 'Kerberos.io',
         description: 'Open-source platform for video analytics and management. Integrate with Storj to store your Kerberos Vault video files.',
         category: AppCategory.FileManagement,
         src: KerberosIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/kerberos-vault',
     },
     {
-        title: 'UpdraftPlus',
+        name: 'UpdraftPlus',
         description: 'Automatically backup your Wordpress site, and use Storj as a remote storage destination.',
         category: AppCategory.BackupRecovery,
         src: UpdraftPlusIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/wordpress-site-with-updraftplus',
     },
     {
-        title: 'Duplicati',
+        name: 'Duplicati',
         description: 'Free and open source backup client, to store encrypted, incremental, compressed backups to Storj.',
         category: AppCategory.BackupRecovery,
         src: DuplicatiIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/duplicati',
     },
     {
-        title: 'Restic',
+        name: 'Restic',
         description: 'Restic is an open source command-line backup tool, optimized for securely backing up data to Storj.',
         category: AppCategory.BackupRecovery,
         src: ResticIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/restic',
     },
     {
-        title: 'Starfish',
+        name: 'Starfish',
         description: 'Unstructured data management and metadata for files and objects. Integrate with Storj for large-scale file management.',
         category: AppCategory.FileManagement,
         src: StarfishIcon,