### Setup and Docker Compose Commands

Source: https://github.com/johnsusek/praeco/wiki/docker-compose-sample(telegram)

Prepare the environment by setting execute permissions on directories and then start the Docker Compose services. Ensure all necessary directories have the correct permissions before running Docker Compose.

```shell
cd /home/user/dkwork2/es
chmod 777 es/data
chmod 777 mariadb/data
chmod 777 mariadb/log
chmod -R 777 praeco/rules praeco/rule_templates
docker-compose up -d
```

--------------------------------

### Configure and Run ElastAlert API Server

Source: https://github.com/johnsusek/praeco/blob/master/README.md

Configure the API server's JSON settings and install its Node.js dependencies. Then, start the server.

```sh
cd ~/elastalert-server
vi config/config.json
nvm use "$(cat .nvmrc)"
npm install
npm run start
```

--------------------------------

### Install pinia-plugin-persistedstate

Source: https://github.com/johnsusek/praeco/blob/master/PINIA_MIGRATION.md

Install the official Pinia persistence plugin using npm. This is a prerequisite for using the plugin.

```bash
npm install pinia-plugin-persistedstate
```

--------------------------------

### Configure and Install ElastAlert 2

Source: https://github.com/johnsusek/praeco/blob/master/README.md

Set up the ElastAlert 2 configuration file, create necessary directories, and install it using pip.

```sh
cd ~/elastalert2
mkdir -p rules rule_templates
chmod -R 777 rules rule_templates
echo "slack_webhook_url: ''"  | sudo tee -a rules/BaseRule.config >/dev/null
pip install "setuptools>=11.3"
python setup.py install
cp ./examples/config.yaml.example ./config.yaml
vi config.yaml
```

--------------------------------

### Install Pinia for Vue 2.7

Source: https://github.com/johnsusek/praeco/blob/master/PINIA_MIGRATION.md

Use this command to install Pinia when using Vue 2.7.

```bash
npm install pinia
```

--------------------------------

### Install Node Version Manager (NVM)

Source: https://github.com/johnsusek/praeco/blob/master/README.md

Install NVM to manage Node.js versions. This is a prerequisite for setting up the API server and Praeco.

```sh
# nvm install
# https://github.com/nvm-sh/nvm#install--update-script
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
$ vi ~/.bash_profile

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

source ~/.bash_profile

# npm & node install
npm install -g npm
nvm install "$(cat .nvmrc)"
```

--------------------------------

### AWS Credentials Example

Source: https://github.com/johnsusek/praeco/blob/master/UPGRADING.md

Example configuration for AWS credentials, including access key ID and secret access key.

```ini
[default]
aws_access_key_id = xxxxxxxxxxxxxxxxx
aws_secret_access_key = xxxxxxxxxxxxxxxxxxxxxxxxx
```

--------------------------------

### Composition API Simple Component with <script setup>

Source: https://github.com/johnsusek/praeco/blob/master/VUE_COMPOSITION_API_MIGRATION.md

The Composition API equivalent of the simple component, utilizing `<script setup>` for concise syntax.

```vue
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const count = ref(0);
const message = ref('Hello World');

const title = computed(() => `Count is ${count.value}`);

function increment() {
  count.value++;
}
</script>
```

--------------------------------

### AWS Credentials Example

Source: https://github.com/johnsusek/praeco/blob/master/UPGRADING.md

Example AWS credentials configuration. Replace placeholders with your actual access key ID and secret access key.

```ini
[default]
aws_access_key_id = xxxxxxxxxxxxxxxxxx
aws_secret_access_key = xxxxxxxxxxxxxxxxxxxxxxxxx
```

--------------------------------

### Install ESLint TypeScript Support

Source: https://github.com/johnsusek/praeco/blob/master/TYPESCRIPT_MIGRATION.md

Installs the necessary ESLint plugins and parsers for enabling TypeScript linting.

```bash
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin
```

--------------------------------

### Install Type Definitions for Core Dependencies

Source: https://github.com/johnsusek/praeco/blob/master/TYPESCRIPT_MIGRATION.md

Install type definitions for common JavaScript libraries used in the project.

```bash
# Core dependencies
npm install --save-dev @types/lodash.clonedeep
npm install --save-dev @types/lodash.get
npm install --save-dev @types/lodash.throttle
npm install --save-dev @types/js-yaml
npm install --save-dev @types/semver
npm install --save-dev @types/validator

# Note: Some packages like axios, dayjs, and vue-router already include types
```

--------------------------------

