feat: rename Device and Instance parent route names to kebab-case

frontend/src/components/audit-log/AuditEntry.vue

@@ -15,10 +15,10 @@
             </div>
             <div v-if="!disableAssociations" class="lg:w-36">
                 <template v-if="association && entry.scope.type === 'device'">
-                    <router-link class="flex content-center" :to="{ name: 'Device', params: { id: entry.scope.id } }"><CpuChipIcon class="ff-icon relative invisible lg:visible " /> <span class="truncate ml-2 leading-normal!">{{ association.name }}</span></router-link>
+                    <router-link class="flex content-center" :to="{ name: 'device', params: { id: entry.scope.id } }"><CpuChipIcon class="ff-icon relative invisible lg:visible " /> <span class="truncate ml-2 leading-normal!">{{ association.name }}</span></router-link>
                 </template>
                 <template v-else-if="association && entry.scope.type === 'project'">
-                    <router-link class="flex content-center" :to="{ name: 'Instance', params: { id: entry.scope.id } }"><ProjectsIcon class="ff-icon relative invisible lg:visible" /> <span class="truncate ml-2 leading-normal!">{{ association.name }}</span></router-link>
+                    <router-link class="flex content-center" :to="{ name: 'instance', params: { id: entry.scope.id } }"><ProjectsIcon class="ff-icon relative invisible lg:visible" /> <span class="truncate ml-2 leading-normal!">{{ association.name }}</span></router-link>
                 </template>
                 <template v-else-if="association && entry.scope.type === 'application'">
                     <router-link class="flex content-center" :to="{ name: 'application', params: { id: entry.scope.id }}"><RectangleGroupIcon class="ff-icon relative invisible lg:visible" /> <span class="truncate ml-2 leading-normal!">{{ association.name }}</span></router-link>

frontend/src/components/pipelines/Stage.vue

@@ -53,7 +53,7 @@
         <div v-if="stage.instance || stage.device || stage.deviceGroup || stage.gitRepo" class="py-3">
             <div>
                 <div v-if="stage.stageType == StageType.INSTANCE" class="ff-pipeline-stage-type">
-                    <router-link class="flex gap-2 items-center" :to="{name: 'Instance', params: { id: stage.instance.id }}">
+                    <router-link class="flex gap-2 items-center" :to="{name: 'instance', params: { id: stage.instance.id }}">
                         <IconNodeRedSolid class="ff-icon ff-icon-lg text-red-800" />
                         <div>
                             <label class="flex items-center gap-2">Instance:</label>
@@ -64,7 +64,7 @@
                     </router-link>
                 </div>
                 <div v-if="stage.stageType == StageType.DEVICE" class="ff-pipeline-stage-type">
-                    <router-link class="flex gap-2 items-center" :to="{name: 'Device', params: { id: stage.device.id }}">
+                    <router-link class="flex gap-2 items-center" :to="{name: 'device', params: { id: stage.device.id }}">
                         <span v-if="inDeveloperMode" v-ff-tooltip="'Cannot push to a Device in Developer Mode'">
                             <IconDeviceSolid class="ff-icon ff-icon-lg text-teal-700" />
                             <i class="bg-red-600 w-3 h-3 rounded-full absolute block -top-1 -right-1 border-2 border-gray-50" />

frontend/src/pages/application/Logs.vue

@@ -15,7 +15,7 @@
                     value-key="id"
                     class="w-full"
                 />
-                <router-link v-if="instance?.meta" :to="{ name: 'Instance', params: { id: instance.id }}">
+                <router-link v-if="instance?.meta" :to="{ name: 'instance', params: { id: instance.id }}">
                     <InstanceStatusBadge :status="instance.meta?.state" :pendingStateChange="instance?.pendingStateChange" :optimisticStateChange="instance.optimisticStateChange" class="ml-2" />
                 </router-link>
             </div>

frontend/src/pages/application/Overview.vue