### Vite Development Commands

Source: https://github.com/johnsusek/praeco/blob/master/VITE_MIGRATION.md

Commands to start the development server and build for production.

```bash
npm run dev      # Start development server
npm run serve    # Alias for dev
```

```bash
npm run build    # Build for production
npm run preview  # Preview production build locally
```

```bash
npm run lint     # ESLint
npm run test:*   # Tests (still use Vue CLI for now)
```

--------------------------------

### AWS Configuration Example

Source: https://github.com/johnsusek/praeco/blob/master/UPGRADING.md

Example AWS configuration for specifying the region. This is typically placed in a config file.

```ini
[default]
region = ap-northeast-1
```

--------------------------------

### Start AWS Workspaces with Docker Compose

Source: https://github.com/johnsusek/praeco/wiki/docker-compose-sample(snmp-trap)

Initiates services defined in a docker-compose file, typically for an AWS Workspaces environment. It includes an example of accessing a MySQL container.

```shell
docker-compose up -d
```

```shell
docker exec -it mariadb bash
root@b078796c824f:/# mysql -u root -px
ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)
root@b078796c824f:/# mysql -u root -px
ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)
root@b078796c824f:/# exit
```

--------------------------------

### Component Test: Pinia Store Integration

Source: https://github.com/johnsusek/praeco/blob/master/PINIA_MIGRATION.md

Example of a Vue component test integrating a Pinia store after migration. Uses `global.plugins` for Pinia setup.

```javascript
import { mount } from '@vue/test-utils';
import { createPinia, setActivePinia } from 'pinia';
import App from '@/App.vue';
import { useUiStore } from '@/stores/ui';

describe('App.vue', () => {
  let pinia;

  beforeEach(() => {
    pinia = createPinia();
    setActivePinia(pinia);
  });

  it('renders with store', () => {
    const wrapper = mount(App, {
      global: {
        plugins: [pinia]
      }
    });
    
    const uiStore = useUiStore();
    expect(uiStore.sidebarWidth).toEqual([20, 80]);
  });
});
```

--------------------------------

### Pinia Store Definition Example

Source: https://github.com/johnsusek/praeco/blob/master/PINIA_MIGRATION.md

An example of a Pinia store definition using `defineStore`, showcasing state, getters, and actions. Note the absence of mutations and the direct modification of state within actions.

```javascript
import { defineStore } from 'pinia';

export const useUiStore = defineStore('ui', {
  state: () => ({
    sidebarWidth: [20, 80]
  }),
  
  getters: {
    isExpanded: (state) => state.sidebarWidth[0] > 30
  },
  
  actions: {
    updateSidebarWidth(payload) {
      this.sidebarWidth = payload;
    },
    
    async fetchData() {
      const data = await api.get();
      this.data = data;
    }
  }
});
```

--------------------------------

### Vue Router Configuration: JavaScript (Before)

Source: https://github.com/johnsusek/praeco/blob/master/TYPESCRIPT_MIGRATION.md

Example of a Vue Router configuration using JavaScript.

```javascript
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: { requiresAuth: true }
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('./views/Login.vue')
    }
  ]
});
```

--------------------------------

### Vuex Store Definition Example

Source: https://github.com/johnsusek/praeco/blob/master/PINIA_MIGRATION.md

An example of a traditional Vuex store definition, including namespacing, state, mutations, actions, and getters.

```javascript
export default {
  namespaced: true,
  state: {
    sidebarWidth: [20, 80]
  },
  mutations: {
    UPDATE_SIDEBAR_WIDTH(state, payload) {
      state.sidebarWidth = payload;
    }
  },
  actions: {
    async fetchData({ commit }) {
      const data = await api.get();
      commit('SET_DATA', data);
    }
  },
  getters: {
    isExpanded: (state) => state.sidebarWidth[0] > 30
  }
};
```

--------------------------------

### Install Node.js Dependencies

Source: https://github.com/johnsusek/praeco/blob/master/MAINTENANCE.md

Installs Node.js dependencies using npm. Use `--legacy-peer-deps` if encountering peer dependency issues.

```bash
nvm use "$(cat .nvmrc)"
npm install
```

```bash
nvm use "$(cat .nvmrc)"
npm install --legacy-peer-deps
```

--------------------------------

### TypeScript Pinia Store Example

Source: https://github.com/johnsusek/praeco/blob/master/PINIA_MIGRATION.md

An example of a Pinia store using TypeScript, demonstrating type definitions for state, getters, and actions for improved developer experience and type safety.