@@ -282,7 +282,7 @@ export default {
         },
         selectedCloudRow (cloudInstance, event) {
             this.navigateTo({
-                name: 'Instance',
+                name: 'instance',
                 params: {
                     id: cloudInstance.id
                 }

frontend/src/pages/application/Snapshots/components/cells/SnapshotSource.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <template v-if="ownerType==='instance'">
-            <router-link class="flex items-center" :to="{ name: 'Instance', params: { id: project.id }}">
+            <router-link class="flex items-center" :to="{ name: 'instance', params: { id: project.id }}">
                 <IconNodeRedSolid class="ff-icon ff-icon-lg text-red-800 relative" />
                 <div class="flex flex-col ml-2">
                     <div class="text-xs text-gray-400">instance</div>
@@ -10,7 +10,7 @@
             </router-link>
         </template>
         <template v-else-if="ownerType==='device'">
-            <router-link class="flex items-center" :to="{ name: 'Device', params: { id: device.id }}">
+            <router-link class="flex items-center" :to="{ name: 'device', params: { id: device.id }}">
                 <IconDeviceSolid class="ff-icon ff-icon-lg text-teal-700 relative" />
                 <div class="flex flex-col ml-2">
                     <div class="text-base">{{ device.name }}</div>

frontend/src/pages/application/components/cells/DeviceLink.vue

@@ -1,6 +1,6 @@
 <template>
     <router-link
-        :to="{ name: 'Device', params: { id: id } }"
+        :to="{ name: 'device', params: { id: id } }"
         class="flex"
     >
         <DeviceModeBadge :mode="mode" type="icon" class="flex flex-col justify-center mr-2" />

frontend/src/pages/device/DeveloperMode/index.vue

@@ -202,7 +202,7 @@ export default {
     },
     methods: {
         redirect () {
-            this.$router.push({ name: 'Device', params: { id: this.device.id } })
+            this.$router.push({ name: 'device', params: { id: this.device.id } })
         },
         async openTunnel () {
             if (this.device.status === 'running') {

frontend/src/pages/device/Overview.vue

@@ -99,7 +99,7 @@
                     </InfoCardRow>
                     <InfoCardRow v-if="device.ownerType!=='application'" property="Instance:">
                         <template #value>
-                            <router-link v-if="device?.instance" :to="{name: 'Instance', params: { id: device.instance.id }}">
+                            <router-link v-if="device?.instance" :to="{name: 'instance', params: { id: device.instance.id }}">
                                 {{ device.instance?.name }}
                             </router-link>
                             <span v-else>None</span>

frontend/src/pages/device/Settings/General.vue

@@ -135,7 +135,7 @@
         <template v-else-if="hasInstance">
             <div>
                 <label class="font-medium mr-2">Instance:</label>
-                <router-link :to="{name: 'Instance', params: {id: device.instance.id}}" class="ff-link">{{ device.instance.name }}</router-link>
+                <router-link :to="{name: 'instance', params: {id: device.instance.id}}" class="ff-link">{{ device.instance.name }}</router-link>
             </div>
             <h3>Features:</h3>
             <ul class="list-disc ml-6 space-y-2 max-w-xl">

frontend/src/pages/device/components/DeviceLastSeenCell.vue

@@ -60,7 +60,7 @@ export default {
             // ideally, we'd show the credentials dialog here, but we don't have access to this.devices
             // so for now, let's just redirect to the device page and we'll fix this better later
             this.$router.push({
-                name: 'Device',
+                name: 'device',
                 params: { id: this.id }
             })
             // eventually we can do deviceAction('updateCredentials', id, devices)

frontend/src/pages/device/index.vue

@@ -26,7 +26,7 @@
                 </div>
                 <div v-else-if="device?.ownerType === 'instance' && device.instance" data-el="device-assigned-instance">
                     Instance:
-                    <ff-team-link :to="{name: 'Instance', params: {id: device.instance.id}}" class="text-blue-600 cursor-pointer hover:text-blue-700 hover:underline">{{ device.instance.name }}</ff-team-link>
+                    <ff-team-link :to="{name: 'instance', params: {id: device.instance.id}}" class="text-blue-600 cursor-pointer hover:text-blue-700 hover:underline">{{ device.instance.name }}</ff-team-link>
                 </div>
                 <div v-else data-el="device-assigned-none">
                     <span class="italic">No Application or Instance Assigned</span> - <a class="ff-link" data-action="assign-device" @click="openAssignmentDialog">Assign</a>

frontend/src/pages/device/routes.js

@@ -133,7 +133,7 @@ export default [
                 params: to.params
             }
         },
-        name: 'Device',
+        name: 'device',
         component: Device,
         meta: {
             title: 'Device - Overview'

frontend/src/pages/instance/Settings/ChangeInstanceType.vue

@@ -71,7 +71,7 @@ export default {
                 this.$emit('instance-updated')
                 Alerts.emit('Instance successfully updated.', 'confirmation')
                 this.$router.push({
-                    name: this.isImmersiveEditor ? 'instance-editor-overview' : 'Instance',
+                    name: this.isImmersiveEditor ? 'instance-editor-overview' : 'instance',
                     params: { id: this.instance.id }
                 })
             }).catch(err => {

frontend/src/pages/instance/Settings/Danger.vue

@@ -215,7 +215,7 @@ export default {
         duplicateProject (parts) {
             this.loading.duplicating = true
             InstanceApi.create(parts).then(result => {
-                this.$router.push({ name: 'Instance', params: { id: result.id } })
+                this.$router.push({ name: 'instance', params: { id: result.id } })
                 alerts.emit('Instance successfully duplicated.', 'confirmation')
             }).catch(err => {
                 console.error(err)
@@ -227,7 +227,7 @@ export default {
         importInstance (parts) {
             this.loading.importing = true
             InstanceApi.importInstance(this.instance.id, parts).then(result => {
-                this.$router.push({ name: 'Instance', params: { id: this.instance.id } })
+                this.$router.push({ name: 'instance', params: { id: this.instance.id } })
                 alerts.emit('Instance flows imported.', 'confirmation')
             }).catch(err => {
                 console.error(err)
@@ -240,7 +240,7 @@ export default {
             if (this.instance.stack?.id !== selectedStack) {
                 this.loading.changingStack = true
                 InstanceApi.changeStack(this.instance.id, selectedStack).then(() => {
-                    this.$router.push({ name: 'Instance', params: { id: this.instance.id } })
+                    this.$router.push({ name: 'instance', params: { id: this.instance.id } })
                     this.$emit('instance-updated')
                     alerts.emit('Instance Node-RED Version successfully updated.', 'confirmation')
                 }).catch(err => {

frontend/src/pages/instance/routes.js

@@ -103,7 +103,7 @@ export default [
     {
         path: '/project/:id/:remaining*',
         redirect: to => {
-            return { name: 'Instance', params: to.params }
+            return { name: 'instance', params: to.params }
         }
     },
     {
@@ -114,7 +114,7 @@ export default [
                 redirect: to => {
                     return { name: 'instance-overview', params: { id: to.params.id } }
                 },
-                name: 'Instance',
+                name: 'instance',
                 component: Instance,
                 meta: {
                     title: 'Instance - Overview'

frontend/src/pages/team/Applications/components/compact/DeviceTile.vue

@@ -6,7 +6,7 @@
         </div>
         <div class="details">
             <div class="detail-wrapper">
-                <router-link :to="{ name: 'Device', params: { id: device.id } }" class="name" :title="device.name">
+                <router-link :to="{ name: 'device', params: { id: device.id } }" class="name" :title="device.name">
                     {{ device.name }}
                 </router-link>
             </div>

frontend/src/pages/team/Applications/components/compact/InstanceTile.vue

@@ -180,7 +180,7 @@ export default {
             this.localInstance = applyLiveState(this.localInstance, meta.status, { versions: meta.versions, clearFlags: true })
         },
         navigateToInstance () {
-            this.$router.push({ name: 'Instance', params: { id: this.localInstance.id } })
+            this.$router.push({ name: 'instance', params: { id: this.localInstance.id } })
         },
         openInstance () {
             if (!this.localInstance.url) return

frontend/src/pages/team/Brokers/Clients/components/BrokerClient.vue

@@ -25,14 +25,14 @@
                     v-if="client.owner?.instanceType === 'device'"
                     v-ff-tooltip:left="`Client is linked to Device '${client.owner.name || client.owner.id}'`"
                     class="ff-icon-sm"
-                    @click.prevent.stop="$router.push({ name: 'Device', params: { id: client.owner.id } })"
+                    @click.prevent.stop="$router.push({ name: 'device', params: { id: client.owner.id } })"
                 />
 
                 <ProjectsIcon
                     v-else-if="client.owner?.instanceType === 'instance'"
                     v-ff-tooltip:left="`Client is linked to Instance '${client.owner.name || client.owner.id}'`"
                     class="ml-0! ff-icon-sm"
-                    @click.prevent.stop="$router.push({ name: 'Instance', params: { id:client.owner.id } })"
+                    @click.prevent.stop="$router.push({ name: 'instance', params: { id:client.owner.id } })"
                 />
             </span>
             <span

frontend/src/pages/team/Instances.vue

@@ -429,7 +429,7 @@ export default {
         },
         openInstance (instance, event) {
             this.navigateTo({
-                name: 'Instance',
+                name: 'instance',
                 params: {
                     id: instance.id
                 }

frontend/src/pages/team/Performance/index.vue

@@ -179,7 +179,7 @@ export default {
         },
         openInstance (instance) {
             this.$router.push({
-                name: 'Instance',
+                name: 'instance',
                 params: {
                     id: instance.instanceId
                 }

frontend/src/pages/team/Pipelines/components/TeamPipelineStage.vue

@@ -95,9 +95,9 @@ export default {
         targetLink () {
             switch (true) {
             case this.isInstanceStage:
-                return { name: 'Instance', params: { id: this.targetId } }
+                return { name: 'instance', params: { id: this.targetId } }
             case this.isDeviceStage:
-                return { name: 'Device', params: { id: this.targetId } }
+                return { name: 'device', params: { id: this.targetId } }
             case this.isDeviceGroupsStage:
                 return { name: 'application-device-group', params: { deviceGroupId: this.targetId, applicationId: this.application.id } }
             default:

frontend/src/pages/team/Settings/Devices.vue

@@ -83,7 +83,7 @@ const AutoAssignToFieldFormatter = {
             <router-link class="flex content-center" :to="{ name: 'application', params: { id: application }}"><RectangleGroupIcon class="ff-icon relative invisible lg:visible" /> <span class="truncate ml-2 leading-normal!">{{ applicationName }}</span></router-link>
         </template>
         <template v-else-if="instance">
-            <router-link class="flex content-center" :to="{ name: 'Instance', params: { id: instance } }"><ProjectsIcon class="ff-icon relative invisible lg:visible" /> <span class="truncate ml-2 leading-normal!">{{ instanceName }}</span></router-link>
+            <router-link class="flex content-center" :to="{ name: 'instance', params: { id: instance } }"><ProjectsIcon class="ff-icon relative invisible lg:visible" /> <span class="truncate ml-2 leading-normal!">{{ instanceName }}</span></router-link>
         </template>
         <template v-else><span class="italic text-gray-500">Don't assign</span></template>`,
     props: ['instance', 'instanceName', 'application', 'applicationName'],