```typescript
import { defineStore } from 'pinia';

interface User {
  id: number;
  name: string;
  email: string;
}

export const useUserStore = defineStore('user', {
  state: () => ({
    users: [] as User[],
    loading: false,
    error: null as string | null
  }),
  
  getters: {
    userCount: (state): number => state.users.length
  },
  
  actions: {
    async fetchUsers(): Promise<void> {
      this.loading = true;
      try {
        const res = await api.get<User[]>('/users');
        this.users = res.data;
      } catch (error) {
        this.error = error instanceof Error ? error.message : String(error);
      } finally {
        this.loading = false;
      }
    }
  }
});
```

--------------------------------

### Install Element Plus Icons

Source: https://github.com/johnsusek/praeco/wiki/vue2-→-vue3

Installs the @element-plus/icons-vue package for using Element Plus icons and unplugin-icons for icon management.

```sh
npm install @element-plus/icons-vue
npm i -D unplugin-icons
```

--------------------------------

### Unit Test: Pinia Store

Source: https://github.com/johnsusek/praeco/blob/master/PINIA_MIGRATION.md

Example of a unit test for a Pinia store after migration. Requires `setActivePinia` and `createPinia`.

```javascript
import { setActivePinia, createPinia } from 'pinia';
import { useUiStore } from '@/stores/ui';

describe('ui store', () => {
  beforeEach(() => {
    setActivePinia(createPinia());
  });

  it('updates sidebar width', () => {
    const store = useUiStore();
    store.updateSidebarWidth([30, 70]);
    expect(store.sidebarWidth).toEqual([30, 70]);
  });
});
```

--------------------------------

### Configure and Run Praeco

Source: https://github.com/johnsusek/praeco/blob/master/README.md

Configure Praeco by modifying specific file paths and environment variables. Then, install dependencies and run the development server.

```sh
cd ~/praeco
nvm use "$(cat .nvmrc)"
npm install
export PRAECO_ELASTICSEARCH=<your elasticsearch ip>

# edit src/main.js
/api-ws/test to /ws/test

# edit vue.config.js
/api-ws/test to /ws/test

# run
npm run serve
```

--------------------------------

### Command: Restart a Service

Source: https://github.com/johnsusek/praeco/blob/master/ALERTS_IMPLEMENTATION_GUIDE.md

Example of executing a shell command to restart a service.

```bash
# Restart a service
/usr/local/bin/restart-service.sh
```

--------------------------------

### Command: Log to File

Source: https://github.com/johnsusek/praeco/blob/master/ALERTS_IMPLEMENTATION_GUIDE.md

Example of executing a shell command to log alert information to a file.

```bash
# Log to file
echo "Alert: $(date)" >> /var/log/praeco-alerts.log
```

--------------------------------

### Unit Test: Vuex Store

Source: https://github.com/johnsusek/praeco/blob/master/PINIA_MIGRATION.md

Example of a unit test for a Vuex store before migration.

```javascript
import Vuex from 'vuex';
import { createLocalVue } from '@vue/test-utils';
import ui from '@/store/ui';

const localVue = createLocalVue();
localVue.use(Vuex);

describe('ui store', () => {
  let store;

  beforeEach(() => {
    store = new Vuex.Store({
      modules: {
        ui
      }
    });
  });

  it('updates sidebar width', () => {
    store.commit('ui/UPDATE_SIDEBAR_WIDTH', [30, 70]);
    expect(store.state.ui.sidebarWidth).toEqual([30, 70]);
  });
});
```

--------------------------------

### Praeco Configuration Options

Source: https://github.com/johnsusek/praeco/blob/master/README.md

Example configuration settings for Praeco, including application URL, error logger, and fields to hide.

```json
// Link back to your Praeco instance, used in Slack alerts
"appUrl": "http://praeco-app-url:8080",

// A recordatus (https://github.com/johnsusek/recordatus) instance for javascript error reporting
"errorLoggerUrl": "",

// Hide these fields when editing rules, if they are already filled in template
"hidePreconfiguredFields": []
```

--------------------------------

### Vuex Module with Actions

Source: https://github.com/johnsusek/praeco/blob/master/PINIA_MIGRATION.md

Example of a Vuex module with namespaced state, mutations, and actions, including actions that call other actions.

```javascript
export default {
  namespaced: true,

  state: {
    path: '',
    type: '',
    valid: true
  },

  mutations: {
    UPDATE_PATH(state, path) {
      state.path = path;
    },
    
    UPDATE_TYPE(state, type) {
      state.type = type;
    },
    
    UPDATE_VALID(state, valid) {
      state.valid = valid;
    }
  },

  actions: {
    reset({ commit }) {
      commit('UPDATE_PATH', '');
      commit('UPDATE_TYPE', '');
      commit('UPDATE_VALID', true);
    },
    
    async load({ dispatch, commit }, { type, path }) {
      commit('UPDATE_PATH', path);
      commit('UPDATE_TYPE', type);
      await dispatch('fetchData');
    },
    
    async fetchData({ commit }) {
      // fetch logic
    }
  }
};
```

--------------------------------

### Install Build Tool Plugins for Element Plus

Source: https://github.com/johnsusek/praeco/wiki/vue2-→-vue3

Installs unplugin-vue-components and unplugin-auto-import, essential for integrating Element Plus with auto-importing components and resolvers.

```sh
npm install -D unplugin-vue-components unplugin-auto-import
```

--------------------------------

### Install TypeScript and Vue Runtime DOM Types

Source: https://github.com/johnsusek/praeco/blob/master/TYPESCRIPT_MIGRATION.md

Install TypeScript and Node.js type definitions, along with specific types for Vue 2.7 support.

```bash
npm install --save-dev typescript @types/node
npm install --save-dev @vue/runtime-dom  # For Vue 2.7 type support
```

--------------------------------

### Install Pinia with Compatibility Layer for Vue 2.6 and below

Source: https://github.com/johnsusek/praeco/blob/master/PINIA_MIGRATION.md

Use this command to install Pinia with the compatibility layer for Vue versions 2.6 and below. Note that Praeco uses Vue 2.7, making this less relevant.

```bash
npm install pinia @pinia/compat
```

--------------------------------

### ElastAlert Startup Script

Source: https://github.com/johnsusek/praeco/wiki/docker-compose-sample(telegram)

This shell script starts ElastAlert after ensuring Elasticsearch is available. It uses a helper script to check Elasticsearch health and then executes the npm start command.

```shell
#!/bin/bash

set -e

echo "Giving Elasticsearch at $ELASTICSEARCH_URL time to start..."

elastic_search_status.sh

echo "Starting ElastAlert!"
npm start

```

--------------------------------

### Command: Send Notification via Custom Script

Source: https://github.com/johnsusek/praeco/blob/master/ALERTS_IMPLEMENTATION_GUIDE.md

Example of executing a custom Python script to send a notification.

```bash
# Send notification via custom script
/opt/scripts/notify.py --severity high --message "Alert fired"
```

--------------------------------

### Configure Pinia with pinia-plugin-persistedstate

Source: https://github.com/johnsusek/praeco/blob/master/PINIA_MIGRATION.md

Integrate the pinia-plugin-persistedstate into your Pinia setup. This enables persistence for all stores by default.

```javascript
// src/store/pinia.js
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

export default pinia;
```

--------------------------------

### Fluentd Dockerfile with Plugins

Source: https://github.com/johnsusek/praeco/wiki/docker-compose-sample(snmp-trap)

Dockerfile for Fluentd, installing necessary plugins for log processing, including Elasticsearch and MySQL slow query logging.

```shell
FROM fluent/fluentd:v1.14.6-debian-1.0

# Use root account to use apt
USER root

# below RUN includes plugin as examples elasticsearch is not required
# you may customize including plugins as you wish
RUN buildDeps="sudo make gcc g++ libc-dev" \
 && apt-get update \
 && apt-get install -y --no-install-recommends $buildDeps \
 && sudo gem install fluent-plugin-mysqlslowquery -v 0.0.9 \
&& sudo gem install 'elasticsearch:7.17.0' \
                     'elasticsearch-api:7.17.0' \
                     'elasticsearch-xpack:7.17.0' \
                     fluent-plugin-elasticsearch \
                     oj \
                     fluent-plugin-rewrite-tag-filter \
 && sudo gem sources --clear-all \
 && SUDO_FORCE_REMOVE=yes \
    apt-get purge -y --auto-remove \
                  -o APT::AutoRemove::RecommendsImportant=false \
                  $buildDeps \
 && rm -rf /var/lib/apt/lists/* \
 && rm -rf /tmp/* /var/tmp/* /usr/lib/ruby/gems/*/cache/*.gem

USER fluent
```

--------------------------------

### Run Praeco on Windows

Source: https://github.com/johnsusek/praeco/blob/master/README.md

Deploy Praeco on Windows by installing Docker and Docker Compose, then setting the PRAECO_ELASTICSEARCH environment variable and running docker-compose.exe up.

```powershell
$Env:PRAECO_ELASTICSEARCH="1.2.3.4"
docker-compose.exe up
```

--------------------------------

### Vite Environment Variables Configuration

Source: https://github.com/johnsusek/praeco/blob/master/VITE_MIGRATION.md

Example of how to define Vite environment variables in a .env file. Variables must be prefixed with VITE_ to be exposed to the client.

```bash
# .env file
VITE_BASE_URL=/
VITE_API_URL=http://localhost:3030
```

--------------------------------

### getCurrentInstance Timing

Source: https://github.com/johnsusek/praeco/blob/master/VUE_COMPOSITION_API_MIGRATION.md

Call `getCurrentInstance()` at the top level of the `setup` function. It returns `null` when called in asynchronous callbacks.

```javascript
// ✅ Call at setup top level
const instance = getCurrentInstance();

// ❌ Don't call in async callbacks
setTimeout(() => {
  const instance = getCurrentInstance(); // null!
}, 100);
```

--------------------------------

### Docker Compose for Elastalert

Source: https://github.com/johnsusek/praeco/blob/master/UPGRADING.md

Example configuration for running Elastalert as a Docker container. This includes volume mappings for configuration and rules.

```yaml
  elastalert:
    container_name: elastalert
    image: praecoapp/elastalert-server:latest
    ports:
      - 3030:3030
      - 3333:3333
    restart: always
    volumes:
      - ./elastalert/config/elastalert.yaml:/opt/elastalert/config.yaml
      - ./elastalert/config/api.config.json:/opt/elastalert-server/config/config.json
      - ./elastalert/rules:/opt/elastalert/rules
      - ./elastalert/rule_templates:/opt/elastalert/rule_templates
      - ./elastalert/aws/config:/home/node/.aws/config
      - ./elastalert/aws/credentials:/home/node/.aws/credentials
```

--------------------------------

### BaseRule.config Setup for Jira Integration

Source: https://github.com/johnsusek/praeco/blob/master/ALERTS_IMPLEMENTATION_GUIDE.md

Configure the Jira server URL and the path to the authentication file in your BaseRule.config. This allows Praeco to communicate with your Jira instance.

```yaml
jira_server: 'https://your-domain.atlassian.net'
jira_account_file: '/opt/elastalert/jira/jira_auth.yaml'
```

--------------------------------

### Initial tsconfig.json for Migration

Source: https://github.com/johnsusek/praeco/blob/master/TYPESCRIPT_MIGRATION.md

Start with relaxed TypeScript compiler options to ease the migration process. Gradually enable stricter checks as the codebase becomes more type-safe.

```json
{
  "compilerOptions": {
    "strict": false,
    "noImplicitAny": false,
    "allowJs": true,
    "checkJs": false
  }
}
```

```json
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}
```

--------------------------------

### Running Unit Tests

Source: https://github.com/johnsusek/praeco/blob/master/TYPESCRIPT_MIGRATION.md

Execute the unit tests for your project using this command. It's crucial to run tests after migration steps to ensure that functionality remains unchanged.

```bash
npm run test:unit
```

--------------------------------

### Build and Push Praeco Docker Image

Source: https://github.com/johnsusek/praeco/blob/master/MAINTENANCE.md

Builds the Praeco Docker image, tags it with a version and 'latest', then pushes both to Docker Hub.

```bash
docker build . -t praecoapp/praeco
docker tag <image> praecoapp/praeco:<version>
docker push praecoapp/praeco:latest
docker push praecoapp/praeco:<version>
```

--------------------------------

### Create Pinia Instance

Source: https://github.com/johnsusek/praeco/blob/master/PINIA_MIGRATION.md

Create a Pinia instance in a dedicated file. This instance will be used to manage your stores.

```javascript
import { createPinia } from 'pinia';

const pinia = createPinia();

export default pinia;
```

--------------------------------

### SNMP Trap Message Example

Source: https://github.com/johnsusek/praeco/wiki/docker-compose-sample(snmp-trap)

An example of an SNMP trap message received by the server, showing system uptime and a custom trap OID with a string value. This illustrates the format of incoming trap data.

```shell
# The IP address part is processed with "xx"
2020-09-16 15:39:57 ec2-xx-xx-xx-xx.ap-northeast-1.compute.amazonaws.com [UDP: [xx.xx.xx.xx]:56622->[172.17.0.2]:162]:
DISMAN-EVENT-MIB::sysUpTimeInstance = Timeticks: (51438887) 5 days, 22:53:08.87	SNMPv2-MIB::snmpTrapOID.0 = OID: NET-SNMP-MIB::netSnmp.99999	NET-SNMP-MIB::netSnmp.99999.1 = STRING: "Hello, World"
```

--------------------------------

### Pinia Store with Actions

Source: https://github.com/johnsusek/praeco/blob/master/PINIA_MIGRATION.md

Equivalent Pinia store demonstrating state, and actions. Actions in Pinia directly access state and call other actions using `this`.

```javascript
import { defineStore } from 'pinia';

export const useConfigStore = defineStore('config', {
  state: () => ({
    path: '',
    type: '',
    valid: true
  }),
  
  actions: {
    reset() {
      this.path = '';
      this.type = '';
      this.valid = true;
    },
    
    async load(type, path) {
      this.path = path;
      this.type = type;
      await this.fetchData();
    },
    
    async fetchData() {
      // fetch logic
    }
  }
});
```

--------------------------------

### Using VueUse Composables

Source: https://github.com/johnsusek/praeco/blob/master/VUE_COMPOSITION_API_MIGRATION.md

Demonstrates the integration of common VueUse composables like useLocalStorage, useDebounceFn, and useEventListener for managing state, debouncing functions, and handling events with automatic cleanup.

```vue
<script setup>
import { useLocalStorage, useDebounceFn, useEventListener } from '@vueuse/core';

// Persist state to localStorage
const count = useLocalStorage('my-count', 0);

// Debounced function
const debouncedSearch = useDebounceFn((query) => {
  console.log('Searching for:', query);
}, 500);

// Event listener with auto cleanup
useEventListener(window, 'resize', () => {
  console.log('Window resized');
});
</script>
```

--------------------------------

### Fluentd Dockerfile

Source: https://github.com/johnsusek/praeco/wiki/docker-compose-sample(telegram)

This Dockerfile sets up a Fluentd environment, installing necessary build dependencies and Ruby gems for plugins like fluent-plugin-mysqlslowquery and fluent-plugin-elasticsearch. It cleans up build artifacts to reduce image size.

```dockerfile
FROM fluent/fluentd:v1.14.6-debian-1.0

# Use root account to use apt
USER root

# below RUN includes plugin as examples elasticsearch is not required
# you may customize including plugins as you wish
RUN buildDeps="sudo make gcc g++ libc-dev" \
 && apt-get update \
 && apt-get install -y --no-install-recommends $buildDeps \
 && sudo gem install fluent-plugin-mysqlslowquery -v 0.0.9 \
&& sudo gem install 'elasticsearch:7.17.0' \
                     'elasticsearch-api:7.17.0' \
                     'elasticsearch-xpack:7.17.0' \
                     fluent-plugin-elasticsearch \
                     oj \
                     fluent-plugin-rewrite-tag-filter \
 && sudo gem sources --clear-all \
 && SUDO_FORCE_REMOVE=yes \
    apt-get purge -y --auto-remove \
                  -o APT::AutoRemove::RecommendsImportant=false \
                  $buildDeps \
 && rm -rf /var/lib/apt/lists/* \
 && rm -rf /tmp/* /var/tmp/* /usr/lib/ruby/gems/*/cache/*.gem

USER fluent

```

--------------------------------

### Component Test: Vuex Store Integration

Source: https://github.com/johnsusek/praeco/blob/master/PINIA_MIGRATION.md

Example of a Vue component test integrating a Vuex store before migration.

```javascript
import { mount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import App from '@/App.vue';

const localVue = createLocalVue();
localVue.use(Vuex);

describe('App.vue', () => {
  let store;

  beforeEach(() => {
    store = new Vuex.Store({
      modules: {
        ui: {
          namespaced: true,
          state: { sidebarWidth: [20, 80] },
          mutations: {
            UPDATE_SIDEBAR_WIDTH(state, payload) {
              state.sidebarWidth = payload;
            }
          }
        }
      }
    });
  });

  it('renders with store', () => {
    const wrapper = mount(App, { store, localVue });
    expect(wrapper.vm.$store.state.ui.sidebarWidth).toEqual([20, 80]);
  });
});
```

--------------------------------

### Build ElastAlert Server

Source: https://github.com/johnsusek/praeco/blob/master/MAINTENANCE.md

Builds the ElastAlert server Docker image with a specified version.

```bash
make build v=<elastalert2 version>
```

--------------------------------

### GoogleChat Notification Options

Source: https://github.com/johnsusek/praeco/blob/master/UPGRADING.md

New configuration options for GoogleChat notifications. Refer to ElastAlert2 documentation for detailed setup.

```yaml
googlechat_header_subtitle:
googlechat_header_image:
googlechat_footer_kibanalink:
```

--------------------------------

### Vuex Store Tests in TypeScript

Source: https://github.com/johnsusek/praeco/blob/master/TYPESCRIPT_MIGRATION.md

Example of Vuex store unit tests written in TypeScript, demonstrating mutations and getters.

```typescript
// tests/unit/store/ui.spec.ts
import { createStore, Store } from 'vuex';
import uiModule from '@/store/ui';
import { UiState } from '@/store/types';

describe('ui store', () => {
  let store: Store<{ ui: UiState }>;
  
  beforeEach(() => {
    store = createStore({
      modules: {
        ui: uiModule
      }
    });
  });
  
  it('updates sidebar width', () => {
    const newWidth: [number, number] = [30, 70];
    store.commit('ui/UPDATE_SIDEBAR_WIDTH', newWidth);
    expect(store.state.ui.sidebarWidth).to.deep.equal(newWidth);
  });
  
  it('calculates isExpanded getter', () => {
    store.commit('ui/UPDATE_SIDEBAR_WIDTH', [40, 60]);
    expect(store.getters['ui/isExpanded']).to.be.true;
    
    store.commit('ui/UPDATE_SIDEBAR_WIDTH', [20, 80]);
    expect(store.getters['ui/isExpanded']).to.be.false;
  });
});
```

--------------------------------

### Configuring Pinia Persistence Plugin

Source: https://github.com/johnsusek/praeco/blob/master/PINIA_MIGRATION.md

For Pinia's persistence to work, the `pinia-plugin-persistedstate` plugin must be installed and used with the Pinia instance. Ensure the plugin is imported and added via `pinia.use()` before defining stores that use `persist: true`.

```javascript
// ❌ Wrong - persistence plugin not installed
const pinia = createPinia();
// Missing: pinia.use(piniaPluginPersistedstate);

export const useStore = defineStore('main', {
  state: () => ({ data: [] }),
  persist: true  // Won't work without plugin
});

// ✅ Correct - install plugin first
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
```

--------------------------------

### Vuex Composition API Component

Source: https://github.com/johnsusek/praeco/blob/master/PINIA_MIGRATION.md

Example of Vuex store integration within a Vue Composition API component before migration.

```vue
<script setup>
import { computed, onMounted, getCurrentInstance } from 'vue';

const instance = getCurrentInstance();
const store = instance.proxy.$store;

const sidebarWidth = computed({
  get() {
    return store.state.ui.sidebarWidth;
  },
  set(value) {
    store.commit('ui/UPDATE_SIDEBAR_WIDTH', value);
  }
});

onMounted(() => {
  store.dispatch('server/fetchVersion');
  store.dispatch('server/fetchStatus');
});
</script>
```

--------------------------------

### Clone Necessary Repositories

Source: https://github.com/johnsusek/praeco/blob/master/README.md

Clone the elastalert2, elastalert-server, and praeco repositories to your local machine.

```sh
cd
git clone https://github.com/jertel/elastalert2.git
git clone https://github.com/johnsusek/elastalert-server.git
git clone https://github.com/johnsusek/praeco.git
```

--------------------------------

### Vuex Options API Component

Source: https://github.com/johnsusek/praeco/blob/master/PINIA_MIGRATION.md

Example of a Vuex store integration within a Vue Options API component before migration.

```vue
<script>
export default {
  computed: {
    sidebarWidth: {
      get() {
        return this.$store.state.ui.sidebarWidth;
      },
      set(value) {
        this.$store.commit('ui/UPDATE_SIDEBAR_WIDTH', value);
      }
    }
  },

  mounted() {
    this.$store.dispatch('server/fetchVersion');
    this.$store.dispatch('server/fetchStatus');
  }
};
</script>
```

--------------------------------

### Vue 2 Options API Watchers

Source: https://github.com/johnsusek/praeco/blob/master/VUE_COMPOSITION_API_MIGRATION.md

Example of defining watchers for props and data in Vue 2 Options API.

```vue
<script>
export default {
  props: ['userId'],
  
  data() {
    return {
      user: null,
      searchQuery: ''
    };
  },
  
  watch: {
    userId: {
      immediate: true,
      handler(newId) {
        this.fetchUser(newId);
      }
    },
    
    searchQuery(newQuery, oldQuery) {
      console.log(`Search changed from "${oldQuery}" to "${newQuery}"`);
      this.search(newQuery);
    }
  },
  
  methods: {
    async fetchUser(id) {
      this.user = await fetch(`/api/users/${id}`).then(r => r.json());
    },
    
    search(query) {
      // Perform search
    }
  }
};
</script>
```

--------------------------------

### TheHive Connection Configuration

Source: https://github.com/johnsusek/praeco/blob/master/ALERTS_IMPLEMENTATION_GUIDE.md

Configure connection details for TheHive instance in BaseRule.config.

```yaml
hive_connection:
  hive_host: http://localhost
  hive_port: 9000
  hive_apikey: YOUR_API_KEY
  hive_proxies:
    http: ''
    https: ''
```

--------------------------------

### Basic Vue Component Setup with Composition API and TypeScript

Source: https://github.com/johnsusek/praeco/blob/master/TYPESCRIPT_MIGRATION.md

Illustrates a simple Vue component using the Composition API with TypeScript. It utilizes `ref` for reactive state and `computed` for derived state, with type annotations.

```vue
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const count = ref<number>(0);

const title = computed<string>(() => `Counter: ${count.value}`);

function increment(): void {
  count.value++;
}
</script>
```

--------------------------------

### Upgrade Praeco using Docker

Source: https://github.com/johnsusek/praeco/blob/master/UPGRADING.md

Run these commands to pull the latest Praeco images and restart the services.

```bash
docker pull praecoapp/praeco && docker pull praecoapp/elastalert-server
```

```bash
docker-compose up --force-recreate --build
```

--------------------------------

### BaseRule.config - Slack Webhook URL Setup

Source: https://github.com/johnsusek/praeco/blob/master/ALERTS_IMPLEMENTATION_GUIDE.md

Configures the Slack webhook URL in BaseRule.config for sending notifications to Slack channels.

```yaml
slack_webhook_url: 'https://hooks.slack.com/services/YOUR/WEBHOOK/URL'
```

--------------------------------

### Using Pinia Stores in Vue Router Guards

Source: https://github.com/johnsusek/praeco/blob/master/PINIA_MIGRATION.md

Instantiating a Pinia store at the top level of a router configuration file can lead to issues as Pinia might not be installed yet. Call `useStore` inside the guard to ensure it's available.

```javascript
// router.js
import Vue from 'vue';
import Router from 'vue-router';
import { useAuthStore } from '@/stores/auth';

Vue.use(Router);

const router = new Router({ /* ... */ });
// ❌ Wrong - Pinia not yet installed when file loads
// const authStore = useAuthStore();
// router.beforeEach((to, from, next) => {
//   if (authStore.isAuthenticated) {
//     next();
//   }
// });

// ✅ Correct - call useStore inside the guard
router.beforeEach((to, from, next) => {
  const authStore = useAuthStore();
  if (authStore.isAuthenticated) {
    next();
  } else {
    next('/login');
  }
});
```

--------------------------------

### Vue Unit Test Before TypeScript Migration

Source: https://github.com/johnsusek/praeco/blob/master/TYPESCRIPT_MIGRATION.md

Example of a Vue unit test written in JavaScript using Vue Test Utils.

```javascript
// tests/unit/components/Counter.spec.js
import { mount } from '@vue/test-utils';
import Counter from '@/components/Counter.vue';

describe('Counter.vue', () => {
  it('increments count when button is clicked', () => {
    const wrapper = mount(Counter, {
      propsData: {
        initialCount: 5
      }
    });
    
    wrapper.find('button').trigger('click');
    expect(wrapper.vm.count).to.equal(6);
  });
});
```

--------------------------------

### Options API Vuex Store Integration

Source: https://github.com/johnsusek/praeco/blob/master/VUE_COMPOSITION_API_MIGRATION.md

Example of integrating Vuex using `mapState`, `mapGetters`, `mapActions`, and `mapMutations` in Options API.

```vue
<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['user', 'settings']),
    ...mapGetters(['isLoggedIn', 'userFullName']),
    
    localComputed() {
      return this.user.name.toUpperCase();
    }
  },
  
  methods: {
    ...mapActions(['login', 'logout']),
    ...mapMutations(['SET_USER']),
    
    async handleLogin() {
      await this.login({ username: 'test', password: 'test' });
    }
  },
  
  mounted() {
    if (!this.isLoggedIn) {
      this.$router.push('/login');
    }
  }
};
</script>
```